Page not found
The address may be outdated or misspelled. No private or duplicate route is exposed here.
The address may be outdated or misspelled. No private or duplicate route is exposed here.
WRNexusJS 0.3.4 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.
bunx @wrnexus/cli@0.3.4 create my-appAccess approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.
WRNexusJS 0.3.5 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.
bunx @wrnexus/cli@0.3.5 create my-appAccess approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.
WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns .wrn declarations into server render functions and small feature runtimes.
core owns contexts, middleware, sessions and rooms; router discovers routes; compiler parses .wrn; ssr renders documents; csr supplies browser runtimes; dev-server and cli orchestrate development and builds.
Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.
Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.
The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.
wrnexus build . produces dist/server.js and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.
Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.
app/routes.gen.ts, .wrnexus/, and dist/ are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.
WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns .wrn declarations into server render functions and small feature runtimes.
core owns contexts, middleware, sessions and rooms; router discovers routes; compiler parses .wrn; ssr renders documents; csr supplies browser runtimes; dev-server and cli orchestrate development and builds.
Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.
Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.
The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.
wrnexus build . produces dist/server.js and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.
Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.
app/routes.gen.ts, .wrnexus/, and dist/ are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.
No comparative speed claims are published. A valid baseline must record scripts, commit, Bun/framework versions, hardware, OS, warmup, samples, workload, raw results, median, percentiles, memory, HTML size, browser JavaScript size, and run date.
The roadmap starts with WRNexusJS-only measurements before any maintained equivalent-workload comparison.
Documentation is aligned to all 29 installed packages. This release adds @wrnexus/helpers, original-request URL helpers, safe login redirects, working wrnexus workspace add, and forward-auth redirect propagation.
Run wrnexus update --latest and keep every @wrnexus/* package on 0.3.4. Existing applications must explicitly add @wrnexus/helpers before importing it; newly scaffolded applications include it automatically.
The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.
Documentation is aligned to all 29 installed packages. This release adds @wrnexus/helpers, original-request URL helpers, safe login redirects, working wrnexus workspace add, and forward-auth redirect propagation.
Run wrnexus update --latest and keep every @wrnexus/* package on 0.3.5. Existing applications must explicitly add @wrnexus/helpers before importing it; newly scaffolded applications include it automatically.
The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.
Reusable accept all cookies button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AcceptAllCookiesButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="AcceptAllCookiesButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AcceptAllCookiesButton.wrn
component AcceptAllCookiesButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable accessible accordion component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleAccordion
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleAccordion".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleAccordion.wrn
component AccessibleAccordion {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable accessible carousel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleCarousel
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleCarousel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleCarousel.wrn
component AccessibleCarousel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable accessible chart summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleChartSummary
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleChartSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleChartSummary.wrn
component AccessibleChartSummary {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">
- <div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
- <div class="flex items-center gap-2 text-sm font-bold">
- <span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true">
- </span>Chart summary</div>
- <dl class="grid gap-3">
- <div class="flex items-center justify-between gap-4">
- <dt class="text-sm text-slate-500">Delivered</dt>
- <dd class="font-bold">96.8%</dd>
- </div>
- <div class="flex items-center justify-between gap-4">
- <dt class="text-sm text-slate-500">Engaged</dt>
- <dd class="font-bold">42.1%</dd>
- </div>
- <div class="flex items-center justify-between gap-4">
- <dt class="text-sm text-slate-500">Converted</dt>
- <dd class="font-bold">8.7%</dd>
- </div>
- </dl>
- </div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable accessible dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="AccessibleDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleDialog.wrn
component AccessibleDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable accessible error summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleErrorSummary
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleErrorSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleErrorSummary.wrn
component AccessibleErrorSummary {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable accessible icon component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleIcon
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleIcon".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleIcon.wrn
component AccessibleIcon {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable accessible menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="AccessibleMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleMenu.wrn
component AccessibleMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable accessible tabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleTabs
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleTabs.wrn
component AccessibleTabs {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable accessible tooltip component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccessibleTooltip
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AccessibleTooltip".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccessibleTooltip.wrn
component AccessibleTooltip {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable account menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccountMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="AccountMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccountMenu.wrn
component AccountMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable account status banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AccountStatusBanner
- label="AccountStatus"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="AccountStatusBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "AccountStatus" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AccountStatusBanner.wrn
component AccountStatusBanner {
- props {
- label = "AccountStatus"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable action menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ActionMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="ActionMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ActionMenu.wrn
component ActionMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable active filter list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ActiveFilterList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ActiveFilterList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ActiveFilterList.wrn
component ActiveFilterList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable activity list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ActivityList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ActivityList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ActivityList.wrn
component ActivityList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable add on card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AddOnCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AddOnCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AddOnCard.wrn
component AddOnCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable address input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AddressInput
- label="Address"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="AddressInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Address" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AddressInput.wrn
component AddressInput {
- props {
- label = "Address"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable address preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AddressPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AddressPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AddressPreview.wrn
component AddressPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable advanced filter builder component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AdvancedFilterBuilder
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AdvancedFilterBuilder".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AdvancedFilterBuilder.wrn
component AdvancedFilterBuilder {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable alert dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AlertDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="AlertDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AlertDialog.wrn
component AlertDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable amount input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AmountInput
- label="Amount"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="AmountInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Amount" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AmountInput.wrn
component AmountInput {
- props {
- label = "Amount"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable analytics dashboard preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AnalyticsDashboardPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AnalyticsDashboardPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AnalyticsDashboardPreview.wrn
component AnalyticsDashboardPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
-
- view {
- <section class="wire-analytics-preview {class}">
- <div class="wire-analytics-preview__surface">
- <div class="wire-analytics-preview__visual">
- {#if image}
- <img
- src="{image}"
- alt="{alt}"
- class="wire-analytics-preview__image"
- />
- {:else}
- <div
- class="wire-analytics-preview__chart"
- role="img"
- aria-label="Delivery trend rising over seven days"
- >
- <div class="wire-analytics-preview__chart-header">
- <strong>Delivery trend</strong>
- <span>↗ 18.4%</span>
- </div>
- <svg
- class="wire-analytics-preview__chart-svg"
- viewBox="0 0 700 250"
- aria-hidden="true"
- >
- <defs>
- <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
- <stop offset="0%" stop-color="currentColor" stop-opacity=".3">
- </stop>
- <stop offset="100%" stop-color="currentColor" stop-opacity="0">
- </stop>
- </linearGradient>
- </defs>
- <g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
- <path d="M20 50H680M20 115H680M20 180H680M20 230H680">
- </path>
- </g>
- <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z">
- </path>
- <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32">
- </path>
- </svg>
- <div class="wire-analytics-preview__days">
- <span>Mon</span>
- <span>Tue</span>
- <span>Wed</span>
- <span>Thu</span>
- <span>Fri</span>
- <span>Sat</span>
- <span>Sun</span>
- </div>
- </div>
- {/if}
- </div>
- <div class="wire-analytics-preview__content">
- {#if eyebrow}
- <p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
- {/if}
-
- {#if title}
- <h2 class="wire-analytics-preview__title">{title}</h2>
- {/if}
-
- {#if description}
- <p class="wire-analytics-preview__description">{description}</p>
- {/if}
-
- <div class="wire-analytics-preview__metrics">
- <slot />
- </div>
-
- {#if href}
- <a href="{href}" class="wire-analytics-preview__action">
- {actionLabel}<span aria-hidden="true">→</span>
- </a>
- {/if}
- </div>
- </div>
- </section>
- }
-}
-Reusable anchor navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AnchorNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="AnchorNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AnchorNavigation.wrn
component AnchorNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable announcement bar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AnnouncementBar
- badge="New"
- message="WRNexusJS Organizations is now available."
- description="Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
- href="/organizations"
- actionLabel="Explore organizations"
-/>Legacy mount name: data-component="AnnouncementBar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
badge | string | Optional | "New" |
message | string | Optional | "WRNexusJS Organizations is now available." |
description | string | Optional | "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO." |
href | string | Optional | "/organizations" |
actionLabel | string | Optional | "Explore organizations" |
ariaLabel | string | Optional | "Announcement" |
badgeIcon | string | Optional | "icon-[lucide--sparkles]" |
actionIcon | string | Optional | "icon-[lucide--arrow-right]" |
dismissLabel | string | Optional | "Dismiss announcement" |
showBadge | boolean | Optional | true |
showDescription | boolean | Optional | true |
showAction | boolean | Optional | true |
dismissible | boolean | Optional | true |
This component does not declare a slot.
clickInstalled source: components/AnnouncementBar.wrn
component AnnouncementBar {
- props {
- class: string = ""
- badge: string = "New"
- message: string = "WRNexusJS Organizations is now available."
- description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
- href: string = "/organizations"
- actionLabel: string = "Explore organizations"
- ariaLabel: string = "Announcement"
- badgeIcon: string = "icon-[lucide--sparkles]"
- actionIcon: string = "icon-[lucide--arrow-right]"
- dismissLabel: string = "Dismiss announcement"
- showBadge: boolean = true
- showDescription: boolean = true
- showAction: boolean = true
- dismissible: boolean = true
- }
-
- state visible = true
-
- view {
- <aside
- role="region"
- aria-label="{ariaLabel}"
- class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
- class:hidden="!visible"
- >
- <!-- Decorative background -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10">
- </div>
- <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10">
- </div>
- </div>
- <div
- class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
- >
- <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
- <!-- Badge -->
- <span data-show="showBadge"
- class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
- >
- <span class="{badgeIcon} h-3 w-3" aria-hidden="true" >
- </span>
-
- {badge}
- </span>
- <!-- Message -->
- <p
- class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
- >
- <span class="font-semibold text-slate-950 dark:text-white">
- {message}
- </span>
- <span data-show="showDescription" class="hidden md:inline">
- {description}
- </span>
- </p>
- <!-- CTA -->
- <a data-show="showAction"
- href="{href}"
- class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
- >
- {actionLabel}
-
- <span class="{actionIcon} h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" >
- </span>
- </a>
- </div>
- <!-- Mobile CTA -->
- <a data-show="showAction"
- href="{href}"
- aria-label="{actionLabel}"
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
- >
- <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- <!-- Close -->
- <button data-show="dismissible"
- type="button"
- @click="visible = false"
- aria-label="{dismissLabel}"
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- </aside>
- }
-}
-Reusable apartment input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApartmentInput
- label="Apartment"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ApartmentInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Apartment" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApartmentInput.wrn
component ApartmentInput {
- props {
- label = "Apartment"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable api authentication notice component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiAuthenticationNotice
- label="ApiAuthentication"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ApiAuthenticationNotice".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ApiAuthentication" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiAuthenticationNotice.wrn
component ApiAuthenticationNotice {
- props {
- label = "ApiAuthentication"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable api endpoint card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiEndpointCard
- method="GET"
- path="/api/example"
- eyebrow="eyebrow"
- title="title"
- description="description"
-/>Legacy mount name: data-component="ApiEndpointCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
method | string | Optional | "GET" |
path | string | Optional | "/api/example" |
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "View endpoint" |
defaultThis component does not declare a custom event.
Installed source: components/ApiEndpointCard.wrn
component ApiEndpointCard {
- props {
- class = ""
- method = "GET"
- path = "/api/example"
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "View endpoint"
- }
-
- view {
- <article
- class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
- >
- <div class="flex flex-wrap items-center gap-3" >
- <span
- class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
- >
- {method}
- </span>
- <code class="text-sm font-semibold">
- {title || path}
- </code>
- </div>
- <p
- data-show="description"
- class="mt-3 text-sm text-slate-500"
- >
- {description}
- </p>
- <div class="mt-4">
- <slot />
- </div>
- {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true">
- </span>
- </a>{/if}
- </article>
- }
-}
-Reusable api error example component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiErrorExample
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ApiErrorExample".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiErrorExample.wrn
component ApiErrorExample {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable api header table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiHeaderTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ApiHeaderTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiHeaderTable.wrn
component ApiHeaderTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable api key create dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiKeyCreateDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="ApiKeyCreateDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiKeyCreateDialog.wrn
component ApiKeyCreateDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable api key display component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiKeyDisplay
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ApiKeyDisplay".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiKeyDisplay.wrn
component ApiKeyDisplay {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable api key input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiKeyInput
- label="ApiKey"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ApiKeyInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ApiKey" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiKeyInput.wrn
component ApiKeyInput {
- props {
- label = "ApiKey"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable api method badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiMethodBadge
- label="ApiMethod"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ApiMethodBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ApiMethod" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiMethodBadge.wrn
component ApiMethodBadge {
- props {
- label = "ApiMethod"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable api parameter table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiParameterTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ApiParameterTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiParameterTable.wrn
component ApiParameterTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable api rate limit notice component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiRateLimitNotice
- label="ApiRateLimit"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ApiRateLimitNotice".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ApiRateLimit" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiRateLimitNotice.wrn
component ApiRateLimitNotice {
- props {
- label = "ApiRateLimit"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable api request example component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiRequestExample
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ApiRequestExample".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiRequestExample.wrn
component ApiRequestExample {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable api response example component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiResponseExample
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ApiResponseExample".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiResponseExample.wrn
component ApiResponseExample {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable api schema table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiSchemaTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ApiSchemaTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiSchemaTable.wrn
component ApiSchemaTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable api schema viewer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiSchemaViewer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ApiSchemaViewer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiSchemaViewer.wrn
component ApiSchemaViewer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable api version badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ApiVersionBadge
- label="ApiVersion"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ApiVersionBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ApiVersion" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ApiVersionBadge.wrn
component ApiVersionBadge {
- props {
- label = "ApiVersion"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable app header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AppHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="AppHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AppHeader.wrn
component AppHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable architecture section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ArchitectureSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ArchitectureSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ArchitectureSection.wrn
component ArchitectureSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable area chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AreaChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="AreaChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AreaChart.wrn
component AreaChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable article hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ArticleHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ArticleHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ArticleHero.wrn
component ArticleHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable article layout component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ArticleLayout
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ArticleLayout".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ArticleLayout.wrn
component ArticleLayout {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable article newsletter c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ArticleNewsletterCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ArticleNewsletterCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ArticleNewsletterCTA.wrn
component ArticleNewsletterCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable article page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ArticlePageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ArticlePageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ArticlePageShell.wrn
component ArticlePageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable article share actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ArticleShareActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ArticleShareActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ArticleShareActions.wrn
component ArticleShareActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable aspect ratio component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AspectRatio />Legacy mount name: data-component="AspectRatio".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AspectRatio.wrn
component AspectRatio {
- props {
- class = ""
- }
- view {
- <div class="wire-aspect-ratio {class}">
- <slot />
- </div>
- }
-}
-Reusable asset card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AssetCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="AssetCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AssetCard.wrn
component AssetCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--asset {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable attachment picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AttachmentPicker
- label="Attachment"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="AttachmentPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Attachment" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AttachmentPicker.wrn
component AttachmentPicker {
- props {
- label = "Attachment"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable attachment upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AttachmentUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AttachmentUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AttachmentUpload.wrn
component AttachmentUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable audio upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AudioUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AudioUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AudioUpload.wrn
component AudioUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable audit log preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AuditLogPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AuditLogPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AuditLogPreview.wrn
component AuditLogPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable audit table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AuditTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="AuditTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AuditTable.wrn
component AuditTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable authenticator code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AuthenticatorCodeInput
- label="AuthenticatorCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="AuthenticatorCodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "AuthenticatorCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AuthenticatorCodeInput.wrn
component AuthenticatorCodeInput {
- props {
- label = "AuthenticatorCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable author avatar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AuthorAvatar
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AuthorAvatar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AuthorAvatar.wrn
component AuthorAvatar {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable author card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AuthorCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AuthorCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AuthorCard.wrn
component AuthorCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable authorized application card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AuthorizedApplicationCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AuthorizedApplicationCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AuthorizedApplicationCard.wrn
component AuthorizedApplicationCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable auto grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AutoGrid />Legacy mount name: data-component="AutoGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AutoGrid.wrn
component AutoGrid {
- props {
- class = ""
- }
- view {
- <div class="wire-auto-grid {class}">
- <slot />
- </div>
- }
-}
-Reusable automation example card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AutomationExampleCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AutomationExampleCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AutomationExampleCard.wrn
component AutomationExampleCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable availability calendar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AvailabilityCalendar
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AvailabilityCalendar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AvailabilityCalendar.wrn
component AvailabilityCalendar {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable avatar upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<AvatarUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="AvatarUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/AvatarUpload.wrn
component AvatarUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable back button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BackButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="BackButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BackButton.wrn
component BackButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot />
- </button>
- }
-}
-Reusable back to top component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BackToTop
- label="Back to top"
- assistiveLabel="Return to the top of the page"
- threshold="500"
-/>Legacy mount name: data-component="BackToTop".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Back to top" |
assistiveLabel | string | Optional | "Return to the top of the page" |
threshold | number | Optional | 500 |
This component does not declare a slot.
clickInstalled source: components/BackToTop.wrn
component BackToTop {
- props {
- class = ""
- label = "Back to top"
- assistiveLabel = "Return to the top of the page"
- threshold = 500
- }
-
- state visible = false
-
- functions {
- function updateBackToTopVisibility() {
- visible = window.scrollY > threshold
- }
-
- function scrollToTop() {
- window.scrollTo({
- top: 0,
- behavior: "smooth"
- })
- }
- }
-
- lifecycle {
- mount {
- updateBackToTopVisibility()
-
- window.addEventListener(
- "scroll",
- updateBackToTopVisibility,
- { passive: true }
- )
- }
-
- unmount {
- window.removeEventListener(
- "scroll",
- updateBackToTopVisibility
- )
- }
- }
-
- watch visible {
- console.debug(
- "Back-to-top visibility:",
- value,
- previous
- )
- }
-
- view {
- <div
- class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
- class:pointer-events-none="!visible"
- class:translate-y-5="!visible"
- class:scale-90="!visible"
- class:opacity-0="!visible"
- class:pointer-events-auto="visible"
- class:translate-y-0="visible"
- class:scale-100="visible"
- class:opacity-100="visible"
- >
- <!-- Hover label -->
- <span
- class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
- >
- {label}
- </span>
- <!-- Gradient border wrapper -->
- <div
- class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
- >
- <!-- Glow -->
- <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" >
- </div>
- <button
- type="button"
- @click="scrollToTop()"
- aria-label="{label}"
- title="{label}"
- class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
- >
- <!-- Arrow -->
- <span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" >
- </span>
- <span class="sr-only">
- {assistiveLabel}
- </span>
- </button>
- </div>
- </div>
- }
-}
-Reusable bank transfer details component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BankTransferDetails
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="BankTransferDetails".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BankTransferDetails.wrn
component BankTransferDetails {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Banner
- text="Announcement"
- href="href"
- actionLabel="Learn more"
- variant="brand"
-/>Legacy mount name: data-component="Banner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
text | string | Optional | "Announcement" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
variant | string | Optional | "brand" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/Banner.wrn
component Banner {
- props {
- class = ""
- text = "Announcement"
- href = ""
- actionLabel = "Learn more"
- variant = "brand"
- }
- view {
- <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}">
- <span>{text}</span>
- <a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a>
- </aside>
- }
-}
-Reusable bar chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BarChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="BarChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BarChart.wrn
component BarChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable beta badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BetaBadge
- label="Beta"
- variant="default"
-/>Legacy mount name: data-component="BetaBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Beta" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BetaBadge.wrn
component BetaBadge {
- props {
- label = "Beta"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--betabadge {class}">{label}<slot />
- </span>
- }
-}
-Reusable billing address form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BillingAddressForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="BillingAddressForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BillingAddressForm.wrn
component BillingAddressForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable billing example component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BillingExample
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="BillingExample".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BillingExample.wrn
component BillingExample {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable billing period toggle component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BillingPeriodToggle
- label="BillingPeriod"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BillingPeriodToggle".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "BillingPeriod" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BillingPeriodToggle.wrn
component BillingPeriodToggle {
- props {
- label = "BillingPeriod"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable blackout date picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BlackoutDatePicker
- label="BlackoutDate"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BlackoutDatePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "BlackoutDate" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BlackoutDatePicker.wrn
component BlackoutDatePicker {
- props {
- label = "BlackoutDate"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable blog card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BlogCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="BlogCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BlogCard.wrn
component BlogCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable blog grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BlogGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="BlogGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BlogGrid.wrn
component BlogGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable blog list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BlogList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="BlogList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BlogList.wrn
component BlogList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable blog search component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BlogSearch
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="BlogSearch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BlogSearch.wrn
component BlogSearch {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable body text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BodyText
- text="text"
- align="start"
-/>Legacy mount name: data-component="BodyText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BodyText.wrn
component BodyText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--body wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable border radius picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BorderRadiusPicker
- label="BorderRadius"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BorderRadiusPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "BorderRadius" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BorderRadiusPicker.wrn
component BorderRadiusPicker {
- props {
- label = "BorderRadius"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable bottom navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BottomNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="BottomNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BottomNavigation.wrn
component BottomNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable brand color picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BrandColorPicker
- label="BrandColor"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BrandColorPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "BrandColor" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BrandColorPicker.wrn
component BrandColorPicker {
- props {
- label = "BrandColor"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable brand selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BrandSelector
- label="Brand"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BrandSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Brand" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BrandSelector.wrn
component BrandSelector {
- props {
- label = "Brand"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable breadcrumbs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Breadcrumbs
- items="[]"
- centered="false"
- compact="false"
- showHome="true"
- homeLabel="Home"
-/>Legacy mount name: data-component="Breadcrumbs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
items | string | Optional | [] |
centered | boolean | Optional | false |
compact | boolean | Optional | false |
showHome | boolean | Optional | true |
homeLabel | string | Optional | "Home" |
homeHref | string | Optional | "/" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/Breadcrumbs.wrn
component Breadcrumbs {
- props {
- class: string = ""
- items = []
- centered = false
- compact = false
- showHome = true
- homeLabel = "Home"
- homeHref = "/"
- }
-
- view {
- <nav
- aria-label="Breadcrumb"
- class="w-full {class}"
- class:hidden="items.length === 0 && !showHome"
- >
- <ol
- class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
- class:justify-center="centered"
- class:gap-1.5="compact"
- class:text-xs="compact"
- class:gap-2="!compact"
- class:text-sm="!compact"
- >
- <!-- Home -->
- <li
- class:hidden="!showHome"
- class:inline-flex="showHome"
- >
- <a
- href="{homeHref}"
- class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- <span class:hidden="compact">
- {homeLabel}
- </span>
- <span
- class="sr-only"
- class:hidden="!compact"
- >
- {homeLabel}
- </span>
- </a>
- </li>
- <!-- Separator after home -->
- <li
- aria-hidden="true"
- class="text-slate-300 dark:text-slate-700"
- class:hidden="!showHome || items.length === 0"
- class:inline-flex="showHome && items.length > 0"
- >
- <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" >
- </span>
- </li>
- <!-- Dynamic breadcrumb items -->
- {#each items as item, index}
- <li class="inline-flex min-w-0 items-center gap-2">
- <!-- Linked item -->
- <a
- href="{item.href}"
- class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
- class:hidden="item.current || item.href === ''"
- class:inline-flex="!item.current && item.href !== ''"
- >
- {item.label}
- </a>
- <!-- Current item -->
- <span
- aria-current="page"
- class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
- class:hidden="!item.current"
- class:inline-flex="item.current"
- >
- {item.label}
- </span>
- <!-- Plain unlinked item -->
- <span
- class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
- class:hidden="item.current || item.href !== ''"
- class:inline-flex="!item.current && item.href === ''"
- >
- {item.label}
- </span>
- <!-- Separator -->
- <span
- aria-hidden="true"
- class="inline-flex text-slate-300 dark:text-slate-700"
- class:hidden="index === items.length - 1"
- >
- <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" >
- </span>
- </span>
- </li>
- {/each}
- </ol>
- </nav>
- }
-}
-Reusable browser frame component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BrowserFrame
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="BrowserFrame".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BrowserFrame.wrn
component BrowserFrame {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable budget range slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BudgetRangeSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="BudgetRangeSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BudgetRangeSlider.wrn
component BudgetRangeSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable budget selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BudgetSelector
- label="Budget"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BudgetSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Budget" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BudgetSelector.wrn
component BudgetSelector {
- props {
- label = "Budget"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable business hours picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<BusinessHoursPicker
- label="BusinessHours"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="BusinessHoursPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "BusinessHours" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/BusinessHoursPicker.wrn
component BusinessHoursPicker {
- props {
- label = "BusinessHours"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable button selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ButtonSelector
- label="Button"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ButtonSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Button" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ButtonSelector.wrn
component ButtonSelector {
- props {
- label = "Button"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable calendar grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CalendarGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="CalendarGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CalendarGrid.wrn
component CalendarGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable calendar header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CalendarHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CalendarHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CalendarHeader.wrn
component CalendarHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable calendar navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CalendarNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CalendarNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CalendarNavigation.wrn
component CalendarNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable calendar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Calendar
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Calendar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Calendar.wrn
component Calendar {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable callback url input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CallbackUrlInput
- label="CallbackUrl"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CallbackUrlInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CallbackUrl" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CallbackUrlInput.wrn
component CallbackUrlInput {
- props {
- label = "CallbackUrl"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable campaign card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CampaignCard
- title="title"
- description="description"
- href="href"
- icon="icon-[lucide--send]"
-/>Legacy mount name: data-component="CampaignCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
icon | string | Optional | "icon-[lucide--send]" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CampaignCard.wrn
component CampaignCard {
- props {
- title = ""
- description = ""
- href = ""
- icon = "icon-[lucide--send]"
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}">
- <span class="wire-catalog-card__icon">
- <span class="{icon} size-5" aria-hidden="true">
- </span>
- </span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>{/if}</article>
- }
-}
-Reusable campaign performance preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CampaignPerformancePreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CampaignPerformancePreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CampaignPerformancePreview.wrn
component CampaignPerformancePreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable campaign progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CampaignProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="CampaignProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CampaignProgress.wrn
component CampaignProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable capability grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CapabilityGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="CapabilityGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CapabilityGrid.wrn
component CapabilityGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable captcha field component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CaptchaField
- label="Captcha"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CaptchaField".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Captcha" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CaptchaField.wrn
component CaptchaField {
- props {
- label = "Captcha"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable card payment form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CardPaymentForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CardPaymentForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CardPaymentForm.wrn
component CardPaymentForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable card selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CardSelector
- label="Card"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CardSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Card" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CardSelector.wrn
component CardSelector {
- props {
- label = "Card"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable card skeleton component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CardSkeleton
- label="Card"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="CardSkeleton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Card" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CardSkeleton.wrn
component CardSkeleton {
- props {
- label = "Card"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable career application form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CareerApplicationForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CareerApplicationForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CareerApplicationForm.wrn
component CareerApplicationForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable career benefits grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CareerBenefitsGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="CareerBenefitsGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CareerBenefitsGrid.wrn
component CareerBenefitsGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable case study card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CaseStudyCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CaseStudyCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CaseStudyCard.wrn
component CaseStudyCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable case study hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CaseStudyHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CaseStudyHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CaseStudyHero.wrn
component CaseStudyHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable case study preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CaseStudyPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CaseStudyPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CaseStudyPreview.wrn
component CaseStudyPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable centered c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CenteredCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="CenteredCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CenteredCTA.wrn
component CenteredCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable centered hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CenteredHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CenteredHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CenteredHero.wrn
component CenteredHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable centered section header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CenteredSectionHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CenteredSectionHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CenteredSectionHeader.wrn
component CenteredSectionHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable certificate upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CertificateUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CertificateUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CertificateUpload.wrn
component CertificateUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable certification badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CertificationBadge
- label="Certification"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="CertificationBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Certification" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CertificationBadge.wrn
component CertificationBadge {
- props {
- label = "Certification"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable challenge section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChallengeSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ChallengeSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChallengeSection.wrn
component ChallengeSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable channel badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelBadge
- label="Channel"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ChannelBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Channel" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelBadge.wrn
component ChannelBadge {
- props {
- label = "Channel"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable channel card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelCard
- title="title"
- description="description"
- href="href"
- icon="icon"
- actionLabel="actionLabel"
-/>Legacy mount name: data-component="ChannelCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
icon | string | Optional | "" |
actionLabel | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelCard.wrn
component ChannelCard {
- props {
- title = ""
- description = ""
- href = ""
- icon = ""
- actionLabel = ""
- class = ""
- }
-
- view {
- <article
- class="wire-channel-card group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm,var(--wire-shadow-1))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary)] hover:shadow-[var(--wire-shadow-md,var(--wire-shadow-1))] sm:p-7 {class}"
- >
- <div class="flex min-h-12 items-start justify-between gap-4">
- {#if icon}
- <span
- class="wire-channel-card__icon grid size-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border)]"
- aria-hidden="true"
- >
- <span class="{icon} block size-5">
- </span>
- </span>
- {/if}
-
- <div class="flex min-w-0 flex-1 justify-end">
- <slot />
- </div>
- </div>
-
- {#if title}
- <h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
- {title}
- </h3>
- {/if}
-
- {#if description}
- <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted,var(--wire-color-muted))]">
- {description}
- </p>
- {/if}
-
- {#if href}
- <a
- href="{href}"
- class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border)] pt-5 text-sm font-semibold text-[var(--wire-color-primary)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
- aria-label="Explore {title}"
- >
- <span>{actionLabel || "Explore " + title}</span>
- <span class="transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">→</span>
- </a>
- {/if}
- </article>
- }
-}
-Reusable channel comparison chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelComparisonChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ChannelComparisonChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelComparisonChart.wrn
component ChannelComparisonChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable channel comparison table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelComparisonTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ChannelComparisonTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelComparisonTable.wrn
component ChannelComparisonTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable channel fallback diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelFallbackDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ChannelFallbackDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelFallbackDiagram.wrn
component ChannelFallbackDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable channel flow component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelFlow />Legacy mount name: data-component="ChannelFlow".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ChannelFlow.wrn
component ChannelFlow {
- props {
- class = ""
- }
-
- view {
- <div
- class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}"
- role="img"
- aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks"
- >
- <div
- class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
- >
- <span class="icon-[lucide--webhook] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true">
- </span>
- <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Customer event</strong>
- <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">order.shipped</small>
- </div>
- <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
- <div
- class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
- >
- <span class="icon-[lucide--shield-check] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true">
- </span>
- <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Profile + consent</strong>
- <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Eligibility checked</small>
- </div>
- <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
- <div
- class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3"
- >
- <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">WhatsApp</span>
- <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">SMS</span>
- <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Email</span>
- <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Voice</span>
- </div>
- <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
- <div
- class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
- >
- <span class="icon-[lucide--chart-no-axes-combined] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true">
- </span>
- <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Delivery + analytics</strong>
- <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Webhook emitted</small>
- </div>
- </div>
- }
-}
-Reusable channel icon component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelIcon
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ChannelIcon".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelIcon.wrn
component ChannelIcon {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable channel rate table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelRateTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ChannelRateTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelRateTable.wrn
component ChannelRateTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable channel selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChannelSelector
- label="Channel"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ChannelSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Channel" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChannelSelector.wrn
component ChannelSelector {
- props {
- label = "Channel"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable character counter component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CharacterCounter
- label="Character"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="CharacterCounter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Character" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CharacterCounter.wrn
component CharacterCounter {
- props {
- label = "Character"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable chart empty state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChartEmptyState
- label="ChartEmpty"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ChartEmptyState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ChartEmpty" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChartEmptyState.wrn
component ChartEmptyState {
- props {
- label = "ChartEmpty"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable chart tooltip component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChartTooltip
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ChartTooltip".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChartTooltip.wrn
component ChartTooltip {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable checkbox group component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CheckboxGroup
- label="Checkbox"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CheckboxGroup".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Checkbox" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CheckboxGroup.wrn
component CheckboxGroup {
- props {
- label = "Checkbox"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable checklist progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChecklistProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ChecklistProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChecklistProgress.wrn
component ChecklistProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable checklist component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Checklist
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Checklist".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Checklist.wrn
component Checklist {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable chip input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ChipInput
- label="Chip"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ChipInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Chip" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ChipInput.wrn
component ChipInput {
- props {
- label = "Chip"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable chip component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Chip
- label="Chip"
- variant="default"
-/>Legacy mount name: data-component="Chip".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Chip" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Chip.wrn
component Chip {
- props {
- label = "Chip"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--chip {class}">{label}<slot />
- </span>
- }
-}
-Reusable circular progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CircularProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="CircularProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CircularProgress.wrn
component CircularProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable city selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CitySelector
- label="City"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CitySelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "City" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CitySelector.wrn
component CitySelector {
- props {
- label = "City"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable clear filters button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ClearFiltersButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ClearFiltersButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ClearFiltersButton.wrn
component ClearFiltersButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable clickable card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ClickableCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="ClickableCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ClickableCard.wrn
component ClickableCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--clickable {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable close button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CloseButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="CloseButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CloseButton.wrn
component CloseButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot />
- </button>
- }
-}
-Reusable cluster component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Cluster />Legacy mount name: data-component="Cluster".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Cluster.wrn
component Cluster {
- props {
- class = ""
- }
-
- view {
- <div class="flex flex-wrap items-center gap-3 {class}">
- <slot />
- </div>
- }
-}
-Reusable code block component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeBlock
- language="text"
- title="title"
- code="code"
- copyable="true"
-/>Legacy mount name: data-component="CodeBlock".
| Prop | Type | Requirement | Default |
|---|---|---|---|
language | string | Optional | "text" |
title | string | Optional | "" |
code | string | Optional | "" |
copyable | boolean | Optional | true |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/CodeBlock.wrn
component CodeBlock {
- props {
- language = "text"
- title = ""
- code = ""
- copyable = true
- class = ""
- }
-
- view {
- <section class="overflow-hidden bg-[var(--wire-color-code-background,#020617)] text-[var(--wire-color-code-text,#e2e8f0)] {class}">
- <header class="flex items-center justify-between gap-4 border-b border-[var(--wire-color-code-border,#1e293b)] px-4 py-3 text-xs text-[var(--wire-color-code-muted,#94a3b8)] sm:px-5">
- <span class="inline-flex items-center gap-2 font-medium">
- <span class="icon-[lucide--terminal]" aria-hidden="true">
- </span>
- {#if title}{title}{:else}{language}{/if}
- </span>
- {#if copyable}
- <button type="button" data-copy-code="{code}" class="inline-flex items-center gap-2 rounded-lg border border-[var(--wire-color-code-border,#334155)] px-3 py-1.5 font-semibold text-[var(--wire-color-code-text,#e2e8f0)] transition hover:bg-[var(--wire-color-code-surface,#0f172a)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
- <span class="icon-[lucide--copy]" aria-hidden="true">
- </span>Copy
- </button>
- {/if}
- </header>
- <pre class="m-0 max-w-full overflow-x-auto p-5 text-sm leading-7">
- <code>{code}</code>
- </pre>
- </section>
- }
-}
-Reusable code copy button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeCopyButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="CodeCopyButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CodeCopyButton.wrn
component CodeCopyButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable code header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CodeHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CodeHeader.wrn
component CodeHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeInput
- label="Code"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Code" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CodeInput.wrn
component CodeInput {
- props {
- label = "Code"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable code language badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeLanguageBadge
- label="CodeLanguage"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="CodeLanguageBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CodeLanguage" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CodeLanguageBadge.wrn
component CodeLanguageBadge {
- props {
- label = "CodeLanguage"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable code tabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeTabs />Legacy mount name: data-component="CodeTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CodeTabs.wrn
component CodeTabs {
- props {
- class = ""
- }
-
- view {
- <div
- class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] {class}"
- >
- <slot />
- </div>
- }
-}
-Reusable code text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CodeText
- text="text"
- align="start"
-/>Legacy mount name: data-component="CodeText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CodeText.wrn
component CodeText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--body wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable code component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Code
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Code".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Code.wrn
component Code {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable cohort chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CohortChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="CohortChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CohortChart.wrn
component CohortChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable color grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ColorGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ColorGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ColorGrid.wrn
component ColorGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable color hex input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ColorHexInput
- label="ColorHex"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ColorHexInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ColorHex" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ColorHexInput.wrn
component ColorHexInput {
- props {
- label = "ColorHex"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable color selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ColorSelector
- label="Color"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ColorSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Color" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ColorSelector.wrn
component ColorSelector {
- props {
- label = "Color"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable color swatch component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ColorSwatch
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ColorSwatch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ColorSwatch.wrn
component ColorSwatch {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable combobox component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Combobox
- id="combobox"
- name="name"
- label="Choose an option"
- placeholder="Search options"
- options="[]"
-/>Legacy mount name: data-component="Combobox".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "combobox" |
name | string | Optional | "" |
label | string | Optional | "Choose an option" |
placeholder | string | Optional | "Search options" |
options | string | Optional | [] |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/Combobox.wrn
component Combobox {
- props {
- id = "combobox"
- name = ""
- label = "Choose an option"
- placeholder = "Search options"
- options = []
- required = false
- disabled = false
- class = ""
- }
- view {
- <div class="wire-field {class}">
- <label for="{id}" class="wire-label">{label}</label>
- <input id="{id}" name="{name}" list="{id}-options" placeholder="{placeholder}" required="{required}" disabled="{disabled}" role="combobox" aria-autocomplete="list" class="wire-input" />
- <datalist id="{id}-options">{#each options as option}<option value="{option.value}">{option.label}</option>{/each}</datalist>
- </div>
- }
-}
-Reusable coming soon badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ComingSoonBadge
- label="ComingSoon"
- variant="default"
-/>Legacy mount name: data-component="ComingSoonBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ComingSoon" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ComingSoonBadge.wrn
component ComingSoonBadge {
- props {
- label = "ComingSoon"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--comingsoonbadge {class}">{label}<slot />
- </span>
- }
-}
-Reusable coming soon state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ComingSoonState
- label="ComingSoon"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ComingSoonState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ComingSoon" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ComingSoonState.wrn
component ComingSoonState {
- props {
- label = "ComingSoon"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable command block component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CommandBlock
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CommandBlock".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CommandBlock.wrn
component CommandBlock {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable command menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CommandMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="CommandMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CommandMenu.wrn
component CommandMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable command search input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CommandSearchInput
- label="CommandSearch"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CommandSearchInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CommandSearch" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CommandSearchInput.wrn
component CommandSearchInput {
- props {
- label = "CommandSearch"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable company hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CompanyHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CompanyHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CompanyHero.wrn
component CompanyHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable company name input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CompanyNameInput
- label="CompanyName"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CompanyNameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CompanyName" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CompanyNameInput.wrn
component CompanyNameInput {
- props {
- label = "CompanyName"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable company page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CompanyPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="CompanyPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CompanyPageShell.wrn
component CompanyPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable company size selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CompanySizeSelector
- label="CompanySize"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CompanySizeSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CompanySize" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CompanySizeSelector.wrn
component CompanySizeSelector {
- props {
- label = "CompanySize"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable comparison date range picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ComparisonDateRangePicker
- label="ComparisonDateRange"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ComparisonDateRangePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ComparisonDateRange" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ComparisonDateRangePicker.wrn
component ComparisonDateRangePicker {
- props {
- label = "ComparisonDateRange"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable comparison table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ComparisonTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ComparisonTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ComparisonTable.wrn
component ComparisonTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable completion meter component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CompletionMeter
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="CompletionMeter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CompletionMeter.wrn
component CompletionMeter {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable compliance badge list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ComplianceBadgeList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ComplianceBadgeList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ComplianceBadgeList.wrn
component ComplianceBadgeList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable compliance program card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ComplianceProgramCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ComplianceProgramCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ComplianceProgramCard.wrn
component ComplianceProgramCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable confirm password input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConfirmPasswordInput
- label="ConfirmPassword"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ConfirmPasswordInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ConfirmPassword" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConfirmPasswordInput.wrn
component ConfirmPasswordInput {
- props {
- label = "ConfirmPassword"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable confirmation dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConfirmationDialog
- title="Confirm action"
- description="Are you sure you want to continue?"
- confirmLabel="Confirm"
- cancelLabel="Cancel"
- danger="false"
-/>Legacy mount name: data-component="ConfirmationDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "Confirm action" |
description | string | Optional | "Are you sure you want to continue?" |
confirmLabel | string | Optional | "Confirm" |
cancelLabel | string | Optional | "Cancel" |
danger | boolean | Optional | false |
open | boolean | Optional | false |
class | string | Optional | "" |
confirmclickInstalled source: components/ConfirmationDialog.wrn
component ConfirmationDialog {
- props {
- title = "Confirm action"
- description = "Are you sure you want to continue?"
- confirmLabel = "Confirm"
- cancelLabel = "Cancel"
- danger = false
- open = false
- class = ""
- }
- state visible = open
- view {
- <div data-show="visible" class="wire-overlay {class}" role="presentation">
- <section role="alertdialog" aria-modal="true" aria-labelledby="confirmation-title" aria-describedby="confirmation-description" class="wire-dialog">
- <h2 id="confirmation-title" class="wire-dialog__title">{title}</h2>
- <p id="confirmation-description" class="wire-dialog__description">{description}</p>
- <div class="wire-dialog__actions">
- <button type="button" class="wire-btn wire-btn--ghost" @click="visible = false">{cancelLabel}</button>
- <button type="button" class="wire-btn {danger ? 'wire-btn--danger' : 'wire-btn--primary'}">
- <slot name="confirm">{confirmLabel}</slot>
- </button>
- </div>
- </section>
- </div>
- }
-}
-Reusable connected account card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConnectedAccountCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ConnectedAccountCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConnectedAccountCard.wrn
component ConnectedAccountCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable connection card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConnectionCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="ConnectionCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConnectionCard.wrn
component ConnectionCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--connection {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable consent timeline preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConsentTimelinePreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ConsentTimelinePreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConsentTimelinePreview.wrn
component ConsentTimelinePreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Consent history showing allowed and suppressed customer channels" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60">
- <div class="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3">
- <span class="icon-[lucide--message-circle-check] size-5 text-emerald-500" aria-hidden="true">
- </span>
- <span class="grid text-sm">
- <strong>WhatsApp allowed</strong>
- <span class="text-xs text-slate-500">Web form · 12 Jul, 10:24</span>
- </span>
- <span class="ml-auto text-xs font-bold text-emerald-600">Active</span>
- </div>
- <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900">
- <span class="icon-[lucide--mail-check] size-5 text-violet-500" aria-hidden="true">
- </span>
- <span class="grid text-sm">
- <strong>Email allowed</strong>
- <span class="text-xs text-slate-500">Preference centre · 08 Jul</span>
- </span>
- <span class="ml-auto text-xs font-bold text-emerald-600">Active</span>
- </div>
- <div class="flex items-center gap-3 rounded-xl border border-rose-500/20 bg-rose-500/5 p-3">
- <span class="icon-[lucide--phone-off] size-5 text-rose-500" aria-hidden="true">
- </span>
- <span class="grid text-sm">
- <strong>Voice suppressed</strong>
- <span class="text-xs text-slate-500">Customer request · 02 Jul</span>
- </span>
- <span class="ml-auto text-xs font-bold text-rose-500">Blocked</span>
- </div>
- </div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable contact card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="ContactCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactCard.wrn
component ContactCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--contact {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable contact c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ContactCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactCTA.wrn
component ContactCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable contact form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ContactForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactForm.wrn
component ContactForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable contact hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ContactHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactHero.wrn
component ContactHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable contact page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ContactPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactPageShell.wrn
component ContactPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable contact sales banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactSalesBanner
- eyebrow="Enterprise identity"
- title="Ready to secure your next application?"
- description="description"
- primaryLabel="Contact sales"
- primaryHref="/contact"
-/>Legacy mount name: data-component="ContactSalesBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "Enterprise identity" |
title | string | Optional | "Ready to secure your next application?" |
description | string | Optional | "" |
primaryLabel | string | Optional | "Contact sales" |
primaryHref | string | Optional | "/contact" |
secondaryLabel | string | Optional | "Start free" |
secondaryHref | string | Optional | "/sign-up" |
iconClass | string | Optional | "icon-[lucide--messages-square]" |
centered | boolean | Optional | false |
compact | boolean | Optional | false |
points | string | Optional | [] |
trustPoints | string | Optional | [] |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ContactSalesBanner.wrn
component ContactSalesBanner {
- props {
- class: string = ""
- eyebrow = "Enterprise identity"
- title = "Ready to secure your next application?"
- description = ""
-
- primaryLabel = "Contact sales"
- primaryHref = "/contact"
-
- secondaryLabel = "Start free"
- secondaryHref = "/sign-up"
-
- iconClass = "icon-[lucide--messages-square]"
-
- centered = false
- compact = false
-
- points = []
- trustPoints = []
- }
-
- view {
- <section
- aria-labelledby="contact-sales-banner-title"
- class="px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
- class:py-10="compact"
- class:sm:py-12="compact"
- class:py-14="!compact"
- class:sm:py-16="!compact"
- class:lg:py-20="!compact"
- >
- <div
- class="relative mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20"
- >
- <!-- Background decoration -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10">
- </div>
- <div class="absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10">
- </div>
- <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-400/50 to-transparent dark:via-indigo-400/20">
- </div>
- </div>
- <div
- class="relative"
- class:px-6="compact"
- class:py-7="compact"
- class:sm:px-8="compact"
- class:px-6="!compact"
- class:py-8="!compact"
- class:sm:px-9="!compact"
- class:sm:py-10="!compact"
- class:lg:px-12="!compact"
- class:lg:py-12="!compact"
- >
- <!-- Main content -->
- <div
- class="gap-8"
- class:flex="centered"
- class:flex-col="centered"
- class:items-center="centered"
- class:text-center="centered"
- class:mx-auto="centered"
- class:max-w-4xl="centered"
- class:grid="!centered"
- class:lg:grid-cols-[minmax(0,1fr)_auto]="!centered"
- class:lg:items-center="!centered"
- class:lg:gap-12="!centered"
- >
- <!-- Copy -->
- <div
- class="min-w-0"
- class:max-w-3xl="centered"
- class:max-w-4xl="!centered"
- >
- <!-- Eyebrow -->
- <div
- class="flex"
- class:hidden="eyebrow === ''"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- <span
- class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
- >
- <span class="{iconClass} h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- {eyebrow}
- </span>
- </div>
- <!-- Title -->
- <h2
- id="contact-sales-banner-title"
- class="font-bold tracking-tight text-slate-950 dark:text-white"
- class:mt-5="eyebrow !== ''"
- class:text-2xl="compact"
- class:leading-tight="compact"
- class:sm:text-3xl="compact"
- class:text-3xl="!compact"
- class:leading-tight="!compact"
- class:sm:text-4xl="!compact"
- >
- {title}
- </h2>
- <!-- Description -->
- <p
- class="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 sm:text-base"
- class:hidden="description === ''"
- class:mx-auto="centered"
- class:max-w-2xl="centered"
- class:max-w-3xl="!centered"
- >
- {description}
- </p>
- <!-- Dynamic points -->
- <div
- class="mt-6 flex flex-wrap gap-x-5 gap-y-3"
- class:hidden="points.length === 0"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- {#each points.slice(0, 4) as point}
- <div class="inline-flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
- <span
- class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </span>
-
- {point}
- </div>
- {/each}
- </div>
- </div>
- <!-- Actions -->
- <div
- class="flex shrink-0 flex-col gap-3 sm:flex-row"
- class:hidden="primaryLabel === '' && secondaryLabel === ''"
- class:mt-1="centered"
- class:justify-center="centered"
- >
- <a
- href="{secondaryHref}"
- class="h-12 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-5 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
- class:hidden="secondaryLabel === ''"
- class:inline-flex="secondaryLabel !== ''"
- >
- {secondaryLabel}
- </a>
- <a
- href="{primaryHref}"
- class="group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- class:hidden="primaryLabel === ''"
- class:inline-flex="primaryLabel !== ''"
- >
- {primaryLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- <!-- Dynamic trust strip -->
- <div
- class="mt-8 border-t border-indigo-200/70 pt-5 dark:border-indigo-500/15"
- class:hidden="compact || trustPoints.length === 0"
- >
- <div
- class="flex flex-wrap items-center gap-x-6 gap-y-3"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- {#each trustPoints.slice(0, 4) as trustPoint}
- <span class="inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
- <span class="{trustPoint.iconClass} h-4 w-4 {trustPoint.iconColorClass}" aria-hidden="true" >
- </span>
-
- {trustPoint.label}
- </span>
- {/each}
- </div>
- </div>
- </div>
- </div>
- </section>
- }
-}
-Reusable contact sales button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactSalesButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ContactSalesButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactSalesButton.wrn
component ContactSalesButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable contact sales form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContactSalesForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ContactSalesForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContactSalesForm.wrn
component ContactSalesForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable context switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ContextSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ContextSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ContextSwitcher.wrn
component ContextSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable conversation list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConversationList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ConversationList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConversationList.wrn
component ConversationList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable conversation preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConversationPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ConversationPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConversationPreview.wrn
component ConversationPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Shared inbox conversation moving from automation to a human teammate" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
- <div class="flex items-center gap-3 border-b border-slate-200 pb-3 dark:border-slate-800">
- <span class="grid size-9 place-items-center rounded-full bg-violet-500/10 text-violet-500">
- <span class="icon-[lucide--message-circle] size-4" aria-hidden="true">
- </span>
- </span>
- <span class="grid text-sm">
- <strong>Order support</strong>
- <span class="text-xs text-slate-500">Customer context attached</span>
- </span>
- <span class="ml-auto size-2 rounded-full bg-emerald-500">
- </span>
- </div>
- <div class="max-w-[82%] rounded-2xl rounded-tl-sm bg-white p-3 text-sm shadow-sm dark:bg-slate-900">Can I change the delivery address?</div>
- <div class="ml-auto max-w-[82%] rounded-2xl rounded-tr-sm bg-violet-600 p-3 text-sm text-white">Absolutely — I’ll help with that now.</div>
- <div class="inline-flex items-center gap-2 text-xs text-slate-500">
- <span class="icon-[lucide--bot] size-4" aria-hidden="true">
- </span>Automation handed off to Maya</div>
- </div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable conversion chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ConversionChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ConversionChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ConversionChart.wrn
component ConversionChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable cookie banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookieBanner
- title="We use cookies"
- description="We use essential cookies and optional analytics to improve your experience."
- privacyHref="/privacy"
-/>Legacy mount name: data-component="CookieBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
title | string | Optional | "We use cookies" |
description | string | Optional | "We use essential cookies and optional analytics to improve your experience." |
privacyHref | string | Optional | "/privacy" |
This component does not declare a slot.
clickInstalled source: components/CookieBanner.wrn
component CookieBanner {
- props {
- class = ""
- title = "We use cookies"
- description = "We use essential cookies and optional analytics to improve your experience."
- privacyHref = "/privacy"
- }
- state visible = true
- view {
- <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95 {class}" role="dialog" aria-label="Cookie preferences">
- <div class="flex flex-col gap-5 md:flex-row md:items-center">
- <div class="min-w-0 flex-1">
- <h2 class="font-bold">{title}</h2>
- <p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a>
- </p>
- </div>
- <div class="flex flex-wrap gap-2">
- <button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button>
- <button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button>
- </div>
- </div>
- </aside>
- }
-}
-Reusable cookie category list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookieCategoryList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="CookieCategoryList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CookieCategoryList.wrn
component CookieCategoryList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable cookie category toggle component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookieCategoryToggle
- label="CookieCategory"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CookieCategoryToggle".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CookieCategory" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CookieCategoryToggle.wrn
component CookieCategoryToggle {
- props {
- label = "CookieCategory"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable cookie consent component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookieConsent />Legacy mount name: data-component="CookieConsent".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
clickchangeInstalled source: components/CookieConsent.wrn
component CookieConsent {
- props {
- class: string = ""
- }
- state bannerOpen = false
- state preferencesOpen = false
-
- state analyticsCookies = false
- state personalizationCookies = false
- state marketingCookies = false
-
- view {
- <div class="{class}" class:hidden="!bannerOpen">
- <!-- Cookie consent banner -->
- <section
- role="dialog"
- aria-modal="false"
- aria-labelledby="cookie-consent-title"
- aria-describedby="cookie-consent-description"
- class="fixed inset-x-0 bottom-0 z-[80] p-4 sm:p-5 lg:p-6 {class}"
- class:hidden="!bannerOpen || preferencesOpen"
- class:block="bannerOpen && !preferencesOpen"
- >
- <div
- class="mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-slate-200 bg-white/95 shadow-2xl shadow-slate-950/20 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/95 dark:shadow-black/40"
- >
- <div class="grid items-center gap-6 p-5 sm:p-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:p-7">
- <!-- Message -->
- <div class="flex items-start gap-4">
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--cookie] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div class="min-w-0">
- <div class="flex flex-wrap items-center gap-2">
- <h2
- id="cookie-consent-title"
- class="text-base font-bold text-slate-950 dark:text-white"
- >
- Your privacy matters
- </h2>
- <span
- class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- Privacy first
- </span>
- </div>
- <p
- id="cookie-consent-description"
- class="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-400"
- >
- We use essential cookies to operate WRNexusJS. With your
- permission, we also use analytics and personalization cookies
- to improve your experience.
- </p>
- <div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2">
- <a
- href="/cookies"
- class="inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- Cookie policy
-
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </a>
- <a
- href="/privacy"
- class="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- Privacy policy
- </a>
- </div>
- </div>
- </div>
- <!-- Actions -->
- <div class="grid gap-2 sm:grid-cols-3 lg:flex lg:items-center">
- <button
- type="button"
- @click=" analyticsCookies = false; personalizationCookies = false; marketingCookies = false; bannerOpen = false "
- data-cookie-action="essential"
- class="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white"
- >
- Essential only
- </button>
- <button
- type="button"
- @click="preferencesOpen = true"
- class="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15"
- >
- <span class="icon-[lucide--settings-2] h-4 w-4" aria-hidden="true" >
- </span>
-
- Preferences
- </button>
- <button
- type="button"
- @click=" analyticsCookies = true; personalizationCookies = true; marketingCookies = true; bannerOpen = false "
- data-cookie-action="accept-all"
- class="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- >
- Accept all
-
- <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- </div>
- </div>
- </section>
- <!-- Preferences backdrop -->
- <button type="button" @click="preferencesOpen = false" aria-label="Close cookie preferences" class="fixed inset-0 z-[90] bg-slate-950/50 backdrop-blur-sm" class:hidden="!preferencesOpen" class:block="preferencesOpen" >
- </button>
- <!-- Preferences modal -->
- <section
- role="dialog"
- aria-modal="true"
- aria-labelledby="cookie-preferences-title"
- aria-describedby="cookie-preferences-description"
- class="fixed inset-0 z-[100] overflow-y-auto p-4 sm:p-6"
- class:hidden="!preferencesOpen"
- class:block="preferencesOpen"
- >
- <div class="flex min-h-full items-end justify-center sm:items-center">
- <div
- class="relative w-full max-w-2xl overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl shadow-slate-950/30 dark:border-white/10 dark:bg-slate-900 dark:shadow-black/50 sm:rounded-3xl"
- >
- <!-- Modal header -->
- <header class="border-b border-slate-200 px-5 py-5 dark:border-white/10 sm:px-6">
- <div class="flex items-start justify-between gap-4">
- <div class="flex items-start gap-4">
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--sliders-horizontal] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div>
- <h2
- id="cookie-preferences-title"
- class="text-lg font-bold tracking-tight text-slate-950 dark:text-white"
- >
- Cookie preferences
- </h2>
- <p
- id="cookie-preferences-description"
- class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400"
- >
- Choose which optional cookies WRNexusJS may use.
- </p>
- </div>
- </div>
- <button
- type="button"
- @click="preferencesOpen = false"
- aria-label="Close cookie preferences"
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--x] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </button>
- </div>
- </header>
- <!-- Preference groups -->
- <div class="max-h-[60dvh] space-y-3 overflow-y-auto p-5 sm:p-6">
- <!-- Essential -->
- <article
- class="rounded-2xl bg-emerald-500/10 p-4 ring-1 ring-inset ring-emerald-500/15 transition dark:bg-emerald-500/10 dark:ring-emerald-400/10"
- >
- <div class="flex items-start justify-between gap-4">
- <div class="flex items-start gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-500/15 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300"
- >
- <span class="icon-[lucide--shield-check] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </span>
- <div>
- <div class="flex flex-wrap items-center gap-2">
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- Essential cookies
- </h3>
- <span
- class="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300"
- >
- Always active
- </span>
- </div>
- <p class="mt-1.5 text-xs leading-5 text-slate-600 dark:text-slate-400">
- Required for authentication, security, sessions, preferences, and core website functionality.
- </p>
- </div>
- </div>
- <span
- class="relative inline-flex h-6 w-11 shrink-0 cursor-not-allowed rounded-full bg-emerald-500"
- aria-hidden="true"
- >
- <span class="absolute right-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm" >
- </span>
- </span>
- </div>
- </article>
- <!-- Analytics -->
- <article
- class="rounded-2xl p-4 transition-all duration-200 {analyticsCookies ? 'bg-indigo-50 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:ring-indigo-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' }"
- >
- <label class="flex cursor-pointer items-start justify-between gap-4">
- <span class="flex min-w-0 items-start gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 {analyticsCookies ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' }"
- >
- <span class="icon-[lucide--chart-no-axes-combined] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="block text-sm font-bold text-slate-950 dark:text-white">
- Analytics cookies
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
- Help us understand website usage, performance, and navigation patterns.
- </span>
- </span>
- </span>
- <span class="relative mt-0.5 shrink-0">
- <input
- type="checkbox"
- name="analytics"
- checked="{analyticsCookies}"
- @change="analyticsCookies = event.target.checked"
- class="peer sr-only"
- />
- <span class="block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-indigo-600 peer-focus-visible:ring-4 peer-focus-visible:ring-indigo-500/20 dark:bg-slate-700" >
- </span>
- <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5" >
- </span>
- </span>
- </label>
- </article>
- <!-- Personalization -->
- <article
- class="rounded-2xl p-4 transition-all duration-200 {personalizationCookies ? 'bg-violet-50 ring-1 ring-inset ring-violet-200 dark:bg-violet-500/10 dark:ring-violet-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' }"
- >
- <label class="flex cursor-pointer items-start justify-between gap-4">
- <span class="flex min-w-0 items-start gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 {personalizationCookies ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' }"
- >
- <span class="icon-[lucide--sparkles] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="block text-sm font-bold text-slate-950 dark:text-white">
- Personalization cookies
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
- Remember your choices and provide a more relevant website experience.
- </span>
- </span>
- </span>
- <span class="relative mt-0.5 shrink-0">
- <input
- type="checkbox"
- name="personalization"
- checked="{personalizationCookies}"
- @change="personalizationCookies = event.target.checked"
- class="peer sr-only"
- />
- <span class="block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-violet-600 peer-focus-visible:ring-4 peer-focus-visible:ring-violet-500/20 dark:bg-slate-700" >
- </span>
- <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5" >
- </span>
- </span>
- </label>
- </article>
- <!-- Marketing -->
- <article
- class="rounded-2xl p-4 transition-all duration-200 {marketingCookies ? 'bg-rose-50 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/10 dark:ring-rose-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' }"
- >
- <label class="flex cursor-pointer items-start justify-between gap-4">
- <span class="flex min-w-0 items-start gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 {marketingCookies ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' }"
- >
- <span class="icon-[lucide--megaphone] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="block text-sm font-bold text-slate-950 dark:text-white">
- Marketing cookies
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400">
- Measure campaigns and show relevant WRNexusJS content across supported services.
- </span>
- </span>
- </span>
- <span class="relative mt-0.5 shrink-0">
- <input
- type="checkbox"
- name="marketing"
- checked="{marketingCookies}"
- @change="marketingCookies = event.target.checked"
- class="peer sr-only"
- />
- <span class="block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-rose-600 peer-focus-visible:ring-4 peer-focus-visible:ring-rose-500/20 dark:bg-slate-700" >
- </span>
- <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5" >
- </span>
- </span>
- </label>
- </article>
- </div>
- <!-- Modal footer -->
- <footer
- class="border-t border-slate-200 bg-slate-50 px-5 py-4 dark:border-white/10 dark:bg-white/[0.02] sm:px-6"
- >
- <div class="grid gap-2 sm:grid-cols-3">
- <button
- type="button"
- @click=" analyticsCookies = false; personalizationCookies = false; marketingCookies = false "
- class="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white"
- >
- Reject optional
- </button>
- <button
- type="button"
- @click=" analyticsCookies = true; personalizationCookies = true; marketingCookies = true "
- class="inline-flex h-11 items-center justify-center rounded-xl border border-indigo-200 bg-indigo-50 px-4 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/15"
- >
- Enable all
- </button>
- <button
- type="button"
- @click=" preferencesOpen = false; bannerOpen = false "
- data-cookie-action="save-preferences"
- class="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl"
- >
- <span class="icon-[lucide--save] h-4 w-4" aria-hidden="true" >
- </span>
-
- Save preferences
- </button>
- </div>
- </footer>
- </div>
- </div>
- </section>
- </div>
- }
-}
-Reusable cookie details table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookieDetailsTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="CookieDetailsTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CookieDetailsTable.wrn
component CookieDetailsTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable cookie preferences dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookiePreferencesDialog
- title="Cookie preferences"
- description="Choose which optional cookies you allow. Essential cookies are always enabled."
- saveLabel="Save preferences"
- acceptLabel="Accept all"
- rejectLabel="Reject optional"
-/>Legacy mount name: data-component="CookiePreferencesDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "Cookie preferences" |
description | string | Optional | "Choose which optional cookies you allow. Essential cookies are always enabled." |
saveLabel | string | Optional | "Save preferences" |
acceptLabel | string | Optional | "Accept all" |
rejectLabel | string | Optional | "Reject optional" |
open | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
changeclickInstalled source: components/CookiePreferencesDialog.wrn
component CookiePreferencesDialog {
- props {
- title = "Cookie preferences"
- description = "Choose which optional cookies you allow. Essential cookies are always enabled."
- saveLabel = "Save preferences"
- acceptLabel = "Accept all"
- rejectLabel = "Reject optional"
- open = false
- class = ""
- }
- state visible = open
- state analytics = false
- state marketing = false
- view {
- <div data-show="visible" class="wire-overlay {class}" role="presentation">
- <section role="dialog" aria-modal="true" aria-labelledby="cookie-preferences-title" class="wire-dialog wire-cookie-dialog">
- <h2 id="cookie-preferences-title" class="wire-dialog__title">{title}</h2>
- <p class="wire-dialog__description">{description}</p>
- <div class="wire-cookie-list">
- <label class="wire-cookie-option">
- <span>
- <strong>Essential</strong>
- <small>Required for security and core functionality.</small>
- </span>
- <input type="checkbox" checked disabled />
- </label>
- <label class="wire-cookie-option">
- <span>
- <strong>Analytics</strong>
- <small>Helps improve product performance.</small>
- </span>
- <input type="checkbox" checked="{analytics}" @change="analytics = event.target.checked" />
- </label>
- <label class="wire-cookie-option">
- <span>
- <strong>Marketing</strong>
- <small>Supports relevant campaigns and measurement.</small>
- </span>
- <input type="checkbox" checked="{marketing}" @change="marketing = event.target.checked" />
- </label>
- </div>
- <div class="wire-dialog__actions wire-dialog__actions--wrap">
- <button type="button" class="wire-btn wire-btn--ghost" @click="analytics = false; marketing = false">{rejectLabel}</button>
- <button type="button" class="wire-btn wire-btn--default" @click="analytics = true; marketing = true">{acceptLabel}</button>
- <button type="button" class="wire-btn wire-btn--primary" @click="visible = false">{saveLabel}</button>
- </div>
- </section>
- </div>
- }
-}
-Reusable cookie table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CookieTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="CookieTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CookieTable.wrn
component CookieTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable coordinates input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CoordinatesInput
- label="Coordinates"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CoordinatesInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Coordinates" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CoordinatesInput.wrn
component CoordinatesInput {
- props {
- label = "Coordinates"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable coordinates picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CoordinatesPicker
- label="Coordinates"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CoordinatesPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Coordinates" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CoordinatesPicker.wrn
component CoordinatesPicker {
- props {
- label = "Coordinates"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable copy button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CopyButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="CopyButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CopyButton.wrn
component CopyButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot />
- </button>
- }
-}
-Reusable copy code button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CopyCodeButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="CopyCodeButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CopyCodeButton.wrn
component CopyCodeButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable copy secret field component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CopySecretField
- label="CopySecret"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CopySecretField".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CopySecret" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CopySecretField.wrn
component CopySecretField {
- props {
- label = "CopySecret"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable cost breakdown chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CostBreakdownChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="CostBreakdownChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CostBreakdownChart.wrn
component CostBreakdownChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable cost summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CostSummary
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CostSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CostSummary.wrn
component CostSummary {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable counter component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Counter
- label="Status"
- variant="default"
-/>Legacy mount name: data-component="Counter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Status" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Counter.wrn
component Counter {
- props {
- label = "Status"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--counter {class}">{label}<slot />
- </span>
- }
-}
-Reusable country calling code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CountryCallingCodeInput
- label="CountryCallingCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CountryCallingCodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CountryCallingCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CountryCallingCodeInput.wrn
component CountryCallingCodeInput {
- props {
- label = "CountryCallingCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable country calling code selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CountryCallingCodeSelector
- label="CountryCallingCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CountryCallingCodeSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CountryCallingCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CountryCallingCodeSelector.wrn
component CountryCallingCodeSelector {
- props {
- label = "CountryCallingCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable country selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CountrySelector
- label="Country"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CountrySelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Country" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CountrySelector.wrn
component CountrySelector {
- props {
- label = "Country"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable coupon input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CouponInput
- label="Coupon"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CouponInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Coupon" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CouponInput.wrn
component CouponInput {
- props {
- label = "Coupon"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable credit amount input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CreditAmountInput
- label="CreditAmount"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CreditAmountInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CreditAmount" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CreditAmountInput.wrn
component CreditAmountInput {
- props {
- label = "CreditAmount"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable cron builder component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CronBuilder
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CronBuilder".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CronBuilder.wrn
component CronBuilder {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable cron input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CronInput
- label="Cron"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CronInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Cron" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CronInput.wrn
component CronInput {
- props {
- label = "Cron"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable csv upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CsvUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CsvUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CsvUpload.wrn
component CsvUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable c t a section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CTASection
- eyebrow="Ready?"
- title="Start building today"
- description="description"
- primaryLabel="Get started"
- primaryHref="#"
-/>Legacy mount name: data-component="CTASection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "Ready?" |
title | string | Optional | "Start building today" |
description | string | Optional | "" |
primaryLabel | string | Optional | "Get started" |
primaryHref | string | Optional | "#" |
secondaryLabel | string | Optional | "Contact sales" |
secondaryHref | string | Optional | "#" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/CTASection.wrn
component CTASection {
- props {
- class = ""
- eyebrow = "Ready?"
- title = "Start building today"
- description = ""
- primaryLabel = "Get started"
- primaryHref = "#"
- secondaryLabel = "Contact sales"
- secondaryHref = "#"
- }
- view {
- <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 text-center text-white shadow-2xl {class}">
- <p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p>
- <h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2>
- <p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p>
- <div class="mt-8 flex flex-wrap justify-center gap-3">
- <a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a>
- <a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a>
- </div>
- </section>
- }
-}
-Reusable currency input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CurrencyInput
- label="Currency"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CurrencyInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Currency" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CurrencyInput.wrn
component CurrencyInput {
- props {
- label = "Currency"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable currency selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CurrencySelector
- label="Currency"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CurrencySelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Currency" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CurrencySelector.wrn
component CurrencySelector {
- props {
- label = "Currency"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable current password input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CurrentPasswordInput
- label="CurrentPassword"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="CurrentPasswordInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "CurrentPassword" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CurrentPasswordInput.wrn
component CurrentPasswordInput {
- props {
- label = "CurrentPassword"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable customer logo component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CustomerLogo
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CustomerLogo".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CustomerLogo.wrn
component CustomerLogo {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable customer story card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<CustomerStoryCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="CustomerStoryCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/CustomerStoryCard.wrn
component CustomerStoryCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable danger button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DangerButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="DangerButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DangerButton.wrn
component DangerButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--danger {class}">{label}<slot />
- </button>
- }
-}
-Reusable data protection card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DataProtectionCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DataProtectionCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DataProtectionCard.wrn
component DataProtectionCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable data retention table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DataRetentionTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="DataRetentionTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DataRetentionTable.wrn
component DataRetentionTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable date input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateInput
- id="id"
- name="name"
- label="Date"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="DateInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Date" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/DateInput.wrn
component DateInput {
- props {
- class = ""
- id: string = ""
- name: string = ""
- label: string = "Date"
- value: string = ""
- placeholder: string = ""
- help: string = ""
- error: string = ""
- required: boolean = false
- disabled: boolean = false
- readonly: boolean = false
- autocomplete: string = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="date" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable date range calendar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateRangeCalendar
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DateRangeCalendar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DateRangeCalendar.wrn
component DateRangeCalendar {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable date range picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateRangePicker
- label="Date range"
- startName="startDate"
- endName="endDate"
-/>Legacy mount name: data-component="DateRangePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Date range" |
startName | string | Optional | "startDate" |
endName | string | Optional | "endDate" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/DateRangePicker.wrn
component DateRangePicker {
- props {
- class = ""
- label = "Date range"
- startName = "startDate"
- endName = "endDate"
- }
- view {
- <fieldset class="{class}">
- <legend class="mb-2 text-sm font-semibold">{label}</legend>
- <div class="grid gap-3 sm:grid-cols-2">
- <DateInput id="{startName}" name="{startName}" label="Start date" />
- <DateInput id="{endName}" name="{endName}" label="End date" />
- </div>
- </fieldset>
- }
-}
-Reusable date range slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateRangeSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DateRangeSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DateRangeSlider.wrn
component DateRangeSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable date time input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateTimeInput
- id="id"
- name="name"
- label="DateTime"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="DateTimeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "DateTime" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/DateTimeInput.wrn
component DateTimeInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "DateTime"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="datetime-local" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable date time picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateTimePicker
- id="datetime-picker"
- name="datetime"
- label="Date and time"
- value="value"
- min="min"
-/>Legacy mount name: data-component="DateTimePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "datetime-picker" |
name | string | Optional | "datetime" |
label | string | Optional | "Date and time" |
value | string | Optional | "" |
min | string | Optional | "" |
max | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/DateTimePicker.wrn
component DateTimePicker {
- props {
- id = "datetime-picker"
- name = "datetime"
- label = "Date and time"
- value = ""
- min = ""
- max = ""
- required = false
- disabled = false
- class = ""
- }
- view {
- <div class="wire-field {class}">
- <label for="{id}" class="wire-label">{label}</label>
- <input id="{id}" name="{name}" type="datetime-local" value="{value}" min="{min}" max="{max}" required="{required}" disabled="{disabled}" class="wire-input" />
- </div>
- }
-}
-Reusable date time range picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DateTimeRangePicker
- label="DateTimeRange"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DateTimeRangePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "DateTimeRange" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DateTimeRangePicker.wrn
component DateTimeRangePicker {
- props {
- label = "DateTimeRange"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable decimal input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DecimalInput
- label="Decimal"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DecimalInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Decimal" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DecimalInput.wrn
component DecimalInput {
- props {
- label = "Decimal"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable definition list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DefinitionList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="DefinitionList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DefinitionList.wrn
component DefinitionList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable delete confirmation dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeleteConfirmationDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="DeleteConfirmationDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeleteConfirmationDialog.wrn
component DeleteConfirmationDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable delivery preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeliveryPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DeliveryPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeliveryPreview.wrn
component DeliveryPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable delivery status chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeliveryStatusChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="DeliveryStatusChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeliveryStatusChart.wrn
component DeliveryStatusChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable delivery status timeline component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeliveryStatusTimeline
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="DeliveryStatusTimeline".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeliveryStatusTimeline.wrn
component DeliveryStatusTimeline {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable demo request form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DemoRequestForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DemoRequestForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DemoRequestForm.wrn
component DemoRequestForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable department input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DepartmentInput
- label="Department"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DepartmentInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Department" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DepartmentInput.wrn
component DepartmentInput {
- props {
- label = "Department"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable deprecated feature alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeprecatedFeatureAlert
- label="DeprecatedFeature"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="DeprecatedFeatureAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "DeprecatedFeature" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeprecatedFeatureAlert.wrn
component DeprecatedFeatureAlert {
- props {
- label = "DeprecatedFeature"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable description list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DescriptionList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="DescriptionList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DescriptionList.wrn
component DescriptionList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable desktop navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DesktopNavigation
- label="Primary navigation"
- items="[]"
-/>Legacy mount name: data-component="DesktopNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Primary navigation" |
items | string | Optional | [] |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/DesktopNavigation.wrn
component DesktopNavigation {
- props {
- label = "Primary navigation"
- items = []
- class = ""
- }
- view {
- <nav aria-label="{label}" class="wire-desktop-nav {class}">
- <ul>{#each items as item}<li>
- <a href="{item.href}" aria-current="{item.current ? 'page' : 'false'}">{item.label}</a>
- </li>{/each}</ul>
- </nav>
- }
-}
-Reusable developer c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeveloperCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="DeveloperCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeveloperCTA.wrn
component DeveloperCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable developer hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeveloperHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="DeveloperHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeveloperHero.wrn
component DeveloperHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable developer page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeveloperPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="DeveloperPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeveloperPageShell.wrn
component DeveloperPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable developer search component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeveloperSearch
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DeveloperSearch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeveloperSearch.wrn
component DeveloperSearch {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable developers mega menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DevelopersMegaMenu />Legacy mount name: data-component="DevelopersMegaMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/DevelopersMegaMenu.wrn
component DevelopersMegaMenu {
- props {
- class: string = ""
- }
- view {
- <div
- class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
- >
- <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
- <div class="grid gap-8 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.8fr)]">
- <!-- Developer resources -->
- <section>
- <div class="mb-5 flex items-end justify-between gap-6">
- <div>
- <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
- Developers
- </p>
- <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
- Build secure identity into any application
- </h2>
- <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
- Explore documentation, APIs, SDKs, examples, and tools built
- for modern development teams.
- </p>
- </div>
- <a
- href="/docs"
- class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
- >
- Open documentation
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- <div class="grid gap-2 md:grid-cols-2">
- <!-- Documentation -->
- <a
- href="/docs"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--book-open] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Documentation
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Guides for authentication, users, organizations, and
- authorization.
- </span>
- </span>
- </a>
- <!-- API reference -->
- <a
- href="/docs/api"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--braces] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- API reference
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Complete endpoint, request, response, and error
- documentation.
- </span>
- </span>
- </a>
- <!-- SDKs -->
- <a
- href="/sdks"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--package] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- SDKs
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Official libraries for JavaScript, TypeScript, Go, Java,
- Python, and more.
- </span>
- </span>
- </a>
- <!-- Examples -->
- <a
- href="/examples"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--flask-conical] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Examples
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Ready-to-run projects for common frameworks and identity
- flows.
- </span>
- </span>
- </a>
- <!-- Webhooks -->
- <a
- href="/docs/webhooks"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--webhook] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Webhooks
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Respond to user, session, organization, and security events.
- </span>
- </span>
- </a>
- <!-- Changelog -->
- <a
- href="/changelog"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--history] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Changelog
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Review platform releases, improvements, and migration notes.
- </span>
- </span>
- </a>
- </div>
- <a
- href="/docs"
- class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
- >
- Open documentation
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- </section>
- <!-- Developer toolkit -->
- <aside
- class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20"
- >
- <!-- Decorative glow -->
- <div aria-hidden="true" class="absolute -right-20 -top-20 h-48 w-48 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div aria-hidden="true" class="absolute -bottom-24 -left-20 h-48 w-48 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" >
- </div>
- <div class="relative">
- <!-- Header -->
- <div class="flex items-center justify-between gap-4">
- <span
- class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
- >
- <span class="icon-[lucide--code-2] h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- Developer toolkit
- </span>
- <span class="inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
- <span class="relative flex h-2 w-2">
- <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60">
- </span>
- <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500">
- </span>
- </span>
-
- APIs operational
- </span>
- </div>
- <!-- Intro -->
- <div
- class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20"
- >
- <span class="icon-[lucide--blocks] h-6 w-6" aria-hidden="true" >
- </span>
- </div>
- <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
- Everything developers need
- </h3>
- <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
- Build, test, and ship secure identity flows with APIs, SDKs,
- examples, webhooks, and complete documentation.
- </p>
- <!-- Toolkit links -->
- <div class="mt-6 grid gap-3">
- <!-- Documentation -->
- <a
- href="/docs"
- class="group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-indigo-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-500/30 dark:hover:bg-white/10"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--book-open] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-950 dark:text-white">
- Documentation
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Guides and platform concepts
- </span>
- </span>
- </span>
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 dark:group-hover:text-indigo-300" aria-hidden="true" >
- </span>
- </a>
- <!-- API reference -->
- <a
- href="/docs/api"
- class="group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-violet-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-violet-500/30 dark:hover:bg-white/10"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300"
- >
- <span class="icon-[lucide--braces] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-950 dark:text-white">
- API reference
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Endpoints, requests, and responses
- </span>
- </span>
- </span>
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 dark:group-hover:text-violet-300" aria-hidden="true" >
- </span>
- </a>
- <!-- SDKs -->
- <a
- href="/sdks"
- class="group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-cyan-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-cyan-500/30 dark:hover:bg-white/10"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-300"
- >
- <span class="icon-[lucide--package] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-950 dark:text-white">
- Official SDKs
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Libraries for your preferred stack
- </span>
- </span>
- </span>
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 dark:group-hover:text-cyan-300" aria-hidden="true" >
- </span>
- </a>
- </div>
- <!-- Actions -->
- <div class="mt-6 grid grid-cols-2 gap-3">
- <a
- href="/docs/quickstart"
- class="group flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- >
- Start building
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- <a
- href="/examples"
- class="flex h-11 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white/80 px-4 text-sm font-semibold text-slate-700 transition hover:border-indigo-300 hover:bg-white hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--flask-conical] h-4 w-4" aria-hidden="true" >
- </span>
-
- Examples
- </a>
- </div>
- </div>
- </aside>
- </div>
- <!-- Bottom developer links -->
- <div
- class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
- >
- <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
- <a
- href="/docs/authentication"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--fingerprint] h-4 w-4" aria-hidden="true" >
- </span>
-
- Authentication guides
- </a>
- <a
- href="/docs/organizations"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--building-2] h-4 w-4" aria-hidden="true" >
- </span>
-
- Organizations
- </a>
- <a
- href="/docs/authorization"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--shield-keyhole] h-4 w-4" aria-hidden="true" >
- </span>
-
- Authorization
- </a>
- <a
- href="/status"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="relative flex h-2 w-2">
- <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60">
- </span>
- <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500">
- </span>
- </span>
-
- System status
- </a>
- </div>
- <a
- href="/support/developers"
- class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- Developer support
-
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- </div>
- }
-}
-Reusable developers menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DevelopersMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="DevelopersMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DevelopersMenu.wrn
component DevelopersMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable device card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DeviceCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DeviceCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DeviceCard.wrn
component DeviceCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable disclosure component.
Components are auto-discovered. Use the component directly in any .wrn view:
<disclosure
- summary="Details"
-/>Legacy mount name: data-component="disclosure".
| Prop | Type | Requirement | Default |
|---|---|---|---|
summary | string | Optional | "Details" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/disclosure.wrn
// Expand/collapse section using native <details> (no JS).
-component Disclosure {
- props {
- summary = "Details"
- class = ""
- }
- view {
- <details class="wire-disclosure {class}">
- <summary class="wire-disclosure__summary">{summary}</summary>
- <div class="wire-disclosure__body">
- <slot>
- </slot>
- </div>
- </details>
- }
-}
-Reusable discount input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DiscountInput
- label="Discount"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DiscountInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Discount" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DiscountInput.wrn
component DiscountInput {
- props {
- label = "Discount"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable display heading component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DisplayHeading
- text="text"
- align="start"
-/>Legacy mount name: data-component="DisplayHeading".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DisplayHeading.wrn
component DisplayHeading {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--display wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable display name input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DisplayNameInput
- label="DisplayName"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DisplayNameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "DisplayName" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DisplayNameInput.wrn
component DisplayNameInput {
- props {
- label = "DisplayName"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable do not sell link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DoNotSellLink
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="DoNotSellLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DoNotSellLink.wrn
component DoNotSellLink {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable document preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DocumentPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DocumentPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DocumentPreview.wrn
component DocumentPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable document upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DocumentUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DocumentUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DocumentUpload.wrn
component DocumentUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable domain input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DomainInput
- label="Domain"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DomainInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Domain" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DomainInput.wrn
component DomainInput {
- props {
- label = "Domain"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable donut chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DonutChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="DonutChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DonutChart.wrn
component DonutChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable download action component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DownloadAction
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="DownloadAction".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DownloadAction.wrn
component DownloadAction {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable download button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DownloadButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="DownloadButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DownloadButton.wrn
component DownloadButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot />
- </button>
- }
-}
-Reusable download gate form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DownloadGateForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DownloadGateForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DownloadGateForm.wrn
component DownloadGateForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable download policy button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DownloadPolicyButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="DownloadPolicyButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DownloadPolicyButton.wrn
component DownloadPolicyButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable download resource form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DownloadResourceForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DownloadResourceForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DownloadResourceForm.wrn
component DownloadResourceForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable dropdown menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DropdownMenu
- label="Menu"
-/>Legacy mount name: data-component="DropdownMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Menu" |
defaultclickInstalled source: components/DropdownMenu.wrn
component DropdownMenu {
- props {
- class = ""
- label = "Menu"
- }
- state open = false
- view {
- <div class="relative inline-block {class}">
- <button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span>
- </button>
- <div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900">
- <slot />
- </div>
- </div>
- }
-}
-Reusable dropdown navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DropdownNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="DropdownNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DropdownNavigation.wrn
component DropdownNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable duration input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DurationInput
- label="Duration"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DurationInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Duration" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DurationInput.wrn
component DurationInput {
- props {
- label = "Duration"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable duration picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DurationPicker
- label="Duration"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="DurationPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Duration" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DurationPicker.wrn
component DurationPicker {
- props {
- label = "Duration"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable duration slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<DurationSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="DurationSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/DurationSlider.wrn
component DurationSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable elevated card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ElevatedCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="ElevatedCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ElevatedCard.wrn
component ElevatedCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--elevated {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable email body editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EmailBodyEditor
- label="EmailBody"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="EmailBodyEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "EmailBody" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EmailBodyEditor.wrn
component EmailBodyEditor {
- props {
- label = "EmailBody"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable email composer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EmailComposer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="EmailComposer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EmailComposer.wrn
component EmailComposer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable email input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EmailInput
- id="email"
- name="email"
- label="Email"
- value="value"
- placeholder="you@company.com"
-/>Legacy mount name: data-component="EmailInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "email" |
name | string | Optional | "email" |
label | string | Optional | "Email" |
value | string | Optional | "" |
placeholder | string | Optional | "you@company.com" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "email" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/EmailInput.wrn
component EmailInput {
- props {
- class = ""
- id = "email"
- name = "email"
- label = "Email"
- value = ""
- placeholder = "you@company.com"
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = "email"
- }
- view {
- <div class="wire-auth-field {class}">
- <label for="{id}" class="wire-label">{label}{#if required}<span class="wire-required"> *</span>{/if}</label>
- <div class="wire-auth-field__control">
- <span class="wire-auth-field__icon icon-[lucide--mail]" aria-hidden="true">
- </span>
- <input id="{id}" name="{name}" type="email" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{id}-help {id}-error" class="wire-input wire-auth-field__input" />
- </div>
- {#if help && !error}<p id="{id}-help" class="wire-field-message wire-field-message--help">{help}</p>{/if}
- {#if error}<p id="{id}-error" role="alert" class="wire-field-message wire-field-message--error">{error}</p>{/if}
- </div>
- }
-}
-Reusable emoji picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EmojiPicker
- label="Emoji"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="EmojiPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Emoji" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EmojiPicker.wrn
component EmojiPicker {
- props {
- label = "Emoji"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable empty state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EmptyState
- eyebrow="eyebrow"
- title="Nothing found"
- description="description"
- iconClass="icon-[lucide--inbox]"
- primaryLabel="primaryLabel"
-/>Legacy mount name: data-component="EmptyState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Nothing found" |
description | string | Optional | "" |
iconClass | string | Optional | "icon-[lucide--inbox]" |
primaryLabel | string | Optional | "" |
primaryHref | string | Optional | "" |
secondaryLabel | string | Optional | "" |
secondaryHref | string | Optional | "" |
compact | boolean | Optional | false |
centered | boolean | Optional | true |
suggestions | string | Optional | [] |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/EmptyState.wrn
component EmptyState {
- props {
- class: string = ""
- eyebrow = ""
- title = "Nothing found"
- description = ""
-
- iconClass = "icon-[lucide--inbox]"
-
- primaryLabel = ""
- primaryHref = ""
-
- secondaryLabel = ""
- secondaryHref = ""
-
- compact = false
- centered = true
-
- suggestions = []
- }
-
- view {
- <section
- aria-labelledby="empty-state-title"
- class="w-full {class}"
- class:py-6="compact"
- class:sm:py-8="compact"
- class:py-8="!compact"
- class:sm:py-10="!compact"
- >
- <div
- class=" relative mx-auto w-full overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50/90 via-white to-violet-50/80 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20 "
- class:max-w-3xl="centered"
- >
- <!-- Background decoration -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class="absolute -right-20 -top-24 h-56 w-56 rounded-full bg-indigo-200/30 blur-3xl dark:bg-indigo-500/10">
- </div>
- <div class="absolute -bottom-24 -left-20 h-56 w-56 rounded-full bg-violet-200/20 blur-3xl dark:bg-violet-500/5">
- </div>
- <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/70 to-transparent dark:via-indigo-500/20">
- </div>
- </div>
- <div
- class="relative"
- class:px-6="compact"
- class:py-8="compact"
- class:sm:px-8="compact"
- class:sm:py-9="compact"
- class:px-6="!compact"
- class:py-10="!compact"
- class:sm:px-10="!compact"
- class:sm:py-12="!compact"
- class:lg:px-12="!compact"
- class:text-center="centered"
- >
- <div
- class=" {compact ? 'max-w-xl' : 'max-w-2xl'} {centered ? 'mx-auto' : 'mr-auto'} "
- class:max-w-xl="compact"
- class:max-w-2xl="!compact"
- >
- <!-- Icon -->
- <div
- class="flex"
- class:justify-center="centered"
- >
- <span
- class="grid place-items-center rounded-2xl bg-indigo-50 text-indigo-600 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20"
- class:h-12="compact"
- class:w-12="compact"
- class:h-14="!compact"
- class:w-14="!compact"
- >
- <span class="{iconClass}" class:h-5="compact" class:w-5="compact" class:h-6="!compact" class:w-6="!compact" aria-hidden="true" >
- </span>
- </span>
- </div>
- <!-- Eyebrow -->
- <p
- class="mt-5 text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
- class:hidden="eyebrow === ''"
- >
- {eyebrow}
- </p>
- <!-- Title -->
- <h2
- id="empty-state-title"
- class="font-bold tracking-tight text-slate-950 dark:text-white"
- class:mt-5="eyebrow === ''"
- class:mt-3="eyebrow !== ''"
- class:text-xl="compact"
- class:leading-tight="compact"
- class:sm:text-2xl="compact"
- class:text-2xl="!compact"
- class:leading-tight="!compact"
- class:sm:text-3xl="!compact"
- class:lg:text-[2rem]="!compact"
- >
- {title}
- </h2>
- <!-- Description -->
- <p
- class="mx-auto mt-3 max-w-xl text-sm leading-6 text-slate-600 dark:text-slate-400"
- class:hidden="description === ''"
- class:sm:text-base="!compact"
- class:sm:leading-7="!compact"
- >
- {description}
- </p>
- <!-- Suggestions -->
- <div
- class="mt-6 flex flex-wrap gap-2"
- class:hidden="suggestions.length === 0"
- class:justify-center="centered"
- >
- {#each suggestions.slice(0, 4) as suggestion}
- <a
- href="{suggestion.href}"
- class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300"
- >
- <span class="{suggestion.iconClass} h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- {suggestion.label}
- </a>
- {/each}
- </div>
- <!-- Actions -->
- <div
- class="flex flex-col gap-3 sm:flex-row"
- class:mt-7="suggestions.length === 0"
- class:mt-6="suggestions.length > 0"
- class:hidden="primaryLabel === '' && secondaryLabel === ''"
- class:justify-center="centered"
- >
- <a
- href="{secondaryHref}"
- class="h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
- class:hidden="secondaryLabel === ''"
- class:inline-flex="secondaryLabel !== ''"
- >
- {secondaryLabel}
- </a>
- <a
- href="{primaryHref}"
- class="group h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- class:hidden="primaryLabel === ''"
- class:inline-flex="primaryLabel !== ''"
- >
- {primaryLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- </div>
- </div>
- </section>
- }
-}
-Reusable encryption diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EncryptionDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="EncryptionDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EncryptionDiagram.wrn
component EncryptionDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable enterprise c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EnterpriseCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="EnterpriseCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EnterpriseCTA.wrn
component EnterpriseCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable enterprise hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EnterpriseHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="EnterpriseHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EnterpriseHero.wrn
component EnterpriseHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable enterprise pricing card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EnterprisePricingCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="EnterprisePricingCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EnterprisePricingCard.wrn
component EnterprisePricingCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable environment selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EnvironmentSelector
- label="Environment"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="EnvironmentSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Environment" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EnvironmentSelector.wrn
component EnvironmentSelector {
- props {
- label = "Environment"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable environment switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EnvironmentSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="EnvironmentSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EnvironmentSwitcher.wrn
component EnvironmentSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable error actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ErrorActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorActions.wrn
component ErrorActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable error card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="ErrorCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorCard.wrn
component ErrorCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--error {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable error code component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorCode
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ErrorCode".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorCode.wrn
component ErrorCode {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable error hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ErrorHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorHero.wrn
component ErrorHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable error illustration component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorIllustration
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ErrorIllustration".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorIllustration.wrn
component ErrorIllustration {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable error page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ErrorPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorPageShell.wrn
component ErrorPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable error page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorPage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ErrorPage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorPage.wrn
component ErrorPage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable error state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorState
- type="error"
- eyebrow="eyebrow"
- title="Something went wrong"
- description="description"
- errorCode="errorCode"
-/>Legacy mount name: data-component="ErrorState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
type | string | Optional | "error" |
eyebrow | string | Optional | "" |
title | string | Optional | "Something went wrong" |
description | string | Optional | "" |
errorCode | string | Optional | "" |
iconClass | string | Optional | "" |
primaryLabel | string | Optional | "" |
primaryHref | string | Optional | "" |
secondaryLabel | string | Optional | "" |
secondaryHref | string | Optional | "" |
retryLabel | string | Optional | "" |
retryAction | string | Optional | "" |
centered | boolean | Optional | true |
compact | boolean | Optional | false |
details | string | Optional | [] |
This component does not declare a slot.
clickInstalled source: components/ErrorState.wrn
component ErrorState {
- props {
- class: string = ""
- type = "error"
-
- eyebrow = ""
- title = "Something went wrong"
- description = ""
-
- errorCode = ""
-
- iconClass = ""
-
- primaryLabel = ""
- primaryHref = ""
-
- secondaryLabel = ""
- secondaryHref = ""
-
- retryLabel = ""
- retryAction = ""
-
- centered = true
- compact = false
-
- details = []
- }
-
- view {
- <section
- aria-labelledby="error-state-title"
- role="{type === 'error' ? 'alert' : 'status'}"
- class="w-full {class}"
- class:py-6="compact"
- class:sm:py-8="compact"
- class:py-8="!compact"
- class:sm:py-10="!compact"
- >
- <div
- class=" relative w-full overflow-hidden rounded-3xl border shadow-xl {type === 'warning' ? 'border-amber-200/80 bg-linear-to-br from-amber-50 via-white to-orange-50 shadow-amber-950/5 dark:border-amber-500/20 dark:from-amber-500/10 dark:via-slate-900 dark:to-orange-500/10' : type === 'forbidden' ? 'border-violet-200/80 bg-linear-to-br from-violet-50 via-white to-indigo-50 shadow-violet-950/5 dark:border-violet-500/20 dark:from-violet-500/10 dark:via-slate-900 dark:to-indigo-500/10' : type === 'offline' ? 'border-slate-200 bg-linear-to-br from-slate-100 via-white to-indigo-50 shadow-slate-950/5 dark:border-white/10 dark:from-white/5 dark:via-slate-900 dark:to-indigo-500/10' : 'border-rose-200/80 bg-linear-to-br from-rose-50 via-white to-orange-50 shadow-rose-950/5 dark:border-rose-500/20 dark:from-rose-500/10 dark:via-slate-900 dark:to-orange-500/10' } "
- class:mx-auto="centered"
- class:max-w-3xl="centered"
- >
- <!-- Decorative background -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class=" absolute -right-20 -top-24 h-64 w-64 rounded-full blur-3xl {type === 'warning' ? 'bg-amber-300/25 dark:bg-amber-500/10' : type === 'forbidden' ? 'bg-violet-300/25 dark:bg-violet-500/10' : type === 'offline' ? 'bg-slate-300/25 dark:bg-slate-500/10' : 'bg-rose-300/25 dark:bg-rose-500/10' } " >
- </div>
- <div class=" absolute -bottom-28 -left-20 h-64 w-64 rounded-full blur-3xl {type === 'warning' ? 'bg-orange-300/20 dark:bg-orange-500/10' : type === 'forbidden' ? 'bg-indigo-300/20 dark:bg-indigo-500/10' : type === 'offline' ? 'bg-indigo-300/15 dark:bg-indigo-500/5' : 'bg-orange-300/20 dark:bg-orange-500/10' } " >
- </div>
- <div class=" absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent to-transparent {type === 'warning' ? 'via-amber-400/60 dark:via-amber-400/20' : type === 'forbidden' ? 'via-violet-400/60 dark:via-violet-400/20' : type === 'offline' ? 'via-slate-400/50 dark:via-slate-400/20' : 'via-rose-400/60 dark:via-rose-400/20' } " >
- </div>
- </div>
- <div
- class="relative"
- class:px-6="compact"
- class:py-8="compact"
- class:sm:px-8="compact"
- class:sm:py-9="compact"
- class:px-6="!compact"
- class:py-10="!compact"
- class:sm:px-10="!compact"
- class:sm:py-12="!compact"
- class:lg:px-12="!compact"
- class:text-center="centered"
- class:text-left="!centered"
- >
- <div class="{compact ? 'max-w-xl' : 'max-w-2xl'} {centered ? 'mx-auto' : 'mr-auto'}" >
- <!-- Icon -->
- <div
- class="flex"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- <div class="relative">
- <div aria-hidden="true" class=" absolute inset-1 rounded-2xl blur-xl {type === 'warning' ? 'bg-amber-500/25' : type === 'forbidden' ? 'bg-violet-500/25' : type === 'offline' ? 'bg-slate-500/20' : 'bg-rose-500/25' } " >
- </div>
- <span
- class=" relative grid place-items-center rounded-2xl border bg-white/90 shadow-lg backdrop-blur-sm {compact ? 'h-12 w-12' : 'h-14 w-14'} {type === 'warning' ? 'border-amber-200 text-amber-700 shadow-amber-950/10 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300' : type === 'forbidden' ? 'border-violet-200 text-violet-700 shadow-violet-950/10 dark:border-violet-500/20 dark:bg-violet-500/10 dark:text-violet-300' : type === 'offline' ? 'border-slate-200 text-slate-700 shadow-slate-950/10 dark:border-white/10 dark:bg-white/5 dark:text-slate-300' : 'border-rose-200 text-rose-700 shadow-rose-950/10 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300' } "
- >
- <span class=" {compact ? 'h-5 w-5' : 'h-6 w-6'} {iconClass !== '' ? iconClass : type === 'warning' ? 'icon-[lucide--triangle-alert]' : type === 'forbidden' ? 'icon-[lucide--shield-alert]' : type === 'offline' ? 'icon-[lucide--wifi-off]' : 'icon-[lucide--circle-x]' } " aria-hidden="true" >
- </span>
- </span>
- </div>
- </div>
- <!-- Error code -->
- <div
- class="mt-5 flex"
- class:hidden="errorCode === ''"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- <span
- class=" rounded-full px-3 py-1 text-xs font-bold tracking-[0.14em] {type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'forbidden' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : type === 'offline' ? 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-slate-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' } "
- >
- {errorCode}
- </span>
- </div>
- <!-- Eyebrow -->
- <p
- class=" text-xs font-bold uppercase tracking-[0.18em] {errorCode !== '' ? 'mt-4' : 'mt-5'} {type === 'warning' ? 'text-amber-700 dark:text-amber-400' : type === 'forbidden' ? 'text-violet-700 dark:text-violet-400' : type === 'offline' ? 'text-slate-600 dark:text-slate-400' : 'text-rose-700 dark:text-rose-400' } "
- class:hidden="eyebrow === ''"
- >
- {eyebrow}
- </p>
- <!-- Title -->
- <h2
- id="error-state-title"
- class=" font-bold leading-tight tracking-tight text-slate-950 dark:text-white {eyebrow !== '' || errorCode !== '' ? 'mt-3' : 'mt-5'} {compact ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl lg:text-[2rem]'} "
- >
- {title}
- </h2>
- <!-- Description -->
- <p
- class=" mt-3 max-w-xl text-sm leading-6 text-slate-600 dark:text-slate-400 {!compact ? 'sm:text-base sm:leading-7' : ''} {centered ? 'mx-auto' : 'mr-auto'} "
- class:hidden="description === ''"
- >
- {description}
- </p>
- <!-- Details -->
- <div
- class="mt-6 flex flex-wrap gap-x-5 gap-y-3"
- class:hidden="details.length === 0"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- {#each details.slice(0, 4) as detail}
- <div class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 dark:text-slate-300">
- <span
- class=" grid h-6 w-6 shrink-0 place-items-center rounded-full {type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'forbidden' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : type === 'offline' ? 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-slate-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' } "
- >
- <span class="{detail.iconClass} h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </span>
-
- {detail.label}
- </div>
- {/each}
- </div>
- <!-- Actions -->
- <div
- class="mt-7 flex flex-col gap-3 sm:flex-row"
- class:hidden="primaryLabel === '' && secondaryLabel === '' && retryLabel === ''"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- <!-- Secondary -->
- <a
- href="{secondaryHref}"
- class="h-11 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-4 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
- class:hidden="secondaryLabel === ''"
- class:inline-flex="secondaryLabel !== ''"
- >
- {secondaryLabel}
- </a>
- <!-- Retry -->
- <button
- type="button"
- @click="{retryAction}"
- class=" group h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 {type === 'warning' ? 'bg-amber-600 shadow-amber-600/20 hover:bg-amber-500 focus-visible:ring-amber-500' : type === 'forbidden' ? 'bg-violet-600 shadow-violet-600/20 hover:bg-violet-500 focus-visible:ring-violet-500' : type === 'offline' ? 'bg-slate-800 shadow-slate-900/20 hover:bg-slate-700 focus-visible:ring-slate-500 dark:bg-slate-200 dark:text-slate-950 dark:hover:bg-white' : 'bg-rose-600 shadow-rose-600/20 hover:bg-rose-500 focus-visible:ring-rose-500' } "
- class:hidden="retryLabel === ''"
- class:inline-flex="retryLabel !== ''"
- >
- <span class="icon-[lucide--rotate-cw] h-4 w-4 transition-transform group-hover:rotate-45" aria-hidden="true" >
- </span>
-
- {retryLabel}
- </button>
- <!-- Primary link -->
- <a
- href="{primaryHref}"
- class=" group h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 {type === 'warning' ? 'bg-amber-600 shadow-amber-600/20 hover:bg-amber-500 focus-visible:ring-amber-500' : type === 'forbidden' ? 'bg-violet-600 shadow-violet-600/20 hover:bg-violet-500 focus-visible:ring-violet-500' : type === 'offline' ? 'bg-slate-800 shadow-slate-900/20 hover:bg-slate-700 focus-visible:ring-slate-500 dark:bg-slate-200 dark:text-slate-950 dark:hover:bg-white' : 'bg-rose-600 shadow-rose-600/20 hover:bg-rose-500 focus-visible:ring-rose-500' } "
- class:hidden="primaryLabel === ''"
- class:inline-flex="primaryLabel !== ''"
- >
- {primaryLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- </div>
- </div>
- </section>
- }
-}
-Reusable error support link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ErrorSupportLink
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ErrorSupportLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ErrorSupportLink.wrn
component ErrorSupportLink {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable estimated cost summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EstimatedCostSummary
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="EstimatedCostSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EstimatedCostSummary.wrn
component EstimatedCostSummary {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable event table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EventTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="EventTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EventTable.wrn
component EventTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable expandable text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ExpandableText
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ExpandableText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ExpandableText.wrn
component ExpandableText {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable expiry date time picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ExpiryDateTimePicker
- label="ExpiryDateTime"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ExpiryDateTimePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ExpiryDateTime" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ExpiryDateTimePicker.wrn
component ExpiryDateTimePicker {
- props {
- label = "ExpiryDateTime"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable export progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ExportProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ExportProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ExportProgress.wrn
component ExportProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable external link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ExternalLink
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ExternalLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ExternalLink.wrn
component ExternalLink {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable eyebrow text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<EyebrowText
- text="text"
- align="start"
-/>Legacy mount name: data-component="EyebrowText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/EyebrowText.wrn
component EyebrowText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--small wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable factor card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FactorCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FactorCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FactorCard.wrn
component FactorCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable fallback route builder component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FallbackRouteBuilder
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FallbackRouteBuilder".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FallbackRouteBuilder.wrn
component FallbackRouteBuilder {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable fallback route diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FallbackRouteDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="FallbackRouteDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FallbackRouteDiagram.wrn
component FallbackRouteDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable faq component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FAQ
- eyebrow="eyebrow"
- title="Frequently asked questions"
- description="description"
- items="[]"
- centered="true"
-/>Legacy mount name: data-component="FAQ".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Frequently asked questions" |
description | string | Optional | "" |
items | string | Optional | [] |
centered | boolean | Optional | true |
allowMultiple | boolean | Optional | false |
defaultOpenIndex | number | Optional | 0 |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/FAQ.wrn
component FAQ {
- props {
- class = ""
- eyebrow = ""
- title = "Frequently asked questions"
- description = ""
- items = []
- centered = true
- allowMultiple = false
- defaultOpenIndex = 0
- }
- view {
- <FAQAccordion class="{class}" eyebrow="{eyebrow}" title="{title}" description="{description}" items="{items}" centered="{centered}" allowMultiple="{allowMultiple}" defaultOpenIndex="{defaultOpenIndex}" />
- }
-}
-Reusable faqaccordion component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FAQAccordion
- eyebrow="eyebrow"
- title="Frequently asked questions"
- description="description"
- items="[]"
- centered="true"
-/>Legacy mount name: data-component="FAQAccordion".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Frequently asked questions" |
description | string | Optional | "" |
items | string | Optional | [] |
centered | boolean | Optional | true |
compact | boolean | Optional | false |
allowMultiple | boolean | Optional | false |
defaultOpenIndex | number | Optional | 0 |
showContact | boolean | Optional | false |
contactText | string | Optional | "Still have questions?" |
contactLabel | string | Optional | "Contact support" |
contactHref | string | Optional | "/support" |
This component does not declare a slot.
clickInstalled source: components/FAQAccordion.wrn
component FAQAccordion {
- props {
- class = ""
- eyebrow = ""
- title = "Frequently asked questions"
- description = ""
-
- items = []
-
- centered = true
- compact = false
-
- allowMultiple = false
- defaultOpenIndex = 0
-
- showContact = false
- contactText = "Still have questions?"
- contactLabel = "Contact support"
- contactHref = "/support"
- }
-
- state openIndexes = defaultOpenIndex >= 0 ? [defaultOpenIndex] : []
-
- functions {
- function isOpen(index) {
- return openIndexes.includes(index)
- }
-
- function toggleItem(index) {
- if (isOpen(index)) {
- openIndexes = openIndexes.filter(
- (itemIndex) => itemIndex !== index
- )
- } else if (allowMultiple) {
- openIndexes = [...openIndexes, index]
- } else {
- openIndexes = [index]
- }
- }
- }
-
- view {
- <section
- aria-labelledby="faq-accordion-title"
- class="w-full px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
- class:py-10="compact"
- class:sm:py-12="compact"
- class:py-14="!compact"
- class:sm:py-16="!compact"
- class:lg:py-20="!compact"
- class:hidden="items.length === 0"
- >
- <div
- class="mx-auto w-full"
- class:max-w-5xl="centered"
- class:max-w-7xl="!centered"
- >
- <div
- class="gap-10"
- class:flex="centered"
- class:flex-col="centered"
- class:grid="!centered"
- class:lg:grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)]="!centered"
- class:lg:items-start="!centered"
- class:lg:gap-14="!centered"
- >
- <!-- Heading -->
- <div
- class="min-w-0"
- class:mx-auto="centered"
- class:max-w-3xl="centered"
- class:text-center="centered"
- class:max-w-xl="!centered"
- class:lg:sticky="!centered"
- class:lg:top-24="!centered"
- >
- <!-- Eyebrow -->
- <p
- class="text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
- class:hidden="eyebrow === ''"
- >
- {eyebrow}
- </p>
- <!-- Title -->
- <h2
- id="faq-accordion-title"
- class="font-bold leading-tight tracking-tight text-slate-950 dark:text-white"
- class:mt-3="eyebrow !== ''"
- class:text-2xl="compact"
- class:sm:text-3xl="compact"
- class:text-3xl="!compact"
- class:sm:text-4xl="!compact"
- >
- {title}
- </h2>
- <!-- Description -->
- <p
- class="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400"
- class:hidden="description === ''"
- class:sm:text-base="!compact"
- class:mx-auto="centered"
- class:max-w-2xl="centered"
- class:max-w-xl="!centered"
- >
- {description}
- </p>
- <!-- Contact card -->
- <div
- class="mt-7 rounded-2xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-5 shadow-sm dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-white/[0.03] dark:to-violet-500/10"
- class:hidden="!showContact"
- >
- <div
- class="flex items-center gap-4"
- class:justify-center="centered"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-white text-indigo-600 shadow-sm ring-1 ring-inset ring-indigo-200 dark:bg-white/5 dark:text-indigo-300 dark:ring-indigo-500/20"
- >
- <span class="icon-[lucide--messages-square] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div
- class="min-w-0"
- class:text-left="centered"
- >
- <p class="text-sm font-semibold text-slate-950 dark:text-white">
- {contactText}
- </p>
-
- {#if contactLabel !== '' && contactHref !== ''}
- <a
- href="{contactHref}"
- class="mt-1 inline-flex items-center gap-1.5 text-sm font-bold text-indigo-600 transition-colors duration-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- {contactLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- {/if}
- </div>
- </div>
- </div>
- </div>
- <!-- Accordion -->
- <div class="min-w-0">
- <div class="space-y-3">
- {#each items as item, index}
- <article
- class=" overflow-hidden rounded-2xl border transition-[border-color,background-color,box-shadow,transform] duration-300 ease-out {isOpen(index) ? 'border-indigo-200 bg-indigo-50/60 shadow-md shadow-indigo-950/5 dark:border-indigo-500/20 dark:bg-indigo-500/10' : 'border-slate-200 bg-white shadow-sm hover:-translate-y-0.5 hover:border-indigo-200 hover:bg-slate-50 dark:border-white/10 dark:bg-white/[0.03] dark:hover:border-indigo-500/20 dark:hover:bg-white/5' } "
- >
- <h3>
- <button
- type="button"
- @click="toggleItem(index)"
- aria-expanded="{isOpen(index)}"
- aria-controls="faq-answer-{index}"
- class="flex w-full items-center justify-between gap-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500"
- class:px-4="compact"
- class:py-4="compact"
- class:px-5="!compact"
- class:py-5="!compact"
- class:sm:px-6="!compact"
- >
- <span class="flex min-w-0 items-start gap-3">
- <!-- Number -->
- <span
- class=" mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-lg text-xs font-bold transition-[background-color,color,transform] duration-300 ease-out {isOpen(index) ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400' } "
- >
- {index + 1}
- </span>
- <!-- Question -->
- <span
- class="font-semibold leading-6 text-slate-950 dark:text-white"
- class:text-sm="compact"
- class:text-base="!compact"
- >
- {item.question}
- </span>
- </span>
- <!-- Toggle icon -->
- <span
- class=" grid h-8 w-8 shrink-0 place-items-center rounded-lg transition-[background-color,color,transform] duration-300 ease-out {isOpen(index) ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400' } "
- >
- <span class=" icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-300 ease-out {isOpen(index) ? 'rotate-180' : 'rotate-0'} " aria-hidden="true" >
- </span>
- </span>
- </button>
- </h3>
- <div
- id="faq-answer-{index}"
- role="region"
- aria-hidden="{!isOpen(index)}"
- class=" grid overflow-hidden transition-[grid-template-rows,opacity] duration-300 ease-out {isOpen(index) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0' } "
- >
- <div class="min-h-0 overflow-hidden">
- <div class="border-t border-indigo-200/60 dark:border-indigo-500/15">
- <div
- class=" text-sm leading-7 text-slate-600 transition-[transform,opacity] duration-300 ease-out dark:text-slate-400 {compact ? 'px-4 pb-4 pt-3' : 'px-5 pb-5 pt-4 sm:px-6 sm:pb-6 sm:pt-5' } {isOpen(index) ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0' } "
- >
- <p class="m-0">
- {item.answer}
- </p>
-
- {#if item.linkLabel !== '' && item.href !== ''}
- <a
- href="{item.href}"
- class=" group inline-flex items-center gap-2 text-sm font-bold text-indigo-600 transition-colors duration-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 "
- >
- {item.linkLabel}
-
- <span class=" icon-[lucide--arrow-up-right] h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 " aria-hidden="true" >
- </span>
- </a>
- {/if}
- </div>
- </div>
- </div>
- </div>
- </article>
- {/each}
- </div>
- </div>
- </div>
- </div>
- <!-- Tailwind safelist for utilities used by reactive class directives -->
- <span class=" hidden flex flex-col grid justify-center lg:gap-14 lg:grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] lg:items-start lg:py-20 lg:sticky lg:top-24 max-w-2xl max-w-3xl max-w-5xl max-w-7xl max-w-xl mt-3 mx-auto px-4 px-5 py-4 py-5 py-10 py-14 sm:px-6 sm:py-12 sm:py-16 sm:text-base sm:text-3xl sm:text-4xl text-base text-center text-left text-sm text-2xl text-3xl grid-rows-[0fr] grid-rows-[1fr] opacity-0 opacity-100 -translate-y-2 translate-y-0 rotate-0 rotate-180 " >
- </span>
- </section>
- }
-}
-Reusable favicon upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FaviconUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FaviconUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FaviconUpload.wrn
component FaviconUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable fax input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FaxInput
- label="Fax"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FaxInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Fax" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FaxInput.wrn
component FaxInput {
- props {
- label = "Fax"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable feature card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureCard
- icon="icon-[lucide--sparkles]"
- title="Feature"
- description="description"
- href="href"
-/>Legacy mount name: data-component="FeatureCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
icon | string | Optional | "icon-[lucide--sparkles]" |
title | string | Optional | "Feature" |
description | string | Optional | "" |
href | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/FeatureCard.wrn
component FeatureCard {
- props {
- class = ""
- icon = "icon-[lucide--sparkles]"
- title = "Feature"
- description = ""
- href = ""
- }
- view {
- <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}">
- <div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300">
- <span class="{icon} size-5" aria-hidden="true">
- </span>
- </div>
- <h3 class="mt-5 text-lg font-bold">{title}</h3>
- <p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true">
- </span>
- </a>{/if}</article>
- }
-}
-Reusable feature checklist component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureChecklist
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FeatureChecklist".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureChecklist.wrn
component FeatureChecklist {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="presentation" class="grid grid-cols-[auto_1fr] gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
- <span class="grid size-10 place-items-center rounded-xl bg-violet-500/10 text-violet-500">
- <span class="icon-[lucide--list-checks] size-5" aria-hidden="true">
- </span>
- </span>
- <div class="grid gap-2">
- <span class="h-2 w-4/5 rounded-full bg-slate-200 dark:bg-slate-800">
- </span>
- <span class="h-2 w-3/5 rounded-full bg-slate-200 dark:bg-slate-800">
- </span>
- <span class="h-2 w-2/3 rounded-full bg-slate-200 dark:bg-slate-800">
- </span>
- </div>
- </div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable feature comparison table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureComparisonTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="FeatureComparisonTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureComparisonTable.wrn
component FeatureComparisonTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable feature details panel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureDetailsPanel
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="FeatureDetailsPanel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureDetailsPanel.wrn
component FeatureDetailsPanel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable feature grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureGrid
- columns="3"
-/>Legacy mount name: data-component="FeatureGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
columns | number | Optional | 3 |
className | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureGrid.wrn
component FeatureGrid {
- props {
- columns = 3
- className = ""
- }
- view {
- <div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'} {className}">
- <slot />
- </div>
- }
-}
-Reusable feature icon card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureIconCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FeatureIconCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureIconCard.wrn
component FeatureIconCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable feature list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="FeatureList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureList.wrn
component FeatureList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable feature tabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureTabs
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FeatureTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureTabs.wrn
component FeatureTabs {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
-
- view {
- <article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}">
- {#if image}
- <img src="{image}" alt="{alt}" class="aspect-[16/9] w-full border-b border-[var(--wire-color-border,#e2e8f0)] object-cover" />
- {/if}
-
- <div class="flex flex-1 flex-col p-6">
- {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
- {#if title}<h3 class="mt-4 text-xl font-semibold leading-snug tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
- {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
- <div class="mt-5">
- <slot />
- </div>
- {#if href}
- <a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
- <span>{actionLabel}</span>
- <span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
- </a>
- {/if}
- </div>
- </article>
- }
-}
-Reusable feature timeline component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureTimeline
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="FeatureTimeline".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureTimeline.wrn
component FeatureTimeline {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable feature unavailable state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeatureUnavailableState
- label="FeatureUnavailable"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="FeatureUnavailableState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FeatureUnavailable" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeatureUnavailableState.wrn
component FeatureUnavailableState {
- props {
- label = "FeatureUnavailable"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable featured blog card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FeaturedBlogCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FeaturedBlogCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FeaturedBlogCard.wrn
component FeaturedBlogCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable field actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FieldActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="FieldActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FieldActions.wrn
component FieldActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable file list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FileList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="FileList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FileList.wrn
component FileList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable file size input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FileSizeInput
- label="FileSize"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FileSizeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FileSize" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FileSizeInput.wrn
component FileSizeInput {
- props {
- label = "FileSize"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable file size label component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FileSizeLabel
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FileSizeLabel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FileSizeLabel.wrn
component FileSizeLabel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable file type badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FileTypeBadge
- label="FileType"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="FileTypeBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FileType" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FileTypeBadge.wrn
component FileTypeBadge {
- props {
- label = "FileType"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable file-upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<file-upload
- store="public"
- endpoint="/api/upload"
- accept="accept"
- multiple="false"
- max="0"
-/>Legacy mount name: data-component="file-upload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
store | string | Optional | "public" |
endpoint | string | Optional | "/api/upload" |
accept | string | Optional | "" |
multiple | boolean | Optional | false |
max | number | Optional | 0 |
label | string | Optional | "Drag files here or click to browse" |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/file-upload.wrn
// Drag-and-drop file uploader with per-file progress. Progressive enhancement:
-// the markup is inert until /__wrnexus/uploader.js loads (auto-injected when a
-// page contains `data-uploader`). Pairs with `handleUpload` on the server —
-// files POST to `endpoint`, which returns `{ ok, files:[{ key, url, … }] }`.
-//
-// <div data-component="file-upload" store="public" endpoint="/api/upload"
-// accept="image/*" max="10000000" multiple="true">
- </div>
-component FileUpload {
- props {
- store = "public"
- endpoint = "/api/upload"
- accept = ""
- multiple = false
- max = 0
- label = "Drag files here or click to browse"
- class = ""
- }
- view {
- <div class="wire-fileupload {class}" data-uploader="{store}" data-endpoint="{endpoint}" data-accept="{accept}" data-multiple="{multiple}" data-max="{max}" data-label="{label}">
- </div>
- }
-}
-Reusable filter bar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FilterBar
- label="Filters"
- clearLabel="Clear filters"
- showClear="true"
-/>Legacy mount name: data-component="FilterBar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Filters" |
clearLabel | string | Optional | "Clear filters" |
showClear | boolean | Optional | true |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FilterBar.wrn
component FilterBar {
- props {
- label = "Filters"
- clearLabel = "Clear filters"
- showClear = true
- class = ""
- }
- view {
- <section aria-label="{label}" class="wire-filter-bar {class}">
- <div class="wire-filter-bar__controls">
- <slot />
- </div>
- <button data-show="showClear" type="reset" class="wire-btn wire-btn--ghost wire-btn--sm">{clearLabel}</button>
- </section>
- }
-}
-Reusable filter menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FilterMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="FilterMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FilterMenu.wrn
component FilterMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable filter search input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FilterSearchInput
- label="FilterSearch"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FilterSearchInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FilterSearch" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FilterSearchInput.wrn
component FilterSearchInput {
- props {
- label = "FilterSearch"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable filterable table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FilterableTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="FilterableTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FilterableTable.wrn
component FilterableTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable final c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FinalCTA
- label="Get started"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="FinalCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Get started" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FinalCTA.wrn
component FinalCTA {
- props {
- label = "Get started"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
-
- view {
- <span class="contents {class}">
- {#if href}
- {#if variant === "primary"}
- <a
- href="{href}"
- class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] no-underline transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
- aria-disabled="{disabled}"
- >
- <span>{label}</span>
- <span
- class="transition-transform duration-200 group-hover:translate-x-0.5"
- aria-hidden="true"
- >
- →
- </span>
- <slot />
- </a>
- {:else}
- <a
- href="{href}"
- class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] no-underline transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
- aria-disabled="{disabled}"
- >
- <span>{label}</span>
- <span
- class="transition-transform duration-200 group-hover:translate-x-0.5"
- aria-hidden="true"
- >
- →
- </span>
- <slot />
- </a>
- {/if}
- {:else}
- {#if variant === "primary"}
- <button
- type="{type}"
- disabled="{disabled}"
- class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
- >
- <span>{label}</span>
- <slot />
- </button>
- {:else}
- <button
- type="{type}"
- disabled="{disabled}"
- class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
- >
- <span>{label}</span>
- <slot />
- </button>
- {/if}
- {/if}
- </span>
- }
-}
-Reusable first name input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FirstNameInput
- label="FirstName"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FirstNameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FirstName" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FirstNameInput.wrn
component FirstNameInput {
- props {
- label = "FirstName"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable flex component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Flex />Legacy mount name: data-component="Flex".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Flex.wrn
component Flex {
- props {
- class = ""
- }
- view {
- <div class="wire-flex {class}">
- <slot />
- </div>
- }
-}
-Reusable font picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FontPicker
- label="Font"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FontPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Font" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FontPicker.wrn
component FontPicker {
- props {
- label = "Font"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable font size picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FontSizePicker
- label="FontSize"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FontSizePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FontSize" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FontSizePicker.wrn
component FontSizePicker {
- props {
- label = "FontSize"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable font weight picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FontWeightPicker
- label="FontWeight"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FontWeightPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FontWeight" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FontWeightPicker.wrn
component FontWeightPicker {
- props {
- label = "FontWeight"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable footer language switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FooterLanguageSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="FooterLanguageSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FooterLanguageSwitcher.wrn
component FooterLanguageSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable footer status indicator component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FooterStatusIndicator
- label="FooterStatus"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="FooterStatusIndicator".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "FooterStatus" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FooterStatusIndicator.wrn
component FooterStatusIndicator {
- props {
- label = "FooterStatus"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable forbidden page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ForbiddenPage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ForbiddenPage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ForbiddenPage.wrn
component ForbiddenPage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable forbidden state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ForbiddenState
- label="Forbidden"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ForbiddenState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Forbidden" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ForbiddenState.wrn
component ForbiddenState {
- props {
- label = "Forbidden"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable forgot password form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ForgotPasswordForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ForgotPasswordForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ForgotPasswordForm.wrn
component ForgotPasswordForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-auth-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable form actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="FormActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormActions.wrn
component FormActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable form alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormAlert
- label="Form"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="FormAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Form" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormAlert.wrn
component FormAlert {
- props {
- label = "Form"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable form dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="FormDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormDialog.wrn
component FormDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable form error summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormErrorSummary
- title="Please fix the following"
- visible="true"
-/>Legacy mount name: data-component="FormErrorSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
title | string | Optional | "Please fix the following" |
visible | boolean | Optional | true |
defaultThis component does not declare a custom event.
Installed source: components/FormErrorSummary.wrn
component FormErrorSummary {
- props {
- class = ""
- title = "Please fix the following"
- visible = true
- }
- view {
- <section data-show="visible" role="alert" aria-live="polite" class="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200 {class}">
- <h3 class="font-semibold">{title}</h3>
- <div class="mt-2 text-sm">
- <slot />
- </div>
- </section>
- }
-}
-Reusable form error component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormError
- id="id"
- message="message"
-/>Legacy mount name: data-component="FormError".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "" |
message | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormError.wrn
component FormError {
- props {
- id = ""
- message = ""
- class = ""
- }
- view {
- <p id="{id}" role="alert" aria-live="polite" class="wire-field-message wire-field-message--error {class}">{message}<slot />
- </p>
- }
-}
-Reusable form field component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormField
- label="Field"
- help="help"
- error="error"
- required="false"
-/>Legacy mount name: data-component="FormField".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Field" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
defaultThis component does not declare a custom event.
Installed source: components/FormField.wrn
component FormField {
- props {
- class = ""
- label = "Field"
- help = ""
- error = ""
- required = false
- }
- view {
- <div class="space-y-2 {class}">
- <div class="text-sm font-semibold">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </div>
- <slot />
- <p data-show="help && !error" class="text-sm text-slate-500">{help}</p>
- <p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p>
- </div>
- }
-}
-Reusable form grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="FormGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormGrid.wrn
component FormGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable form group component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormGroup
- label="Form"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="FormGroup".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Form" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormGroup.wrn
component FormGroup {
- props {
- label = "Form"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable form help text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormHelpText
- id="id"
- text="text"
-/>Legacy mount name: data-component="FormHelpText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "" |
text | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormHelpText.wrn
component FormHelpText {
- props {
- id = ""
- text = ""
- class = ""
- }
- view {
- <p id="{id}" class="wire-field-message wire-field-message--help {class}">{text}<slot />
- </p>
- }
-}
-Reusable form label component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormLabel
- for="for"
- label="Label"
- required="false"
- optional="false"
-/>Legacy mount name: data-component="FormLabel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
for | string | Optional | "" |
label | string | Optional | "Label" |
required | boolean | Optional | false |
optional | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/FormLabel.wrn
component FormLabel {
- props {
- for = ""
- label = "Label"
- required = false
- optional = false
- class = ""
- }
- view {
- <label for="{for}" class="wire-label {class}">{label}<span data-show="required" class="wire-required" aria-hidden="true"> *</span>
- <span data-show="optional && !required" class="wire-optional"> (optional)</span>
- </label>
- }
-}
-Reusable form progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="FormProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormProgress.wrn
component FormProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable form row component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormRow
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="FormRow".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormRow.wrn
component FormRow {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable form section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FormSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="FormSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FormSection.wrn
component FormSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Form
- action="action"
- method="post"
- name="name"
- loading="false"
-/>Legacy mount name: data-component="Form".
| Prop | Type | Requirement | Default |
|---|---|---|---|
action | string | Optional | "" |
method | string | Optional | "post" |
name | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Form.wrn
component Form {
- props {
- action = ""
- method = "post"
- name = ""
- loading = false
- class = ""
- }
- view {
- <form action="{action}" method="{method}" name="{name}" aria-busy="{loading}" class="wire-form {class}">
- <slot />
- </form>
- }
-}
-Reusable full bleed component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FullBleed />Legacy mount name: data-component="FullBleed".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FullBleed.wrn
component FullBleed {
- props {
- class = ""
- }
- view {
- <div class="wire-full-bleed {class}">
- <slot />
- </div>
- }
-}
-Reusable fullscreen dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FullscreenDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="FullscreenDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FullscreenDialog.wrn
component FullscreenDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable funnel chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<FunnelChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="FunnelChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/FunnelChart.wrn
component FunnelChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable geo chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GeoChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="GeoChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GeoChart.wrn
component GeoChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable geofence editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GeofenceEditor
- label="Geofence"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="GeofenceEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Geofence" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GeofenceEditor.wrn
component GeofenceEditor {
- props {
- label = "Geofence"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable ghost button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GhostButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="GhostButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GhostButton.wrn
component GhostButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot />
- </button>
- }
-}
-Reusable glass card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GlassCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="GlassCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GlassCard.wrn
component GlassCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--glass {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable global search component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GlobalSearch
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="GlobalSearch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GlobalSearch.wrn
component GlobalSearch {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable gradient c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GradientCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="GradientCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GradientCTA.wrn
component GradientCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable gradient picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GradientPicker
- label="Gradient"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="GradientPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Gradient" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GradientPicker.wrn
component GradientPicker {
- props {
- label = "Gradient"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable gradient stop editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GradientStopEditor
- label="GradientStop"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="GradientStopEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "GradientStop" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GradientStopEditor.wrn
component GradientStopEditor {
- props {
- label = "GradientStop"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable guide card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GuideCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="GuideCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GuideCard.wrn
component GuideCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable guide checklist component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GuideChecklist
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="GuideChecklist".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GuideChecklist.wrn
component GuideChecklist {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable guide difficulty badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GuideDifficultyBadge
- label="GuideDifficulty"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="GuideDifficultyBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "GuideDifficulty" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GuideDifficultyBadge.wrn
component GuideDifficultyBadge {
- props {
- label = "GuideDifficulty"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable guide grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GuideGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="GuideGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GuideGrid.wrn
component GuideGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable guide step component.
Components are auto-discovered. Use the component directly in any .wrn view:
<GuideStep
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="GuideStep".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/GuideStep.wrn
component GuideStep {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable header actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeaderActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="HeaderActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeaderActions.wrn
component HeaderActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Header
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="Header".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Header.wrn
component Header {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable health indicator component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HealthIndicator
- label="Health"
- variant="default"
-/>Legacy mount name: data-component="HealthIndicator".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Health" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HealthIndicator.wrn
component HealthIndicator {
- props {
- label = "Health"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--healthindicator {class}">{label}<slot />
- </span>
- }
-}
-Reusable hero actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="HeroActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroActions.wrn
component HeroActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable hero code panel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroCodePanel
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="HeroCodePanel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroCodePanel.wrn
component HeroCodePanel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable hero gradient text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroGradientText
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="HeroGradientText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroGradientText.wrn
component HeroGradientText {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable hero primary action component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroPrimaryAction
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="HeroPrimaryAction".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroPrimaryAction.wrn
component HeroPrimaryAction {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable hero product preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroProductPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="HeroProductPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroProductPreview.wrn
component HeroProductPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable hero secondary action component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroSecondaryAction
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="HeroSecondaryAction".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroSecondaryAction.wrn
component HeroSecondaryAction {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable hero trust text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HeroTrustText
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="HeroTrustText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HeroTrustText.wrn
component HeroTrustText {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Hero
- eyebrow="eyebrow"
- title="Build faster with WRNexusJS"
- highlight="highlight"
- description="description"
- primaryLabel="Get started"
-/>Legacy mount name: data-component="Hero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Build faster with WRNexusJS" |
highlight | string | Optional | "" |
description | string | Optional | "" |
primaryLabel | string | Optional | "Get started" |
primaryHref | string | Optional | "#" |
secondaryLabel | string | Optional | "Learn more" |
secondaryHref | string | Optional | "#" |
align | string | Optional | "center" |
defaultThis component does not declare a custom event.
Installed source: components/Hero.wrn
component Hero {
- props {
- class = ""
- eyebrow = ""
- title = "Build faster with WRNexusJS"
- highlight = ""
- description = ""
- primaryLabel = "Get started"
- primaryHref = "#"
- secondaryLabel = "Learn more"
- secondaryHref = "#"
- align = "center"
- }
- view {
- <section class="relative isolate overflow-hidden {class}">
- <div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]">
- </div>
- <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
- <div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}">
- <Badge data-show="eyebrow" label="{eyebrow}" variant="brand" />
- <h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span>
- </h1>
- <p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p>
- <div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}">
- <a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a>
- <a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a>
- </div>
- <div class="mt-10">
- <slot />
- </div>
- </div>
- </div>
- </section>
- }
-}
-Reusable hex color input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HexColorInput
- label="HexColor"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="HexColorInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "HexColor" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HexColorInput.wrn
component HexColorInput {
- props {
- label = "HexColor"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable hidden field component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HiddenField
- label="Hidden"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="HiddenField".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Hidden" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HiddenField.wrn
component HiddenField {
- props {
- label = "Hidden"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable highlight text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HighlightText
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="HighlightText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HighlightText.wrn
component HighlightText {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable holiday calendar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HolidayCalendar
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="HolidayCalendar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HolidayCalendar.wrn
component HolidayCalendar {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable hostname input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HostnameInput
- label="Hostname"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="HostnameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Hostname" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HostnameInput.wrn
component HostnameInput {
- props {
- label = "Hostname"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable hour picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HourPicker
- label="Hour"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="HourPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Hour" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HourPicker.wrn
component HourPicker {
- props {
- label = "Hour"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable hsl color input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HslColorInput
- label="HslColor"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="HslColorInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "HslColor" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HslColorInput.wrn
component HslColorInput {
- props {
- label = "HslColor"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable hstack component.
Components are auto-discovered. Use the component directly in any .wrn view:
<hstack
- gap="4"
- align="center"
-/>Legacy mount name: data-component="hstack".
| Prop | Type | Requirement | Default |
|---|---|---|---|
gap | string | Optional | "4" |
align | string | Optional | "center" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/hstack.wrn
// Horizontal stack: row layout with a gap and cross-axis alignment.
-// align: start | center | end | stretch
-component HStack {
- props {
- gap = "4"
- align = "center"
- class = ""
- }
- view {
- <div class="wire-hstack wire-gap-{gap} wire-items-{align} {class}">
- <slot>
- </slot>
- </div>
- }
-}
-Reusable html editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HtmlEditor
- label="Html"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="HtmlEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Html" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HtmlEditor.wrn
component HtmlEditor {
- props {
- label = "Html"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable human approval step component.
Components are auto-discovered. Use the component directly in any .wrn view:
<HumanApprovalStep
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="HumanApprovalStep".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/HumanApprovalStep.wrn
component HumanApprovalStep {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable icon button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IconButton
- label="Action"
- icon="•"
- variant="ghost"
- disabled="false"
-/>Legacy mount name: data-component="IconButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Action" |
icon | string | Optional | "•" |
variant | string | Optional | "ghost" |
disabled | boolean | Optional | false |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/IconButton.wrn
component IconButton {
- props {
- class = ""
- label = "Action"
- icon = "•"
- variant = "ghost"
- disabled = false
- }
- view {
- <button type="button" aria-label="{label}" title="{label}" disabled="{disabled}" class="inline-flex size-11 items-center justify-center rounded-xl transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {variant === 'primary' ? 'bg-violet-600 text-white hover:bg-violet-700' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'} {class}">
- <span aria-hidden="true">{icon}</span>
- </button>
- }
-}
-Reusable icon picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IconPicker
- label="Icon"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="IconPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Icon" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IconPicker.wrn
component IconPicker {
- props {
- label = "Icon"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable icon selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IconSelector
- label="Icon"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="IconSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Icon" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IconSelector.wrn
component IconSelector {
- props {
- label = "Icon"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable icon component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Icon
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Icon".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Icon.wrn
component Icon {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable identifier input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IdentifierInput
- label="Identifier"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="IdentifierInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Identifier" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IdentifierInput.wrn
component IdentifierInput {
- props {
- label = "Identifier"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable illustration component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Illustration
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Illustration".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Illustration.wrn
component Illustration {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable image compression preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ImageCompressionPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ImageCompressionPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ImageCompressionPreview.wrn
component ImageCompressionPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable image editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ImageEditor
- label="Image"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ImageEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Image" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ImageEditor.wrn
component ImageEditor {
- props {
- label = "Image"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable image preview dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ImagePreviewDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="ImagePreviewDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ImagePreviewDialog.wrn
component ImagePreviewDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable image selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ImageSelector
- label="Image"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ImageSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Image" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ImageSelector.wrn
component ImageSelector {
- props {
- label = "Image"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable image upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ImageUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ImageUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ImageUpload.wrn
component ImageUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable import progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ImportProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ImportProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ImportProgress.wrn
component ImportProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable incident alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentAlert
- label="Incident"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="IncidentAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Incident" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentAlert.wrn
component IncidentAlert {
- props {
- label = "Incident"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable incident banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentBanner
- label="Incident"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="IncidentBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Incident" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentBanner.wrn
component IncidentBanner {
- props {
- label = "Incident"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable incident card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="IncidentCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentCard.wrn
component IncidentCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable incident list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="IncidentList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentList.wrn
component IncidentList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable incident response flow component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentResponseFlow
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="IncidentResponseFlow".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentResponseFlow.wrn
component IncidentResponseFlow {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable incident severity badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentSeverityBadge
- label="IncidentSeverity"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="IncidentSeverityBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "IncidentSeverity" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentSeverityBadge.wrn
component IncidentSeverityBadge {
- props {
- label = "IncidentSeverity"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable incident timeline component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IncidentTimeline
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="IncidentTimeline".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IncidentTimeline.wrn
component IncidentTimeline {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable industry badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IndustryBadge
- label="Industry"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="IndustryBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Industry" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IndustryBadge.wrn
component IndustryBadge {
- props {
- label = "Industry"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable industry selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IndustrySelector
- label="Industry"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="IndustrySelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Industry" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IndustrySelector.wrn
component IndustrySelector {
- props {
- label = "Industry"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable info card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<InfoCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="InfoCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/InfoCard.wrn
component InfoCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--info {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable inline alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<InlineAlert
- label="Inline"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="InlineAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Inline" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/InlineAlert.wrn
component InlineAlert {
- props {
- label = "Inline"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable inline code component.
Components are auto-discovered. Use the component directly in any .wrn view:
<InlineCode
- text="text"
- align="start"
-/>Legacy mount name: data-component="InlineCode".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/InlineCode.wrn
component InlineCode {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--small wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable inline component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Inline
- gap="4"
-/>Legacy mount name: data-component="Inline".
| Prop | Type | Requirement | Default |
|---|---|---|---|
gap | string | Optional | "4" |
className | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Inline.wrn
component Inline {
- props {
- gap = "4"
- className = ""
- }
- view {
- <div class="flex flex-wrap items-center gap-{gap} {className}">
- <slot />
- </div>
- }
-}
-Reusable inset panel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<InsetPanel />Legacy mount name: data-component="InsetPanel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/InsetPanel.wrn
component InsetPanel {
- props {
- class = ""
- }
- view {
- <div class="wire-inset-panel {class}">
- <slot />
- </div>
- }
-}
-Reusable integer input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IntegerInput
- label="Integer"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="IntegerInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Integer" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IntegerInput.wrn
component IntegerInput {
- props {
- label = "Integer"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable integration card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IntegrationCard
- title="title"
- description="description"
- href="href"
- icon="icon-[lucide--plug-zap]"
-/>Legacy mount name: data-component="IntegrationCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
icon | string | Optional | "icon-[lucide--plug-zap]" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IntegrationCard.wrn
component IntegrationCard {
- props {
- title = ""
- description = ""
- href = ""
- icon = "icon-[lucide--plug-zap]"
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}">
- <span class="wire-catalog-card__icon">
- <span class="{icon} size-5" aria-hidden="true">
- </span>
- </span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>{/if}</article>
- }
-}
-Reusable invoice line item component.
Components are auto-discovered. Use the component directly in any .wrn view:
<InvoiceLineItem
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="InvoiceLineItem".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/InvoiceLineItem.wrn
component InvoiceLineItem {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable invoice summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<InvoiceSummary
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="InvoiceSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/InvoiceSummary.wrn
component InvoiceSummary {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable ip address input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<IpAddressInput
- label="IpAddress"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="IpAddressInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "IpAddress" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/IpAddressInput.wrn
component IpAddressInput {
- props {
- label = "IpAddress"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable job card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<JobCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="JobCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/JobCard.wrn
component JobCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable job progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<JobProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="JobProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/JobProgress.wrn
component JobProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable job title input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<JobTitleInput
- label="JobTitle"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="JobTitleInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "JobTitle" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/JobTitleInput.wrn
component JobTitleInput {
- props {
- label = "JobTitle"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable json input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<JsonInput
- label="Json"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="JsonInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Json" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/JsonInput.wrn
component JsonInput {
- props {
- label = "Json"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable json viewer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<JsonViewer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="JsonViewer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/JsonViewer.wrn
component JsonViewer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable key value table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<KeyValueTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="KeyValueTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/KeyValueTable.wrn
component KeyValueTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable kyc document upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<KycDocumentUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="KycDocumentUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/KycDocumentUpload.wrn
component KycDocumentUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable language selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LanguageSelector
- label="Language"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LanguageSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Language" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LanguageSelector.wrn
component LanguageSelector {
- props {
- label = "Language"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable language switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LanguageSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="LanguageSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LanguageSwitcher.wrn
component LanguageSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable last name input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LastNameInput
- label="LastName"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LastNameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LastName" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LastNameInput.wrn
component LastNameInput {
- props {
- label = "LastName"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable latency metric component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LatencyMetric
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="LatencyMetric".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LatencyMetric.wrn
component LatencyMetric {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable latitude input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LatitudeInput
- label="Latitude"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LatitudeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Latitude" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LatitudeInput.wrn
component LatitudeInput {
- props {
- label = "Latitude"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable lead text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LeadText
- text="text"
- align="start"
-/>Legacy mount name: data-component="LeadText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LeadText.wrn
component LeadText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--lead wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable leadership grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LeadershipGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="LeadershipGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LeadershipGrid.wrn
component LeadershipGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable legal acceptance notice component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalAcceptanceNotice
- label="LegalAcceptance"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="LegalAcceptanceNotice".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LegalAcceptance" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalAcceptanceNotice.wrn
component LegalAcceptanceNotice {
- props {
- label = "LegalAcceptance"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable legal bullet list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalBulletList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="LegalBulletList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalBulletList.wrn
component LegalBulletList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable legal contact block component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalContactBlock
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="LegalContactBlock".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalContactBlock.wrn
component LegalContactBlock {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable legal definition list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalDefinitionList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="LegalDefinitionList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalDefinitionList.wrn
component LegalDefinitionList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable legal document header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalDocumentHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="LegalDocumentHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalDocumentHeader.wrn
component LegalDocumentHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable legal document layout component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalDocumentLayout
- title="Legal document"
- effectiveDate="effectiveDate"
- updatedDate="updatedDate"
-/>Legacy mount name: data-component="LegalDocumentLayout".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
title | string | Optional | "Legal document" |
effectiveDate | string | Optional | "" |
updatedDate | string | Optional | "" |
tocdefaultThis component does not declare a custom event.
Installed source: components/LegalDocumentLayout.wrn
component LegalDocumentLayout {
- props {
- class = ""
- title = "Legal document"
- effectiveDate = ""
- updatedDate = ""
- }
- view {
- <article class="grid max-w-7xl gap-10 lg:grid-cols-[16rem_minmax(0,1fr)] {class}">
- <aside class="lg:sticky lg:top-24 lg:self-start">
- <div class="text-sm font-semibold">On this page</div>
- <nav class="mt-4 text-sm text-slate-500">
- <slot name="toc" />
- </nav>
- </aside>
- <main class="min-w-0 max-w-3xl">
- <header class="border-b border-slate-200 pb-8 dark:border-slate-800">
- <h1 class="text-4xl font-black tracking-tight">{title}</h1>
- <div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500">
- <span data-show="effectiveDate">Effective: {effectiveDate}</span>
- <span data-show="updatedDate">Updated: {updatedDate}</span>
- </div>
- </header>
- <div class="prose prose-slate mt-8 max-w-none dark:prose-invert">
- <slot />
- </div>
- </main>
- </article>
- }
-}
-Reusable legal hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="LegalHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalHero.wrn
component LegalHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable legal language selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalLanguageSelector
- label="LegalLanguage"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LegalLanguageSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LegalLanguage" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalLanguageSelector.wrn
component LegalLanguageSelector {
- props {
- label = "LegalLanguage"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable legal notice component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalNotice
- label="Legal"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="LegalNotice".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Legal" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalNotice.wrn
component LegalNotice {
- props {
- label = "Legal"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable legal page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalPageShell />Legacy mount name: data-component="LegalPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
navigationdefaultThis component does not declare a custom event.
Installed source: components/LegalPageShell.wrn
component LegalPageShell {
- props {
- class = ""
- }
- view {
- <div class="wire-page-shell wire-page-shell--legal {class}">
- <aside class="wire-page-shell__aside">
- <slot name="navigation" />
- </aside>
- <main class="wire-page-shell__main">
- <slot />
- </main>
- </div>
- }
-}
-Reusable legal print button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalPrintButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="LegalPrintButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalPrintButton.wrn
component LegalPrintButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable legal region selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalRegionSelector
- label="LegalRegion"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LegalRegionSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LegalRegion" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalRegionSelector.wrn
component LegalRegionSelector {
- props {
- label = "LegalRegion"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable legal section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="LegalSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalSection.wrn
component LegalSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable legal summary component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalSummary
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="LegalSummary".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalSummary.wrn
component LegalSummary {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable legal table of contents component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalTableOfContents
- title="On this page"
- items="[]"
-/>Legacy mount name: data-component="LegalTableOfContents".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "On this page" |
items | string | Optional | [] |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/LegalTableOfContents.wrn
component LegalTableOfContents {
- props {
- title = "On this page"
- items = []
- class = ""
- }
- view {
- <nav aria-label="{title}" class="wire-legal-toc {class}">
- <h2>{title}</h2>
- <ol>{#each items as item}<li>
- <a href="{item.href}">{item.label}</a>
- </li>{/each}</ol>
- </nav>
- }
-}
-Reusable legal table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="LegalTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalTable.wrn
component LegalTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable legal version badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LegalVersionBadge
- label="LegalVersion"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="LegalVersionBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LegalVersion" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LegalVersionBadge.wrn
component LegalVersionBadge {
- props {
- label = "LegalVersion"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable letter spacing picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LetterSpacingPicker
- label="LetterSpacing"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LetterSpacingPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LetterSpacing" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LetterSpacingPicker.wrn
component LetterSpacingPicker {
- props {
- label = "LetterSpacing"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable license key input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LicenseKeyInput
- label="LicenseKey"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LicenseKeyInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LicenseKey" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LicenseKeyInput.wrn
component LicenseKeyInput {
- props {
- label = "LicenseKey"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable lightbox component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Lightbox
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="Lightbox".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Lightbox.wrn
component Lightbox {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable line chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LineChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="LineChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LineChart.wrn
component LineChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable line height picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LineHeightPicker
- label="LineHeight"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LineHeightPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "LineHeight" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LineHeightPicker.wrn
component LineHeightPicker {
- props {
- label = "LineHeight"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable link button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LinkButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="LinkButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LinkButton.wrn
component LinkButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot />
- </button>
- }
-}
-Reusable loading button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LoadingButton
- label="Continue"
- loadingLabel="Loading…"
- loading="false"
- disabled="false"
- type="button"
-/>Legacy mount name: data-component="LoadingButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Continue" |
loadingLabel | string | Optional | "Loading…" |
loading | boolean | Optional | false |
disabled | boolean | Optional | false |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/LoadingButton.wrn
component LoadingButton {
- props {
- label = "Continue"
- loadingLabel = "Loading…"
- loading = false
- disabled = false
- type = "button"
- variant = "primary"
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled || loading}" aria-disabled="{disabled || loading}" aria-busy="{loading}" class="wire-btn wire-btn--{variant} wire-loading-button {class}">
- <span data-show="loading" class="wire-spinner wire-spinner--inline" aria-hidden="true">
- </span>
- <span>{loading ? loadingLabel : label}</span>
- </button>
- }
-}
-Reusable locale selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LocaleSelector
- label="Locale"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LocaleSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Locale" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LocaleSelector.wrn
component LocaleSelector {
- props {
- label = "Locale"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable localized route link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LocalizedRouteLink
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="LocalizedRouteLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LocalizedRouteLink.wrn
component LocalizedRouteLink {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable location picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LocationPicker
- label="Location"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LocationPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Location" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LocationPicker.wrn
component LocationPicker {
- props {
- label = "Location"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable log table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LogTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="LogTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LogTable.wrn
component LogTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable logo cloud component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LogoCloud
- eyebrow="eyebrow"
- title="Trusted by teams building modern products"
- description="description"
- logos="[]"
- centered="true"
-/>Legacy mount name: data-component="LogoCloud".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Trusted by teams building modern products" |
description | string | Optional | "" |
logos | string | Optional | [] |
centered | boolean | Optional | true |
compact | boolean | Optional | false |
variant | string | Optional | "strip" |
grayscale | boolean | Optional | true |
showNames | boolean | Optional | false |
maxItems | number | Optional | 8 |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/LogoCloud.wrn
component LogoCloud {
- props {
- class: string = ""
- eyebrow = ""
- title = "Trusted by teams building modern products"
- description = ""
-
- logos = []
-
- centered = true
- compact = false
-
- variant = "strip"
- grayscale = true
- showNames = false
- maxItems = 8
- }
-
- view {
- <section
- aria-labelledby="logo-cloud-title"
- class="w-full px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
- class:py-10="compact"
- class:sm:py-12="compact"
- class:py-14="!compact"
- class:sm:py-16="!compact"
- class:lg:py-20="!compact"
- class:hidden="logos.length === 0"
- >
- <div
- class=" relative mx-auto w-full max-w-7xl overflow-hidden {variant === 'card' ? 'rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50/80 via-white to-violet-50/70 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20' : '' } "
- >
- <!-- Decorative background -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- class:hidden="variant !== 'card'"
- >
- <div class="absolute -right-24 -top-28 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10">
- </div>
- <div class="absolute -bottom-28 -left-24 h-64 w-64 rounded-full bg-violet-300/15 blur-3xl dark:bg-violet-500/5">
- </div>
- <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-400/60 to-transparent dark:via-indigo-400/20">
- </div>
- </div>
- <div
- class="relative"
- class:px-6="compact"
- class:py-8="compact"
- class:sm:px-8="compact"
- class:sm:py-10="compact"
- class:px-7="!compact"
- class:py-10="!compact"
- class:sm:px-10="!compact"
- class:sm:py-12="!compact"
- class:lg:px-12="!compact"
- class:lg:py-14="!compact"
- >
- <!-- Heading -->
- <div
- class="max-w-3xl"
- class:mx-auto="centered"
- class:text-center="centered"
- >
- <p
- class="text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
- class:hidden="eyebrow === ''"
- >
- {eyebrow}
- </p>
- <h2
- id="logo-cloud-title"
- class=" font-bold leading-tight tracking-tight text-slate-950 dark:text-white {eyebrow !== '' ? 'mt-3' : ''} {compact ? 'text-2xl sm:text-3xl' : 'text-3xl sm:text-4xl' } "
- >
- {title}
- </h2>
- <p
- class=" mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 {centered ? 'mx-auto max-w-2xl' : 'max-w-2xl'} {!compact ? 'sm:text-base' : ''} "
- class:hidden="description === ''"
- >
- {description}
- </p>
- </div>
- <!-- Dynamic logo list -->
- <div
- class=" mt-8 flex flex-wrap justify-center {variant === 'cards' ? 'gap-4 sm:mt-10' : 'items-center gap-x-10 gap-y-7 sm:mt-10 lg:gap-x-14' } "
- >
- {#each logos.slice(0, maxItems) as logo}
- <a
- href="{logo.href}"
- target="{logo.external ? '_blank' : '_self'}"
- rel="{logo.external ? 'noopener noreferrer' : ''}"
- aria-label="{logo.name}"
- class=" group min-w-0 transition duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 {variant === 'cards' ? 'flex w-full items-center gap-4 rounded-2xl border border-slate-200/80 bg-white/80 p-4 shadow-sm backdrop-blur-sm hover:-translate-y-1 hover:border-indigo-300 hover:bg-white hover:shadow-lg dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 sm:w-[calc(50%-0.5rem)] lg:w-[calc(25%-0.75rem)]' : 'flex h-12 items-center justify-center px-2 opacity-70 hover:opacity-100' } "
- >
- <!-- Logo mark -->
- <div
- class=" flex shrink-0 items-center justify-center {variant === 'cards' ? 'h-12 w-12 rounded-xl bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' : '' } "
- >
- <img
- src="{logo.src}"
- alt="{logo.alt !== '' ? logo.alt : logo.name}"
- loading="lazy"
- class=" block object-contain transition duration-200 {variant === 'cards' ? 'max-h-7 max-w-9' : 'max-h-8 max-w-36' } {grayscale ? 'grayscale group-hover:grayscale-0' : '' } "
- />
- <!-- Fallback mark -->
- <span
- class=" hidden h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-sm font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300 "
- >
- {logo.name.slice(0, 1)}
- </span>
- </div>
- <!-- Partner text -->
- <div
- class="min-w-0"
- class:hidden="variant !== 'cards' && !showNames"
- >
- <p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-200">
- {logo.name}
- </p>
- <p
- class="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400"
- class:hidden="logo.description === ''"
- >
- {logo.description}
- </p>
- </div>
- </a>
- {/each}
- </div>
- <!-- Optional count -->
- <p
- class="mt-6 text-sm text-slate-500 dark:text-slate-400"
- class:hidden="logos.length <= maxItems"
- class:text-center="centered"
- >
- And {logos.length - maxItems} more teams using WRNexusJS.
- </p>
- </div>
- </div>
- </section>
- }
-}
-Reusable logo upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LogoUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="LogoUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LogoUpload.wrn
component LogoUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable logo component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Logo
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Logo".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Logo.wrn
component Logo {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable logout dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LogoutDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="LogoutDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LogoutDialog.wrn
component LogoutDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable longitude input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<LongitudeInput
- label="Longitude"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="LongitudeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Longitude" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/LongitudeInput.wrn
component LongitudeInput {
- props {
- label = "Longitude"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable maintenance alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaintenanceAlert
- label="Maintenance"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="MaintenanceAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Maintenance" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaintenanceAlert.wrn
component MaintenanceAlert {
- props {
- label = "Maintenance"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable maintenance banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaintenanceBanner
- label="Maintenance"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="MaintenanceBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Maintenance" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaintenanceBanner.wrn
component MaintenanceBanner {
- props {
- label = "Maintenance"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable maintenance card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaintenanceCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MaintenanceCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaintenanceCard.wrn
component MaintenanceCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable maintenance page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaintenancePage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MaintenancePage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaintenancePage.wrn
component MaintenancePage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable maintenance state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaintenanceState
- label="Maintenance"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="MaintenanceState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Maintenance" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaintenanceState.wrn
component MaintenanceState {
- props {
- label = "Maintenance"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable maintenance window picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaintenanceWindowPicker
- label="MaintenanceWindow"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MaintenanceWindowPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MaintenanceWindow" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaintenanceWindowPicker.wrn
component MaintenanceWindowPicker {
- props {
- label = "MaintenanceWindow"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable map picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MapPicker
- label="Map"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MapPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Map" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MapPicker.wrn
component MapPicker {
- props {
- label = "Map"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable markdown editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MarkdownEditor
- label="Markdown"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MarkdownEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Markdown" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MarkdownEditor.wrn
component MarkdownEditor {
- props {
- label = "Markdown"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable marketing page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MarketingPageShell />Legacy mount name: data-component="MarketingPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MarketingPageShell.wrn
component MarketingPageShell {
- props {
- class = ""
- }
- view {
- <div class="wire-page-shell wire-page-shell--marketing {class}">
- <slot />
- </div>
- }
-}
-Reusable marketing section header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MarketingSectionHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="MarketingSectionHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MarketingSectionHeader.wrn
component MarketingSectionHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
-
- view {
- <section class="px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20 {class}">
- <div class="mx-auto w-full max-w-7xl">
- <header
- class="max-w-3xl"
- class:mx-auto='{align === "center"}'
- class:text-center='{align === "center"}'
- >
- {#if eyebrow}
- <p class="mb-3 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)] sm:text-sm">{eyebrow}</p>
- {/if}
- {#if title}
- <h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{title}</h2>
- {/if}
- {#if description}
- <p class="mt-5 text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg">{description}</p>
- {/if}
- </header>
- <div class="mt-10">
- <slot />
- </div>
- </div>
- </section>
- }
-}
-Reusable masked secret field component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MaskedSecretField
- label="MaskedSecret"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MaskedSecretField".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MaskedSecret" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MaskedSecretField.wrn
component MaskedSecretField {
- props {
- label = "MaskedSecret"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable member list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MemberList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="MemberList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MemberList.wrn
component MemberList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable mention input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MentionInput
- label="Mention"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MentionInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Mention" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MentionInput.wrn
component MentionInput {
- props {
- label = "Mention"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable message character counter component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MessageCharacterCounter
- label="MessageCharacter"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="MessageCharacterCounter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MessageCharacter" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MessageCharacterCounter.wrn
component MessageCharacterCounter {
- props {
- label = "MessageCharacter"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable message composer preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MessageComposerPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MessageComposerPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MessageComposerPreview.wrn
component MessageComposerPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable message composer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MessageComposer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MessageComposer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MessageComposer.wrn
component MessageComposer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable message limit input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MessageLimitInput
- label="MessageLimit"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MessageLimitInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MessageLimit" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MessageLimitInput.wrn
component MessageLimitInput {
- props {
- label = "MessageLimit"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable message preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MessagePreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MessagePreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MessagePreview.wrn
component MessagePreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable message volume slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MessageVolumeSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MessageVolumeSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MessageVolumeSlider.wrn
component MessageVolumeSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable metric card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MetricCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MetricCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MetricCard.wrn
component MetricCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable metric grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MetricGrid
- label="Platform metrics"
- metrics="[]"
- compact="false"
- columns="4"
-/>Legacy mount name: data-component="MetricGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Platform metrics" |
metrics | string | Optional | [] |
compact | boolean | Optional | false |
columns | number | Optional | 4 |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/MetricGrid.wrn
component MetricGrid {
- props {
- label = "Platform metrics"
- metrics = []
- compact = false
- columns = 4
- class = ""
- }
-
- view {
- <section
- class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
- aria-label="{label}"
- >
- <div
- class="wire-metric-grid"
- class:wire-metric-grid--compact='{compact}'
- data-columns="{columns}"
- >
- {#each metrics as metric}
- <article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
- <strong class="wire-metric-card__value">{metric.value}</strong>
- <span class="wire-metric-card__label">{metric.label}</span>
-
- {#if metric.description}
- <p class="wire-metric-card__description">{metric.description}</p>
- {/if}
- </article>
- {:empty}
- <p class="wire-metric-grid__empty">No metrics available.</p>
- {/each}
- </div>
- </section>
- }
-}
-Reusable metric text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MetricText
- text="text"
- align="start"
-/>Legacy mount name: data-component="MetricText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MetricText.wrn
component MetricText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--display wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable metric component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Metric
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="Metric".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Metric.wrn
component Metric {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable minute picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MinutePicker
- label="Minute"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MinutePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Minute" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MinutePicker.wrn
component MinutePicker {
- props {
- label = "Minute"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable mission section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MissionSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="MissionSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MissionSection.wrn
component MissionSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable mobile device frame component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MobileDeviceFrame
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="MobileDeviceFrame".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MobileDeviceFrame.wrn
component MobileDeviceFrame {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable mobile input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MobileInput
- label="Mobile"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MobileInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Mobile" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MobileInput.wrn
component MobileInput {
- props {
- label = "Mobile"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable mobile menu button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MobileMenuButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="MobileMenuButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MobileMenuButton.wrn
component MobileMenuButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable mobile navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MobileNavigation
- label="Menu"
- closeLabel="Close menu"
- items="[]"
-/>Legacy mount name: data-component="MobileNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Menu" |
closeLabel | string | Optional | "Close menu" |
items | string | Optional | [] |
class | string | Optional | "" |
This component does not declare a slot.
clickInstalled source: components/MobileNavigation.wrn
component MobileNavigation {
- props {
- label = "Menu"
- closeLabel = "Close menu"
- items = []
- class = ""
- }
- state open = false
- view {
- <div class="wire-mobile-nav {class}">
- <button type="button" class="wire-btn wire-btn--ghost" aria-expanded="{open}" aria-controls="wire-mobile-navigation" @click="open = !open">{open ? closeLabel : label}</button>
- <nav id="wire-mobile-navigation" data-show="open" aria-label="Mobile navigation" class="wire-mobile-nav__panel">
- <ul>{#each items as item}<li>
- <a href="{item.href}">{item.label}</a>
- </li>{/each}</ul>
- </nav>
- </div>
- }
-}
-Reusable mobile table card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MobileTableCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MobileTableCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MobileTableCard.wrn
component MobileTableCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable month picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MonthPicker
- label="Month"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MonthPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Month" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MonthPicker.wrn
component MonthPicker {
- props {
- label = "Month"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable month year picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MonthYearPicker
- label="MonthYear"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MonthYearPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MonthYear" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MonthYearPicker.wrn
component MonthYearPicker {
- props {
- label = "MonthYear"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable monthly volume selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MonthlyVolumeSelector
- label="MonthlyVolume"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MonthlyVolumeSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MonthlyVolume" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MonthlyVolumeSelector.wrn
component MonthlyVolumeSelector {
- props {
- label = "MonthlyVolume"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable multi file upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MultiFileUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="MultiFileUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MultiFileUpload.wrn
component MultiFileUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable multi select component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MultiSelect
- id="multi-select"
- name="name"
- label="Choose options"
- options="[]"
- required="false"
-/>Legacy mount name: data-component="MultiSelect".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "multi-select" |
name | string | Optional | "" |
label | string | Optional | "Choose options" |
options | string | Optional | [] |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
size | number | Optional | 5 |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/MultiSelect.wrn
component MultiSelect {
- props {
- id = "multi-select"
- name = ""
- label = "Choose options"
- options = []
- required = false
- disabled = false
- size = 5
- class = ""
- }
- view {
- <div class="wire-field {class}">
- <label for="{id}" class="wire-label">{label}</label>
- <select id="{id}" name="{name}" multiple required="{required}" disabled="{disabled}" size="{size}" class="wire-input wire-multiselect">{#each options as option}<option value="{option.value}" selected="{option.selected}">{option.label}</option>{/each}</select>
- </div>
- }
-}
-Reusable multiple email input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MultipleEmailInput
- label="MultipleEmail"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="MultipleEmailInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "MultipleEmail" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MultipleEmailInput.wrn
component MultipleEmailInput {
- props {
- label = "MultipleEmail"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable muted text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<MutedText
- text="text"
- align="start"
-/>Legacy mount name: data-component="MutedText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/MutedText.wrn
component MutedText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--small wire-text--{align} wire-muted {class}">{text}<slot />
- </div>
- }
-}
-Reusable name input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NameInput
- label="Name"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="NameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Name" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NameInput.wrn
component NameInput {
- props {
- label = "Name"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable narrow container component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NarrowContainer />Legacy mount name: data-component="NarrowContainer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NarrowContainer.wrn
component NarrowContainer {
- props {
- class = ""
- }
- view {
- <div class="wire-container wire-container--narrow {class}">
- <slot />
- </div>
- }
-}
-Reusable navigation item component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NavigationItem
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="NavigationItem".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NavigationItem.wrn
component NavigationItem {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable navigation mega menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NavigationMegaMenu
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="NavigationMegaMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NavigationMegaMenu.wrn
component NavigationMegaMenu {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Navigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="Navigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Navigation.wrn
component Navigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable new badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NewBadge
- label="New"
- variant="default"
-/>Legacy mount name: data-component="NewBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "New" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NewBadge.wrn
component NewBadge {
- props {
- label = "New"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--newbadge {class}">{label}<slot />
- </span>
- }
-}
-Reusable new password input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NewPasswordInput
- label="NewPassword"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="NewPasswordInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "NewPassword" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NewPasswordInput.wrn
component NewPasswordInput {
- props {
- label = "NewPassword"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable newsletter c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NewsletterCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="NewsletterCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NewsletterCTA.wrn
component NewsletterCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable newsletter form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NewsletterForm
- eyebrow="eyebrow"
- title="Stay up to date"
- description="description"
- placeholder="Enter your email"
- buttonLabel="Subscribe"
-/>Legacy mount name: data-component="NewsletterForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Stay up to date" |
description | string | Optional | "" |
placeholder | string | Optional | "Enter your email" |
buttonLabel | string | Optional | "Subscribe" |
action | string | Optional | "/newsletter/subscribe" |
method | string | Optional | "post" |
emailName | string | Optional | "email" |
privacyLabel | string | Optional | "" |
privacyHref | string | Optional | "/privacy" |
successMessage | string | Optional | "You are subscribed." |
errorMessage | string | Optional | "Something went wrong. Please try again." |
iconClass | string | Optional | "icon-[lucide--mail]" |
centered | boolean | Optional | false |
compact | boolean | Optional | false |
showIcon | boolean | Optional | true |
showPrivacy | boolean | Optional | true |
fullWidth | boolean | Optional | false |
This component does not declare a slot.
submitinputInstalled source: components/NewsletterForm.wrn
component NewsletterForm {
- props {
- class: string = ""
- eyebrow = ""
- title = "Stay up to date"
- description = ""
-
- placeholder = "Enter your email"
- buttonLabel = "Subscribe"
-
- action = "/newsletter/subscribe"
- method = "post"
- emailName = "email"
-
- privacyLabel = ""
- privacyHref = "/privacy"
-
- successMessage = "You are subscribed."
- errorMessage = "Something went wrong. Please try again."
-
- iconClass = "icon-[lucide--mail]"
-
- centered = false
- compact = false
- showIcon = true
- showPrivacy = true
- fullWidth = false
- }
-
- state email = ""
- state status = "idle"
- state message = ""
-
- view {
- <section
- aria-labelledby="newsletter-form-title"
- class="w-full px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
- >
- <div
- class=" relative mx-auto w-full overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20 "
- class:max-w-7xl="fullWidth"
- class:max-w-3xl="!fullWidth"
- >
- <!-- Background decoration -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class="absolute -right-20 -top-24 h-64 w-64 rounded-full bg-indigo-300/25 blur-3xl dark:bg-indigo-500/10">
- </div>
- <div class="absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10">
- </div>
- <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-400/60 to-transparent dark:via-indigo-400/20">
- </div>
- </div>
- <div
- class="relative"
- class:p-5="compact"
- class:sm:p-6="compact"
- class:p-7="!compact"
- class:sm:p-9="!compact"
- class:lg:p-10="!compact"
- >
- <div
- class=" {compact ? 'flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between lg:gap-10' : centered ? 'mx-auto flex max-w-2xl flex-col items-center gap-7 text-center' : 'grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(360px,480px)] lg:items-center lg:gap-12' } "
- >
- <!-- Content -->
- <div
- class=" min-w-0 {compact ? 'max-w-2xl' : ''} {centered && !compact ? 'w-full max-w-2xl' : ''} "
- >
- <div class=" flex gap-4 {centered && !compact ? 'flex-col items-center' : 'items-start' } " >
- <!-- Icon -->
- <div
- class="relative shrink-0"
- class:hidden="!showIcon"
- >
- <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/25 blur-xl" >
- </div>
- <span
- class=" relative grid place-items-center rounded-2xl border border-indigo-200 bg-white/90 text-indigo-600 shadow-lg shadow-indigo-950/10 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:shadow-black/20 {compact ? 'h-11 w-11' : 'h-13 w-13'} "
- >
- <span class=" {iconClass} {compact ? 'h-5 w-5' : 'h-6 w-6'} " aria-hidden="true" >
- </span>
- </span>
- </div>
- <div class="min-w-0">
- <!-- Eyebrow -->
- <p
- class="text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400"
- class:hidden="eyebrow === ''"
- >
- {eyebrow}
- </p>
- <!-- Title -->
- <h2
- id="newsletter-form-title"
- class=" font-bold leading-tight tracking-tight text-slate-950 dark:text-white {eyebrow !== '' ? 'mt-2' : ''} {compact ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl' } "
- >
- {title}
- </h2>
- </div>
- </div>
- <!-- Description -->
- <p
- class=" mt-4 text-sm leading-6 text-slate-600 dark:text-slate-400 {!compact ? 'sm:text-base sm:leading-7' : ''} {centered && !compact ? 'mx-auto max-w-xl' : 'max-w-2xl' } "
- class:hidden="description === ''"
- >
- {description}
- </p>
- </div>
- <!-- Form -->
- <div class=" w-full {compact ? 'lg:max-w-xl' : ''} {centered && !compact ? 'max-w-2xl' : ''} " >
- <form
- action="{action}"
- method="{method}"
- class="w-full"
- @submit=" status = 'loading'; message = ''; "
- >
- <label
- for="newsletter-email"
- class="sr-only"
- >
- Email address
- </label>
- <div
- class=" flex w-full flex-col gap-2 rounded-2xl border border-slate-200 bg-white/85 p-2 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5 sm:flex-row "
- >
- <div class="relative min-w-0 flex-1">
- <span class="pointer-events-none absolute left-3.5 top-1/2 h-4.5 w-4.5 -translate-y-1/2 text-slate-400 icon-[lucide--mail] dark:text-slate-500" aria-hidden="true" >
- </span>
- <input
- id="newsletter-email"
- type="email"
- name="{emailName}"
- value="{email}"
- placeholder="{placeholder}"
- autocomplete="email"
- required
- @input="email = event.target.value"
- class=" w-full rounded-xl bg-transparent pl-10 pr-3 text-sm text-slate-950 outline-none placeholder:text-slate-400 focus:bg-white dark:text-white dark:placeholder:text-slate-500 dark:focus:bg-white/5 {compact ? 'h-10' : 'h-11'} "
- />
- </div>
- <button
- type="submit"
- class=" group inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-70 dark:focus-visible:ring-offset-slate-900 {compact ? 'h-10' : 'h-11'} "
- disabled="{status === 'loading'}"
- >
- <span class="icon-[lucide--loader-circle] h-4 w-4 animate-spin" aria-hidden="true" class:hidden="status !== 'loading'" >
- </span>
- <span class:hidden="status === 'loading'">
- {buttonLabel}
- </span>
- <span class:hidden="status !== 'loading'">
- Subscribing
- </span>
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" class:hidden="status === 'loading'" >
- </span>
- </button>
- </div>
- </form>
- <p
- class="mt-3 text-xs leading-5 text-slate-500 dark:text-slate-400"
- class:hidden="!showPrivacy"
- class:text-center="centered && !compact"
- >
- No spam. Unsubscribe at any time.
-
- <a
- href="{privacyHref}"
- class="font-semibold text-indigo-600 transition hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
- class:hidden="privacyLabel === ''"
- >
- {privacyLabel}
- </a>
- </p>
- <div
- role="status"
- aria-live="polite"
- class="mt-3 rounded-xl px-3 py-2.5 text-sm font-medium"
- class:hidden="message === ''"
- class:bg-emerald-50="status === 'success'"
- class:text-emerald-700="status === 'success'"
- class:ring-1="status === 'success'"
- class:ring-inset="status === 'success'"
- class:ring-emerald-200="status === 'success'"
- class:dark:bg-emerald-500/10="status === 'success'"
- class:dark:text-emerald-300="status === 'success'"
- class:dark:ring-emerald-500/20="status === 'success'"
- class:bg-rose-50="status === 'error'"
- class:text-rose-700="status === 'error'"
- class:ring-1="status === 'error'"
- class:ring-inset="status === 'error'"
- class:ring-rose-200="status === 'error'"
- class:dark:bg-rose-500/10="status === 'error'"
- class:dark:text-rose-300="status === 'error'"
- class:dark:ring-rose-500/20="status === 'error'"
- >
- {message}
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- }
-}
-Reusable no results state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NoResultsState
- label="NoResults"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="NoResultsState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "NoResults" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NoResultsState.wrn
component NoResultsState {
- props {
- label = "NoResults"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable not found page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NotFoundPage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="NotFoundPage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NotFoundPage.wrn
component NotFoundPage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable not found state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NotFoundState
- label="NotFound"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="NotFoundState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "NotFound" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NotFoundState.wrn
component NotFoundState {
- props {
- label = "NotFound"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable notification card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NotificationCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="NotificationCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NotificationCard.wrn
component NotificationCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--notification {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable notification dot component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NotificationDot
- label="Notification"
- variant="default"
-/>Legacy mount name: data-component="NotificationDot".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Notification" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NotificationDot.wrn
component NotificationDot {
- props {
- label = "Notification"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--notificationdot {class}">{label}<slot />
- </span>
- }
-}
-Reusable notification list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NotificationList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="NotificationList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/NotificationList.wrn
component NotificationList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable number input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<NumberInput
- id="id"
- name="name"
- label="Number"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="NumberInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Number" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/NumberInput.wrn
component NumberInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "Number"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="number" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable office card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OfficeCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="OfficeCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OfficeCard.wrn
component OfficeCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable offline page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OfflinePage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="OfflinePage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OfflinePage.wrn
component OfflinePage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable offline state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OfflineState
- label="Offline"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="OfflineState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Offline" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OfflineState.wrn
component OfflineState {
- props {
- label = "Offline"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable onboarding progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OnboardingProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="OnboardingProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OnboardingProgress.wrn
component OnboardingProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable one time secret display component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OneTimeSecretDisplay
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="OneTimeSecretDisplay".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OneTimeSecretDisplay.wrn
component OneTimeSecretDisplay {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable online indicator component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OnlineIndicator
- label="Online"
- variant="default"
-/>Legacy mount name: data-component="OnlineIndicator".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Online" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OnlineIndicator.wrn
component OnlineIndicator {
- props {
- label = "Online"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--onlineindicator {class}">{label}<slot />
- </span>
- }
-}
-Reusable opacity slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OpacitySlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="OpacitySlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OpacitySlider.wrn
component OpacitySlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable open a p i c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OpenAPICTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="OpenAPICTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OpenAPICTA.wrn
component OpenAPICTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable optional indicator component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OptionalIndicator
- label="Optional"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="OptionalIndicator".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Optional" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OptionalIndicator.wrn
component OptionalIndicator {
- props {
- label = "Optional"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable organization selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OrganizationSelector
- label="Organization"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="OrganizationSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Organization" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OrganizationSelector.wrn
component OrganizationSelector {
- props {
- label = "Organization"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable otp input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OtpInput
- name="otp"
- length="6"
- label="Verification code"
-/>Legacy mount name: data-component="OtpInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
name | string | Optional | "otp" |
length | number | Optional | 6 |
label | string | Optional | "Verification code" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/OtpInput.wrn
component OtpInput {
- props {
- class = ""
- name = "otp"
- length = 6
- label = "Verification code"
- }
- view {
- <fieldset class="{class}">
- <legend class="mb-3 text-sm font-semibold">{label}</legend>
- <input name="{name}" inputmode="numeric" autocomplete="one-time-code" maxlength="{length}" pattern="[0-9]*" class="min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950" />
- </fieldset>
- }
-}
-Reusable otp verification form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OtpVerificationForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="OtpVerificationForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OtpVerificationForm.wrn
component OtpVerificationForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-auth-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable outlined card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<OutlinedCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="OutlinedCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/OutlinedCard.wrn
component OutlinedCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--outlined {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable page alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PageAlert
- label="Page"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="PageAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Page" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PageAlert.wrn
component PageAlert {
- props {
- label = "Page"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable page header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PageHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- primaryLabel="primaryLabel"
- primaryHref="primaryHref"
-/>Legacy mount name: data-component="PageHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
primaryLabel | string | Optional | "" |
primaryHref | string | Optional | "" |
secondaryLabel | string | Optional | "" |
secondaryHref | string | Optional | "" |
icon | string | Optional | "sparkles" |
centered | boolean | Optional | false |
compact | boolean | Optional | false |
showBreadcrumbs | boolean | Optional | false |
breadcrumbParent | string | Optional | "" |
breadcrumbParentHref | string | Optional | "" |
breadcrumbCurrent | string | Optional | "" |
highlights | string | Optional | [] |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/PageHeader.wrn
component PageHeader {
- props {
- class: string = ""
- eyebrow = ""
- title = ""
- description = ""
-
- primaryLabel = ""
- primaryHref = ""
-
- secondaryLabel = ""
- secondaryHref = ""
-
- icon = "sparkles"
-
- centered = false
- compact = false
-
- showBreadcrumbs = false
- breadcrumbParent = ""
- breadcrumbParentHref = ""
- breadcrumbCurrent = ""
-
- highlights = []
- }
-
- view {
- <section
- aria-labelledby="public-page-title"
- class="relative overflow-hidden border-b border-slate-200 bg-white dark:border-white/10 dark:bg-slate-950 {class}"
- >
- <!-- Background decoration -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class="absolute -right-40 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-violet-300/15 blur-3xl dark:bg-violet-500/5" >
- </div>
- <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20" >
- </div>
- </div>
- <div class="relative w-full px-5 sm:px-8 lg:px-10 xl:px-12">
- <!-- Breadcrumbs -->
- <div
- class="border-b border-slate-200/80 py-3 dark:border-white/10"
- class:hidden="!showBreadcrumbs"
- >
- <Breadcrumbs
- centered="{centered}"
- compact="{false}"
- items="{[ ...(breadcrumbParent !== '' ? [{ label: breadcrumbParent, href: breadcrumbParentHref, current: false }] : []), ...(breadcrumbCurrent !== '' ? [{ label: breadcrumbCurrent, href: '', current: true }] : []) ]}"
- />
- </div>
- <!-- Header body -->
- <div
- class=" {compact ? 'py-9 sm:py-10 lg:py-12' : 'py-12 sm:py-14 lg:py-16' } {centered ? 'mx-auto flex max-w-5xl flex-col items-center text-center' : 'grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start lg:gap-12' } "
- >
- <!-- Content -->
- <div class=" min-w-0 {centered ? 'w-full max-w-4xl' : 'max-w-4xl'} " >
- <!-- Eyebrow -->
- <div
- class="flex"
- class:hidden="eyebrow === ''"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- <span
- class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300"
- >
- <span class="grid h-5 w-5 place-items-center rounded-full bg-indigo-100 dark:bg-indigo-500/15" >
- <span class="icon-[lucide--{icon}] h-3 w-3" aria-hidden="true" >
- </span>
- </span>
-
- {eyebrow}
- </span>
- </div>
- <!-- Title -->
- <h1
- id="public-page-title"
- class=" font-bold tracking-tight text-slate-950 dark:text-white {eyebrow !== '' ? 'mt-6' : ''} {compact ? 'text-3xl leading-tight sm:text-4xl lg:text-5xl' : 'text-4xl leading-[1.08] sm:text-5xl lg:text-[3.25rem]' } "
- >
- {title}
- </h1>
- <!-- Description -->
- <p
- class=" mt-5 text-base text-slate-600 dark:text-slate-400 {compact ? 'leading-7' : 'leading-8 sm:text-lg'} {centered ? 'mx-auto max-w-3xl' : 'max-w-2xl'} "
- class:hidden="description === ''"
- >
- {description}
- </p>
- </div>
- <!-- Single dynamic action group -->
- <div
- class=" flex flex-col gap-3 sm:flex-row {centered ? 'mt-8 justify-center' : 'lg:pt-1' } "
- class:hidden="primaryLabel === '' && secondaryLabel === ''"
- >
- <!-- Secondary action -->
- <a
- href="{secondaryHref}"
- class="h-12 items-center justify-center rounded-xl border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
- class:hidden="secondaryLabel === ''"
- class:inline-flex="secondaryLabel !== ''"
- >
- {secondaryLabel}
- </a>
- <!-- Primary action -->
- <a
- href="{primaryHref}"
- class="group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
- class:hidden="primaryLabel === ''"
- class:inline-flex="primaryLabel !== ''"
- >
- {primaryLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- <!-- Dynamic highlight strip -->
- <div
- class="border-t border-slate-200 py-5 dark:border-white/10"
- class:hidden="compact || highlights.length === 0"
- class:block="!compact && highlights.length > 0"
- >
- <div class="flex gap-y-5">
- {#each highlights as highlight}
- <div
- class="w-full min-w-0 pr-6"
- class:w-full="highlights.length === 1"
- class:sm:w-1/2="highlights.length >= 2"
- class:lg:w-1/2="highlights.length === 2"
- class:lg:w-1/3="highlights.length === 3"
- class:lg:w-1/4="highlights.length >= 4"
- >
- <div
- class="flex min-w-0 items-center gap-3"
- class:justify-center="centered"
- >
- <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl {highlight.iconBoxClass}" >
- <span class="{highlight.iconClass} h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div class="min-w-0">
- <p class="text-sm font-semibold text-slate-950 dark:text-white">
- {highlight.title}
- </p>
- <p
- class="mt-0.5 text-xs leading-5 text-slate-500 dark:text-slate-400"
- class:hidden="highlight.description === ''"
- >
- {highlight.description}
- </p>
- </div>
- </div>
- </div>
- {/each}
- </div>
- </div>
- </div>
- </section>
- }
-}
-Reusable page heading component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PageHeading
- text="text"
- align="start"
-/>Legacy mount name: data-component="PageHeading".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PageHeading.wrn
component PageHeading {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--heading wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PageShell />Legacy mount name: data-component="PageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
className | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PageShell.wrn
component PageShell {
- props {
- className = ""
- }
- view {
- <div class="min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 {className}">
- <slot />
- </div>
- }
-}
-Reusable page skeleton component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PageSkeleton
- label="Page"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="PageSkeleton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Page" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PageSkeleton.wrn
component PageSkeleton {
- props {
- label = "Page"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable panel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Panel />Legacy mount name: data-component="Panel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Panel.wrn
component Panel {
- props {
- class = ""
- }
- view {
- <div class="wire-panel {class}">
- <slot />
- </div>
- }
-}
-Reusable partner application form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PartnerApplicationForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PartnerApplicationForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PartnerApplicationForm.wrn
component PartnerApplicationForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable partner logo grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PartnerLogoGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PartnerLogoGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PartnerLogoGrid.wrn
component PartnerLogoGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable partner program card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PartnerProgramCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PartnerProgramCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PartnerProgramCard.wrn
component PartnerProgramCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable passkey button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PasskeyButton
- label="Continue with a passkey"
- description="Use fingerprint, face recognition, or device PIN"
- href="href"
- type="button"
- variant="primary"
-/>Legacy mount name: data-component="PasskeyButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Continue with a passkey" |
description | string | Optional | "Use fingerprint, face recognition, or device PIN" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/PasskeyButton.wrn
component PasskeyButton {
- props {
- label = "Continue with a passkey"
- description = "Use fingerprint, face recognition, or device PIN"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action wire-auth-action {class}">
- {#if href}
- <a href="{href}" class="wire-btn wire-btn--{variant}">
- <span class="wire-auth-action__icon wire-auth-action__icon--passkey">
- <svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M12 11a1 1 0 0 0-1 1c0 2.4-.5 4.7-1.5 6.8M8.2 17.5c.5-1.7.8-3.5.8-5.5a3 3 0 0 1 6 0c0 3.2-.7 6.3-2.1 9M5.1 15.5c.3-1.1.4-2.3.4-3.5a6.5 6.5 0 0 1 13 0c0 2.1-.2 4.2-.7 6.2M3 12a9 9 0 0 1 18 0c0 1.1-.1 2.2-.2 3.3M7.1 20.5c.5-1 .9-2 1.2-3.1M16 21c.7-2.5 1-5.5 1-9a5 5 0 0 0-10 0c0 .7 0 1.3-.1 2" />
- </svg>
- </span>
- <span class="wire-auth-action__copy">
- <span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
- <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true">
- <path d="M5 12h14M13 6l6 6-6 6" />
- </svg>
- </a>
- {:else}
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
- <span class="wire-auth-action__icon wire-auth-action__icon--passkey">
- <svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M12 11a1 1 0 0 0-1 1c0 2.4-.5 4.7-1.5 6.8M8.2 17.5c.5-1.7.8-3.5.8-5.5a3 3 0 0 1 6 0c0 3.2-.7 6.3-2.1 9M5.1 15.5c.3-1.1.4-2.3.4-3.5a6.5 6.5 0 0 1 13 0c0 2.1-.2 4.2-.7 6.2M3 12a9 9 0 0 1 18 0c0 1.1-.1 2.2-.2 3.3M7.1 20.5c.5-1 .9-2 1.2-3.1M16 21c.7-2.5 1-5.5 1-9a5 5 0 0 0-10 0c0 .7 0 1.3-.1 2" />
- </svg>
- </span>
- <span class="wire-auth-action__copy">
- <span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
- <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true">
- <path d="M5 12h14M13 6l6 6-6 6" />
- </svg>
- </button>
- {/if}
- </span>
- }
-}
-Reusable password input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PasswordInput
- id="password"
- name="password"
- label="Password"
- value="value"
- placeholder="Enter your password"
-/>Legacy mount name: data-component="PasswordInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "password" |
name | string | Optional | "password" |
label | string | Optional | "Password" |
value | string | Optional | "" |
placeholder | string | Optional | "Enter your password" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "current-password" |
revealable | boolean | Optional | true |
This component does not declare a slot.
clickInstalled source: components/PasswordInput.wrn
component PasswordInput {
- props {
- class = ""
- id = "password"
- name = "password"
- label = "Password"
- value = ""
- placeholder = "Enter your password"
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = "current-password"
- revealable = true
- }
-
- state visible = false
-
- view {
- <div class="wire-auth-field {class}">
- <label for="{id}" class="wire-label">{label}{#if required}<span class="wire-required"> *</span>{/if}</label>
- <div class="wire-auth-field__control">
- <span class="wire-auth-field__icon icon-[lucide--lock-keyhole]" aria-hidden="true">
- </span>
- <input id="{id}" name="{name}" type="{visible ? 'text' : 'password'}" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{id}-help {id}-error" class="wire-input wire-auth-field__input" />
- {#if revealable}<button type="button" @click="visible = !visible" aria-label="{visible ? 'Hide password' : 'Show password'}" aria-pressed="{visible}" class="wire-auth-field__toggle">
- <span class="{visible ? 'icon-[lucide--eye-off]' : 'icon-[lucide--eye]'} size-5" aria-hidden="true">
- </span>
- </button>{/if}
- </div>
- {#if help && !error}<p id="{id}-help" class="wire-field-message wire-field-message--help">{help}</p>{/if}
- {#if error}<p id="{id}-error" role="alert" class="wire-field-message wire-field-message--error">{error}</p>{/if}
- </div>
- }
-}
-Reusable password requirement list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PasswordRequirementList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PasswordRequirementList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PasswordRequirementList.wrn
component PasswordRequirementList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable password strength meter component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PasswordStrengthMeter
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="PasswordStrengthMeter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PasswordStrengthMeter.wrn
component PasswordStrengthMeter {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable password visibility toggle component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PasswordVisibilityToggle
- label="PasswordVisibility"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PasswordVisibilityToggle".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PasswordVisibility" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PasswordVisibilityToggle.wrn
component PasswordVisibilityToggle {
- props {
- label = "PasswordVisibility"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable path input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PathInput
- label="Path"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PathInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Path" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PathInput.wrn
component PathInput {
- props {
- label = "Path"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable payment method card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PaymentMethodCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PaymentMethodCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PaymentMethodCard.wrn
component PaymentMethodCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable pdf preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PdfPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PdfPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PdfPreview.wrn
component PdfPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable percentage input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PercentageInput
- label="Percentage"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PercentageInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Percentage" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PercentageInput.wrn
component PercentageInput {
- props {
- label = "Percentage"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable permission selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PermissionSelector
- label="Permission"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PermissionSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Permission" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PermissionSelector.wrn
component PermissionSelector {
- props {
- label = "Permission"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable phone input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PhoneInput
- id="id"
- name="name"
- label="Phone"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="PhoneInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Phone" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/PhoneInput.wrn
component PhoneInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "Phone"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="tel" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable pie chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PieChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="PieChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PieChart.wrn
component PieChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable pill component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Pill
- label="Pill"
- variant="default"
-/>Legacy mount name: data-component="Pill".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Pill" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Pill.wrn
component Pill {
- props {
- label = "Pill"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--pill {class}">{label}<slot />
- </span>
- }
-}
-Reusable plain text editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PlainTextEditor
- label="PlainText"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PlainTextEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PlainText" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PlainTextEditor.wrn
component PlainTextEditor {
- props {
- label = "PlainText"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable plan c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PlanCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="PlanCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PlanCTA.wrn
component PlanCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable plan feature list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PlanFeatureList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PlanFeatureList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PlanFeatureList.wrn
component PlanFeatureList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable plan limit list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PlanLimitList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PlanLimitList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PlanLimitList.wrn
component PlanLimitList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable plan selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PlanSelector
- label="Plan"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PlanSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Plan" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PlanSelector.wrn
component PlanSelector {
- props {
- label = "Plan"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable platform pillar card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PlatformPillarCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PlatformPillarCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PlatformPillarCard.wrn
component PlatformPillarCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable policy version table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PolicyVersionTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PolicyVersionTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PolicyVersionTable.wrn
component PolicyVersionTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable port input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PortInput
- label="Port"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PortInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Port" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PortInput.wrn
component PortInput {
- props {
- label = "Port"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable port number input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PortNumberInput
- label="PortNumber"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PortNumberInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PortNumber" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PortNumberInput.wrn
component PortNumberInput {
- props {
- label = "PortNumber"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable positive number input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PositiveNumberInput
- label="PositiveNumber"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PositiveNumberInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PositiveNumber" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PositiveNumberInput.wrn
component PositiveNumberInput {
- props {
- label = "PositiveNumber"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable postal code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PostalCodeInput
- label="PostalCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PostalCodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PostalCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PostalCodeInput.wrn
component PostalCodeInput {
- props {
- label = "PostalCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable postman c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PostmanCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="PostmanCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PostmanCTA.wrn
component PostmanCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable preset date range picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PresetDateRangePicker
- label="PresetDateRange"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PresetDateRangePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PresetDateRange" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PresetDateRangePicker.wrn
component PresetDateRangePicker {
- props {
- label = "PresetDateRange"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable press release card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PressReleaseCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PressReleaseCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PressReleaseCard.wrn
component PressReleaseCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable preview badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PreviewBadge
- label="Preview"
- variant="default"
-/>Legacy mount name: data-component="PreviewBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Preview" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PreviewBadge.wrn
component PreviewBadge {
- props {
- label = "Preview"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--previewbadge {class}">{label}<slot />
- </span>
- }
-}
-Reusable previous next navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PreviousNextNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="PreviousNextNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PreviousNextNavigation.wrn
component PreviousNextNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable price input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PriceInput
- label="Price"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PriceInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Price" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PriceInput.wrn
component PriceInput {
- props {
- label = "Price"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable price range slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PriceRangeSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PriceRangeSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PriceRangeSlider.wrn
component PriceRangeSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable price text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PriceText
- text="text"
- align="start"
-/>Legacy mount name: data-component="PriceText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PriceText.wrn
component PriceText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--display wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable pricing card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PricingCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingCard.wrn
component PricingCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable pricing comparison table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingComparisonTable
- caption="Plan comparison"
- plans="[]"
- features="[]"
- featuredPlan="featuredPlan"
-/>Legacy mount name: data-component="PricingComparisonTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
caption | string | Optional | "Plan comparison" |
plans | string | Optional | [] |
features | string | Optional | [] |
featuredPlan | string | Optional | "" |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/PricingComparisonTable.wrn
component PricingComparisonTable {
- props {
- caption = "Plan comparison"
- plans = []
- features = []
- featuredPlan = ""
- class = ""
- }
-
- view {
- <div class="wire-table-wrap rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] {class}" tabindex="0" role="region" aria-label="{caption}">
- <table class="wire-table wire-comparison-table min-w-[56rem]">
- <caption class="wire-visually-hidden">{caption}</caption>
- <thead>
- <tr>
- <th scope="col">Feature</th>
- {#each plans as plan}
- <th scope="col">{plan.name}</th>
- {/each}
- </tr>
- </thead>
- <tbody>
- {#each features as feature}
- <tr>
- <th scope="row">{feature.label}</th>
- {#each feature.values as value}
- <td>{value}</td>
- {/each}
- </tr>
- {/each}
- </tbody>
- </table>
- </div>
- }
-}
-Reusable pricing contact form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingContactForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PricingContactForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingContactForm.wrn
component PricingContactForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable pricing feature group component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingFeatureGroup
- label="PricingFeature"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PricingFeatureGroup".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PricingFeature" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingFeatureGroup.wrn
component PricingFeatureGroup {
- props {
- label = "PricingFeature"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable pricing grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PricingGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingGrid.wrn
component PricingGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable pricing hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="PricingHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingHero.wrn
component PricingHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
-
- view {
- <section
- class="relative overflow-hidden border-b border-[var(--wire-color-border)] bg-[var(--wire-color-background)] px-4 py-16 text-[var(--wire-color-text)] sm:px-6 sm:py-20 lg:px-8 lg:py-24 {class}"
- >
- <div
- class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,var(--wire-color-primary-soft),transparent_68%)] opacity-70"
- aria-hidden="true"
- >
- </div>
- <div class="relative mx-auto w-full max-w-7xl">
- {#if align === "center"}
- <header class="mx-auto max-w-4xl text-center">
- {#if eyebrow}
- <p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]">
- {eyebrow}
- </p>
- {/if}
-
- {#if title}
- <h1 class="mt-5 text-4xl font-semibold tracking-[-0.045em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
- {title}
- </h1>
- {/if}
-
- {#if description}
- <p class="mx-auto mt-6 max-w-3xl text-lg leading-8 text-[var(--wire-color-text-muted)] sm:text-xl">
- {description}
- </p>
- {/if}
- </header>
- {:else}
- <header class="max-w-4xl">
- {#if eyebrow}
- <p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]">
- {eyebrow}
- </p>
- {/if}
-
- {#if title}
- <h1 class="mt-5 text-4xl font-semibold tracking-[-0.045em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
- {title}
- </h1>
- {/if}
-
- {#if description}
- <p class="mt-6 max-w-3xl text-lg leading-8 text-[var(--wire-color-text-muted)] sm:text-xl">
- {description}
- </p>
- {/if}
- </header>
- {/if}
-
- <slot />
- </div>
- </section>
- }
-}
-Reusable pricing plan card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingPlanCard
- name="Starter"
- description="description"
- price="₹0"
- period="/month"
- featured="false"
-/>Legacy mount name: data-component="PricingPlanCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
name | string | Optional | "Starter" |
description | string | Optional | "" |
price | string | Optional | "₹0" |
period | string | Optional | "/month" |
featured | boolean | Optional | false |
badgeLabel | string | Optional | "Most popular" |
ctaLabel | string | Optional | "Choose plan" |
ctaHref | string | Optional | "#" |
defaultThis component does not declare a custom event.
Installed source: components/PricingPlanCard.wrn
component PricingPlanCard {
- props {
- class = ""
- name = "Starter"
- description = ""
- price = "₹0"
- period = "/month"
- featured = false
- badgeLabel = "Most popular"
- ctaLabel = "Choose plan"
- ctaHref = "#"
- }
-
- view {
- <article class="relative flex h-full min-w-0 flex-col rounded-3xl border bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm)] transition duration-200 sm:p-7 {class}">
- {#if featured}
- <div class="mb-5">
- <Badge label="{badgeLabel}" variant="brand" />
- </div>
- {/if}
-
- <h3 class="text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
- {name}
- </h3>
-
- {#if description}
- <p class="mt-2 min-h-14 text-sm leading-6 text-[var(--wire-color-text-muted)]">
- {description}
- </p>
- {/if}
-
- <div class="mt-6 flex flex-wrap items-end gap-x-1.5 gap-y-1">
- <span class="text-4xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text)]">
- {price}
- </span>
- {#if period}
- <span class="pb-1 text-sm text-[var(--wire-color-text-muted)]">
- {period}
- </span>
- {/if}
- </div>
- <div class="mt-6 flex-1 border-t border-[var(--wire-color-border)] pt-6">
- <slot />
- </div>
-
- {#if featured}
- <a
- href="{ctaHref}"
- class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast)] no-underline shadow-[var(--wire-shadow-sm)] transition duration-200 hover:bg-[var(--wire-color-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
- >
- {ctaLabel}
- </a>
- {:else}
- <a
- href="{ctaHref}"
- class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-[var(--wire-color-border-strong)] bg-[var(--wire-color-surface)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text)] no-underline transition duration-200 hover:border-[var(--wire-color-primary)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--wire-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
- >
- {ctaLabel}
- </a>
- {/if}
- </article>
- }
-}
-Reusable pricing table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="PricingTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingTable.wrn
component PricingTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable pricing toggle component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PricingToggle
- label="Pricing"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PricingToggle".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Pricing" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PricingToggle.wrn
component PricingToggle {
- props {
- label = "Pricing"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable primary button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PrimaryButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="PrimaryButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PrimaryButton.wrn
component PrimaryButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--primary {class}">{label}<slot />
- </button>
- }
-}
-Reusable print action component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PrintAction
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="PrintAction".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PrintAction.wrn
component PrintAction {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable print policy button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PrintPolicyButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="PrintPolicyButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PrintPolicyButton.wrn
component PrintPolicyButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable priority selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PrioritySelector
- label="Priority"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PrioritySelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Priority" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PrioritySelector.wrn
component PrioritySelector {
- props {
- label = "Priority"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable privacy notice component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PrivacyNotice
- label="Privacy"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="PrivacyNotice".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Privacy" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PrivacyNotice.wrn
component PrivacyNotice {
- props {
- label = "Privacy"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable product architecture diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductArchitectureDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ProductArchitectureDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductArchitectureDiagram.wrn
component ProductArchitectureDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
-
- view {
- <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
- <header class="flex flex-col gap-4 border-b border-[var(--wire-color-border,#e2e8f0)] p-6 sm:flex-row sm:items-start sm:justify-between lg:p-8">
- <div>
- {#if title}<p class="m-0 font-semibold text-[var(--wire-color-text,#0f172a)]">{title}</p>{/if}
- {#if value}<strong class="mt-3 block text-3xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{value}</strong>{/if}
- {#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
- </div>
- {#if loading}
- <span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-muted,#64748b)]">
- <span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]">
- </span>Loading
- </span>
- {/if}
- </header>
- <div class="bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
- <slot />
- </div>
-
- {#if summary}
- <p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-muted,#64748b)] lg:px-8">{summary}</p>
- {/if}
- </section>
- }
-}
-Reusable product card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProductCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
status | string | Optional | "" |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ProductCard.wrn
component ProductCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- status = ""
- class = ""
- }
-
- view {
- <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}">
- <div class="flex min-h-7 items-start justify-between gap-4">
- {#if eyebrow}<span class="text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</span>{/if}
- {#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-muted,#64748b)]">{status}</span>{/if}
- </div>
- {#if title}<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
- {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
- {#if href}
- <a href="{href}" class="mt-6 inline-flex items-center gap-2 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
- <span>{actionLabel}</span>
- <span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
- </a>
- {/if}
- </article>
- }
-}
-Reusable product category section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductCategorySection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ProductCategorySection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductCategorySection.wrn
component ProductCategorySection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable product c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ProductCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductCTA.wrn
component ProductCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable product feature list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductFeatureList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ProductFeatureList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductFeatureList.wrn
component ProductFeatureList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable product grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ProductGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductGrid.wrn
component ProductGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
-
- view {
- <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
- <div class="mx-auto w-full max-w-7xl">
- {#if title}<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
- {#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
-
- {#if empty}
- <div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-10 text-center text-[var(--wire-color-muted,#64748b)]">
- {emptyText}
- </div>
- {:else}
- <div class="mt-8 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-7 [&>*]:min-w-0 [&>*]:h-full">
- <slot />
- </div>
- {/if}
- </div>
- </section>
- }
-}
-Reusable product hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ProductHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductHero.wrn
component ProductHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
-
- view {
- <section
- class=" relative isolate overflow-hidden bg-[var(--wire-color-bg,#ffffff)] px-4 py-14 sm:px-6 sm:py-18 lg:px-8 lg:py-20 {class} "
- >
- <div class="pointer-events-none absolute inset-0 -z-10 opacity-80" style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);" aria-hidden="true" >
- </div>
- <div class="mx-auto w-full max-w-7xl">
- <div
- class="max-w-4xl"
- class:mx-auto='{align === "center"}'
- class:text-center='{align === "center"}'
- >
- {#if eyebrow}
- <p
- class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm"
- >
- {eyebrow}
- </p>
- {/if}
-
- {#if title}
- <h1
- class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl"
- class:mx-auto='{align === "center"}'
- >
- {title}
- </h1>
- {/if}
-
- {#if description}
- <p
- class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg"
- class:mx-auto='{align === "center"}'
- >
- {description}
- </p>
- {/if}
- </div>
- <div class="mt-10 space-y-10">
- <slot />
- </div>
- </div>
- </section>
- }
-}
-Reusable product icon component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductIcon
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProductIcon".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductIcon.wrn
component ProductIcon {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable product integration list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductIntegrationList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ProductIntegrationList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductIntegrationList.wrn
component ProductIntegrationList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable product list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ProductList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductList.wrn
component ProductList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable product logo component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductLogo
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProductLogo".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductLogo.wrn
component ProductLogo {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable product mega menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductMegaMenu />Legacy mount name: data-component="ProductMegaMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ProductMegaMenu.wrn
component ProductMegaMenu {
- props {
- class: string = ""
- }
- view {
- <div
- class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
- >
- <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
- <div class="grid gap-8 lg:grid-cols-[minmax(0,1.65fr)_minmax(18rem,0.7fr)]">
- <!-- Main product links -->
- <div>
- <div class="mb-5 flex items-end justify-between gap-6">
- <div>
- <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
- WRNexusJS platform
- </p>
- <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
- Everything you need to manage identity
- </h2>
- </div>
- <a
- href="/product"
- class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
- >
- View all features
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- <div class="grid gap-2 md:grid-cols-2">
- <!-- Platform -->
- <a
- href="/platform"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--layers-3] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Platform
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Unified identity infrastructure for every application.
- </span>
- </span>
- </a>
- <!-- Authentication -->
- <a
- href="/authentication"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--fingerprint] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Authentication
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Passwords, passkeys, social login, MFA, and SSO.
- </span>
- </span>
- </a>
- <!-- User management -->
- <a
- href="/user-management"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--users-round] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- User management
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Profiles, sessions, invitations, and user lifecycle.
- </span>
- </span>
- </a>
- <!-- Organizations -->
- <a
- href="/organizations"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--building-2] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Organizations
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Multi-tenant workspaces, teams, domains, and membership.
- </span>
- </span>
- </a>
- <!-- Authorization -->
- <a
- href="/authorization"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--key-square] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Authorization
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Roles, permissions, policies, and protected resources.
- </span>
- </span>
- </a>
- <!-- Security -->
- <a
- href="/security"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--shield-check] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Security
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Session controls, recovery, audit logs, and threat protection.
- </span>
- </span>
- </a>
- </div>
- <a
- href="/product"
- class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
- >
- View all product features
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- </div>
- <!-- Featured panel -->
- <aside
- class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10"
- >
- <div aria-hidden="true" class="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div aria-hidden="true" class="absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" >
- </div>
- <div class="relative">
- <span
- class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
- >
- <span class="icon-[lucide--sparkles] h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- Featured
- </span>
- <div
- class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20"
- >
- <span class="icon-[lucide--shield-user] h-6 w-6" aria-hidden="true" >
- </span>
- </div>
- <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
- Identity built for modern SaaS
- </h3>
- <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
- Add secure authentication, organizations, permissions, and user
- management without rebuilding identity infrastructure.
- </p>
- <ul class="mt-5 space-y-3">
- <li class="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
- <span
- class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </span>
-
- Passkeys and multifactor authentication
- </li>
- <li class="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
- <span
- class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </span>
-
- Organizations and workspace isolation
- </li>
- <li class="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
- <span
- class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </span>
-
- APIs and SDKs for every stack
- </li>
- </ul>
- <a
- href="/solutions/saas"
- class="group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- >
- Explore SaaS identity
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- <div class="mt-4 flex items-center justify-center gap-2 text-xs text-slate-500 dark:text-slate-400">
- <span class="icon-[lucide--code-2] h-4 w-4 text-indigo-600 dark:text-indigo-400" aria-hidden="true" >
- </span>
-
- Developer-first and API-ready
- </div>
- </div>
- </aside>
- </div>
- <!-- Bottom quick links -->
- <div
- class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
- >
- <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
- <a
- href="/integrations"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--plug] h-4 w-4" aria-hidden="true" >
- </span>
-
- Integrations
- </a>
- <a
- href="/enterprise-sso"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--building-2] h-4 w-4" aria-hidden="true" >
- </span>
-
- Enterprise SSO
- </a>
- <a
- href="/audit-logs"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--scroll-text] h-4 w-4" aria-hidden="true" >
- </span>
-
- Audit logs
- </a>
- </div>
- <a
- href="/docs"
- class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- Read the documentation
-
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- </div>
- }
-}
-Reusable product mini card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductMiniCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProductMiniCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductMiniCard.wrn
component ProductMiniCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable product navigation card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductNavigationCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProductNavigationCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductNavigationCard.wrn
component ProductNavigationCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable product page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductPageShell />Legacy mount name: data-component="ProductPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductPageShell.wrn
component ProductPageShell {
- props {
- class = ""
- }
-
- view {
- <main
- class=" min-h-screen w-full overflow-x-clip bg-[var(--wire-color-bg,#ffffff)] font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)] text-[var(--wire-color-text,#0f172a)] antialiased {class} "
- >
- <slot />
- </main>
- }
-}
-Reusable product selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductSelector
- label="Product"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ProductSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Product" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductSelector.wrn
component ProductSelector {
- props {
- label = "Product"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable product status badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductStatusBadge
- label="Available"
- status="status"
-/>Legacy mount name: data-component="ProductStatusBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Available" |
status | string | Optional | "" |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ProductStatusBadge.wrn
component ProductStatusBadge {
- props {
- label = "Available"
- status = ""
- class = ""
- }
-
- view {
- <span
- class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] text-[var(--wire-color-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
- >
- <span class="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true">
- </span>
- {label}
- </span>
- }
-}
-Reusable product use case list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductUseCaseList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ProductUseCaseList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProductUseCaseList.wrn
component ProductUseCaseList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable products mega menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProductsMegaMenu
- label="Products"
- sections="[]"
-/>Legacy mount name: data-component="ProductsMegaMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Products" |
sections | string | Optional | [] |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ProductsMegaMenu.wrn
component ProductsMegaMenu {
- props {
- label = "Products"
- sections = []
- class = ""
- }
- view {
- <MegaMenu label="{label}" sections="{sections}" class="{class}" />
- }
-}
-Reusable progress bar component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProgressBar
- value="0"
- max="100"
- label="Progress"
- showValue="true"
-/>Legacy mount name: data-component="ProgressBar".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
value | number | Optional | 0 |
max | number | Optional | 100 |
label | string | Optional | "Progress" |
showValue | boolean | Optional | true |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ProgressBar.wrn
component ProgressBar {
- props {
- class = ""
- value = 0
- max = 100
- label = "Progress"
- showValue = true
- }
- view {
- <div class="{class}">
- <div class="mb-2 flex justify-between text-sm">
- <span>{label}</span>
- <span data-show="showValue">{value}%</span>
- </div>
- <div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}">
- <div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%">
- </div>
- </div>
- </div>
- }
-}
-Reusable progress chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProgressChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ProgressChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProgressChart.wrn
component ProgressChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable progress ring component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProgressRing
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ProgressRing".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProgressRing.wrn
component ProgressRing {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable progress slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProgressSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProgressSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProgressSlider.wrn
component ProgressSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable project card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProjectCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="ProjectCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProjectCard.wrn
component ProjectCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--project {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable project selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProjectSelector
- label="Project"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ProjectSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Project" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProjectSelector.wrn
component ProjectSelector {
- props {
- label = "Project"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable project switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProjectSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ProjectSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProjectSwitcher.wrn
component ProjectSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable promo code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PromoCodeInput
- label="PromoCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PromoCodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PromoCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PromoCodeInput.wrn
component PromoCodeInput {
- props {
- label = "PromoCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable prompt dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PromptDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="PromptDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PromptDialog.wrn
component PromptDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable provider selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ProviderSelector
- label="Provider"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ProviderSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Provider" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ProviderSelector.wrn
component ProviderSelector {
- props {
- label = "Provider"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable public footer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicFooter
- homeHref="/"
- brandName="WRNexusJS"
- brandTagline="Identity Cloud"
- brandAriaLabel="WRNexusJS home"
- brandIcon="icon-[lucide--blocks]"
-/>Legacy mount name: data-component="PublicFooter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
homeHref | string | Optional | "/" |
brandName | string | Optional | "WRNexusJS" |
brandTagline | string | Optional | "Identity Cloud" |
brandAriaLabel | string | Optional | "WRNexusJS home" |
brandIcon | string | Optional | "icon-[lucide--blocks]" |
brandDescription | string | Optional | "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications." |
statusLabel | string | Optional | "All systems operational" |
statusHref | string | Optional | "/status" |
newsletterEyebrow | string | Optional | "WRNexusJS updates" |
newsletterTitle | string | Optional | "Identity insights delivered to your inbox" |
newsletterDescription | string | Optional | "Get product updates, security guidance, implementation strategies, and practical identity architecture resources." |
newsletterAction | string | Optional | "/api/newsletter/subscribe" |
newsletterButtonLabel | string | Optional | "Subscribe" |
newsletterPlaceholder | string | Optional | "Enter your work email" |
newsletterSuccessMessage | string | Optional | "Thanks. Please check your inbox to confirm your subscription." |
newsletterPrivacyLabel | string | Optional | "privacy policy" |
newsletterPrivacyHref | string | Optional | "/privacy" |
newsletterFinePrintPrefix | string | Optional | "No spam. Unsubscribe at any time. Read our" |
newsletterFinePrintSuffix | string | Optional | "." |
newsletterEmailLabel | string | Optional | "Work email address" |
newsletterEmailName | string | Optional | "email" |
copyrightText | string | Optional | "© 2026 WRNexusJS. All rights reserved." |
attributionText | string | Optional | "Built by WorkRoot Workspace." |
showNewsletter | boolean | Optional | true |
showSocialLinks | boolean | Optional | true |
showThemeToggle | boolean | Optional | true |
showStatus | boolean | Optional | true |
showCookiePreferences | boolean | Optional | true |
cookiePreferencesLabel | string | Optional | "Cookie preferences" |
themeLabel | string | Optional | "Theme" |
themeToggleLabel | string | Optional | "Toggle color theme" |
legalTitle | string | Optional | "Legal" |
socialLinks | PublicFooterLink[] | Optional | [] |
navigationColumns | PublicFooterColumn[] | Optional | [] |
legalLinks | PublicFooterLink[] | Optional | [] |
navigationAriaLabel | string | Optional | "Footer navigation" |
navigationsubmitInstalled source: components/PublicFooter.wrn
component PublicFooter {
- types {
- interface PublicFooterLink {
- label: string
- href: string
- ariaLabel?: string
- target?: string
- icon?: string
- }
- interface PublicFooterColumn {
- title: string
- links: PublicFooterLink[]
- }
- }
- props {
- class: string = ""
- homeHref: string = "/"
- brandName: string = "WRNexusJS"
- brandTagline: string = "Identity Cloud"
- brandAriaLabel: string = "WRNexusJS home"
- brandIcon: string = "icon-[lucide--blocks]"
- brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications."
- statusLabel: string = "All systems operational"
- statusHref: string = "/status"
- newsletterEyebrow: string = "WRNexusJS updates"
- newsletterTitle: string = "Identity insights delivered to your inbox"
- newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources."
- newsletterAction: string = "/api/newsletter/subscribe"
- newsletterButtonLabel: string = "Subscribe"
- newsletterPlaceholder: string = "Enter your work email"
- newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription."
- newsletterPrivacyLabel: string = "privacy policy"
- newsletterPrivacyHref: string = "/privacy"
- newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our"
- newsletterFinePrintSuffix: string = "."
- newsletterEmailLabel: string = "Work email address"
- newsletterEmailName: string = "email"
- copyrightText: string = "© 2026 WRNexusJS. All rights reserved."
- attributionText: string = "Built by WorkRoot Workspace."
- showNewsletter: boolean = true
- showSocialLinks: boolean = true
- showThemeToggle: boolean = true
- showStatus: boolean = true
- showCookiePreferences: boolean = true
- cookiePreferencesLabel: string = "Cookie preferences"
- themeLabel: string = "Theme"
- themeToggleLabel: string = "Toggle color theme"
- legalTitle: string = "Legal"
- socialLinks: PublicFooterLink[] = []
- navigationColumns: PublicFooterColumn[] = []
- legalLinks: PublicFooterLink[] = []
- navigationAriaLabel: string = "Footer navigation"
- }
- state email = ""
- state newsletterSubmitted = false
-
- view {
- <footer
- class="relative overflow-hidden border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-slate-950 {class}"
- >
- <!-- Decorative background -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-x-0 top-0 h-96 overflow-hidden"
- >
- <div class="absolute -left-32 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10">
- </div>
- <div class="absolute -right-32 -top-48 h-96 w-96 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10">
- </div>
- </div>
- <div class="relative w-full px-5 py-12 sm:px-8 lg:px-10 lg:py-16 xl:px-12">
- <!-- Newsletter and CTA -->
- <section data-show="showNewsletter"
- aria-labelledby="footer-newsletter-title"
- class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 sm:p-8 lg:p-10"
- >
- <div aria-hidden="true" class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div aria-hidden="true" class="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" >
- </div>
- <div class="relative grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.75fr)]">
- <div>
- <span
- class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
- >
- <span class="icon-[lucide--mail-plus] h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- {newsletterEyebrow}
- </span>
- <h2
- id="footer-newsletter-title"
- class="mt-5 max-w-2xl text-2xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-3xl"
- >
- {newsletterTitle}
- </h2>
- <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base">
- {newsletterDescription}
- </p>
- </div>
- <div>
- <form
- method="post"
- action="{newsletterAction}"
- @submit="newsletterSubmitted = true"
- class="rounded-2xl border border-slate-200 bg-white/80 p-2 shadow-lg shadow-slate-950/5 backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
- >
- <div class="flex flex-col gap-2 sm:flex-row">
- <label
- class="sr-only"
- for="footer-newsletter-email"
- >
- {newsletterEmailLabel}
- </label>
- <div class="relative min-w-0 flex-1">
- <span class="icon-[lucide--mail] pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" aria-hidden="true" >
- </span>
- <input
- id="footer-newsletter-email"
- name="{newsletterEmailName}"
- type="email"
- autocomplete="email"
- required
- bind:value="email"
- placeholder="{newsletterPlaceholder}"
- class="h-12 w-full rounded-xl border border-transparent bg-transparent pl-11 pr-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-indigo-300 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 dark:text-white dark:focus:border-indigo-500/30 dark:focus:bg-slate-900"
- />
- </div>
- <button
- type="submit"
- class="group inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- >
- {newsletterButtonLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </button>
- </div>
- </form>
- <p class="mt-3 flex items-start gap-2 text-xs leading-5 text-slate-500 dark:text-slate-400">
- <span class="icon-[lucide--shield-check] mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" >
- </span>
-
- {newsletterFinePrintPrefix}
- <a
- href="{newsletterPrivacyHref}"
- class="font-semibold text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- {newsletterPrivacyLabel}
- </a>{newsletterFinePrintSuffix}
- </p>
- <div
- data-show="newsletterSubmitted"
- role="status"
- class="mt-3 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
- >
- <span class="icon-[lucide--circle-check] h-4 w-4 shrink-0" aria-hidden="true" >
- </span>
-
- {newsletterSuccessMessage}
- </div>
- </div>
- </div>
- </section>
- <!-- Main footer -->
- <div class="mt-12 grid gap-10 lg:grid-cols-[minmax(16rem,1.25fr)_minmax(0,3fr)] lg:gap-16">
- <!-- Brand -->
- <div>
- <a
- href="{homeHref}"
- aria-label="{brandAriaLabel}"
- class="group inline-flex items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
- >
- <span
- class="grid h-11 w-11 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition group-hover:-translate-y-0.5 group-hover:bg-indigo-500"
- >
- <span class="{brandIcon} h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
- {brandName}
- </span>
- <span
- class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
- >
- {brandTagline}
- </span>
- </span>
- </a>
- <p class="mt-5 max-w-sm text-sm leading-6 text-slate-600 dark:text-slate-400">
- {brandDescription}
- </p>
- <div data-show="showStatus" class="mt-6 flex flex-wrap items-center gap-2">
- <a
- href="{statusHref}"
- class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:border-emerald-500/30"
- >
- <span class="relative flex h-2 w-2">
- <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60">
- </span>
- <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500">
- </span>
- </span>
-
- {statusLabel}
- </a>
- </div>
- <!-- Social links -->
- <div data-show="showSocialLinks" class="mt-6 flex items-center gap-2">
- {#if socialLinks.length > 0}
- {#each socialLinks as item}
- <a href="{item.href}" target="{item.target || '_blank'}" rel="noopener noreferrer" aria-label="{item.ariaLabel || item.label}" class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300">
- <span class="{item.icon || 'icon-[lucide--external-link]'} h-4.5 w-4.5" aria-hidden="true">
- </span>
- <span class="sr-only">{item.label}</span>
- </a>
- {/each}
- {:else}
- <a
- href="https://github.com/wrnexus"
- target="_blank"
- rel="noopener noreferrer"
- aria-label="WRNexusJS on GitHub"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--github] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </a>
- <a
- href="https://www.linkedin.com/company/wrnexus"
- target="_blank"
- rel="noopener noreferrer"
- aria-label="WRNexusJS on LinkedIn"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--linkedin] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </a>
- <a
- href="https://x.com/wrnexus"
- target="_blank"
- rel="noopener noreferrer"
- aria-label="WRNexusJS on X"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--twitter] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </a>
- <a
- href="https://www.youtube.com/@wrnexus"
- target="_blank"
- rel="noopener noreferrer"
- aria-label="WRNexusJS on YouTube"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--youtube] h-4.5 w-4.5" aria-hidden="true" >
- </span>
- </a>
- {/if}
- </div>
- </div>
- <!-- Navigation columns -->
- <nav
- aria-label="{navigationAriaLabel}"
- class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 xl:grid-cols-5"
- >
- <slot name="navigation">
- {#if navigationColumns.length > 0}
- {#each navigationColumns as column}
- <div>
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">{column.title}</h3>
- <ul class="mt-4 space-y-3">{#each column.links as item}<li>
- <a href="{item.href}" target="{item.target || '_self'}" aria-label="{item.ariaLabel || item.label}" class="footer-link">{item.label}</a>
- </li>{/each}</ul>
- </div>
- {/each}
- {:else}
- <!-- Product -->
- <div>
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- Product
- </h3>
- <ul class="mt-4 space-y-3">
- <li>
- <a
- href="/platform"
- class="footer-link"
- >
- Platform
- </a>
- </li>
- <li>
- <a
- href="/authentication"
- class="footer-link"
- >
- Authentication
- </a>
- </li>
- <li>
- <a
- href="/user-management"
- class="footer-link"
- >
- User management
- </a>
- </li>
- <li>
- <a
- href="/organizations"
- class="footer-link"
- >
- Organizations
- </a>
- </li>
- <li>
- <a
- href="/authorization"
- class="footer-link"
- >
- Authorization
- </a>
- </li>
- <li>
- <a
- href="/enterprise-sso"
- class="footer-link"
- >
- Enterprise SSO
- </a>
- </li>
- </ul>
- </div>
- <!-- Solutions -->
- <div>
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- Solutions
- </h3>
- <ul class="mt-4 space-y-3">
- <li>
- <a
- href="/solutions/startups"
- class="footer-link"
- >
- Startups
- </a>
- </li>
- <li>
- <a
- href="/solutions/saas"
- class="footer-link"
- >
- SaaS
- </a>
- </li>
- <li>
- <a
- href="/solutions/enterprise"
- class="footer-link"
- >
- Enterprise
- </a>
- </li>
- <li>
- <a
- href="/solutions/developers"
- class="footer-link"
- >
- Developers
- </a>
- </li>
- <li>
- <a
- href="/solutions/agencies"
- class="footer-link"
- >
- Agencies
- </a>
- </li>
- <li>
- <a
- href="/solutions/b2b"
- class="footer-link"
- >
- B2B
- </a>
- </li>
- </ul>
- </div>
- <!-- Developers -->
- <div>
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- Developers
- </h3>
- <ul class="mt-4 space-y-3">
- <li>
- <a
- href="/docs"
- class="footer-link"
- >
- Documentation
- </a>
- </li>
- <li>
- <a
- href="/docs/api"
- class="footer-link"
- >
- API reference
- </a>
- </li>
- <li>
- <a
- href="/sdks"
- class="footer-link"
- >
- SDKs
- </a>
- </li>
- <li>
- <a
- href="/examples"
- class="footer-link"
- >
- Examples
- </a>
- </li>
- <li>
- <a
- href="/docs/webhooks"
- class="footer-link"
- >
- Webhooks
- </a>
- </li>
- <li>
- <a
- href="/changelog"
- class="footer-link"
- >
- Changelog
- </a>
- </li>
- </ul>
- </div>
- <!-- Resources -->
- <div>
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- Resources
- </h3>
- <ul class="mt-4 space-y-3">
- <li>
- <a
- href="/blog"
- class="footer-link"
- >
- Blog
- </a>
- </li>
- <li>
- <a
- href="/guides"
- class="footer-link"
- >
- Guides
- </a>
- </li>
- <li>
- <a
- href="/customers"
- class="footer-link"
- >
- Customers
- </a>
- </li>
- <li>
- <a
- href="/help"
- class="footer-link"
- >
- Help center
- </a>
- </li>
- <li>
- <a
- href="/security"
- class="footer-link"
- >
- Security
- </a>
- </li>
- <li>
- <a
- href="/trust"
- class="footer-link"
- >
- Trust center
- </a>
- </li>
- </ul>
- </div>
- <!-- Company -->
- <div>
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- Company
- </h3>
- <ul class="mt-4 space-y-3">
- <li>
- <a
- href="/about"
- class="footer-link"
- >
- About
- </a>
- </li>
- <li>
- <a
- href="/careers"
- class="footer-link"
- >
- Careers
- </a>
- </li>
- <li>
- <a
- href="/partners"
- class="footer-link"
- >
- Partners
- </a>
- </li>
- <li>
- <a
- href="/contact"
- class="footer-link"
- >
- Contact
- </a>
- </li>
- <li>
- <a
- href="/pricing"
- class="footer-link"
- >
- Pricing
- </a>
- </li>
- <li>
- <a
- href="/status"
- class="footer-link"
- >
- Status
- </a>
- </li>
- </ul>
- </div>
- {/if}
- </slot>
- </nav>
- </div>
- <!-- Bottom bar -->
- <div
- class="mt-12 flex flex-col gap-5 border-t border-slate-200 pt-6 dark:border-white/10 lg:flex-row lg:items-center lg:justify-between"
- >
- <div
- class="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:gap-4"
- >
- <p>
- {copyrightText}
- </p>
- <span class="hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block">
- </span>
- <p>
- {attributionText}
- </p>
- </div>
- <div class="flex flex-wrap items-center gap-x-5 gap-y-3">
- {#if legalLinks.length > 0}
- {#each legalLinks as item}<a href="{item.href}" target="{item.target || '_self'}" class="footer-bottom-link">{item.label}</a>{/each}
- {:else}
- <a
- href="/privacy"
- class="footer-bottom-link"
- >
- Privacy
- </a>
- <a
- href="/terms"
- class="footer-bottom-link"
- >
- Terms
- </a>
- <a
- href="/cookies"
- class="footer-bottom-link"
- >
- Cookies
- </a>
- <a
- href="/legal"
- class="footer-bottom-link"
- >
- {legalTitle}
- </a>
- {/if}
-
- <button data-show="showCookiePreferences"
- type="button"
- data-open-cookie-preferences
- class="footer-bottom-link"
- >
- {cookiePreferencesLabel}
- </button>
- <button data-show="showThemeToggle"
- type="button"
- data-wire-theme-toggle
- aria-label="{themeToggleLabel}"
- title="{themeToggleLabel}"
- class="inline-flex items-center gap-2 rounded-lg text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--moon] h-3.5 w-3.5 dark:hidden" aria-hidden="true" >
- </span>
- <span class="icon-[lucide--sun] hidden h-3.5 w-3.5 dark:block" aria-hidden="true" >
- </span>
-
- {themeLabel}
- </button>
- </div>
- </div>
- </div>
- </footer>
- }
-}
-Reusable public header logo component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicHeaderLogo
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PublicHeaderLogo".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PublicHeaderLogo.wrn
component PublicHeaderLogo {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable public header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicHeader
- homeHref="/"
- brandName="WRNexusJS"
- brandTagline="Identity Cloud"
- brandAriaLabel="WRNexusJS home"
- brandIcon="icon-[lucide--blocks]"
-/>Legacy mount name: data-component="PublicHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
homeHref | string | Optional | "/" |
brandName | string | Optional | "WRNexusJS" |
brandTagline | string | Optional | "Identity Cloud" |
brandAriaLabel | string | Optional | "WRNexusJS home" |
brandIcon | string | Optional | "icon-[lucide--blocks]" |
pricingLabel | string | Optional | "Pricing" |
pricingHref | string | Optional | "/pricing" |
statusLabel | string | Optional | "All systems operational" |
statusHref | string | Optional | "/status" |
signInLabel | string | Optional | "Sign in" |
signInHref | string | Optional | "/sign-in" |
primaryLabel | string | Optional | "Start free" |
primaryHref | string | Optional | "/sign-up" |
showStatus | boolean | Optional | true |
showThemeToggle | boolean | Optional | true |
showSignIn | boolean | Optional | true |
showPrimaryAction | boolean | Optional | true |
productLabel | string | Optional | "Product" |
solutionsLabel | string | Optional | "Solutions" |
developersLabel | string | Optional | "Developers" |
resourcesLabel | string | Optional | "Resources" |
navigationAriaLabel | string | Optional | "Main navigation" |
themeToggleLabel | string | Optional | "Toggle color theme" |
mobileMenuOpenLabel | string | Optional | "Open navigation menu" |
mobileMenuCloseLabel | string | Optional | "Close navigation menu" |
navigationItems | PublicHeaderNavigationItem[] | Optional | [] |
actionItems | PublicHeaderActionItem[] | Optional | [] |
showNavigation | boolean | Optional | true |
showMobileThemeToggle | boolean | Optional | true |
navigationactionsclickInstalled source: components/PublicHeader.wrn
component PublicHeader {
- types {
- interface PublicHeaderNavigationItem {
- label: string
- href: string
- ariaLabel?: string
- target?: string
- }
- interface PublicHeaderActionItem extends PublicHeaderNavigationItem {
- variant?: "primary" | "secondary" | "ghost"
- }
- }
- props {
- class: string = ""
- homeHref: string = "/"
- brandName: string = "WRNexusJS"
- brandTagline: string = "Identity Cloud"
- brandAriaLabel: string = "WRNexusJS home"
- brandIcon: string = "icon-[lucide--blocks]"
- pricingLabel: string = "Pricing"
- pricingHref: string = "/pricing"
- statusLabel: string = "All systems operational"
- statusHref: string = "/status"
- signInLabel: string = "Sign in"
- signInHref: string = "/sign-in"
- primaryLabel: string = "Start free"
- primaryHref: string = "/sign-up"
- showStatus: boolean = true
- showThemeToggle: boolean = true
- showSignIn: boolean = true
- showPrimaryAction: boolean = true
- productLabel: string = "Product"
- solutionsLabel: string = "Solutions"
- developersLabel: string = "Developers"
- resourcesLabel: string = "Resources"
- navigationAriaLabel: string = "Main navigation"
- themeToggleLabel: string = "Toggle color theme"
- mobileMenuOpenLabel: string = "Open navigation menu"
- mobileMenuCloseLabel: string = "Close navigation menu"
- navigationItems: PublicHeaderNavigationItem[] = []
- actionItems: PublicHeaderActionItem[] = []
- showNavigation: boolean = true
- showMobileThemeToggle: boolean = true
- }
- state activeMenu = ""
- state mobileMenuOpen = false
- state headerScrolled = false
-
- view {
- <header
- data-public-header
- class="relative sticky top-0 z-50 w-full border-b transition-all duration-300 {class}"
- class:border-transparent="!headerScrolled"
- class:bg-transparent="!headerScrolled"
- class:border-slate-200/80="headerScrolled"
- class:bg-white/90="headerScrolled"
- class:shadow-sm="headerScrolled"
- class:backdrop-blur-xl="headerScrolled"
- class:dark:border-white/10="headerScrolled"
- class:dark:bg-slate-950/90="headerScrolled"
- >
- <div
- class="relative z-[60] flex h-18 w-full items-center justify-between gap-6 px-5 sm:px-8 lg:px-10 xl:px-12"
- >
- <!-- Brand -->
- <a
- href="{homeHref}"
- aria-label="{brandAriaLabel}"
- class="group inline-flex shrink-0 items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
- >
- <span
- class="grid h-10 w-10 place-items-center rounded-xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition duration-200 group-hover:-translate-y-0.5 group-hover:bg-indigo-500 group-hover:shadow-xl"
- >
- <span class="{brandIcon} h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
- {brandName}
- </span>
- <span
- class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
- >
- {brandTagline}
- </span>
- </span>
- </a>
- <!-- Desktop navigation -->
- <nav
- aria-label="{navigationAriaLabel}"
- data-show="showNavigation"
- class="hidden items-center gap-1 lg:flex"
- >
- <slot name="navigation">
- {#if navigationItems.length > 0}
- {#each navigationItems as item}
- <a href="{item.href}" aria-label="{item.ariaLabel || item.label}" target="{item.target || '_self'}" class="inline-flex h-10 items-center rounded-xl px-3.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white">{item.label}</a>
- {/each}
- {:else}
- <!-- Product -->
- <button
- type="button"
- @click="activeMenu = activeMenu === 'product' ? '' : 'product'"
- aria-haspopup="true"
- aria-expanded="{activeMenu === 'product'}"
- class="inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
- class:bg-indigo-50="activeMenu === 'product'"
- class:text-indigo-700="activeMenu === 'product'"
- class:text-slate-700="activeMenu !== 'product'"
- class:hover:bg-slate-100="activeMenu !== 'product'"
- class:dark:bg-indigo-500/10="activeMenu === 'product'"
- class:dark:text-indigo-300="activeMenu === 'product'"
- class:dark:text-slate-300="activeMenu !== 'product'"
- class:dark:hover:bg-white/5="activeMenu !== 'product'"
- >
- {productLabel}
-
- <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'product'" aria-hidden="true" >
- </span>
- </button>
- <!-- Solutions -->
- <button
- type="button"
- @click="activeMenu = activeMenu === 'solutions' ? '' : 'solutions'"
- aria-haspopup="true"
- aria-expanded="{activeMenu === 'solutions'}"
- class="group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
- class:bg-indigo-50="activeMenu === 'solutions'"
- class:text-indigo-700="activeMenu === 'solutions'"
- class:text-slate-700="activeMenu !== 'solutions'"
- class:hover:bg-slate-100="activeMenu !== 'solutions'"
- class:hover:text-slate-950="activeMenu !== 'solutions'"
- class:dark:bg-indigo-500/10="activeMenu === 'solutions'"
- class:dark:text-indigo-300="activeMenu === 'solutions'"
- class:dark:text-slate-300="activeMenu !== 'solutions'"
- class:dark:hover:bg-white/5="activeMenu !== 'solutions'"
- class:dark:hover:text-white="activeMenu !== 'solutions'"
- >
- {solutionsLabel}
-
- <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'solutions'" aria-hidden="true" >
- </span>
- </button>
- <!-- Developers -->
- <button
- type="button"
- @click="activeMenu = activeMenu === 'developers' ? '' : 'developers'"
- aria-haspopup="true"
- aria-expanded="{activeMenu === 'developers'}"
- class="group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
- class:bg-indigo-50="activeMenu === 'developers'"
- class:text-indigo-700="activeMenu === 'developers'"
- class:text-slate-700="activeMenu !== 'developers'"
- class:hover:bg-slate-100="activeMenu !== 'developers'"
- class:hover:text-slate-950="activeMenu !== 'developers'"
- class:dark:bg-indigo-500/10="activeMenu === 'developers'"
- class:dark:text-indigo-300="activeMenu === 'developers'"
- class:dark:text-slate-300="activeMenu !== 'developers'"
- class:dark:hover:bg-white/5="activeMenu !== 'developers'"
- class:dark:hover:text-white="activeMenu !== 'developers'"
- >
- {developersLabel}
-
- <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'developers'" aria-hidden="true" >
- </span>
- </button>
- <!-- Resources -->
- <button
- type="button"
- @click="activeMenu = activeMenu === 'resources' ? '' : 'resources'"
- aria-haspopup="true"
- aria-expanded="{activeMenu === 'resources'}"
- class="group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition"
- class:bg-indigo-50="activeMenu === 'resources'"
- class:text-indigo-700="activeMenu === 'resources'"
- class:text-slate-700="activeMenu !== 'resources'"
- class:hover:bg-slate-100="activeMenu !== 'resources'"
- class:hover:text-slate-950="activeMenu !== 'resources'"
- class:dark:bg-indigo-500/10="activeMenu === 'resources'"
- class:dark:text-indigo-300="activeMenu === 'resources'"
- class:dark:text-slate-300="activeMenu !== 'resources'"
- class:dark:hover:bg-white/5="activeMenu !== 'resources'"
- class:dark:hover:text-white="activeMenu !== 'resources'"
- >
- {resourcesLabel}
-
- <span class="icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200" class:rotate-180="activeMenu === 'resources'" aria-hidden="true" >
- </span>
- </button>
- <a
- href="{pricingHref}"
- class="inline-flex h-10 items-center rounded-xl px-3.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white"
- >
- {pricingLabel}
- </a>
- {/if}
- </slot>
- </nav>
- <!-- Desktop actions -->
- <div class="hidden items-center gap-2 lg:flex">
- <slot name="actions">
- {#if actionItems.length > 0}
- {#each actionItems as item}
- <a href="{item.href}" aria-label="{item.ariaLabel || item.label}" target="{item.target || '_self'}" class="wire-public-header-action wire-public-header-action--{item.variant || 'secondary'}">{item.label}{#if item.variant === 'primary'}<span aria-hidden="true">→</span>{/if}</a>
- {/each}
- {:else}
- <a data-show="showStatus"
- href="{statusHref}"
- class="mr-1 inline-flex items-center gap-2 rounded-xl px-3 py-2 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white"
- >
- <span class="relative flex h-2 w-2">
- <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60">
- </span>
- <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500">
- </span>
- </span>
-
- {statusLabel}
- </a>
- <button data-show="showThemeToggle"
- type="button"
- data-wire-theme-toggle
- aria-label="{themeToggleLabel}"
- title="{themeToggleLabel}"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--moon] h-4 w-4 dark:hidden" aria-hidden="true" >
- </span>
- <span class="icon-[lucide--sun] hidden h-4 w-4 dark:block" aria-hidden="true" >
- </span>
- <span class="sr-only">
- {themeToggleLabel}
- </span>
- </button>
- <a data-show="showSignIn"
- href="{signInHref}"
- class="inline-flex h-10 items-center justify-center rounded-xl px-4 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-white"
- >
- {signInLabel}
- </a>
- <a data-show="showPrimaryAction"
- href="{primaryHref}"
- class="group inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950"
- >
- {primaryLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true" >
- </span>
- </a>
- {/if}
- </slot>
- </div>
- <!-- Mobile actions -->
- <div class="flex items-center gap-2 lg:hidden">
- <button data-show="showThemeToggle && showMobileThemeToggle"
- type="button"
- data-wire-theme-toggle
- aria-label="{themeToggleLabel}"
- title="{themeToggleLabel}"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--moon] h-4 w-4 dark:hidden" aria-hidden="true" >
- </span>
- <span class="icon-[lucide--sun] hidden h-4 w-4 dark:block" aria-hidden="true" >
- </span>
- </button>
- <button
- type="button"
- @click="mobileMenuOpen = !mobileMenuOpen"
- aria-label="{mobileMenuOpen ? mobileMenuCloseLabel : mobileMenuOpenLabel}"
- aria-expanded="{mobileMenuOpen}"
- aria-controls="public-mobile-navigation"
- class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span data-show="!mobileMenuOpen" class="icon-[lucide--menu] h-5 w-5" aria-hidden="true" >
- </span>
- <span data-show="mobileMenuOpen" class="icon-[lucide--x] h-5 w-5" aria-hidden="true" >
- </span>
- <span class="sr-only">
- Toggle navigation
- </span>
- </button>
- </div>
- </div>
- <!-- Outside-click backdrop -->
- <button type="button" data-show="activeMenu !== ''" @click="activeMenu = ''" aria-label="{mobileMenuCloseLabel}" class="fixed inset-0 z-40 hidden cursor-default bg-transparent lg:block" class:hidden="activeMenu === ''" class:block="activeMenu !== ''" >
- </button>
- <!-- Desktop mega menus -->
- <div
- class="absolute inset-x-0 top-full z-50 max-lg:hidden"
- class:hidden="activeMenu === ''"
- class:block="activeMenu !== ''"
- >
- <div
- class:hidden="activeMenu !== 'product'"
- class:block="activeMenu === 'product'"
- >
- <ProductMegaMenu />
- </div>
- <div
- class:hidden="activeMenu !== 'solutions'"
- class:block="activeMenu === 'solutions'"
- >
- <SolutionsMegaMenu />
- </div>
- <div
- class:hidden="activeMenu !== 'developers'"
- class:block="activeMenu === 'developers'"
- >
- <DevelopersMegaMenu />
- </div>
- <div
- class:hidden="activeMenu !== 'resources'"
- class:block="activeMenu === 'resources'"
- >
- <ResourcesMegaMenu />
- </div>
- </div>
- <!-- Mobile navigation -->
- <div
- id="public-mobile-navigation"
- class="lg:hidden"
- class:hidden="!mobileMenuOpen"
- class:block="mobileMenuOpen"
- >
- {#if navigationItems.length > 0 || actionItems.length > 0}
- <nav aria-label="{navigationAriaLabel}" class="border-t border-slate-200 bg-white px-5 py-5 shadow-xl dark:border-white/10 dark:bg-slate-950">
- <div class="grid gap-2">
- {#each navigationItems as item}<a href="{item.href}" target="{item.target || '_self'}" class="rounded-xl px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5">{item.label}</a>{/each}
- {#each actionItems as item}<a href="{item.href}" target="{item.target || '_self'}" class="wire-public-header-action wire-public-header-action--{item.variant || 'secondary'}">{item.label}</a>{/each}
- </div>
- </nav>
- {:else}
- <PublicMobileNavigation />
- {/if}
- </div>
- </header>
- }
-}
-Reusable public mobile navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicMobileNavigation />Legacy mount name: data-component="PublicMobileNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
clickInstalled source: components/PublicMobileNavigation.wrn
component PublicMobileNavigation {
- props {
- class: string = ""
- }
- state openSection = ""
-
- view {
- <div
- class="border-t border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-slate-950 lg:hidden {class}"
- >
- <div class="mx-auto max-h-[calc(100dvh-4.5rem)] max-w-7xl overflow-y-auto px-5 py-5 sm:px-8">
- <!-- Mobile status -->
- <a
- href="/status"
- class="mb-5 flex items-center justify-between rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/15"
- >
- <span class="flex items-center gap-3">
- <span class="relative flex h-2.5 w-2.5 shrink-0">
- <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60">
- </span>
- <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500">
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-emerald-900 dark:text-emerald-100">
- All systems operational
- </span>
- <span class="mt-0.5 block text-xs text-emerald-700 dark:text-emerald-300">
- View service status
- </span>
- </span>
- </span>
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-emerald-700 dark:text-emerald-300" aria-hidden="true" >
- </span>
- </a>
- <nav
- aria-label="Mobile navigation"
- class="space-y-2"
- >
- <!-- Product -->
- <div
- class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
- >
- <button
- type="button"
- @click="openSection = openSection === 'product' ? '' : 'product'"
- aria-expanded="{openSection === 'product'}"
- aria-controls="mobile-product-menu"
- class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
- class:bg-indigo-50="openSection === 'product'"
- class:dark:bg-indigo-500/10="openSection === 'product'"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
- class:bg-indigo-100="openSection === 'product'"
- class:text-indigo-700="openSection === 'product'"
- class:bg-slate-100="openSection !== 'product'"
- class:text-slate-600="openSection !== 'product'"
- class:dark:bg-indigo-500/15="openSection === 'product'"
- class:dark:text-indigo-300="openSection === 'product'"
- class:dark:bg-white/5="openSection !== 'product'"
- class:dark:text-slate-300="openSection !== 'product'"
- >
- <span class="icon-[lucide--boxes] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold"
- class:text-indigo-950="openSection === 'product'"
- class:text-slate-950="openSection !== 'product'"
- class:dark:text-indigo-100="openSection === 'product'"
- class:dark:text-white="openSection !== 'product'"
- >
- Product
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Explore the WRNexusJS platform
- </span>
- </span>
- </span>
- <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'product'" aria-hidden="true" >
- </span>
- </button>
- <div
- id="mobile-product-menu"
- data-show="openSection === 'product'"
- class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
- >
- <div class="grid gap-1">
- <a
- href="/platform"
- class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
- >
- <span class="icon-[lucide--layers-3] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
- >
- Platform
- </span>
- <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Complete identity infrastructure
- </span>
- </span>
- </a>
- <a
- href="/authentication"
- class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-300"
- >
- <span class="icon-[lucide--fingerprint] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
- >
- Authentication
- </span>
- <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Passwords, passkeys, social login, and SSO
- </span>
- </span>
- </a>
- <a
- href="/user-management"
- class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-cyan-50 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-300"
- >
- <span class="icon-[lucide--users-round] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
- >
- User management
- </span>
- <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Profiles, sessions, invitations, and lifecycle
- </span>
- </span>
- </a>
- <a
- href="/organizations"
- class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300"
- >
- <span class="icon-[lucide--building-2] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
- >
- Organizations
- </span>
- <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Multi-tenant workspaces and teams
- </span>
- </span>
- </a>
- <a
- href="/security"
- class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300"
- >
- <span class="icon-[lucide--shield-check] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
- >
- Security
- </span>
- <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Protect identities and sensitive actions
- </span>
- </span>
- </a>
- <a
- href="/integrations"
- class="group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span
- class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300"
- >
- <span class="icon-[lucide--plug] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span
- class="block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300"
- >
- Integrations
- </span>
- <span class="mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Connect your stack and applications
- </span>
- </span>
- </a>
- </div>
- <a
- href="/product"
- class="mt-2 flex items-center justify-center gap-2 rounded-xl bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/15"
- >
- View all product features
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- <!-- Solutions -->
- <div
- class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
- >
- <button
- type="button"
- @click="openSection = openSection === 'solutions' ? '' : 'solutions'"
- aria-expanded="{openSection === 'solutions'}"
- aria-controls="mobile-solutions-menu"
- class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
- class:bg-indigo-50="openSection === 'solutions'"
- class:dark:bg-indigo-500/10="openSection === 'solutions'"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
- class:bg-indigo-100="openSection === 'solutions'"
- class:text-indigo-700="openSection === 'solutions'"
- class:bg-slate-100="openSection !== 'solutions'"
- class:text-slate-600="openSection !== 'solutions'"
- class:dark:bg-indigo-500/15="openSection === 'solutions'"
- class:dark:text-indigo-300="openSection === 'solutions'"
- class:dark:bg-white/5="openSection !== 'solutions'"
- class:dark:text-slate-300="openSection !== 'solutions'"
- >
- <span class="icon-[lucide--lightbulb] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-950 dark:text-white">
- Solutions
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Built for your business
- </span>
- </span>
- </span>
- <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'solutions'" aria-hidden="true" >
- </span>
- </button>
- <div
- id="mobile-solutions-menu"
- data-show="openSection === 'solutions'"
- class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
- >
- <div class="grid grid-cols-2 gap-2">
- <a
- href="/solutions/startups"
- class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span class="icon-[lucide--rocket] h-5 w-5 text-indigo-600 dark:text-indigo-400">
- </span>
- <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
- Startups
- </span>
- </a>
- <a
- href="/solutions/saas"
- class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span class="icon-[lucide--cloud] h-5 w-5 text-cyan-600 dark:text-cyan-400">
- </span>
- <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
- SaaS
- </span>
- </a>
- <a
- href="/solutions/enterprise"
- class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span class="icon-[lucide--building] h-5 w-5 text-violet-600 dark:text-violet-400">
- </span>
- <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
- Enterprise
- </span>
- </a>
- <a
- href="/solutions/developers"
- class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span class="icon-[lucide--code-2] h-5 w-5 text-emerald-600 dark:text-emerald-400">
- </span>
- <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
- Developers
- </span>
- </a>
- <a
- href="/solutions/agencies"
- class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span class="icon-[lucide--briefcase-business] h-5 w-5 text-amber-600 dark:text-amber-400">
- </span>
- <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
- Agencies
- </span>
- </a>
- <a
- href="/solutions/b2b"
- class="rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5"
- >
- <span class="icon-[lucide--handshake] h-5 w-5 text-rose-600 dark:text-rose-400">
- </span>
- <span class="mt-2 block text-sm font-semibold text-slate-900 dark:text-white">
- B2B
- </span>
- </a>
- </div>
- </div>
- </div>
- <!-- Developers -->
- <div
- class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
- >
- <button
- type="button"
- @click="openSection = openSection === 'developers' ? '' : 'developers'"
- aria-expanded="{openSection === 'developers'}"
- aria-controls="mobile-developers-menu"
- class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
- class:bg-indigo-50="openSection === 'developers'"
- class:dark:bg-indigo-500/10="openSection === 'developers'"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
- class:bg-indigo-100="openSection === 'developers'"
- class:text-indigo-700="openSection === 'developers'"
- class:bg-slate-100="openSection !== 'developers'"
- class:text-slate-600="openSection !== 'developers'"
- class:dark:bg-indigo-500/15="openSection === 'developers'"
- class:dark:text-indigo-300="openSection === 'developers'"
- class:dark:bg-white/5="openSection !== 'developers'"
- class:dark:text-slate-300="openSection !== 'developers'"
- >
- <span class="icon-[lucide--terminal-square] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-950 dark:text-white">
- Developers
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Build with WRNexusJS
- </span>
- </span>
- </span>
- <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'developers'" aria-hidden="true" >
- </span>
- </button>
- <div
- id="mobile-developers-menu"
- data-show="openSection === 'developers'"
- class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
- >
- <div class="grid gap-1">
- <a
- href="/docs"
- class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--book-open] h-5 w-5 text-indigo-600 dark:text-indigo-400">
- </span>
- Documentation
- </a>
- <a
- href="/docs/api"
- class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--braces] h-5 w-5 text-violet-600 dark:text-violet-400">
- </span>
- API reference
- </a>
- <a
- href="/sdks"
- class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--package] h-5 w-5 text-cyan-600 dark:text-cyan-400">
- </span>
- SDKs
- </a>
- <a
- href="/examples"
- class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--flask-conical] h-5 w-5 text-emerald-600 dark:text-emerald-400">
- </span>
- Examples
- </a>
- <a
- href="/changelog"
- class="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--history] h-5 w-5 text-amber-600 dark:text-amber-400">
- </span>
- Changelog
- </a>
- </div>
- </div>
- </div>
- <!-- Resources -->
- <div
- class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
- >
- <button
- type="button"
- @click="openSection = openSection === 'resources' ? '' : 'resources'"
- aria-expanded="{openSection === 'resources'}"
- aria-controls="mobile-resources-menu"
- class="flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5"
- class:bg-indigo-50="openSection === 'resources'"
- class:dark:bg-indigo-500/10="openSection === 'resources'"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl transition"
- class:bg-indigo-100="openSection === 'resources'"
- class:text-indigo-700="openSection === 'resources'"
- class:bg-slate-100="openSection !== 'resources'"
- class:text-slate-600="openSection !== 'resources'"
- class:dark:bg-indigo-500/15="openSection === 'resources'"
- class:dark:text-indigo-300="openSection === 'resources'"
- class:dark:bg-white/5="openSection !== 'resources'"
- class:dark:text-slate-300="openSection !== 'resources'"
- >
- <span class="icon-[lucide--library] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-950 dark:text-white">
- Resources
- </span>
- <span class="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
- Learn and get support
- </span>
- </span>
- </span>
- <span class="icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200" class:rotate-180="openSection === 'resources'" aria-hidden="true" >
- </span>
- </button>
- <div
- id="mobile-resources-menu"
- data-show="openSection === 'resources'"
- class="border-t border-slate-200 px-3 py-3 dark:border-white/10"
- >
- <div class="grid grid-cols-2 gap-2">
- <a
- href="/blog"
- class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
- >
- Blog
- </a>
- <a
- href="/customers"
- class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
- >
- Customer stories
- </a>
- <a
- href="/guides"
- class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
- >
- Guides
- </a>
- <a
- href="/help"
- class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
- >
- Help center
- </a>
- <a
- href="/security"
- class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
- >
- Security
- </a>
- <a
- href="/trust"
- class="rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
- >
- Trust center
- </a>
- </div>
- </div>
- </div>
- <!-- Direct links -->
- <a
- href="/pricing"
- class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-4 text-sm font-semibold text-slate-950 transition hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-indigo-500 dark:hover:bg-indigo-500/10"
- >
- <span class="flex items-center gap-3">
- <span
- class="grid h-10 w-10 place-items-center rounded-xl bg-slate-100 text-slate-600 dark:bg-white/5 dark:text-slate-300"
- >
- <span class="icon-[lucide--badge-dollar-sign] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
-
- Pricing
- </span>
- <span class="icon-[lucide--chevron-right] h-5 w-5 text-slate-400" aria-hidden="true" >
- </span>
- </a>
- </nav>
- <!-- Mobile CTAs -->
- <div class="mt-5 grid gap-3 border-t border-slate-200 pt-5 dark:border-white/10 sm:grid-cols-2">
- <a
- href="/sign-in"
- class="flex h-12 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500 dark:hover:bg-white/10 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--log-in] h-4 w-4" aria-hidden="true" >
- </span>
-
- Sign in
- </a>
- <a
- href="/sign-up"
- class="group flex h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
- >
- Start free
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- <p class="mt-5 text-center text-xs leading-5 text-slate-400 dark:text-slate-500">
- Secure identity infrastructure for modern applications.
- </p>
- </div>
- </div>
- }
-}
-Reusable public page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="PublicPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PublicPageShell.wrn
component PublicPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable public search component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicSearch
- query="query"
- placeholder="Search..."
- label="Search"
- action="action"
- method="get"
-/>Legacy mount name: data-component="PublicSearch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
query | string | Optional | "" |
placeholder | string | Optional | "Search..." |
label | string | Optional | "Search" |
action | string | Optional | "" |
method | string | Optional | "get" |
name | string | Optional | "q" |
buttonLabel | string | Optional | "" |
clearLabel | string | Optional | "Clear search" |
size | string | Optional | "default" |
centered | boolean | Optional | false |
fullWidth | boolean | Optional | false |
showShortcut | boolean | Optional | false |
shortcutLabel | string | Optional | "⌘ K" |
suggestions | string | Optional | [] |
This component does not declare a slot.
inputfocusblurclickInstalled source: components/PublicSearch.wrn
component PublicSearch {
- props {
- class: string = ""
- query = ""
-
- placeholder = "Search..."
- label = "Search"
-
- action = ""
- method = "get"
- name = "q"
-
- buttonLabel = ""
- clearLabel = "Clear search"
-
- size = "default"
- centered = false
- fullWidth = false
-
- showShortcut = false
- shortcutLabel = "⌘ K"
-
- suggestions = []
- }
-
- state searchValue = query
- state focused = false
-
- view {
- <div
- class="w-full {class}"
- class:max-w-2xl="!fullWidth"
- class:mx-auto="centered"
- >
- <form
- action="{action}"
- method="{method}"
- role="search"
- class="w-full"
- >
- <label
- for="public-search-input"
- class="sr-only"
- >
- {label}
- </label>
- <div
- class=" group relative flex w-full items-center rounded-2xl border bg-white shadow-sm transition-all duration-200 dark:bg-white/5 {focused ? 'border-indigo-400 ring-4 ring-indigo-500/10 dark:border-indigo-500/50 dark:ring-indigo-500/10' : 'border-slate-200 hover:border-slate-300 dark:border-white/10 dark:hover:border-white/20' } {size === 'compact' ? 'min-h-11' : size === 'large' ? 'min-h-14' : 'min-h-12' } "
- >
- <!-- Search icon -->
- <span class=" pointer-events-none absolute left-4 text-slate-400 transition group-focus-within:text-indigo-600 dark:text-slate-500 dark:group-focus-within:text-indigo-400 {size === 'large' ? 'h-5 w-5' : 'h-4.5 w-4.5'} icon-[lucide--search] " aria-hidden="true" >
- </span>
- <!-- Input -->
- <input
- id="public-search-input"
- type="search"
- name="{name}"
- value="{searchValue}"
- placeholder="{placeholder}"
- autocomplete="off"
- @input="searchValue = event.target.value"
- @focus="focused = true"
- @blur="focused = false"
- class=" min-w-0 flex-1 bg-transparent text-slate-950 outline-none placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500 {size === 'compact' ? 'h-11 pl-11 pr-3 text-sm' : size === 'large' ? 'h-14 pl-12 pr-4 text-base' : 'h-12 pl-11 pr-4 text-sm' } "
- />
- <!-- Keyboard shortcut -->
- <span
- class="mr-3 hidden shrink-0 items-center rounded-md border border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-semibold text-slate-400 dark:border-white/10 dark:bg-white/5 dark:text-slate-500 sm:inline-flex"
- class:hidden="!showShortcut || searchValue !== ''"
- >
- {shortcutLabel}
- </span>
- <!-- Clear button -->
- <button
- type="button"
- @click="searchValue = ''"
- aria-label="{clearLabel}"
- class="mr-2 grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-500 dark:hover:bg-white/10 dark:hover:text-slate-200"
- class:hidden="searchValue === ''"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- <!-- Submit button -->
- <button
- type="submit"
- class=" mr-1.5 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 {size === 'compact' ? 'h-9 px-3 text-xs' : size === 'large' ? 'h-11 px-5 text-sm' : 'h-10 px-4 text-sm' } "
- class:hidden="buttonLabel === ''"
- class:inline-flex="buttonLabel !== ''"
- >
- {buttonLabel}
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- </form>
- <!-- Suggested searches -->
- <div
- class="mt-4 flex flex-wrap items-center gap-2"
- class:hidden="suggestions.length === 0"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- <span class="mr-1 text-xs font-medium text-slate-500 dark:text-slate-400">
- Popular:
- </span>
-
- {#each suggestions.slice(0, 5) as suggestion}
- <a
- href="{suggestion.href}"
- class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300"
- >
- <span class="{suggestion.iconClass} h-3.5 w-3.5" aria-hidden="true" class:hidden="suggestion.iconClass === ''" >
- </span>
-
- {suggestion.label}
- </a>
- {/each}
- </div>
- </div>
- }
-}
-Reusable publish date time picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PublishDateTimePicker
- label="PublishDateTime"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PublishDateTimePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PublishDateTime" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PublishDateTimePicker.wrn
component PublishDateTimePicker {
- props {
- label = "PublishDateTime"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable push composer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PushComposer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="PushComposer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PushComposer.wrn
component PushComposer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable push notification editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<PushNotificationEditor
- label="PushNotification"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="PushNotificationEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "PushNotification" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/PushNotificationEditor.wrn
component PushNotificationEditor {
- props {
- label = "PushNotification"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable qr code component.
Components are auto-discovered. Use the component directly in any .wrn view:
<QrCode
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="QrCode".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/QrCode.wrn
component QrCode {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable quantity input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<QuantityInput
- label="Quantity"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="QuantityInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Quantity" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/QuantityInput.wrn
component QuantityInput {
- props {
- label = "Quantity"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable quantity stepper component.
Components are auto-discovered. Use the component directly in any .wrn view:
<QuantityStepper
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="QuantityStepper".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/QuantityStepper.wrn
component QuantityStepper {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable quiet hours picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<QuietHoursPicker
- label="Quiet hours"
- startName="quietStart"
- endName="quietEnd"
- start="22:00"
- end="08:00"
-/>Legacy mount name: data-component="QuietHoursPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Quiet hours" |
startName | string | Optional | "quietStart" |
endName | string | Optional | "quietEnd" |
start | string | Optional | "22:00" |
end | string | Optional | "08:00" |
timezone | string | Optional | "UTC" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/QuietHoursPicker.wrn
component QuietHoursPicker {
- props {
- label = "Quiet hours"
- startName = "quietStart"
- endName = "quietEnd"
- start = "22:00"
- end = "08:00"
- timezone = "UTC"
- disabled = false
- class = ""
- }
- view {
- <fieldset class="wire-fieldset {class}" disabled="{disabled}">
- <legend class="wire-label">{label}</legend>
- <div class="wire-form-row">
- <label class="wire-field">
- <span class="wire-label">From</span>
- <input type="time" name="{startName}" value="{start}" class="wire-input" />
- </label>
- <label class="wire-field">
- <span class="wire-label">Until</span>
- <input type="time" name="{endName}" value="{end}" class="wire-input" />
- </label>
- </div>
- <p class="wire-field-message wire-field-message--help">Timezone: {timezone}</p>
- </fieldset>
- }
-}
-Reusable quote text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<QuoteText
- text="text"
- align="start"
-/>Legacy mount name: data-component="QuoteText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/QuoteText.wrn
component QuoteText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--lead wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable radio group component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RadioGroup
- label="Choose one"
- name="choice"
-/>Legacy mount name: data-component="RadioGroup".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Choose one" |
name | string | Optional | "choice" |
defaultThis component does not declare a custom event.
Installed source: components/RadioGroup.wrn
component RadioGroup {
- props {
- class = ""
- label = "Choose one"
- name = "choice"
- }
- view {
- <fieldset class="space-y-3 {class}">
- <legend class="text-sm font-semibold text-slate-900 dark:text-white">{label}</legend>
- <div class="space-y-2">
- <slot />
- </div>
- </fieldset>
- }
-}
-Reusable range input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RangeInput
- label="Range"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RangeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Range" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RangeInput.wrn
component RangeInput {
- props {
- label = "Range"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable rate limit input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RateLimitInput
- label="RateLimit"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RateLimitInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RateLimit" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RateLimitInput.wrn
component RateLimitInput {
- props {
- label = "RateLimit"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable rate limit page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RateLimitPage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="RateLimitPage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RateLimitPage.wrn
component RateLimitPage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable rate limited state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RateLimitedState
- label="RateLimited"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="RateLimitedState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RateLimited" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RateLimitedState.wrn
component RateLimitedState {
- props {
- label = "RateLimited"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable rate table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RateTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="RateTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RateTable.wrn
component RateTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable rating slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RatingSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="RatingSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RatingSlider.wrn
component RatingSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable recipient selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RecipientSelector
- label="Recipient"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RecipientSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Recipient" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RecipientSelector.wrn
component RecipientSelector {
- props {
- label = "Recipient"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable recovery code form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RecoveryCodeForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="RecoveryCodeForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RecoveryCodeForm.wrn
component RecoveryCodeForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-auth-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable recovery code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RecoveryCodeInput
- label="RecoveryCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RecoveryCodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RecoveryCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RecoveryCodeInput.wrn
component RecoveryCodeInput {
- props {
- label = "RecoveryCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable recurrence rule builder component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RecurrenceRuleBuilder
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="RecurrenceRuleBuilder".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RecurrenceRuleBuilder.wrn
component RecurrenceRuleBuilder {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable recurring schedule picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RecurringSchedulePicker
- id="recurring-schedule"
- name="recurrence"
- label="Repeat"
- value="none"
- disabled="false"
-/>Legacy mount name: data-component="RecurringSchedulePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "recurring-schedule" |
name | string | Optional | "recurrence" |
label | string | Optional | "Repeat" |
value | string | Optional | "none" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/RecurringSchedulePicker.wrn
component RecurringSchedulePicker {
- props {
- id = "recurring-schedule"
- name = "recurrence"
- label = "Repeat"
- value = "none"
- disabled = false
- class = ""
- }
- view {
- <div class="wire-field {class}">
- <label for="{id}" class="wire-label">{label}</label>
- <select id="{id}" name="{name}" disabled="{disabled}" class="wire-input">
- <option value="none" selected="{value === 'none'}">Does not repeat</option>
- <option value="daily" selected="{value === 'daily'}">Daily</option>
- <option value="weekly" selected="{value === 'weekly'}">Weekly</option>
- <option value="monthly" selected="{value === 'monthly'}">Monthly</option>
- <option value="yearly" selected="{value === 'yearly'}">Yearly</option>
- </select>
- </div>
- }
-}
-Reusable redirect uri input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RedirectUriInput
- label="RedirectUri"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RedirectUriInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RedirectUri" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RedirectUriInput.wrn
component RedirectUriInput {
- props {
- label = "RedirectUri"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable reference input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ReferenceInput
- label="Reference"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ReferenceInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Reference" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ReferenceInput.wrn
component ReferenceInput {
- props {
- label = "Reference"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable regex input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RegexInput
- label="Regex"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RegexInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Regex" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RegexInput.wrn
component RegexInput {
- props {
- label = "Regex"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable region availability table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RegionAvailabilityTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="RegionAvailabilityTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RegionAvailabilityTable.wrn
component RegionAvailabilityTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable region selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RegionSelector
- label="Region"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RegionSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Region" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RegionSelector.wrn
component RegionSelector {
- props {
- label = "Region"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable region unavailable alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RegionUnavailableAlert
- label="RegionUnavailable"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="RegionUnavailableAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RegionUnavailable" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RegionUnavailableAlert.wrn
component RegionUnavailableAlert {
- props {
- label = "RegionUnavailable"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable region unavailable state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RegionUnavailableState
- label="RegionUnavailable"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="RegionUnavailableState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RegionUnavailable" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RegionUnavailableState.wrn
component RegionUnavailableState {
- props {
- label = "RegionUnavailable"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable regional privacy banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RegionalPrivacyBanner
- label="RegionalPrivacy"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="RegionalPrivacyBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RegionalPrivacy" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RegionalPrivacyBanner.wrn
component RegionalPrivacyBanner {
- props {
- label = "RegionalPrivacy"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable reject optional cookies button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RejectOptionalCookiesButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="RejectOptionalCookiesButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RejectOptionalCookiesButton.wrn
component RejectOptionalCookiesButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable reopen cookie settings button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ReopenCookieSettingsButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ReopenCookieSettingsButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ReopenCookieSettingsButton.wrn
component ReopenCookieSettingsButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable report card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ReportCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ReportCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ReportCard.wrn
component ReportCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable request response viewer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RequestResponseViewer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="RequestResponseViewer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RequestResponseViewer.wrn
component RequestResponseViewer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable request viewer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RequestViewer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="RequestViewer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RequestViewer.wrn
component RequestViewer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable required indicator component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RequiredIndicator
- label="Required"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="RequiredIndicator".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Required" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RequiredIndicator.wrn
component RequiredIndicator {
- props {
- label = "Required"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable reset password form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResetPasswordForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ResetPasswordForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResetPasswordForm.wrn
component ResetPasswordForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-auth-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable resizable panel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResizablePanel
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ResizablePanel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResizablePanel.wrn
component ResizablePanel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable resource card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResourceCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ResourceCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResourceCard.wrn
component ResourceCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable resource download card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResourceDownloadCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ResourceDownloadCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResourceDownloadCard.wrn
component ResourceDownloadCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable resource page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResourcePageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ResourcePageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResourcePageShell.wrn
component ResourcePageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable resource search component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResourceSearch
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ResourceSearch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResourceSearch.wrn
component ResourceSearch {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable resource type badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResourceTypeBadge
- label="ResourceType"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ResourceTypeBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ResourceType" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResourceTypeBadge.wrn
component ResourceTypeBadge {
- props {
- label = "ResourceType"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable resources mega menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResourcesMegaMenu />Legacy mount name: data-component="ResourcesMegaMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/ResourcesMegaMenu.wrn
component ResourcesMegaMenu {
- props {
- class: string = ""
- }
- view {
- <div
- class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
- >
- <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
- <div class="grid gap-8 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.8fr)]">
- <!-- Resource links -->
- <section>
- <div class="mb-5 flex items-end justify-between gap-6">
- <div>
- <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
- Resources
- </p>
- <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
- Learn, build, and get support
- </h2>
- <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
- Explore practical guides, customer stories, product updates,
- and security resources.
- </p>
- </div>
- <a
- href="/resources"
- class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
- >
- View all resources
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- <div class="grid gap-2 md:grid-cols-2">
- <!-- Blog -->
- <a
- href="/blog"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--newspaper] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Blog
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Product updates, engineering insights, identity trends, and
- company news.
- </span>
- </span>
- </a>
- <!-- Customer stories -->
- <a
- href="/customers"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--users-round] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Customer stories
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- See how teams use WRNexusJS to secure and scale their
- applications.
- </span>
- </span>
- </a>
- <!-- Guides -->
- <a
- href="/guides"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--book-marked] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Guides
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Practical identity, security, SaaS, and architecture
- walkthroughs.
- </span>
- </span>
- </a>
- <!-- Help center -->
- <a
- href="/help"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--circle-help] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Help center
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Find answers for account, workspace, billing, and security
- questions.
- </span>
- </span>
- </a>
- <!-- Security -->
- <a
- href="/security"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--shield-check] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Security
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Learn how WRNexusJS protects accounts, sessions, and
- organizations.
- </span>
- </span>
- </a>
- <!-- Trust center -->
- <a
- href="/trust"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--badge-check] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Trust center
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Review compliance, privacy, infrastructure, and operational
- controls.
- </span>
- </span>
- </a>
- </div>
- <a
- href="/resources"
- class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
- >
- View all resources
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- </section>
- <!-- Featured resource -->
- <aside
- class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-cyan-50 p-6 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-cyan-500/10"
- >
- <div aria-hidden="true" class="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div aria-hidden="true" class="absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-cyan-300/30 blur-3xl dark:bg-cyan-500/10" >
- </div>
- <div class="relative">
- <span
- class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
- >
- <span class="icon-[lucide--sparkles] h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- Featured guide
- </span>
- <div
- class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20"
- >
- <span class="icon-[lucide--book-open-check] h-6 w-6" aria-hidden="true" >
- </span>
- </div>
- <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
- The modern SaaS identity checklist
- </h3>
- <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
- A practical checklist covering authentication, organizations,
- permissions, MFA, recovery, sessions, and enterprise SSO.
- </p>
- <div class="mt-5 space-y-3">
- <div class="flex items-center gap-3">
- <span
- class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span class="text-sm text-slate-700 dark:text-slate-300">
- Secure authentication foundations
- </span>
- </div>
- <div class="flex items-center gap-3">
- <span
- class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span class="text-sm text-slate-700 dark:text-slate-300">
- Multi-tenant organization design
- </span>
- </div>
- <div class="flex items-center gap-3">
- <span
- class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--check] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span class="text-sm text-slate-700 dark:text-slate-300">
- Recovery and account protection
- </span>
- </div>
- </div>
- <a
- href="/guides/saas-identity-checklist"
- class="group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- >
- Read the guide
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- <div class="mt-4 flex items-center justify-center gap-4 text-xs text-slate-500 dark:text-slate-400">
- <span class="inline-flex items-center gap-1.5">
- <span class="icon-[lucide--clock-3] h-4 w-4" aria-hidden="true" >
- </span>
-
- 12 min read
- </span>
- <span class="inline-flex items-center gap-1.5">
- <span class="icon-[lucide--download] h-4 w-4" aria-hidden="true" >
- </span>
-
- PDF available
- </span>
- </div>
- </div>
- </aside>
- </div>
- <!-- Bottom resource links -->
- <div
- class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
- >
- <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
- <a
- href="/webinars"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--presentation] h-4 w-4" aria-hidden="true" >
- </span>
-
- Webinars
- </a>
- <a
- href="/events"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--calendar-days] h-4 w-4" aria-hidden="true" >
- </span>
-
- Events
- </a>
- <a
- href="/reports"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--file-chart-column] h-4 w-4" aria-hidden="true" >
- </span>
-
- Reports
- </a>
- <a
- href="/newsletter"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--mail-plus] h-4 w-4" aria-hidden="true" >
- </span>
-
- Newsletter
- </a>
- </div>
- <a
- href="/contact"
- class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- Contact our team
-
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- </div>
- }
-}
-Reusable response viewer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResponseViewer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ResponseViewer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResponseViewer.wrn
component ResponseViewer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable responsible disclosure c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResponsibleDisclosureCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ResponsibleDisclosureCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResponsibleDisclosureCTA.wrn
component ResponsibleDisclosureCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable responsive table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResponsiveTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ResponsiveTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResponsiveTable.wrn
component ResponsiveTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable results section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ResultsSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ResultsSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ResultsSection.wrn
component ResultsSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable retention table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RetentionTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="RetentionTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RetentionTable.wrn
component RetentionTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable retry count input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RetryCountInput
- label="RetryCount"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RetryCountInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RetryCount" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RetryCountInput.wrn
component RetryCountInput {
- props {
- label = "RetryCount"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable revenue chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RevenueChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="RevenueChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RevenueChart.wrn
component RevenueChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable rgb color input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RgbColorInput
- label="RgbColor"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RgbColorInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RgbColor" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RgbColorInput.wrn
component RgbColorInput {
- props {
- label = "RgbColor"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable rich text editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RichTextEditor
- label="RichText"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RichTextEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RichText" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RichTextEditor.wrn
component RichTextEditor {
- props {
- label = "RichText"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable rich text input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RichTextInput
- label="RichText"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RichTextInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RichText" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RichTextInput.wrn
component RichTextInput {
- props {
- label = "RichText"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable role selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RoleSelector
- label="Role"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RoleSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Role" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RoleSelector.wrn
component RoleSelector {
- props {
- label = "Role"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable rolling date range picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<RollingDateRangePicker
- label="RollingDateRange"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="RollingDateRangePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "RollingDateRange" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/RollingDateRangePicker.wrn
component RollingDateRangePicker {
- props {
- label = "RollingDateRange"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable save cookie preferences button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SaveCookiePreferencesButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="SaveCookiePreferencesButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SaveCookiePreferencesButton.wrn
component SaveCookiePreferencesButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable saved filter selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SavedFilterSelector
- label="SavedFilter"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SavedFilterSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SavedFilter" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SavedFilterSelector.wrn
component SavedFilterSelector {
- props {
- label = "SavedFilter"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable schedule message picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ScheduleMessagePicker
- label="ScheduleMessage"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ScheduleMessagePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ScheduleMessage" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ScheduleMessagePicker.wrn
component ScheduleMessagePicker {
- props {
- label = "ScheduleMessage"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable schedule picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SchedulePicker
- label="Schedule"
-/>Legacy mount name: data-component="SchedulePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Schedule" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/SchedulePicker.wrn
component SchedulePicker {
- props {
- class = ""
- label = "Schedule"
- }
- view {
- <fieldset class="space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800 {class}">
- <legend class="px-2 font-semibold">{label}</legend>
- <DateTimeInput id="scheduleAt" name="scheduleAt" label="Date and time" />
- <TimezoneSelector />
- </fieldset>
- }
-}
-Reusable scheduled date time picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ScheduledDateTimePicker
- label="ScheduledDateTime"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ScheduledDateTimePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ScheduledDateTime" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ScheduledDateTimePicker.wrn
component ScheduledDateTimePicker {
- props {
- label = "ScheduledDateTime"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable screenshot frame component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ScreenshotFrame
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="ScreenshotFrame".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ScreenshotFrame.wrn
component ScreenshotFrame {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable scroll area component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ScrollArea />Legacy mount name: data-component="ScrollArea".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ScrollArea.wrn
component ScrollArea {
- props {
- class = ""
- }
- view {
- <div class="wire-scroll-area {class}">
- <slot />
- </div>
- }
-}
-Reusable sdk language selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SdkLanguageSelector
- label="SdkLanguage"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SdkLanguageSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SdkLanguage" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SdkLanguageSelector.wrn
component SdkLanguageSelector {
- props {
- label = "SdkLanguage"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable s d k card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SDKCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SDKCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SDKCard.wrn
component SDKCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable s d k language tabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SDKLanguageTabs
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SDKLanguageTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SDKLanguageTabs.wrn
component SDKLanguageTabs {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable sdktabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SDKTabs
- label="SDK languages"
- tabs="[]"
- defaultIndex="0"
-/>Legacy mount name: data-component="SDKTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SDK languages" |
tabs | string | Optional | [] |
defaultIndex | number | Optional | 0 |
class | string | Optional | "" |
This component does not declare a slot.
clickInstalled source: components/SDKTabs.wrn
component SDKTabs {
- props {
- label = "SDK languages"
- tabs = []
- defaultIndex = 0
- class = ""
- }
- state active = defaultIndex
- view {
- <section class="wire-sdk-tabs {class}">
- <div role="tablist" aria-label="{label}" class="wire-tabs">{#each tabs as tab, index}<button type="button" role="tab" aria-selected="{active === index}" class="wire-tab" @click="active = index">{tab.label}</button>{/each}</div>{#each tabs as tab, index}<div role="tabpanel" data-show="active === index" class="wire-sdk-tabs__panel">
- <pre>
- <code>{tab.code}</code>
- </pre>
- </div>{/each}</section>
- }
-}
-Reusable search button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="SearchButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SearchButton.wrn
component SearchButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable search category tabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchCategoryTabs
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SearchCategoryTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SearchCategoryTabs.wrn
component SearchCategoryTabs {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable search dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="SearchDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SearchDialog.wrn
component SearchDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable search empty state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchEmptyState
- label="SearchEmpty"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="SearchEmptyState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SearchEmpty" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SearchEmptyState.wrn
component SearchEmptyState {
- props {
- label = "SearchEmpty"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable search input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchInput
- id="id"
- name="name"
- label="Search"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="SearchInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Search" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/SearchInput.wrn
component SearchInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "Search"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="search" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable search loading state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchLoadingState
- label="SearchLoading"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="SearchLoadingState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SearchLoading" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SearchLoadingState.wrn
component SearchLoadingState {
- props {
- label = "SearchLoading"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable search result item component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SearchResultItem
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SearchResultItem".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SearchResultItem.wrn
component SearchResultItem {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable second picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecondPicker
- label="Second"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SecondPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Second" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecondPicker.wrn
component SecondPicker {
- props {
- label = "Second"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable secondary button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecondaryButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="SecondaryButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecondaryButton.wrn
component SecondaryButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot />
- </button>
- }
-}
-Reusable secret display component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecretDisplay
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SecretDisplay".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecretDisplay.wrn
component SecretDisplay {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable secret input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecretInput
- label="Secret"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SecretInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Secret" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecretInput.wrn
component SecretInput {
- props {
- label = "Secret"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable secret reveal dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecretRevealDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="SecretRevealDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecretRevealDialog.wrn
component SecretRevealDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable section actions component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SectionActions
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="SectionActions".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SectionActions.wrn
component SectionActions {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable section header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SectionHeader
- eyebrow="eyebrow"
- title="Section title"
- description="description"
- align="left"
-/>Legacy mount name: data-component="SectionHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
eyebrow | string | Optional | "" |
title | string | Optional | "Section title" |
description | string | Optional | "" |
align | string | Optional | "left" |
defaultThis component does not declare a custom event.
Installed source: components/SectionHeader.wrn
component SectionHeader {
- props {
- class = ""
- eyebrow = ""
- title = "Section title"
- description = ""
- align = "left"
- }
- view {
- <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''} {class}">
- <p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p>
- <h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2>
- <p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p>
- <div class="mt-6">
- <slot />
- </div>
- </header>
- }
-}
-Reusable section heading component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SectionHeading
- text="text"
- align="start"
-/>Legacy mount name: data-component="SectionHeading".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SectionHeading.wrn
component SectionHeading {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--heading wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Section
- id="id"
- size="default"
- surface="default"
-/>Legacy mount name: data-component="Section".
| Prop | Type | Requirement | Default |
|---|---|---|---|
id | string | Optional | "" |
size | string | Optional | "default" |
surface | string | Optional | "default" |
className | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Section.wrn
component Section {
- props {
- id = ""
- size = "default"
- surface = "default"
- className = ""
- }
- view {
- <section id="{id}" class="{size === 'compact' ? 'py-10 sm:py-14' : size === 'spacious' ? 'py-20 sm:py-28' : 'py-14 sm:py-20'} {surface === 'muted' ? 'bg-slate-50 dark:bg-slate-900/50' : surface === 'brand' ? 'bg-violet-600 text-white' : ''} {className}">
- <slot />
- </section>
- }
-}
-Reusable security alert component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityAlert
- label="Security"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="SecurityAlert".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Security" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityAlert.wrn
component SecurityAlert {
- props {
- label = "Security"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable security contact card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityContactCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SecurityContactCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityContactCard.wrn
component SecurityContactCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable security feature card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityFeatureCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SecurityFeatureCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityFeatureCard.wrn
component SecurityFeatureCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable security hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SecurityHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityHero.wrn
component SecurityHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable security pillar grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityPillarGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="SecurityPillarGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityPillarGrid.wrn
component SecurityPillarGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable security practice list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityPracticeList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="SecurityPracticeList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityPracticeList.wrn
component SecurityPracticeList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable security report form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SecurityReportForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SecurityReportForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SecurityReportForm.wrn
component SecurityReportForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable segmented button group component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SegmentedButtonGroup
- label="Options"
- items="[]"
- active="active"
- size="md"
- fullWidth="false"
-/>Legacy mount name: data-component="SegmentedButtonGroup".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Options" |
items | string | Optional | [] |
active | string | Optional | "" |
size | string | Optional | "md" |
fullWidth | boolean | Optional | false |
class | string | Optional | "" |
This component does not declare a slot.
clickInstalled source: components/SegmentedButtonGroup.wrn
component SegmentedButtonGroup {
- props {
- label = "Options"
- items = []
- active = ""
- size = "md"
- fullWidth = false
- class = ""
- }
-
- state current = active
-
- view {
- <div
- class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
- role="tablist"
- aria-label="{label}"
- >
- {#each items as item, index}
- <button
- type="button"
- role="tab"
- aria-selected="{current === item.value}"
- disabled="{item.disabled}"
- class="wire-segmented-group__button"
- class:wire-segmented-group__button--active='{current === item.value}'
- @click="current = item.value"
- >
- {#if item.icon}
- <span class="wire-segmented-group__icon {item.icon}" aria-hidden="true">
- </span>
- {/if}
-
- <span class="wire-segmented-group__label">{item.label}</span>
-
- {#if item.badge}
- <span class="wire-segmented-group__badge">{item.badge}</span>
- {/if}
- </button>
- {:empty}
- <span class="wire-segmented-group__empty">No options available</span>
- {/each}
- </div>
- }
-}
-Reusable sender id input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SenderIdInput
- label="SenderId"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SenderIdInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SenderId" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SenderIdInput.wrn
component SenderIdInput {
- props {
- label = "SenderId"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable server error page component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ServerErrorPage
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ServerErrorPage".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ServerErrorPage.wrn
component ServerErrorPage {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable service level table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ServiceLevelTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ServiceLevelTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ServiceLevelTable.wrn
component ServiceLevelTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable service status badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ServiceStatusBadge
- label="ServiceStatus"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="ServiceStatusBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ServiceStatus" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ServiceStatusBadge.wrn
component ServiceStatusBadge {
- props {
- label = "ServiceStatus"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable service status list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ServiceStatusList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ServiceStatusList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ServiceStatusList.wrn
component ServiceStatusList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable service status row component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ServiceStatusRow
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ServiceStatusRow".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ServiceStatusRow.wrn
component ServiceStatusRow {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable session card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SessionCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SessionCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SessionCard.wrn
component SessionCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable session expired dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SessionExpiredDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="SessionExpiredDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SessionExpiredDialog.wrn
component SessionExpiredDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable setup checklist component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SetupChecklist
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SetupChecklist".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SetupChecklist.wrn
component SetupChecklist {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable severity selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SeveritySelector
- label="Severity"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SeveritySelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Severity" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SeveritySelector.wrn
component SeveritySelector {
- props {
- label = "Severity"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable shadow picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ShadowPicker
- label="Shadow"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ShadowPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Shadow" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ShadowPicker.wrn
component ShadowPicker {
- props {
- label = "Shadow"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable share action component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ShareAction
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ShareAction".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ShareAction.wrn
component ShareAction {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable share button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ShareButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="ShareButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ShareButton.wrn
component ShareButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--default {class}">{label}<slot />
- </button>
- }
-}
-Reusable side panel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SidePanel
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SidePanel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SidePanel.wrn
component SidePanel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable sidebar layout component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SidebarLayout />Legacy mount name: data-component="SidebarLayout".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SidebarLayout.wrn
component SidebarLayout {
- props {
- class = ""
- }
- view {
- <div class="wire-sidebar-layout {class}">
- <slot />
- </div>
- }
-}
-Reusable sign in form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SignInForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SignInForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SignInForm.wrn
component SignInForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-auth-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable sign in link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SignInLink
- label="Sign in with password"
- description="Use your username or email and password"
- href="href"
- type="button"
- variant="secondary"
-/>Legacy mount name: data-component="SignInLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Sign in with password" |
description | string | Optional | "Use your username or email and password" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "secondary" |
disabled | boolean | Optional | false |
icon | string | Optional | "icon-[lucide--lock-keyhole]" |
tone | string | Optional | "password" |
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/SignInLink.wrn
component SignInLink {
- props {
- label = "Sign in with password"
- description = "Use your username or email and password"
- href = ""
- type = "button"
- variant = "secondary"
- disabled = false
- icon = "icon-[lucide--lock-keyhole]"
- tone = "password"
- class = ""
- }
- view {
- <span class="wire-catalog-action wire-auth-action {class}">
- {#if href}
- <a href="{href}" class="wire-btn wire-btn--{variant}">
- <span class="wire-auth-action__icon wire-auth-action__icon--{tone}">{#if tone == "account"}<svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M15 19a6 6 0 0 0-12 0M9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8M19 8v6M16 11h6" />
- </svg>{:else}<svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M7 10V7a5 5 0 0 1 10 0v3M6 10h12a2 2 0 0 1 2 2v8H4v-8a2 2 0 0 1 2-2ZM12 14v2" />
- </svg>{/if}</span>
- <span class="wire-auth-action__copy">
- <span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
- <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true">
- <path d="m9 18 6-6-6-6" />
- </svg>
- </a>
- {:else}
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
- <span class="wire-auth-action__icon wire-auth-action__icon--{tone}">{#if tone == "account"}<svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M15 19a6 6 0 0 0-12 0M9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8M19 8v6M16 11h6" />
- </svg>{:else}<svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M7 10V7a5 5 0 0 1 10 0v3M6 10h12a2 2 0 0 1 2 2v8H4v-8a2 2 0 0 1 2-2ZM12 14v2" />
- </svg>{/if}</span>
- <span class="wire-auth-action__copy">
- <span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
- <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true">
- <path d="m9 18 6-6-6-6" />
- </svg>
- </button>
- {/if}
- </span>
- }
-}
-Reusable sign up form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SignUpForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SignUpForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SignUpForm.wrn
component SignUpForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-auth-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable site search component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SiteSearch
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SiteSearch".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SiteSearch.wrn
component SiteSearch {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable skip link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SkipLink
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="SkipLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SkipLink.wrn
component SkipLink {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable sla table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SlaTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="SlaTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SlaTable.wrn
component SlaTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Slider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Slider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Slider.wrn
component Slider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable slug input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SlugInput
- label="Slug"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SlugInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Slug" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SlugInput.wrn
component SlugInput {
- props {
- label = "Slug"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable small text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SmallText
- text="text"
- align="start"
-/>Legacy mount name: data-component="SmallText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SmallText.wrn
component SmallText {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--small wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable smart route diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SmartRouteDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="SmartRouteDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SmartRouteDiagram.wrn
component SmartRouteDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>{:else}<div class="wire-catalog-visualization__content">
- <slot />
- </div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure>
- }
-}
-Reusable sms composer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SmsComposer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SmsComposer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SmsComposer.wrn
component SmsComposer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable sms message editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SmsMessageEditor
- label="SmsMessage"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SmsMessageEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SmsMessage" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SmsMessageEditor.wrn
component SmsMessageEditor {
- props {
- label = "SmsMessage"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable sms segment counter component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SmsSegmentCounter
- label="SmsSegment"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="SmsSegmentCounter".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "SmsSegment" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SmsSegmentCounter.wrn
component SmsSegmentCounter {
- props {
- label = "SmsSegment"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable social share component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SocialShare
- title="Share this page"
- description="description"
- url="url"
- shareText="shareText"
- centered="false"
-/>Legacy mount name: data-component="SocialShare".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
title | string | Optional | "Share this page" |
description | string | Optional | "" |
url | string | Optional | "" |
shareText | string | Optional | "" |
centered | boolean | Optional | false |
compact | boolean | Optional | false |
showTitle | boolean | Optional | true |
showCopy | boolean | Optional | true |
networks | string | Optional | [] |
This component does not declare a slot.
clickInstalled source: components/SocialShare.wrn
component SocialShare {
- props {
- class: string = ""
- title = "Share this page"
- description = ""
-
- url = ""
- shareText = ""
-
- centered = false
- compact = false
- showTitle = true
- showCopy = true
-
- networks = []
- }
-
- state copied = false
-
- view {
- <aside
- aria-labelledby="social-share-title"
- class="w-full {class}"
- >
- <div
- class=" relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/[0.03] "
- >
- <!-- Subtle background -->
- <div
- aria-hidden="true"
- class="pointer-events-none absolute inset-0 overflow-hidden"
- >
- <div class="absolute -right-16 -top-20 h-40 w-40 rounded-full bg-indigo-200/25 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20" >
- </div>
- </div>
- <div
- class="relative"
- class:p-4="compact"
- class:sm:p-5="compact"
- class:p-5="!compact"
- class:sm:p-6="!compact"
- >
- <div
- class="gap-4"
- class:flex="centered"
- class:flex-col="centered"
- class:items-center="centered"
- class:text-center="centered"
- class:flex="!centered"
- class:flex-col="!centered"
- class:sm:flex-row="!centered"
- class:sm:items-center="!centered"
- class:sm:justify-between="!centered"
- >
- <!-- Heading -->
- <div
- class="min-w-0"
- class:hidden="!showTitle"
- >
- <h2
- id="social-share-title"
- class="font-bold tracking-tight text-slate-950 dark:text-white"
- class:text-sm="compact"
- class:text-base="!compact"
- >
- {title}
- </h2>
- <p
- class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400"
- class:hidden="description === '' || compact"
- >
- {description}
- </p>
- </div>
- <!-- Share buttons -->
- <div
- class="flex flex-wrap items-center gap-2"
- class:justify-center="centered"
- class:justify-start="!centered"
- >
- {#each networks.slice(0, 5) as network}
- <a
- href="{network.href}"
- target="_blank"
- rel="noopener noreferrer"
- aria-label="Share on {network.label}"
- title="Share on {network.label}"
- class=" group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 "
- class:h-9="compact"
- class:w-9="compact"
- class:h-10="!compact"
- class:px-3="!compact"
- >
- <span class="{network.iconClass} h-4 w-4" aria-hidden="true" >
- </span>
- <span class:hidden="compact">
- {network.label}
- </span>
- </a>
- {/each}
-
- <!-- Copy link -->
- <button
- type="button"
- @click=" navigator.clipboard.writeText(url); copied = true; "
- aria-label="{copied ? 'Link copied' : 'Copy page link'}"
- class=" group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 "
- class:hidden="!showCopy"
- class:h-9="compact"
- class:w-9="compact"
- class:h-10="!compact"
- class:px-3="!compact"
- >
- <span class="icon-[lucide--copy] h-4 w-4" class:hidden="copied" aria-hidden="true" >
- </span>
- <span class="icon-[lucide--check] h-4 w-4" class:hidden="!copied" aria-hidden="true" >
- </span>
- <span class:hidden="compact">
- {copied ? 'Copied' : 'Copy link'}
- </span>
- </button>
- </div>
- </div>
- <!-- Copy feedback -->
- <div
- role="status"
- aria-live="polite"
- class="mt-3 rounded-xl bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20"
- class:hidden="!copied"
- class:text-center="centered"
- >
- Page link copied to your clipboard.
- </div>
- </div>
- </div>
- </aside>
- }
-}
-Reusable solution hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SolutionHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SolutionHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SolutionHero.wrn
component SolutionHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable solution page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SolutionPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SolutionPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SolutionPageShell.wrn
component SolutionPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable solution section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SolutionSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SolutionSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SolutionSection.wrn
component SolutionSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable solutions mega menu component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SolutionsMegaMenu />Legacy mount name: data-component="SolutionsMegaMenu".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/SolutionsMegaMenu.wrn
component SolutionsMegaMenu {
- props {
- class: string = ""
- }
- view {
- <div
- class="border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 {class}"
- >
- <div class="mx-auto max-w-7xl px-6 py-8 lg:px-10">
- <div class="grid gap-8 lg:grid-cols-[minmax(0,1.6fr)_minmax(18rem,0.75fr)]">
- <!-- Solution links -->
- <section>
- <div class="mb-5 flex items-end justify-between gap-6">
- <div>
- <p class="text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
- Solutions
- </p>
- <h2 class="mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white">
- Identity infrastructure for every stage of growth
- </h2>
- <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
- Choose a solution designed around your product, team, and customers.
- </p>
- </div>
- <a
- href="/solutions"
- class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex"
- >
- View all solutions
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- <div class="grid gap-2 md:grid-cols-2">
- <!-- Startups -->
- <a
- href="/solutions/startups"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--rocket] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Startups
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Launch secure authentication quickly without slowing product development.
- </span>
- </span>
- </a>
- <!-- SaaS -->
- <a
- href="/solutions/saas"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--cloud] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- SaaS platforms
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Add users, organizations, roles, SSO, and secure account recovery.
- </span>
- </span>
- </a>
- <!-- Enterprise -->
- <a
- href="/solutions/enterprise"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--building-2] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Enterprise
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Support complex organizations, governance, auditability, and scale.
- </span>
- </span>
- </a>
- <!-- Developers -->
- <a
- href="/solutions/developers"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--code-2] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Developers
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- APIs, SDKs, webhooks, templates, and developer-friendly workflows.
- </span>
- </span>
- </a>
- <!-- Agencies -->
- <a
- href="/solutions/agencies"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--briefcase-business] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- Agencies
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Manage identities across customer projects and branded experiences.
- </span>
- </span>
- </a>
- <!-- B2B -->
- <a
- href="/solutions/b2b"
- class="group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10"
- >
- <span
- class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white"
- >
- <span class="icon-[lucide--handshake] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <span class="min-w-0">
- <span class="flex items-center gap-2">
- <span class="text-sm font-semibold text-slate-950 dark:text-white">
- B2B products
- </span>
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300" aria-hidden="true" >
- </span>
- </span>
- <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">
- Secure customer organizations, team access, and enterprise connections.
- </span>
- </span>
- </a>
- </div>
- <a
- href="/solutions"
- class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden"
- >
- View all solutions
-
- <span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" >
- </span>
- </a>
- </section>
- <!-- Featured solution -->
- <aside
- class="relative overflow-hidden rounded-3xl border border-violet-200 bg-linear-to-br from-violet-50 via-white to-indigo-50 p-6 dark:border-violet-500/20 dark:from-violet-500/10 dark:via-slate-900 dark:to-indigo-500/10"
- >
- <div aria-hidden="true" class="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" >
- </div>
- <div aria-hidden="true" class="absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" >
- </div>
- <div class="relative">
- <span
- class="inline-flex items-center gap-2 rounded-full border border-violet-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-violet-700 backdrop-blur-sm dark:border-violet-500/20 dark:bg-white/5 dark:text-violet-300"
- >
- <span class="icon-[lucide--wand-sparkles] h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- Recommended for SaaS
- </span>
- <div
- class="mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-violet-600 text-white shadow-lg shadow-violet-600/20"
- >
- <span class="icon-[lucide--cloud-cog] h-6 w-6" aria-hidden="true" >
- </span>
- </div>
- <h3 class="mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white">
- Launch enterprise-ready identity
- </h3>
- <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
- Start with simple authentication and add organizations,
- permissions, enterprise SSO, and governance as your product grows.
- </p>
- <div class="mt-5 grid gap-3">
- <div
- class="flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5"
- >
- <span
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300"
- >
- <span class="icon-[lucide--timer-reset] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-900 dark:text-white">
- Faster launch
- </span>
- <span class="block text-xs text-slate-500 dark:text-slate-400">
- Start with secure defaults
- </span>
- </span>
- </div>
- <div
- class="flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5"
- >
- <span
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--expand] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-900 dark:text-white">
- Built to scale
- </span>
- <span class="block text-xs text-slate-500 dark:text-slate-400">
- Add advanced controls later
- </span>
- </span>
- </div>
- <div
- class="flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5"
- >
- <span
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- <span class="icon-[lucide--shield-check] h-4 w-4" aria-hidden="true" >
- </span>
- </span>
- <span>
- <span class="block text-sm font-semibold text-slate-900 dark:text-white">
- Secure by design
- </span>
- <span class="block text-xs text-slate-500 dark:text-slate-400">
- Protect every account flow
- </span>
- </span>
- </div>
- </div>
- <a
- href="/solutions/saas"
- class="group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-violet-600 px-4 text-sm font-bold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
- >
- Explore the SaaS solution
-
- <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
- </span>
- </a>
- </div>
- </aside>
- </div>
- <!-- Bottom use-case links -->
- <div
- class="mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10"
- >
- <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
- <a
- href="/solutions/customer-identity"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--contact-round] h-4 w-4" aria-hidden="true" >
- </span>
-
- Customer identity
- </a>
- <a
- href="/solutions/workforce-identity"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--id-card] h-4 w-4" aria-hidden="true" >
- </span>
-
- Workforce identity
- </a>
- <a
- href="/solutions/marketplaces"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--store] h-4 w-4" aria-hidden="true" >
- </span>
-
- Marketplaces
- </a>
- <a
- href="/solutions/multi-tenant"
- class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
- >
- <span class="icon-[lucide--network] h-4 w-4" aria-hidden="true" >
- </span>
-
- Multi-tenant apps
- </a>
- </div>
- <a
- href="/customers"
- class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
- >
- See customer stories
-
- <span class="icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden="true" >
- </span>
- </a>
- </div>
- </div>
- </div>
- }
-}
-Reusable sortable table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SortableTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="SortableTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SortableTable.wrn
component SortableTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable spacer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<spacer />Legacy mount name: data-component="spacer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/spacer.wrn
// Flexible spacer: grows to push siblings apart inside a flex row/column.
-component Spacer {
- props {
- class = ""
- }
- view {
- <div class="wire-spacer {class}">
- </div>
- }
-}
-Reusable split button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SplitButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="SplitButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SplitButton.wrn
component SplitButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable split c t a component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SplitCTA
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="SplitCTA".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SplitCTA.wrn
component SplitCTA {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable split hero component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SplitHero
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SplitHero".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SplitHero.wrn
component SplitHero {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable split layout component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SplitLayout />Legacy mount name: data-component="SplitLayout".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SplitLayout.wrn
component SplitLayout {
- props {
- class = ""
- }
- view {
- <div class="wire-split-layout {class}">
- <slot />
- </div>
- }
-}
-Reusable split section header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SplitSectionHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="SplitSectionHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SplitSectionHeader.wrn
component SplitSectionHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable stack component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Stack
- gap="4"
-/>Legacy mount name: data-component="Stack".
| Prop | Type | Requirement | Default |
|---|---|---|---|
gap | string | Optional | "4" |
className | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Stack.wrn
component Stack {
- props {
- gap = "4"
- className = ""
- }
- view {
- <div class="flex flex-col gap-{gap} {className}">
- <slot />
- </div>
- }
-}
-Reusable start free button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StartFreeButton
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="StartFreeButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StartFreeButton.wrn
component StartFreeButton {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable stat card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatCard
- label="Metric"
- value="0"
- change="change"
- trend="neutral"
-/>Legacy mount name: data-component="StatCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
label | string | Optional | "Metric" |
value | string | Optional | "0" |
change | string | Optional | "" |
trend | string | Optional | "neutral" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/StatCard.wrn
component StatCard {
- props {
- class = ""
- label = "Metric"
- value = "0"
- change = ""
- trend = "neutral"
- }
- view {
- <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 {class}">
- <p class="text-sm font-medium text-slate-500">{label}</p>
- <div class="mt-2 flex items-end justify-between gap-3">
- <p class="text-3xl font-bold tracking-tight">{value}</p>
- <span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span>
- </div>
- </article>
- }
-}
-Reusable state selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StateSelector
- label="State"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="StateSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "State" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StateSelector.wrn
component StateSelector {
- props {
- label = "State"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable status badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatusBadge
- status="operational"
-/>Legacy mount name: data-component="StatusBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
status | string | Optional | "operational" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/StatusBadge.wrn
component StatusBadge {
- props {
- class = ""
- status = "operational"
- }
- view {
- <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'} {class}">
- <span class="size-2 rounded-full bg-current">
- </span>{status}</span>
- }
-}
-Reusable status banner component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatusBanner
- type="info"
- title="title"
- description="description"
- actionLabel="actionLabel"
- actionHref="actionHref"
-/>Legacy mount name: data-component="StatusBanner".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
type | string | Optional | "info" |
title | string | Optional | "" |
description | string | Optional | "" |
actionLabel | string | Optional | "" |
actionHref | string | Optional | "" |
dismissible | boolean | Optional | true |
compact | boolean | Optional | false |
details | string | Optional | [] |
This component does not declare a slot.
clickInstalled source: components/StatusBanner.wrn
component StatusBanner {
- props {
- class: string = ""
- type = "info"
-
- title = ""
- description = ""
-
- actionLabel = ""
- actionHref = ""
-
- dismissible = true
- compact = false
-
- details = []
- }
-
- state visible = true
-
- view {
- <aside
- role="{type === 'error' ? 'alert' : 'status'}"
- aria-live="{type === 'error' ? 'assertive' : 'polite'}"
- class="relative overflow-hidden {class}"
- class:hidden="!visible"
- >
- <div
- class=" relative overflow-hidden rounded-2xl {compact ? 'px-4 py-3' : 'px-5 py-4 sm:px-6'} {type === 'success' ? 'bg-emerald-50 text-emerald-950 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-100 dark:ring-emerald-500/20' : type === 'warning' ? 'bg-amber-50 text-amber-950 ring-1 ring-inset ring-amber-200 dark:bg-amber-500/10 dark:text-amber-100 dark:ring-amber-500/20' : type === 'error' ? 'bg-rose-50 text-rose-950 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/10 dark:text-rose-100 dark:ring-rose-500/20' : 'bg-indigo-50 text-indigo-950 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-100 dark:ring-indigo-500/20' } "
- >
- <!-- Decorative glow -->
- <div aria-hidden="true" class=" pointer-events-none absolute -right-16 -top-20 h-40 w-40 rounded-full blur-3xl {type === 'success' ? 'bg-emerald-300/30 dark:bg-emerald-500/10' : type === 'warning' ? 'bg-amber-300/30 dark:bg-amber-500/10' : type === 'error' ? 'bg-rose-300/30 dark:bg-rose-500/10' : 'bg-indigo-300/30 dark:bg-indigo-500/10' } " >
- </div>
- <div
- class="relative flex gap-4"
- class:items-center="compact"
- class:items-start="!compact"
- >
- <!-- Icon -->
- <span
- class=" grid shrink-0 place-items-center rounded-xl {compact ? 'h-9 w-9' : 'h-10 w-10'} {type === 'success' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300' : type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'error' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' } "
- >
- <span class=" h-5 w-5 {type === 'success' ? 'icon-[lucide--circle-check]' : type === 'warning' ? 'icon-[lucide--triangle-alert]' : type === 'error' ? 'icon-[lucide--circle-x]' : 'icon-[lucide--info]' } " aria-hidden="true" >
- </span>
- </span>
- <!-- Content -->
- <div class="min-w-0 flex-1">
- <div
- class="flex flex-col gap-3 sm:flex-row sm:justify-between"
- class:sm:items-center="compact"
- class:sm:items-start="!compact"
- >
- <div class="min-w-0">
- <h2
- class="font-bold"
- class:text-sm="compact"
- class:text-base="!compact"
- class:hidden="title === ''"
- >
- {title}
- </h2>
- <p
- class="text-sm leading-6 opacity-80"
- class:mt-1="title !== ''"
- class:hidden="description === ''"
- >
- {description}
- </p>
- </div>
- <!-- Actions -->
- <div class="flex shrink-0 items-center gap-2">
- <a
- href="{actionHref}"
- class=" h-9 items-center justify-center gap-1.5 rounded-lg px-3 text-xs font-bold transition {type === 'success' ? 'bg-emerald-600 text-white hover:bg-emerald-500' : type === 'warning' ? 'bg-amber-600 text-white hover:bg-amber-500' : type === 'error' ? 'bg-rose-600 text-white hover:bg-rose-500' : 'bg-indigo-600 text-white hover:bg-indigo-500' } "
- class:hidden="actionLabel === ''"
- class:inline-flex="actionLabel !== ''"
- >
- {actionLabel}
-
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </a>
- <button
- type="button"
- @click="visible = false"
- aria-label="Dismiss notice"
- class="grid h-9 w-9 place-items-center rounded-lg opacity-60 transition hover:bg-black/5 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current dark:hover:bg-white/10"
- class:hidden="!dismissible"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- </div>
- <!-- Dynamic details -->
- <div
- class="mt-4 flex flex-wrap gap-x-5 gap-y-2 border-t pt-4 text-xs font-medium"
- class:hidden="compact || details.length === 0"
- class:border-emerald-200="type === 'success'"
- class:border-amber-200="type === 'warning'"
- class:border-rose-200="type === 'error'"
- class:border-indigo-200="type === 'info'"
- class:dark:border-emerald-500/20="type === 'success'"
- class:dark:border-amber-500/20="type === 'warning'"
- class:dark:border-rose-500/20="type === 'error'"
- class:dark:border-indigo-500/20="type === 'info'"
- >
- {#each details.slice(0, 4) as detail}
- <span class="inline-flex items-center gap-2 opacity-80">
- <span class="{detail.iconClass} h-3.5 w-3.5" aria-hidden="true" >
- </span>
-
- {detail.label}
- </span>
- {/each}
- </div>
- </div>
- </div>
- </div>
- </aside>
- }
-}
-Reusable status page shell component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatusPageShell
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="StatusPageShell".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StatusPageShell.wrn
component StatusPageShell {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable status selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatusSelector
- label="Status"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="StatusSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Status" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StatusSelector.wrn
component StatusSelector {
- props {
- label = "Status"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable status subscribe form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatusSubscribeForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="StatusSubscribeForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StatusSubscribeForm.wrn
component StatusSubscribeForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable status table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StatusTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="StatusTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StatusTable.wrn
component StatusTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable step navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StepNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="StepNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StepNavigation.wrn
component StepNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable step up authentication dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StepUpAuthenticationDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="StepUpAuthenticationDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StepUpAuthenticationDialog.wrn
component StepUpAuthenticationDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable stepper input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StepperInput
- label="Stepper"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="StepperInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Stepper" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StepperInput.wrn
component StepperInput {
- props {
- label = "Stepper"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable sticker picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StickerPicker
- label="Sticker"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="StickerPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Sticker" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StickerPicker.wrn
component StickerPicker {
- props {
- label = "Sticker"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable sticky layout component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StickyLayout />Legacy mount name: data-component="StickyLayout".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StickyLayout.wrn
component StickyLayout {
- props {
- class = ""
- }
- view {
- <div class="wire-sticky-layout {class}">
- <slot />
- </div>
- }
-}
-Reusable sticky component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Sticky />Legacy mount name: data-component="Sticky".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Sticky.wrn
component Sticky {
- props {
- class = ""
- }
- view {
- <div class="wire-sticky {class}">
- <slot />
- </div>
- }
-}
-Reusable street address input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<StreetAddressInput
- label="StreetAddress"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="StreetAddressInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "StreetAddress" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/StreetAddressInput.wrn
component StreetAddressInput {
- props {
- label = "StreetAddress"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable subdomain input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SubdomainInput
- label="Subdomain"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SubdomainInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Subdomain" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SubdomainInput.wrn
component SubdomainInput {
- props {
- label = "Subdomain"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable subject input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SubjectInput
- label="Subject"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="SubjectInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Subject" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SubjectInput.wrn
component SubjectInput {
- props {
- label = "Subject"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable subprocessor table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SubprocessorTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="SubprocessorTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SubprocessorTable.wrn
component SubprocessorTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable subsection heading component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SubsectionHeading
- text="text"
- align="start"
-/>Legacy mount name: data-component="SubsectionHeading".
| Prop | Type | Requirement | Default |
|---|---|---|---|
text | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SubsectionHeading.wrn
component SubsectionHeading {
- props {
- text = ""
- align = "start"
- class = ""
- }
- view {
- <div class="wire-type wire-type--heading wire-text--{align} {class}">{text}<slot />
- </div>
- }
-}
-Reusable success card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SuccessCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="SuccessCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SuccessCard.wrn
component SuccessCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--success {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable success state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SuccessState
- label="Success"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="SuccessState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Success" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SuccessState.wrn
component SuccessState {
- props {
- label = "Success"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable support request form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<SupportRequestForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="SupportRequestForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/SupportRequestForm.wrn
component SupportRequestForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable surface component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Surface />Legacy mount name: data-component="Surface".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Surface.wrn
component Surface {
- props {
- class = ""
- }
- view {
- <div class="wire-surface {class}">
- <slot />
- </div>
- }
-}
-Reusable table header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TableHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="TableHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TableHeader.wrn
component TableHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable table row component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TableRow
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="TableRow".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TableRow.wrn
component TableRow {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable table skeleton component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TableSkeleton
- label="Table"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="TableSkeleton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Table" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TableSkeleton.wrn
component TableSkeleton {
- props {
- label = "Table"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable tag input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TagInput
- label="Tag"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TagInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Tag" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TagInput.wrn
component TagInput {
- props {
- label = "Tag"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable tag component.
Components are auto-discovered. Use the component directly in any .wrn view:
<tag
- label="label"
- variant="default"
-/>Legacy mount name: data-component="tag".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/tag.wrn
// Small tag / chip. variant: default | primary | success | danger | warning.
-component Tag {
- props {
- label = ""
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-tag wire-tag--{variant} {class}">
- <slot>{label}</slot>
- </span>
- }
-}
-Reusable tax notice component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TaxNotice
- label="Tax"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="TaxNotice".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Tax" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TaxNotice.wrn
component TaxNotice {
- props {
- label = "Tax"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable tax rate input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TaxRateInput
- label="TaxRate"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TaxRateInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "TaxRate" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TaxRateInput.wrn
component TaxRateInput {
- props {
- label = "TaxRate"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable team member card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TeamMemberCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="TeamMemberCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TeamMemberCard.wrn
component TeamMemberCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable team size selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TeamSizeSelector
- label="TeamSize"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TeamSizeSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "TeamSize" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TeamSizeSelector.wrn
component TeamSizeSelector {
- props {
- label = "TeamSize"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable template card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TemplateCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="TemplateCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TemplateCard.wrn
component TemplateCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--template {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable template selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TemplateSelector
- label="Template"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TemplateSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Template" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TemplateSelector.wrn
component TemplateSelector {
- props {
- label = "Template"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable template variable input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TemplateVariableInput
- label="TemplateVariable"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TemplateVariableInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "TemplateVariable" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TemplateVariableInput.wrn
component TemplateVariableInput {
- props {
- label = "TemplateVariable"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable tenant isolation diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TenantIsolationDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="TenantIsolationDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TenantIsolationDiagram.wrn
component TenantIsolationDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable terminal block component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TerminalBlock
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="TerminalBlock".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TerminalBlock.wrn
component TerminalBlock {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable tertiary button component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TertiaryButton
- label="Action"
- type="button"
- disabled="false"
-/>Legacy mount name: data-component="TertiaryButton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
type | string | Optional | "button" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TertiaryButton.wrn
component TertiaryButton {
- props {
- label = "Action"
- type = "button"
- disabled = false
- class = ""
- }
- view {
- <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot />
- </button>
- }
-}
-Reusable test message dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TestMessageDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="TestMessageDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TestMessageDialog.wrn
component TestMessageDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable testimonial card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TestimonialCard
- quote="Great product."
- name="Customer"
- role="role"
- company="company"
- avatar="avatar"
-/>Legacy mount name: data-component="TestimonialCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
quote | string | Optional | "Great product." |
name | string | Optional | "Customer" |
role | string | Optional | "" |
company | string | Optional | "" |
avatar | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/TestimonialCard.wrn
component TestimonialCard {
- props {
- class = ""
- quote = "Great product."
- name = "Customer"
- role = ""
- company = ""
- avatar = ""
- }
- view {
- <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900 {class}">
- <blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote>
- <figcaption class="mt-6 flex items-center gap-3">
- <Avatar src="{avatar}" initials="{name.slice(0,2)}" />
- <div>
- <div class="font-semibold">{name}</div>
- <div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span>
- </div>
- </div>
- </figcaption>
- </figure>
- }
-}
-Reusable testimonial carousel component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TestimonialCarousel
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="TestimonialCarousel".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TestimonialCarousel.wrn
component TestimonialCarousel {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable text input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TextInput
- id="id"
- name="name"
- label="Text"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="TextInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Text" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/TextInput.wrn
component TextInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "Text"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="text" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable text link component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TextLink
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="TextLink".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TextLink.wrn
component TextLink {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable text skeleton component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TextSkeleton
- label="Text"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="TextSkeleton".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Text" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TextSkeleton.wrn
component TextSkeleton {
- props {
- label = "Text"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable theme color picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ThemeColorPicker
- label="ThemeColor"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ThemeColorPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "ThemeColor" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ThemeColorPicker.wrn
component ThemeColorPicker {
- props {
- label = "ThemeColor"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable theme switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ThemeSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ThemeSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ThemeSwitcher.wrn
component ThemeSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable theme-toggle component.
Components are auto-discovered. Use the component directly in any .wrn view:
<theme-toggle
- label="Toggle theme"
-/>Legacy mount name: data-component="theme-toggle".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Toggle theme" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/theme-toggle.wrn
// Theme switch button. The framework's theme runtime binds the click
-// (data-wire-theme-toggle), so no component JS is needed.
-component ThemeToggle {
- props {
- label = "Toggle theme"
- class = ""
- }
- view {
- <button type="button" class="wire-btn wire-btn--ghost {class}" data-wire-theme-toggle>
- <slot>{label}</slot>
- </button>
- }
-}
-Reusable time input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimeInput
- id="id"
- name="name"
- label="Time"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="TimeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Time" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/TimeInput.wrn
component TimeInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "Time"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="time" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable time range picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimeRangePicker
- label="TimeRange"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TimeRangePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "TimeRange" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TimeRangePicker.wrn
component TimeRangePicker {
- props {
- label = "TimeRange"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable timeline chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimelineChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="TimelineChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TimelineChart.wrn
component TimelineChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable timeline item component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimelineItem
- title="Event"
- date="date"
- description="description"
- status="default"
-/>Legacy mount name: data-component="TimelineItem".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
title | string | Optional | "Event" |
date | string | Optional | "" |
description | string | Optional | "" |
status | string | Optional | "default" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/TimelineItem.wrn
component TimelineItem {
- props {
- class = ""
- title = "Event"
- date = ""
- description = ""
- status = "default"
- }
- view {
- <li class="relative {class}">
- <span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}">
- </span>
- <div class="flex flex-wrap items-baseline justify-between gap-2">
- <h3 class="font-semibold">{title}</h3>
- <time class="text-xs text-slate-500">{date}</time>
- </div>
- <p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p>
- </li>
- }
-}
-Reusable timeout input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimeoutInput
- label="Timeout"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TimeoutInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Timeout" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TimeoutInput.wrn
component TimeoutInput {
- props {
- label = "Timeout"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable timezone aware time picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimezoneAwareTimePicker
- label="TimezoneAwareTime"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TimezoneAwareTimePicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "TimezoneAwareTime" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TimezoneAwareTimePicker.wrn
component TimezoneAwareTimePicker {
- props {
- label = "TimezoneAwareTime"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable timezone selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TimezoneSelector
- id="timezone"
- name="timezone"
- label="Timezone"
-/>Legacy mount name: data-component="TimezoneSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "timezone" |
name | string | Optional | "timezone" |
label | string | Optional | "Timezone" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/TimezoneSelector.wrn
component TimezoneSelector {
- props {
- class = ""
- id = "timezone"
- name = "timezone"
- label = "Timezone"
- }
- view {
- <Select class="{class}" id="{id}" name="{name}" label="{label}">
- <option value="UTC">UTC</option>
- <option value="Asia/Kolkata">Asia/Kolkata</option>
- <option value="America/New_York">America/New_York</option>
- <option value="Europe/London">Europe/London</option>
- </Select>
- }
-}
-Reusable toast action component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ToastAction
- label="Action"
- href="href"
- type="button"
- variant="primary"
- disabled="false"
-/>Legacy mount name: data-component="ToastAction".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Action" |
href | string | Optional | "" |
type | string | Optional | "button" |
variant | string | Optional | "primary" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ToastAction.wrn
component ToastAction {
- props {
- label = "Action"
- href = ""
- type = "button"
- variant = "primary"
- disabled = false
- class = ""
- }
- view {
- <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
- </button>{/if}</span>
- }
-}
-Reusable toast host component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ToastHost />Legacy mount name: data-component="ToastHost".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
This component does not declare a slot.
clickInstalled source: components/ToastHost.wrn
component ToastHost {
- props {
- class: string = ""
- }
- state successOpen = false
- state errorOpen = false
- state warningOpen = false
- state infoOpen = false
-
- state successTitle = "Changes saved"
- state successMessage = "Your changes were saved successfully."
-
- state errorTitle = "Something went wrong"
- state errorMessage = "We could not complete your request. Please try again."
-
- state warningTitle = "Action required"
- state warningMessage = "Review the highlighted information before continuing."
-
- state infoTitle = "New update available"
- state infoMessage = "A newer version of this feature is now available."
-
- view {
- <div
- data-toast-host
- aria-live="polite"
- aria-relevant="additions text"
- class="pointer-events-none fixed inset-x-0 top-0 z-[120] flex flex-col items-end gap-3 p-4 sm:left-auto sm:right-0 sm:w-full sm:max-w-md sm:p-6 {class}"
- >
- <!-- Success toast -->
- <article
- role="status"
- class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-emerald-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-emerald-500/20 dark:bg-slate-900 dark:shadow-black/40"
- class:hidden="!successOpen"
- class:block="successOpen"
- >
- <div class="absolute inset-y-0 left-0 w-1 bg-emerald-500">
- </div>
- <div class="flex items-start gap-3 p-4 pl-5">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
- >
- <span class="icon-[lucide--circle-check] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div class="min-w-0 flex-1 pt-0.5">
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- {successTitle}
- </h3>
- <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
- {successMessage}
- </p>
- </div>
- <button
- type="button"
- @click="successOpen = false"
- aria-label="Dismiss notification"
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- <div class="h-1 w-full bg-emerald-100 dark:bg-emerald-500/10">
- <div class="h-full w-full origin-left bg-emerald-500">
- </div>
- </div>
- </article>
- <!-- Error toast -->
- <article
- role="alert"
- class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-rose-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-rose-500/20 dark:bg-slate-900 dark:shadow-black/40"
- class:hidden="!errorOpen"
- class:block="errorOpen"
- >
- <div class="absolute inset-y-0 left-0 w-1 bg-rose-500">
- </div>
- <div class="flex items-start gap-3 p-4 pl-5">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300"
- >
- <span class="icon-[lucide--circle-x] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div class="min-w-0 flex-1 pt-0.5">
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- {errorTitle}
- </h3>
- <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
- {errorMessage}
- </p>
- <button
- type="button"
- class="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-rose-700 transition hover:text-rose-900 dark:text-rose-300 dark:hover:text-rose-200"
- >
- Try again
-
- <span class="icon-[lucide--rotate-cw] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </button>
- </div>
- <button
- type="button"
- @click="errorOpen = false"
- aria-label="Dismiss notification"
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- <div class="h-1 w-full bg-rose-100 dark:bg-rose-500/10">
- <div class="h-full w-full origin-left bg-rose-500">
- </div>
- </div>
- </article>
- <!-- Warning toast -->
- <article
- role="status"
- class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-amber-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-amber-500/20 dark:bg-slate-900 dark:shadow-black/40"
- class:hidden="!warningOpen"
- class:block="warningOpen"
- >
- <div class="absolute inset-y-0 left-0 w-1 bg-amber-500">
- </div>
- <div class="flex items-start gap-3 p-4 pl-5">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
- >
- <span class="icon-[lucide--triangle-alert] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div class="min-w-0 flex-1 pt-0.5">
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- {warningTitle}
- </h3>
- <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
- {warningMessage}
- </p>
- </div>
- <button
- type="button"
- @click="warningOpen = false"
- aria-label="Dismiss notification"
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- <div class="h-1 w-full bg-amber-100 dark:bg-amber-500/10">
- <div class="h-full w-full origin-left bg-amber-500">
- </div>
- </div>
- </article>
- <!-- Information toast -->
- <article
- role="status"
- class="pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-indigo-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-indigo-500/20 dark:bg-slate-900 dark:shadow-black/40"
- class:hidden="!infoOpen"
- class:block="infoOpen"
- >
- <div class="absolute inset-y-0 left-0 w-1 bg-indigo-500">
- </div>
- <div class="flex items-start gap-3 p-4 pl-5">
- <span
- class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300"
- >
- <span class="icon-[lucide--info] h-5 w-5" aria-hidden="true" >
- </span>
- </span>
- <div class="min-w-0 flex-1 pt-0.5">
- <h3 class="text-sm font-bold text-slate-950 dark:text-white">
- {infoTitle}
- </h3>
- <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400">
- {infoMessage}
- </p>
- <a
- href="/changelog"
- class="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200"
- >
- View update
-
- <span class="icon-[lucide--arrow-up-right] h-3.5 w-3.5" aria-hidden="true" >
- </span>
- </a>
- </div>
- <button
- type="button"
- @click="infoOpen = false"
- aria-label="Dismiss notification"
- class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:bg-white/10 dark:hover:text-white"
- >
- <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
- </span>
- </button>
- </div>
- <div class="h-1 w-full bg-indigo-100 dark:bg-indigo-500/10">
- <div class="h-full w-full origin-left bg-indigo-500">
- </div>
- </div>
- </article>
- </div>
- }
-}
-Reusable toast icon component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ToastIcon
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ToastIcon".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ToastIcon.wrn
component ToastIcon {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable toast progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ToastProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="ToastProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ToastProgress.wrn
component ToastProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable toggle group component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ToggleGroup
- label="Toggle"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="ToggleGroup".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Toggle" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ToggleGroup.wrn
component ToggleGroup {
- props {
- label = "Toggle"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable toggle component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Toggle
- label="label"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="Toggle".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Toggle.wrn
component Toggle {
- props {
- label = ""
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable token input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TokenInput
- label="Token"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="TokenInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Token" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TokenInput.wrn
component TokenInput {
- props {
- label = "Token"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable totp verification form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TotpVerificationForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="TotpVerificationForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TotpVerificationForm.wrn
component TotpVerificationForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable translated text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TranslatedText
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="TranslatedText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TranslatedText.wrn
component TranslatedText {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable tree table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TreeTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="TreeTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TreeTable.wrn
component TreeTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable trend indicator component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TrendIndicator
- label="Trend"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="TrendIndicator".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Trend" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TrendIndicator.wrn
component TrendIndicator {
- props {
- label = "Trend"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable truncated text component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TruncatedText
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="TruncatedText".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TruncatedText.wrn
component TruncatedText {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable trust badge list component.
Components are auto-discovered. Use the component directly in any .wrn view:
<TrustBadgeList
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="TrustBadgeList".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/TrustBadgeList.wrn
component TrustBadgeList {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- {#if title || description}<header>{#if title}<h2>{title}</h2>{/if}{#if description}<p>{description}</p>{/if}</header>{/if}
- {#if empty}<p role="status" class="wire-muted">{emptyText}</p>{:else}<div role="list" class="wire-catalog-collection__items">
- <slot />
- </div>{/if}
- </section>
- }
-}
-Reusable unavailable region state component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UnavailableRegionState
- label="UnavailableRegion"
- title="title"
- description="description"
- value="value"
- variant="default"
-/>Legacy mount name: data-component="UnavailableRegionState".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "UnavailableRegion" |
title | string | Optional | "" |
description | string | Optional | "" |
value | string | Optional | "" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UnavailableRegionState.wrn
component UnavailableRegionState {
- props {
- label = "UnavailableRegion"
- title = ""
- description = ""
- value = ""
- variant = "default"
- class = ""
- }
- view {
- <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
- <strong data-show="title || label">{title || label}</strong>
- <span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
- <p data-show="description">{description}</p>
- <slot />
- </aside>
- }
-}
-Reusable unified timeline preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UnifiedTimelinePreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="UnifiedTimelinePreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UnifiedTimelinePreview.wrn
component UnifiedTimelinePreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Unified customer timeline across automated and human interactions" class="grid min-h-52 gap-0 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60">
- <div class="grid grid-cols-[auto_1fr_auto] items-start gap-3">
- <span class="grid size-8 place-items-center rounded-lg bg-violet-500/10 text-violet-500">
- <span class="icon-[lucide--zap] size-4" aria-hidden="true">
- </span>
- </span>
- <span>
- <strong class="block text-sm">Workflow triggered</strong>
- <span class="text-xs text-slate-500">Order status changed</span>
- </span>
- <time class="text-xs text-slate-500">09:42</time>
- </div>
- <div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700">
- </div>
- <div class="grid grid-cols-[auto_1fr_auto] items-start gap-3">
- <span class="grid size-8 place-items-center rounded-lg bg-emerald-500/10 text-emerald-500">
- <span class="icon-[lucide--message-square-check] size-4" aria-hidden="true">
- </span>
- </span>
- <span>
- <strong class="block text-sm">WhatsApp delivered</strong>
- <span class="text-xs text-slate-500">Template: order shipped</span>
- </span>
- <time class="text-xs text-slate-500">09:43</time>
- </div>
- <div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700">
- </div>
- <div class="grid grid-cols-[auto_1fr_auto] items-start gap-3">
- <span class="grid size-8 place-items-center rounded-lg bg-sky-500/10 text-sky-500">
- <span class="icon-[lucide--user-round-check] size-4" aria-hidden="true">
- </span>
- </span>
- <span>
- <strong class="block text-sm">Human follow-up</strong>
- <span class="text-xs text-slate-500">Assigned to support</span>
- </span>
- <time class="text-xs text-slate-500">09:48</time>
- </div>
- </div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable unsaved changes dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UnsavedChangesDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="UnsavedChangesDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UnsavedChangesDialog.wrn
component UnsavedChangesDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable upload item component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UploadItem
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="UploadItem".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UploadItem.wrn
component UploadItem {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable upload preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UploadPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="UploadPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UploadPreview.wrn
component UploadPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable upload progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UploadProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="UploadProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UploadProgress.wrn
component UploadProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable uptime chart component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UptimeChart
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="UptimeChart".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UptimeChart.wrn
component UptimeChart {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable uptime metric component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UptimeMetric
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="UptimeMetric".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UptimeMetric.wrn
component UptimeMetric {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable url input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UrlInput
- id="id"
- name="name"
- label="Url"
- value="value"
- placeholder="placeholder"
-/>Legacy mount name: data-component="UrlInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
id | string | Optional | "" |
name | string | Optional | "" |
label | string | Optional | "Url" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
help | string | Optional | "" |
error | string | Optional | "" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
autocomplete | string | Optional | "" |
This component does not declare a slot.
This component does not declare a custom event.
Installed source: components/UrlInput.wrn
component UrlInput {
- props {
- class = ""
- id = ""
- name = ""
- label = "Url"
- value = ""
- placeholder = ""
- help = ""
- error = ""
- required = false
- disabled = false
- readonly = false
- autocomplete = ""
- }
- view {
- <div class="space-y-2 {class}">
- <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span>
- </label>
- <input id="{id}" name="{name}" type="url" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{!!error}" aria-describedby="{id}-help {id}-error" class="min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white {error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'}" />
- <p id="{id}-help" data-show="help && !error" class="text-sm text-slate-500 dark:text-slate-400">{help}</p>
- <p id="{id}-error" data-show="error" role="alert" class="text-sm font-medium text-red-600 dark:text-red-400">{error}</p>
- </div>
- }
-}
-Reusable usage pricing table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UsagePricingTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="UsagePricingTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UsagePricingTable.wrn
component UsagePricingTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable use case selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UseCaseSelector
- label="UseCase"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="UseCaseSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "UseCase" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UseCaseSelector.wrn
component UseCaseSelector {
- props {
- label = "UseCase"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable user card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UserCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="UserCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UserCard.wrn
component UserCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--user {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable username input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<UsernameInput
- label="Username"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="UsernameInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Username" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/UsernameInput.wrn
component UsernameInput {
- props {
- label = "Username"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable value card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ValueCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ValueCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ValueCard.wrn
component ValueCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable values grid component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ValuesGrid
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="ValuesGrid".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ValuesGrid.wrn
component ValuesGrid {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable verification code input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VerificationCodeInput
- label="VerificationCode"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="VerificationCodeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "VerificationCode" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VerificationCodeInput.wrn
component VerificationCodeInput {
- props {
- label = "VerificationCode"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable verified badge component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VerifiedBadge
- label="Verified"
- variant="default"
-/>Legacy mount name: data-component="VerifiedBadge".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Verified" |
variant | string | Optional | "default" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VerifiedBadge.wrn
component VerifiedBadge {
- props {
- label = "Verified"
- variant = "default"
- class = ""
- }
- view {
- <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--verifiedbadge {class}">{label}<slot />
- </span>
- }
-}
-Reusable version selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VersionSelector
- label="Version"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="VersionSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Version" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VersionSelector.wrn
component VersionSelector {
- props {
- label = "Version"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable vertical tabs component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VerticalTabs
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="VerticalTabs".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VerticalTabs.wrn
component VerticalTabs {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable video card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VideoCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="VideoCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VideoCard.wrn
component VideoCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable video preview dialog component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VideoPreviewDialog
- title="title"
- description="description"
- open="false"
- closeLabel="Close"
-/>Legacy mount name: data-component="VideoPreviewDialog".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
open | boolean | Optional | false |
closeLabel | string | Optional | "Close" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VideoPreviewDialog.wrn
component VideoPreviewDialog {
- props {
- title = ""
- description = ""
- open = false
- closeLabel = "Close"
- class = ""
- }
- view {
- <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
- <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
- <header>
- <h2 data-show="title" class="wire-dialog__title">{title}</h2>
- <p data-show="description" class="wire-dialog__description">{description}</p>
- </header>
- <slot />
- <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
- </section>
- </div>
- }
-}
-Reusable video upload component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VideoUpload
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="VideoUpload".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VideoUpload.wrn
component VideoUpload {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable virtualized table component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VirtualizedTable
- title="title"
- description="description"
- empty="false"
- emptyText="No items available."
-/>Legacy mount name: data-component="VirtualizedTable".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
empty | boolean | Optional | false |
emptyText | string | Optional | "No items available." |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VirtualizedTable.wrn
component VirtualizedTable {
- props {
- title = ""
- description = ""
- empty = false
- emptyText = "No items available."
- class = ""
- }
- view {
- <section class="wire-catalog-collection {class}">
- <header data-show="title || description">
- <h2 data-show="title">{title}</h2>
- <p data-show="description">{description}</p>
- </header>
- <div data-show="!empty" role="list" class="wire-catalog-collection__items">
- <slot />
- </div>
- <p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
- </section>
- }
-}
-Reusable vision section component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VisionSection
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="VisionSection".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VisionSection.wrn
component VisionSection {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable visually hidden component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VisuallyHidden />Legacy mount name: data-component="VisuallyHidden".
| Prop | Type | Requirement | Default |
|---|---|---|---|
className | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VisuallyHidden.wrn
component VisuallyHidden {
- props {
- className = ""
- }
- view {
- <div class="sr-only {className}">
- <slot />
- </div>
- }
-}
-Reusable voice script composer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VoiceScriptComposer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="VoiceScriptComposer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VoiceScriptComposer.wrn
component VoiceScriptComposer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable voice script editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VoiceScriptEditor
- label="VoiceScript"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="VoiceScriptEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "VoiceScript" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VoiceScriptEditor.wrn
component VoiceScriptEditor {
- props {
- label = "VoiceScript"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable volume input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VolumeInput
- label="Volume"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="VolumeInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Volume" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VolumeInput.wrn
component VolumeInput {
- props {
- label = "Volume"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable volume slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<VolumeSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="VolumeSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/VolumeSlider.wrn
component VolumeSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable warning card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WarningCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="WarningCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WarningCard.wrn
component WarningCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--warning {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable webhook event card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WebhookEventCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WebhookEventCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WebhookEventCard.wrn
component WebhookEventCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable webhook flow diagram component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WebhookFlowDiagram
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="WebhookFlowDiagram".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WebhookFlowDiagram.wrn
component WebhookFlowDiagram {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable webhook payload viewer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WebhookPayloadViewer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WebhookPayloadViewer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WebhookPayloadViewer.wrn
component WebhookPayloadViewer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable webhook url input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WebhookUrlInput
- label="WebhookUrl"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="WebhookUrlInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "WebhookUrl" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WebhookUrlInput.wrn
component WebhookUrlInput {
- props {
- label = "WebhookUrl"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable webinar card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WebinarCard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WebinarCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WebinarCard.wrn
component WebinarCard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable webinar registration form component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WebinarRegistrationForm
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WebinarRegistrationForm".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WebinarRegistrationForm.wrn
component WebinarRegistrationForm {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable well component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Well />Legacy mount name: data-component="Well".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Well.wrn
component Well {
- props {
- class = ""
- }
- view {
- <div class="wire-well {class}">
- <slot />
- </div>
- }
-}
-Reusable whats app composer component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WhatsAppComposer
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WhatsAppComposer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WhatsAppComposer.wrn
component WhatsAppComposer {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable whats app number input component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WhatsAppNumberInput
- label="WhatsAppNumber"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="WhatsAppNumberInput".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "WhatsAppNumber" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WhatsAppNumberInput.wrn
component WhatsAppNumberInput {
- props {
- label = "WhatsAppNumber"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable whats app template editor component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WhatsAppTemplateEditor
- label="WhatsAppTemplate"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="WhatsAppTemplateEditor".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "WhatsAppTemplate" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WhatsAppTemplateEditor.wrn
component WhatsAppTemplateEditor {
- props {
- label = "WhatsAppTemplate"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable wide container component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WideContainer />Legacy mount name: data-component="WideContainer".
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WideContainer.wrn
component WideContainer {
- props {
- class = ""
- }
- view {
- <div class="wire-container wire-container--wide {class}">
- <slot />
- </div>
- }
-}
-Reusable wizard header component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WizardHeader
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="WizardHeader".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WizardHeader.wrn
component WizardHeader {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable wizard navigation component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WizardNavigation
- eyebrow="eyebrow"
- title="title"
- description="description"
- align="start"
-/>Legacy mount name: data-component="WizardNavigation".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
align | string | Optional | "start" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WizardNavigation.wrn
component WizardNavigation {
- props {
- eyebrow = ""
- title = ""
- description = ""
- align = "start"
- class = ""
- }
- view {
- <section class="wire-catalog-section wire-text--{align} {class}">
- <header data-show="eyebrow || title || description">
- <span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
- <h2 data-show="title">{title}</h2>
- <p data-show="description" class="wire-muted">{description}</p>
- </header>
- <slot />
- </section>
- }
-}
-Reusable wizard component.
Components are auto-discovered. Use the component directly in any .wrn view:
<Wizard
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="Wizard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/Wizard.wrn
component Wizard {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable workflow canvas preview component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WorkflowCanvasPreview
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WorkflowCanvasPreview".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WorkflowCanvasPreview.wrn
component WorkflowCanvasPreview {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">
- {#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60">
- <div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900">
- <span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true">
- </span>
- <strong class="text-sm">Event received</strong>
- <span class="text-xs text-slate-500">Order shipped</span>
- </div>
- <span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true">
- </span>
- <div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3">
- <span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true">
- </span>
- <strong class="text-sm">Smart route</strong>
- <span class="text-xs text-slate-500">Consent + availability</span>
- </div>
- <span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300">
- <span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true">
- </span>Delivered</span>
- </div>{/if}
- {#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}
- </article>
- }
-}
-Reusable workflow progress component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WorkflowProgress
- title="title"
- value="value"
- description="description"
- summary="summary"
- loading="false"
-/>Legacy mount name: data-component="WorkflowProgress".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
value | string | Optional | "" |
description | string | Optional | "" |
summary | string | Optional | "" |
loading | boolean | Optional | false |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WorkflowProgress.wrn
component WorkflowProgress {
- props {
- title = ""
- value = ""
- description = ""
- summary = ""
- loading = false
- class = ""
- }
- view {
- <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
- <figcaption>
- <strong data-show="title">{title}</strong>
- <span data-show="value" class="wire-metric__value">{value}</span>
- <span data-show="description" class="wire-muted">{description}</span>
- </figcaption>
- <div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
- </div>
- <div data-show="!loading" class="wire-catalog-visualization__content">
- <slot />
- </div>
- <p data-show="summary" class="wire-visually-hidden">{summary}</p>
- </figure>
- }
-}
-Reusable workspace card component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WorkspaceCard
- title="title"
- description="description"
- href="href"
-/>Legacy mount name: data-component="WorkspaceCard".
| Prop | Type | Requirement | Default |
|---|---|---|---|
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WorkspaceCard.wrn
component WorkspaceCard {
- props {
- title = ""
- description = ""
- href = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card wire-catalog-card--workspace {class}">
- <h3 data-show="title">{title}</h3>
- <p data-show="description">{description}</p>
- <slot />
- <a data-show="href" href="{href}" class="wire-catalog-card__link">
- <span class="wire-visually-hidden">Open {title}</span>
- </a>
- </article>
- }
-}
-Reusable workspace selector component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WorkspaceSelector
- label="Workspace"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="WorkspaceSelector".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Workspace" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WorkspaceSelector.wrn
component WorkspaceSelector {
- props {
- label = "Workspace"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable workspace switcher component.
Components are auto-discovered. Use the component directly in any .wrn view:
<WorkspaceSwitcher
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="WorkspaceSwitcher".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/WorkspaceSwitcher.wrn
component WorkspaceSwitcher {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Reusable year picker component.
Components are auto-discovered. Use the component directly in any .wrn view:
<YearPicker
- label="Year"
- name="name"
- value="value"
- placeholder="placeholder"
- type="text"
-/>Legacy mount name: data-component="YearPicker".
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Year" |
name | string | Optional | "" |
value | string | Optional | "" |
placeholder | string | Optional | "" |
type | string | Optional | "text" |
required | boolean | Optional | false |
disabled | boolean | Optional | false |
readonly | boolean | Optional | false |
help | string | Optional | "" |
error | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/YearPicker.wrn
component YearPicker {
- props {
- label = "Year"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- required = false
- disabled = false
- readonly = false
- help = ""
- error = ""
- class = ""
- }
- view {
- <label class="wire-field wire-catalog-field {class}">
- <span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
- </span>
- <input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
- <span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
- <span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
- <slot />
- </label>
- }
-}
-Reusable zoom slider component.
Components are auto-discovered. Use the component directly in any .wrn view:
<ZoomSlider
- eyebrow="eyebrow"
- title="title"
- description="description"
- href="href"
- actionLabel="Learn more"
-/>Legacy mount name: data-component="ZoomSlider".
| Prop | Type | Requirement | Default |
|---|---|---|---|
eyebrow | string | Optional | "" |
title | string | Optional | "" |
description | string | Optional | "" |
href | string | Optional | "" |
actionLabel | string | Optional | "Learn more" |
image | string | Optional | "" |
alt | string | Optional | "" |
class | string | Optional | "" |
defaultThis component does not declare a custom event.
Installed source: components/ZoomSlider.wrn
component ZoomSlider {
- props {
- eyebrow = ""
- title = ""
- description = ""
- href = ""
- actionLabel = "Learn more"
- image = ""
- alt = ""
- class = ""
- }
- view {
- <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
- }
-}
-Examples are tied to installed 0.3.4 package documentation. The focused snippets in guides are source-verified; standalone runnable projects and CI compilation are tracked as remaining work.
Examples are tied to installed 0.3.5 package documentation. The focused snippets in guides are source-verified; standalone runnable projects and CI compilation are tracked as remaining work.
This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.
bunx @wrnexus/cli@0.3.4 create my-app
+ Preview guide · v0.3.5Build a contact inbox
This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.
1. Create the project
bunx @wrnexus/cli@0.3.5 create my-app
cd my-app
bun install
bun run dev
2. Know the structure
app/pages/ # file-based .wrn routes
@@ -39,7 +39,7 @@ export const POST = async (ctx) => {
}
7. Test and ship
bun run test
bun run build
bun dist/server.js
Next: deployment, database, authentication, and workspaces.
Export GET, POST, PUT, PATCH, or DELETE from app/api files. Validate request bodies, enforce authentication and authorization, cap request sizes, and return Web Responses.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Export GET, POST, PUT, PATCH, or DELETE from app/api files. Validate request bodies, enforce authentication and authorization, cap request sizes, and return Web Responses.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Configure session authentication, log users in through supported auth helpers, and read identity from context. Cookie flags, rotation, expiry, and secret storage remain deployment responsibilities.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Configure session authentication, log users in through supported auth helpers, and read identity from context. Cookie flags, rotation, expiry, and secret storage remain deployment responsibilities.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Authentication identifies; authorization decides. Enforce permissions in server routes and policies, including object ownership. UI hiding is never an authorization boundary.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Authentication identifies; authorization decides. Enforce permissions in server routes and policies, including object ownership. UI hiding is never an authorization boundary.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
wrnexus.config.ts owns styles, SEO, security, data, mobile, fonts, and profiles. Keep secrets in validated environment variables and review merged production configuration.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
wrnexus.config.ts owns styles, SEO, security, data, mobile, fonts, and profiles. Keep secrets in validated environment variables and review merged production configuration.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Configure SQLite or the installed supported driver, keep queries in named SQL blocks, generate typed functions, and apply migrations before traffic. Back up data and test rollback independently.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Configure SQLite or the installed supported driver, keep queries in named SQL blocks, generate typed functions, and apply migrations before traffic. Back up data and test rollback independently.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Run bun run build, apply migrations, and start dist/server.js with Bun. Configure TLS, proxy trust, environment validation, health checks, graceful restarts, logs, backups, and restrictive security headers.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Run bun run build, apply migrations, and start dist/server.js with Bun. Configure TLS, proxy trust, environment validation, health checks, graceful restarts, logs, backups, and restrictive security headers.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Define a v.object schema, use data-schema on the form, show field errors with data-error, and always call parseBody on the server. refine is server-only.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Define a v.object schema, use data-schema on the form, show field errors with data-error, and always call parseBody on the server. refine is server-only.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Store locale JSON under app/locales and use translation directives. Themes resolve CSS tokens; ensure contrast, system preference behavior, persistence, and non-color cues.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Store locale JSON under app/locales and use translation directives. Themes resolve CSS tokens; ensure contrast, system preference behavior, persistence, and non-color cues.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Middleware receives context and next. Return next() to continue or return a Response to stop. Put request limits and trust-boundary controls before business logic.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Middleware receives context and next. Return next() to continue or return a Response to stop. Put request limits and trust-boundary controls before business logic.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Mobile capabilities are experimental in this preview. Test Capacitor permissions and lifecycle on each platform; do not assume every .wrn or browser API converts to native.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Mobile capabilities are experimental in this preview. Test Capacitor permissions and lifecycle on each platform; do not assume every .wrn or browser API converts to native.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use tracking middleware and sinks with redaction, sampling, stable request identifiers, alert ownership, and retention limits. Never capture registry tokens or session secrets.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use tracking middleware and sinks with redaction, sampling, stable request identifiers, alert ownership, and retention limits. Never capture registry tokens or session secrets.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Pages are routable, components are reusable, and layouts provide shared slots. Mount a component with data-component and keep browser state scoped and minimal.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Pages are routable, components are reusable, and layouts provide shared slots. Mount a component with data-component and keep browser state scoped and minimal.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Pages, components, layouts, APIs, middleware, schemas, database files, locales, realtime rooms, and styles live under app. Never edit app/routes.gen.ts, .wrnexus, or dist by hand.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Pages, components, layouts, APIs, middleware, schemas, database files, locales, realtime rooms, and styles live under app. Never edit app/routes.gen.ts, .wrnexus, or dist by hand.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
The in-process driver cannot cross processes. Use Redis where instances must share events, define channel ownership, and design for reconnects and duplicate delivery.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
The in-process driver cannot cross processes. Use Redis where instances must share events, define channel ownership, and design for reconnects and duplicate delivery.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Queue behavior is preview-level. Treat in-process work as non-durable, make handlers idempotent, cap retries, record failures, and choose a production persistence strategy.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Queue behavior is preview-level. Treat in-process work as non-durable, make handlers idempotent, cap retries, record failures, and choose a production persistence strategy.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
defineRoom handles connection and messages. Validate message shapes, authorize subscriptions, restrict origins, bound payloads, and use pub/sub to scale across processes.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
defineRoom handles connection and messages. Validate message shapes, authorize subscriptions, restrict origins, bound payloads, and use pub/sub to scale across processes.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
A page filename defines its URL; index maps to the directory root and bracket segments are dynamic parameters. API files under app/api expose HTTP method functions and receive a Context.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
A page filename defines its URL; index maps to the directory root and bracket segments are dynamic parameters. API files under app/api expose HTTP method functions and receive a Context.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use CSP, CSRF, Trusted Types, session hardening, validation, origin checks, upload restrictions, encryption, request limits, and explicit CORS. See the security policy for reporting.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use CSP, CSRF, Trusted Types, session hardening, validation, origin checks, upload restrictions, encryption, request limits, and explicit CORS. See the security policy for reporting.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use an ssr API binding, return the desired response field, and render it with a server #each block. Values are escaped. Avoid fetching private data through a route that lacks authorization.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use an ssr API binding, return the desired response field, and render it with a server #each block. Values are escaped. Avoid fetching private data through a route that lacks authorization.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use Bun tests and @wrnexus/test helpers. Cover server HTML, API status and validation, authorization failures, reactive behavior, and a production startup smoke test.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Use Bun tests and @wrnexus/test helpers. Cover server HTML, API status and validation, authorization failures, reactive behavior, and a production startup smoke test.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Confirm Bun and package versions, regenerate docs/routes through supported commands, read the first compiler diagnostic, check file naming, validate config, and reproduce under a production build.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Confirm Bun and package versions, regenerate docs/routes through supported commands, read the first compiler diagnostic, check file naming, validate config, and reproduce under a production build.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Back up and commit first, then use wrnexus update --latest as documented by the installed CLI. Review migrations and keep every @wrnexus package aligned. Current release: 0.3.4.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Back up and commit first, then use wrnexus update --latest as documented by the installed CLI. Review migrations and keep every @wrnexus package aligned. Current release: 0.3.5.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Configure named stores, accepted MIME/extensions, and maxBytes. Random keys avoid path traversal. Private files require an authenticated serving route; v1 buffers each file in memory.
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Configure named stores, accepted MIME/extensions, and maxBytes. Random keys avoid path traversal. Private files require an authenticated serving route; v1 buffers each file in memory.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
A workspace runs isolated applications behind one domain-routing gateway. Add an application from the workspace root; the CLI scaffolds apps/reports and registers it in wrnexus.workspace.ts:
wrnexus workspace add reports --domain=reports.localhost
+ Preview guide · 0.3.5Workspaces and gateway
A workspace runs isolated applications behind one domain-routing gateway. Add an application from the workspace root; the CLI scaffolds apps/reports and registers it in wrnexus.workspace.ts:
wrnexus workspace add reports --domain=reports.localhost
bun install
bun run dev
Forward authentication
Point protected applications at a dedicated verifier endpoint. The verifier must return 2xx for an authenticated session, 401/403 to deny access, or an HTTP redirect to begin browser login.
// wrnexus.workspace.ts
{
@@ -28,8 +28,8 @@ export const GET = async (ctx: Context) => {
return redirectToLogin(ctx, "/login", {
allowedHosts: ["admin.localhost:3000", "reports.localhost:3000"],
});
-};
Always allowlist redirect hosts. After login, validate or sign the returnTo value before redirecting. Keep internal app ports private and open applications through the gateway port.
Release scope
This guide describes installed 0.3.4 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
Always allowlist redirect hosts. After login, validate or sign the returnTo value before redirecting. Keep internal app ports private and open applications through the gateway port.
This guide describes installed 0.3.5 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.
WRNexusJS v0.3.4
WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the .wrn component language.
Private developer preview. Request access to the package registry.
page Dashboard {
+ WRNexusJS v0.3.5
Build from the server.
Ship only what matters.
WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the .wrn component language.
Private developer preview. Request access to the package registry.
app/pages/dashboard.wrnpage Dashboard {
ssr { api tasks GET /api/tasks { return tasks } }
view {
<main>
@@ -35,10 +35,10 @@ export const POST = async (ctx) => {
return result.ok ? Response.json({ ok: true }, { status: 201 }) : result.response;
};
Request lifecycle
- RequestSecurity headers and request limits
- MiddlewareAuthentication, policy, and context
- File routePage or API handler
- Compiler + SSRSafe HTML and scoped runtime
- ResponseHTML, JSON, stream, or realtime upgrade
Production proof
WorkRoot
Public creator/company site and approved WRNexusJS production showcase.
wrnexusjs.dev
This documentation application runs WRNexusJS 0.3.4.
Capability status
Capability Status Details SSR, routing, compiler, APIs Preview Installed in 0.3.4; public support policy pending. Mobile/native Experimental Capacitor compatibility and native generation have platform limitations. Durable queues Experimental Production durability requires an appropriate driver strategy.
Production proof
WorkRoot
Public creator/company site and approved WRNexusJS production showcase.
wrnexusjs.dev
This documentation application runs WRNexusJS 0.3.5.
Capability status
Capability Status Details SSR, routing, compiler, APIs Preview Installed in 0.3.5; public support policy pending. Mobile/native Experimental Capacitor compatibility and native generation have platform limitations. Durable queues Experimental Production durability requires an appropriate driver strategy.
Continue exploring
W WRNexusJS
+ W WRNexusJS
Browse documentation
- Language reference · 0.3.4The .wrn language
File anatomy
page Account {
+ Language reference · 0.3.5The .wrn language
File anatomy
page Account {
layout = "public"
seo { title = "Account" description = "Manage your account." }
state count = 0
view { <button @click="count++">Count {count}</button> }
}
Pages, components, layouts, props, and state
Pages are routes. Components declare default-valued props and may hold state. Layouts provide shared slots. Mount components with data-component; fill default or named slots with data-slot.
Interpolation, conditionals, and loops
Interpolation is HTML-escaped. Use server {#if} and {#each} for SSR data. Use data-show for reactive client visibility.
Events and directives
@click and other events execute in the reactive scope. Data attributes opt into forms, i18n, themes, realtime, uploader, browser, and mobile behavior. Consult the exact package page because availability varies.
Forms, i18n, themes, and realtime
form[data-schema] connects descriptors to client and server validation. Translation keys use {t:key}. Theme toggles use data-wire-theme-toggle. Realtime pages opt into a named room.
Escaping and security
Text interpolation is escaped by default. Do not construct trusted HTML from user input. Server-only refinements must be repeated at the authoritative mutation boundary.
Common compiler errors
- Use balanced braces; a literal brace must be escaped.
- Declare UI in
view, not JSX or hooks. - Use a valid page, component, or layout declaration matching the file role.
- Keep server loops tied to available SSR bindings.
- Check troubleshooting and compiler API for this release.
W WRNexusJS
+ W WRNexusJS
Browse documentation
License
Owner decision requiredThis documentation repository contains no public license file, and the packages are unavailable from the public npm registry. No open-source license or redistribution right should be inferred.
Approved preview users must follow the private/commercial terms supplied by WorkRoot. Contact WorkRoot before copying, redistributing, or using WRNexusJS in production.
W WRNexusJS
+ Browse documentation
+ WRNexusJS 0.3.5
Released 2026-07-13. All 29 installed packages are aligned to this version. Highlights include the new helpers package, reliable workspace app addition, and browser SSO redirects through forward authentication. See the changelog, upgrade guide, and package references.
W WRNexusJS
+ W WRNexusJS
Browse documentation
Roadmap
Roadmap items are direction, not delivery commitments. Dates require explicit owner approval.
Now
- Private preview onboarding and accurate package references
- Runnable documentation fixtures and link/accessibility checks
- License, support, and disclosure owner decisions
Next
- Durable queue driver guidance
- Expanded database/auth/realtime examples
- Versioned release notes and migration fixtures
Later / exploration
- Historical documentation selector
- Maintained reproducible benchmarks
- Broader mobile/native coverage
W WRNexusJS
+ W WRNexusJS
Browse documentation
Search documentation
This build-time index is local and sends no query to a third party. Use your browser’s find command to filter this compact index.
Core documentation
Get started · Packages · Components · Language · Architecture
Guides
Project structure · Routing · Pages and components · Server data · API routes · Middleware · Forms and validation · Authentication · Authorization · Application security · Database · Uploads · Realtime · Pub/sub · Queues · Testing · Workspaces and gateway · Deployment · Configuration and profiles · Internationalization and themes · Mobile · Observability · Upgrading · Troubleshooting
Package APIs
@wrnexus/ai · @wrnexus/authz · @wrnexus/compiler · @wrnexus/core · @wrnexus/csr · @wrnexus/db · @wrnexus/dev-server · @wrnexus/encryption · @wrnexus/helpers · @wrnexus/i18n · @wrnexus/jwt · @wrnexus/mobile · @wrnexus/native · @wrnexus/oauth · @wrnexus/pubsub · @wrnexus/queue · @wrnexus/reactive · @wrnexus/router · @wrnexus/ssr · @wrnexus/styles · @wrnexus/test · @wrnexus/tracking · @wrnexus/ui · @wrnexus/uploader · @wrnexus/validation · @wrnexus/dev-toolbar · @wrnexus/syntax · @wrnexus/plugin · @wrnexus/cli
W WRNexusJS
+ W WRNexusJS
Browse documentation
- Security
WRNexusJS provides primitives for CSP, CSRF, Trusted Types, sessions, validation, authorization, encryption, upload restrictions, request limits, and WebSocket-origin checks. Applications remain responsible for correct configuration, business authorization, secrets, dependencies, data protection, and operations.
Supported releases
Only the current private-preview release 0.3.4 is documented here. A formal old-release support window is not yet published.
Report a vulnerability
Use WorkRoot’s approved private contact path at workroot.in. Do not publish exploit details or secrets. Include affected version, impact, reproduction, and a safe contact method. Response targets, encryption key, bounty, audit, and certification are not currently claimed.
Deployment controls
Use restrictive CSP and permissions policies, HSTS only on HTTPS production origins, MIME sniffing protection, restrictive referrers, explicit CORS, secure cookies, CSRF validation, request limits, and origin checks. See application security.
Security
WRNexusJS provides primitives for CSP, CSRF, Trusted Types, sessions, validation, authorization, encryption, upload restrictions, request limits, and WebSocket-origin checks. Applications remain responsible for correct configuration, business authorization, secrets, dependencies, data protection, and operations.
Supported releases
Only the current private-preview release 0.3.5 is documented here. A formal old-release support window is not yet published.
Report a vulnerability
Use WorkRoot’s approved private contact path at workroot.in. Do not publish exploit details or secrets. Include affected version, impact, reproduction, and a safe contact method. Response targets, encryption key, bounty, audit, and certification are not currently claimed.
Deployment controls
Use restrictive CSP and permissions policies, HSTS only on HTTPS production origins, MIME sniffing protection, restrictive referrers, explicit CORS, secure cookies, CSRF validation, request limits, and origin checks. See application security.
W WRNexusJS
+ W WRNexusJS
Browse documentation
- Showcase
Only confirmed public properties are listed; no customer or traffic claims are made.
WorkRoot
Creator/company site demonstrating a public WRNexusJS deployment. Exact deployed version and infrastructure notes await owner confirmation.
WRNexusJS docs
This documentation portal, built and verified against WRNexusJS 0.3.4 on Bun.
Screenshots are intentionally deferred until approved assets and alt text are available.
Showcase
Only confirmed public properties are listed; no customer or traffic claims are made.
WorkRoot
Creator/company site demonstrating a public WRNexusJS deployment. Exact deployed version and infrastructure notes await owner confirmation.
WRNexusJS docs
This documentation portal, built and verified against WRNexusJS 0.3.5 on Bun.
Screenshots are intentionally deferred until approved assets and alt text are available.
W WRNexusJS
+ W WRNexusJS
Browse documentation
Support
WRNexusJS has no public Discord, public issue tracker, or guaranteed community support channel listed by this repository. Preview access and support begin through WorkRoot’s public contact path.
Include WRNexusJS version, Bun version, OS, a minimal reproduction, expected and actual behavior, and sanitized logs. Never include registry tokens, credentials, session cookies, or private data.
Support scope, service levels, and commercial terms require owner confirmation.
W WRNexusJS
+ W WRNexusJS
Browse documentation
- Preview · runnable-project extraction pendingSecure task board
This tutorial connects the installed 0.3.4 APIs into one design. Snippets are limited to declarations and README patterns verified in the installed packages; a CI-compiled standalone fixture remains on the roadmap.
Application shape
A .wrn page renders tasks from an SSR API binding. A shared validation schema protects mutations. Session middleware identifies users, authorization policies gate updates, and a realtime room broadcasts changes.
Schema and create route
import { v, parseBody } from "@wrnexus/validation";
+ Preview · runnable-project extraction pendingSecure task board
This tutorial connects the installed 0.3.5 APIs into one design. Snippets are limited to declarations and README patterns verified in the installed packages; a CI-compiled standalone fixture remains on the roadmap.
Application shape
A .wrn page renders tasks from an SSR API binding. A shared validation schema protects mutations. Session middleware identifies users, authorization policies gate updates, and a realtime room broadcasts changes.
Schema and create route
import { v, parseBody } from "@wrnexus/validation";
const task = v.object({ title: v.string().trim().min(3).max(120) });
export const POST = async (ctx) => {
const parsed = await parseBody(task, ctx.req);
@@ -23,7 +23,7 @@ export const POST = async (ctx) => {
</ul></main>
}
}
Production checklist
- Choose SQLite for local development or configure the supported PostgreSQL driver.
- Run migrations before accepting traffic.
- Enable session authentication and enforce authorization on every mutation.
- Validate upload types and sizes; keep private objects behind authenticated routes.
- Use Redis pub/sub when realtime rooms span processes.
- Treat the default queue as non-durable until a production driver is selected.
Follow the focused database, authentication, authorization, realtime, and upload guides.
` or `component ` followed by a `{ ... }` bo
- `layout = ""` — selects `app/layouts/.wrn` (pages only).
- `types { }` — reusable interfaces and aliases for the current file.
- `props { name: Type = ... }` — typed component props. Omit `= ` to make a prop required. Legacy inferred props remain supported.
+- `@event name = function` inside `props` — declares a public component event. Emit it from component behavior with `name(detail)` or `$emit("name", detail)`, and consume it with `: Type = ` — typed reactive state seeded from a raw JS expression. The annotation is optional for backward compatibility.
- `view { }` — plain HTML with `{expr}` interpolation in text and attributes, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and ``. Attribute expressions that reference `state` keep an SSR value and update reactively in the browser.
- `seo { key = "value" ... }` — metadata merged into the generated `meta`.
@@ -13848,7 +15047,7 @@ A file opens with `page ` or `component ` followed by a `{ ... }` bo
```ts
import { PageAst as PageAst$1, WrnDiagnostic } from '@wrnexus/syntax';
-export { ActionBlock, ApiBlock, Attr, ComputedDecl, DataApiBlock, DataMode, EffectBlock, LexError, Lexer, LoadBlock, ModeFunctionsBlock, PageAst, ParseError, PropDecl, RealtimeBlock, SeoBlock, StateDecl, ViewNode, WrnDiagnostic, assertValidAst, diagnose, diagnosticFromError, eraseFunctionTypes, formatDiagnostic, inferredRuntimeType, parse, runtimeTypeOf } from '@wrnexus/syntax';
+export { ActionBlock, ApiBlock, Attr, ComputedDecl, DataApiBlock, DataMode, EffectBlock, EventDecl, LexError, Lexer, LoadBlock, ModeFunctionsBlock, PageAst, ParseError, PropDecl, RealtimeBlock, SeoBlock, StateDecl, ViewNode, WrnDiagnostic, assertValidAst, diagnose, diagnosticFromError, eraseFunctionTypes, formatDiagnostic, inferredRuntimeType, parse, runtimeTypeOf } from '@wrnexus/syntax';
import { PageAst } from '@wrnexus/syntax/parser';
/**
@@ -18999,6 +20198,12 @@ interface RenderOptions {
extraBody?: string;
/** Attributes for the `` element, e.g. ` data-theme="dark"` (trusted). */
htmlAttrs?: string;
+ /**
+ * Optional application-authored full document shell. It must contain
+ * ``, ``, and ``. Framework metadata, assets, and scripts
+ * are merged into it instead of wrapping the rendered body again.
+ */
+ documentTemplate?: string;
}
/**
* Render a complete HTML document.
@@ -19753,7 +20958,7 @@ See `docs/WRN-LANGUAGE-SPEC-1.0.md` in the WRNexusJS repository.
```ts
export { LexError, Lexer } from './tokenizer.js';
-export { ActionBlock, ApiBlock, Attr, ComputedDecl, DataApiBlock, DataMode, EffectBlock, LifecycleBlock, LoadBlock, ModeFunctionsBlock, PageAst, ParseError, PropDecl, RealtimeBlock, RealtimeHandler, SeoBlock, StateDecl, VOID_ELEMENTS, ViewNode, WatchBlock, parse, parseHtmlView } from './parser.js';
+export { ActionBlock, ApiBlock, Attr, ComputedDecl, DataApiBlock, DataMode, EffectBlock, EventDecl, LifecycleBlock, LoadBlock, ModeFunctionsBlock, PageAst, ParseError, PropDecl, RealtimeBlock, RealtimeHandler, SeoBlock, StateDecl, VOID_ELEMENTS, ViewNode, WatchBlock, parse, parseHtmlView } from './parser.js';
export { RuntimeType, eraseFunctionTypes, inferredRuntimeType, runtimeTypeOf, validateTypedInitializer } from './types.js';
export { DiagnoseOptions, WrnDiagnostic, WrnDiagnosticSeverity, WrnSourcePosition, assertValidAst, classifyParseError, diagnose, diagnosticFromError, formatDiagnostic, isHydrationStrategy, isRuntimeTarget, positionAt } from './diagnostics.js';
export { WRN_DIAGNOSTIC_CODES, WRN_HYDRATION_STRATEGIES, WRN_LANGUAGE_VERSION, WRN_ROOT_KINDS, WRN_ROOT_MEMBERS, WRN_RUNTIME_TARGETS, WrnHydrationStrategy, WrnRootKind, WrnRootMember, WrnRuntimeTarget } from './spec.js';
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 158a8f68..69f6c0b9 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,2 +1,2 @@
-https://wrnexusjs.dev/ https://wrnexusjs.dev/access https://wrnexusjs.dev/getting-started https://wrnexusjs.dev/tutorial https://wrnexusjs.dev/architecture https://wrnexusjs.dev/language https://wrnexusjs.dev/packages https://wrnexusjs.dev/components https://wrnexusjs.dev/guides/project-structure https://wrnexusjs.dev/guides/routing https://wrnexusjs.dev/guides/pages-and-components https://wrnexusjs.dev/guides/server-data https://wrnexusjs.dev/guides/api-routes https://wrnexusjs.dev/guides/middleware https://wrnexusjs.dev/guides/forms-and-validation https://wrnexusjs.dev/guides/authentication https://wrnexusjs.dev/guides/authorization https://wrnexusjs.dev/guides/security https://wrnexusjs.dev/guides/database https://wrnexusjs.dev/guides/uploads https://wrnexusjs.dev/guides/realtime https://wrnexusjs.dev/guides/pubsub https://wrnexusjs.dev/guides/queues https://wrnexusjs.dev/guides/testing https://wrnexusjs.dev/guides/workspaces-and-gateway https://wrnexusjs.dev/guides/deployment https://wrnexusjs.dev/guides/configuration-and-profiles https://wrnexusjs.dev/guides/i18n-and-themes https://wrnexusjs.dev/guides/mobile https://wrnexusjs.dev/guides/observability https://wrnexusjs.dev/guides/upgrading https://wrnexusjs.dev/guides/troubleshooting https://wrnexusjs.dev/examples https://wrnexusjs.dev/showcase https://wrnexusjs.dev/benchmarks https://wrnexusjs.dev/roadmap https://wrnexusjs.dev/changelog https://wrnexusjs.dev/releases/0.3.4 https://wrnexusjs.dev/security https://wrnexusjs.dev/support https://wrnexusjs.dev/license https://wrnexusjs.dev/search https://wrnexusjs.dev/404 https://wrnexusjs.dev/packages/ai https://wrnexusjs.dev/packages/authz https://wrnexusjs.dev/packages/cli https://wrnexusjs.dev/packages/compiler https://wrnexusjs.dev/packages/core https://wrnexusjs.dev/packages/csr https://wrnexusjs.dev/packages/db https://wrnexusjs.dev/packages/dev-server https://wrnexusjs.dev/packages/dev-toolbar https://wrnexusjs.dev/packages/encryption https://wrnexusjs.dev/packages/helpers https://wrnexusjs.dev/packages/i18n https://wrnexusjs.dev/packages/jwt https://wrnexusjs.dev/packages/mobile https://wrnexusjs.dev/packages/native https://wrnexusjs.dev/packages/oauth https://wrnexusjs.dev/packages/plugin https://wrnexusjs.dev/packages/pubsub https://wrnexusjs.dev/packages/queue https://wrnexusjs.dev/packages/reactive https://wrnexusjs.dev/packages/router https://wrnexusjs.dev/packages/ssr https://wrnexusjs.dev/packages/styles https://wrnexusjs.dev/packages/syntax https://wrnexusjs.dev/packages/test https://wrnexusjs.dev/packages/tracking https://wrnexusjs.dev/packages/ui https://wrnexusjs.dev/packages/uploader https://wrnexusjs.dev/packages/validation https://wrnexusjs.dev/components/accept-all-cookies-button https://wrnexusjs.dev/components/accessible-accordion https://wrnexusjs.dev/components/accessible-carousel https://wrnexusjs.dev/components/accessible-chart-summary https://wrnexusjs.dev/components/accessible-dialog https://wrnexusjs.dev/components/accessible-error-summary https://wrnexusjs.dev/components/accessible-icon https://wrnexusjs.dev/components/accessible-menu https://wrnexusjs.dev/components/accessible-tabs https://wrnexusjs.dev/components/accessible-tooltip https://wrnexusjs.dev/components/accordion https://wrnexusjs.dev/components/account-menu https://wrnexusjs.dev/components/account-status-banner https://wrnexusjs.dev/components/action-menu https://wrnexusjs.dev/components/active-filter-list https://wrnexusjs.dev/components/activity-list https://wrnexusjs.dev/components/add-on-card https://wrnexusjs.dev/components/address-input https://wrnexusjs.dev/components/address-preview https://wrnexusjs.dev/components/advanced-filter-builder https://wrnexusjs.dev/components/alert https://wrnexusjs.dev/components/alert-dialog https://wrnexusjs.dev/components/amount-input https://wrnexusjs.dev/components/analytics-dashboard-preview https://wrnexusjs.dev/components/anchor-navigation https://wrnexusjs.dev/components/announcement-bar https://wrnexusjs.dev/components/apartment-input https://wrnexusjs.dev/components/api-authentication-notice https://wrnexusjs.dev/components/api-endpoint-card https://wrnexusjs.dev/components/api-error-example https://wrnexusjs.dev/components/api-header-table https://wrnexusjs.dev/components/api-key-create-dialog https://wrnexusjs.dev/components/api-key-display https://wrnexusjs.dev/components/api-key-input https://wrnexusjs.dev/components/api-method-badge https://wrnexusjs.dev/components/api-parameter-table https://wrnexusjs.dev/components/api-rate-limit-notice https://wrnexusjs.dev/components/api-request-example https://wrnexusjs.dev/components/api-response-example https://wrnexusjs.dev/components/api-schema-table https://wrnexusjs.dev/components/api-schema-viewer https://wrnexusjs.dev/components/api-version-badge https://wrnexusjs.dev/components/app-header https://wrnexusjs.dev/components/architecture-section https://wrnexusjs.dev/components/area-chart https://wrnexusjs.dev/components/article-hero https://wrnexusjs.dev/components/article-layout https://wrnexusjs.dev/components/article-newsletter-cta https://wrnexusjs.dev/components/article-page-shell https://wrnexusjs.dev/components/article-share-actions https://wrnexusjs.dev/components/aspect-ratio https://wrnexusjs.dev/components/asset-card https://wrnexusjs.dev/components/attachment-picker https://wrnexusjs.dev/components/attachment-upload https://wrnexusjs.dev/components/audio-upload https://wrnexusjs.dev/components/audit-log-preview https://wrnexusjs.dev/components/audit-table https://wrnexusjs.dev/components/authenticator-code-input https://wrnexusjs.dev/components/author-avatar https://wrnexusjs.dev/components/author-card https://wrnexusjs.dev/components/authorized-application-card https://wrnexusjs.dev/components/auto-grid https://wrnexusjs.dev/components/automation-example-card https://wrnexusjs.dev/components/availability-calendar https://wrnexusjs.dev/components/avatar https://wrnexusjs.dev/components/avatar-group https://wrnexusjs.dev/components/avatar-upload https://wrnexusjs.dev/components/back-button https://wrnexusjs.dev/components/back-to-top https://wrnexusjs.dev/components/badge https://wrnexusjs.dev/components/bank-transfer-details https://wrnexusjs.dev/components/banner https://wrnexusjs.dev/components/bar-chart https://wrnexusjs.dev/components/beta-badge https://wrnexusjs.dev/components/billing-address-form https://wrnexusjs.dev/components/billing-example https://wrnexusjs.dev/components/billing-period-toggle https://wrnexusjs.dev/components/blackout-date-picker https://wrnexusjs.dev/components/blog-card https://wrnexusjs.dev/components/blog-grid https://wrnexusjs.dev/components/blog-list https://wrnexusjs.dev/components/blog-search https://wrnexusjs.dev/components/body-text https://wrnexusjs.dev/components/border-radius-picker https://wrnexusjs.dev/components/bottom-navigation https://wrnexusjs.dev/components/brand-color-picker https://wrnexusjs.dev/components/brand-selector https://wrnexusjs.dev/components/breadcrumbs https://wrnexusjs.dev/components/browser-frame https://wrnexusjs.dev/components/budget-range-slider https://wrnexusjs.dev/components/budget-selector https://wrnexusjs.dev/components/business-hours-picker https://wrnexusjs.dev/components/button https://wrnexusjs.dev/components/button-group https://wrnexusjs.dev/components/button-selector https://wrnexusjs.dev/components/calendar https://wrnexusjs.dev/components/calendar-grid https://wrnexusjs.dev/components/calendar-header https://wrnexusjs.dev/components/calendar-navigation https://wrnexusjs.dev/components/callback-url-input https://wrnexusjs.dev/components/campaign-card https://wrnexusjs.dev/components/campaign-performance-preview https://wrnexusjs.dev/components/campaign-progress https://wrnexusjs.dev/components/capability-grid https://wrnexusjs.dev/components/captcha-field https://wrnexusjs.dev/components/card https://wrnexusjs.dev/components/card-payment-form https://wrnexusjs.dev/components/card-selector https://wrnexusjs.dev/components/card-skeleton https://wrnexusjs.dev/components/career-application-form https://wrnexusjs.dev/components/career-benefits-grid https://wrnexusjs.dev/components/carousel https://wrnexusjs.dev/components/case-study-card https://wrnexusjs.dev/components/case-study-hero https://wrnexusjs.dev/components/case-study-preview https://wrnexusjs.dev/components/centered-cta https://wrnexusjs.dev/components/centered-hero https://wrnexusjs.dev/components/centered-section-header https://wrnexusjs.dev/components/certificate-upload https://wrnexusjs.dev/components/certification-badge https://wrnexusjs.dev/components/challenge-section https://wrnexusjs.dev/components/channel-badge https://wrnexusjs.dev/components/channel-card https://wrnexusjs.dev/components/channel-comparison-chart https://wrnexusjs.dev/components/channel-comparison-table https://wrnexusjs.dev/components/channel-fallback-diagram https://wrnexusjs.dev/components/channel-flow https://wrnexusjs.dev/components/channel-icon https://wrnexusjs.dev/components/channel-rate-table https://wrnexusjs.dev/components/channel-selector https://wrnexusjs.dev/components/character-counter https://wrnexusjs.dev/components/chart-empty-state https://wrnexusjs.dev/components/chart-tooltip https://wrnexusjs.dev/components/checkbox https://wrnexusjs.dev/components/checkbox-group https://wrnexusjs.dev/components/checklist https://wrnexusjs.dev/components/checklist-progress https://wrnexusjs.dev/components/chip https://wrnexusjs.dev/components/chip-input https://wrnexusjs.dev/components/circular-progress https://wrnexusjs.dev/components/city-selector https://wrnexusjs.dev/components/clear-filters-button https://wrnexusjs.dev/components/clickable-card https://wrnexusjs.dev/components/close-button https://wrnexusjs.dev/components/cluster https://wrnexusjs.dev/components/code https://wrnexusjs.dev/components/code-block https://wrnexusjs.dev/components/code-copy-button https://wrnexusjs.dev/components/code-header https://wrnexusjs.dev/components/code-input https://wrnexusjs.dev/components/code-language-badge https://wrnexusjs.dev/components/code-tabs https://wrnexusjs.dev/components/code-text https://wrnexusjs.dev/components/cohort-chart https://wrnexusjs.dev/components/color-grid https://wrnexusjs.dev/components/color-hex-input https://wrnexusjs.dev/components/color-picker https://wrnexusjs.dev/components/color-selector https://wrnexusjs.dev/components/color-swatch https://wrnexusjs.dev/components/combobox https://wrnexusjs.dev/components/coming-soon-badge https://wrnexusjs.dev/components/coming-soon-state https://wrnexusjs.dev/components/command-block https://wrnexusjs.dev/components/command-menu https://wrnexusjs.dev/components/command-search-input https://wrnexusjs.dev/components/company-hero https://wrnexusjs.dev/components/company-name-input https://wrnexusjs.dev/components/company-page-shell https://wrnexusjs.dev/components/company-size-selector https://wrnexusjs.dev/components/comparison-date-range-picker https://wrnexusjs.dev/components/comparison-table https://wrnexusjs.dev/components/completion-meter https://wrnexusjs.dev/components/compliance-badge-list https://wrnexusjs.dev/components/compliance-program-card https://wrnexusjs.dev/components/confirmation-dialog https://wrnexusjs.dev/components/confirm-password-input https://wrnexusjs.dev/components/connected-account-card https://wrnexusjs.dev/components/connection-card https://wrnexusjs.dev/components/consent-timeline-preview https://wrnexusjs.dev/components/contact-card https://wrnexusjs.dev/components/contact-cta https://wrnexusjs.dev/components/contact-form https://wrnexusjs.dev/components/contact-hero https://wrnexusjs.dev/components/contact-page-shell https://wrnexusjs.dev/components/contact-sales-banner https://wrnexusjs.dev/components/contact-sales-button https://wrnexusjs.dev/components/contact-sales-form https://wrnexusjs.dev/components/container https://wrnexusjs.dev/components/context-menu https://wrnexusjs.dev/components/context-switcher https://wrnexusjs.dev/components/conversation-list https://wrnexusjs.dev/components/conversation-preview https://wrnexusjs.dev/components/conversion-chart https://wrnexusjs.dev/components/cookie-banner https://wrnexusjs.dev/components/cookie-category-list https://wrnexusjs.dev/components/cookie-category-toggle https://wrnexusjs.dev/components/cookie-consent https://wrnexusjs.dev/components/cookie-details-table https://wrnexusjs.dev/components/cookie-preferences-dialog https://wrnexusjs.dev/components/cookie-table https://wrnexusjs.dev/components/coordinates-input https://wrnexusjs.dev/components/coordinates-picker https://wrnexusjs.dev/components/copy-button https://wrnexusjs.dev/components/copy-code-button https://wrnexusjs.dev/components/copy-secret-field https://wrnexusjs.dev/components/cost-breakdown-chart https://wrnexusjs.dev/components/cost-summary https://wrnexusjs.dev/components/counter https://wrnexusjs.dev/components/country-calling-code-input https://wrnexusjs.dev/components/country-calling-code-selector https://wrnexusjs.dev/components/country-selector https://wrnexusjs.dev/components/coupon-input https://wrnexusjs.dev/components/credit-amount-input https://wrnexusjs.dev/components/cron-builder https://wrnexusjs.dev/components/cron-input https://wrnexusjs.dev/components/csv-upload https://wrnexusjs.dev/components/ctasection https://wrnexusjs.dev/components/currency-input https://wrnexusjs.dev/components/currency-selector https://wrnexusjs.dev/components/current-password-input https://wrnexusjs.dev/components/customer-logo https://wrnexusjs.dev/components/customer-story-card https://wrnexusjs.dev/components/danger-button https://wrnexusjs.dev/components/data-protection-card https://wrnexusjs.dev/components/data-retention-table https://wrnexusjs.dev/components/data-table https://wrnexusjs.dev/components/date-input https://wrnexusjs.dev/components/date-picker https://wrnexusjs.dev/components/date-range-calendar https://wrnexusjs.dev/components/date-range-picker https://wrnexusjs.dev/components/date-range-slider https://wrnexusjs.dev/components/date-time-input https://wrnexusjs.dev/components/date-time-picker https://wrnexusjs.dev/components/date-time-range-picker https://wrnexusjs.dev/components/decimal-input https://wrnexusjs.dev/components/definition-list https://wrnexusjs.dev/components/delete-confirmation-dialog https://wrnexusjs.dev/components/delivery-preview https://wrnexusjs.dev/components/delivery-status-chart https://wrnexusjs.dev/components/delivery-status-timeline https://wrnexusjs.dev/components/demo-request-form https://wrnexusjs.dev/components/department-input https://wrnexusjs.dev/components/deprecated-feature-alert https://wrnexusjs.dev/components/description-list https://wrnexusjs.dev/components/desktop-navigation https://wrnexusjs.dev/components/developer-cta https://wrnexusjs.dev/components/developer-hero https://wrnexusjs.dev/components/developer-page-shell https://wrnexusjs.dev/components/developer-search https://wrnexusjs.dev/components/developers-mega-menu https://wrnexusjs.dev/components/developers-menu https://wrnexusjs.dev/components/device-card https://wrnexusjs.dev/components/disclosure https://wrnexusjs.dev/components/discount-input https://wrnexusjs.dev/components/display-heading https://wrnexusjs.dev/components/display-name-input https://wrnexusjs.dev/components/divider https://wrnexusjs.dev/components/document-preview https://wrnexusjs.dev/components/document-upload https://wrnexusjs.dev/components/domain-input https://wrnexusjs.dev/components/do-not-sell-link https://wrnexusjs.dev/components/donut-chart https://wrnexusjs.dev/components/download-action https://wrnexusjs.dev/components/download-button https://wrnexusjs.dev/components/download-gate-form https://wrnexusjs.dev/components/download-policy-button https://wrnexusjs.dev/components/download-resource-form https://wrnexusjs.dev/components/drawer https://wrnexusjs.dev/components/dropdown-menu https://wrnexusjs.dev/components/dropdown-navigation https://wrnexusjs.dev/components/duration-input https://wrnexusjs.dev/components/duration-picker https://wrnexusjs.dev/components/duration-slider https://wrnexusjs.dev/components/elevated-card https://wrnexusjs.dev/components/email-body-editor https://wrnexusjs.dev/components/email-composer https://wrnexusjs.dev/components/email-input https://wrnexusjs.dev/components/emoji-picker https://wrnexusjs.dev/components/empty-state https://wrnexusjs.dev/components/encryption-diagram https://wrnexusjs.dev/components/enterprise-cta https://wrnexusjs.dev/components/enterprise-hero https://wrnexusjs.dev/components/enterprise-pricing-card https://wrnexusjs.dev/components/environment-selector https://wrnexusjs.dev/components/environment-switcher https://wrnexusjs.dev/components/error-actions https://wrnexusjs.dev/components/error-card https://wrnexusjs.dev/components/error-code https://wrnexusjs.dev/components/error-hero https://wrnexusjs.dev/components/error-illustration https://wrnexusjs.dev/components/error-page https://wrnexusjs.dev/components/error-page-shell https://wrnexusjs.dev/components/error-state https://wrnexusjs.dev/components/error-support-link https://wrnexusjs.dev/components/estimated-cost-summary https://wrnexusjs.dev/components/event-table https://wrnexusjs.dev/components/expandable-text https://wrnexusjs.dev/components/expiry-date-time-picker https://wrnexusjs.dev/components/export-progress https://wrnexusjs.dev/components/external-link https://wrnexusjs.dev/components/eyebrow-text https://wrnexusjs.dev/components/factor-card https://wrnexusjs.dev/components/fallback-route-builder https://wrnexusjs.dev/components/fallback-route-diagram https://wrnexusjs.dev/components/faq https://wrnexusjs.dev/components/faqaccordion https://wrnexusjs.dev/components/favicon-upload https://wrnexusjs.dev/components/fax-input https://wrnexusjs.dev/components/feature-card https://wrnexusjs.dev/components/feature-checklist https://wrnexusjs.dev/components/feature-comparison-table https://wrnexusjs.dev/components/featured-blog-card https://wrnexusjs.dev/components/feature-details-panel https://wrnexusjs.dev/components/feature-grid https://wrnexusjs.dev/components/feature-icon-card https://wrnexusjs.dev/components/feature-list https://wrnexusjs.dev/components/feature-tabs https://wrnexusjs.dev/components/feature-timeline https://wrnexusjs.dev/components/feature-unavailable-state https://wrnexusjs.dev/components/field-actions https://wrnexusjs.dev/components/file-upload-primitive https://wrnexusjs.dev/components/file-input https://wrnexusjs.dev/components/file-list https://wrnexusjs.dev/components/file-size-input https://wrnexusjs.dev/components/file-size-label https://wrnexusjs.dev/components/file-type-badge https://wrnexusjs.dev/components/file-upload https://wrnexusjs.dev/components/filterable-table https://wrnexusjs.dev/components/filter-bar https://wrnexusjs.dev/components/filter-menu https://wrnexusjs.dev/components/filter-search-input https://wrnexusjs.dev/components/final-cta https://wrnexusjs.dev/components/first-name-input https://wrnexusjs.dev/components/flex https://wrnexusjs.dev/components/font-picker https://wrnexusjs.dev/components/font-size-picker https://wrnexusjs.dev/components/font-weight-picker https://wrnexusjs.dev/components/footer-language-switcher https://wrnexusjs.dev/components/footer-status-indicator https://wrnexusjs.dev/components/forbidden-page https://wrnexusjs.dev/components/forbidden-state https://wrnexusjs.dev/components/forgot-password-form https://wrnexusjs.dev/components/form https://wrnexusjs.dev/components/form-actions https://wrnexusjs.dev/components/form-alert https://wrnexusjs.dev/components/form-dialog https://wrnexusjs.dev/components/form-error https://wrnexusjs.dev/components/form-error-summary https://wrnexusjs.dev/components/form-field https://wrnexusjs.dev/components/form-grid https://wrnexusjs.dev/components/form-group https://wrnexusjs.dev/components/form-help-text https://wrnexusjs.dev/components/form-label https://wrnexusjs.dev/components/form-progress https://wrnexusjs.dev/components/form-row https://wrnexusjs.dev/components/form-section https://wrnexusjs.dev/components/full-bleed https://wrnexusjs.dev/components/fullscreen-dialog https://wrnexusjs.dev/components/funnel-chart https://wrnexusjs.dev/components/geo-chart https://wrnexusjs.dev/components/geofence-editor https://wrnexusjs.dev/components/ghost-button https://wrnexusjs.dev/components/glass-card https://wrnexusjs.dev/components/global-search https://wrnexusjs.dev/components/gradient-cta https://wrnexusjs.dev/components/gradient-picker https://wrnexusjs.dev/components/gradient-stop-editor https://wrnexusjs.dev/components/grid https://wrnexusjs.dev/components/guide-card https://wrnexusjs.dev/components/guide-checklist https://wrnexusjs.dev/components/guide-difficulty-badge https://wrnexusjs.dev/components/guide-grid https://wrnexusjs.dev/components/guide-step https://wrnexusjs.dev/components/header https://wrnexusjs.dev/components/header-actions https://wrnexusjs.dev/components/health-indicator https://wrnexusjs.dev/components/hero https://wrnexusjs.dev/components/hero-actions https://wrnexusjs.dev/components/hero-code-panel https://wrnexusjs.dev/components/hero-gradient-text https://wrnexusjs.dev/components/hero-primary-action https://wrnexusjs.dev/components/hero-product-preview https://wrnexusjs.dev/components/hero-secondary-action https://wrnexusjs.dev/components/hero-trust-text https://wrnexusjs.dev/components/hex-color-input https://wrnexusjs.dev/components/hidden-field https://wrnexusjs.dev/components/highlight-text https://wrnexusjs.dev/components/holiday-calendar https://wrnexusjs.dev/components/hostname-input https://wrnexusjs.dev/components/hour-picker https://wrnexusjs.dev/components/hsl-color-input https://wrnexusjs.dev/components/hstack https://wrnexusjs.dev/components/html-editor https://wrnexusjs.dev/components/human-approval-step https://wrnexusjs.dev/components/icon https://wrnexusjs.dev/components/icon-button https://wrnexusjs.dev/components/icon-picker https://wrnexusjs.dev/components/icon-selector https://wrnexusjs.dev/components/identifier-input https://wrnexusjs.dev/components/illustration https://wrnexusjs.dev/components/image-compression-preview https://wrnexusjs.dev/components/image-editor https://wrnexusjs.dev/components/image-preview-dialog https://wrnexusjs.dev/components/image-selector https://wrnexusjs.dev/components/image-upload https://wrnexusjs.dev/components/import-progress https://wrnexusjs.dev/components/incident-alert https://wrnexusjs.dev/components/incident-banner https://wrnexusjs.dev/components/incident-card https://wrnexusjs.dev/components/incident-list https://wrnexusjs.dev/components/incident-response-flow https://wrnexusjs.dev/components/incident-severity-badge https://wrnexusjs.dev/components/incident-timeline https://wrnexusjs.dev/components/industry-badge https://wrnexusjs.dev/components/industry-selector https://wrnexusjs.dev/components/info-card https://wrnexusjs.dev/components/inline https://wrnexusjs.dev/components/inline-alert https://wrnexusjs.dev/components/inline-code https://wrnexusjs.dev/components/input https://wrnexusjs.dev/components/input-group https://wrnexusjs.dev/components/inset-panel https://wrnexusjs.dev/components/integer-input https://wrnexusjs.dev/components/integration-card https://wrnexusjs.dev/components/invoice-line-item https://wrnexusjs.dev/components/invoice-summary https://wrnexusjs.dev/components/ip-address-input https://wrnexusjs.dev/components/job-card https://wrnexusjs.dev/components/job-progress https://wrnexusjs.dev/components/job-title-input https://wrnexusjs.dev/components/json-input https://wrnexusjs.dev/components/json-viewer https://wrnexusjs.dev/components/key-value-table https://wrnexusjs.dev/components/kyc-document-upload https://wrnexusjs.dev/components/language-selector https://wrnexusjs.dev/components/language-switcher https://wrnexusjs.dev/components/last-name-input https://wrnexusjs.dev/components/latency-metric https://wrnexusjs.dev/components/latitude-input https://wrnexusjs.dev/components/leadership-grid https://wrnexusjs.dev/components/lead-text https://wrnexusjs.dev/components/legal-acceptance-notice https://wrnexusjs.dev/components/legal-bullet-list https://wrnexusjs.dev/components/legal-contact-block https://wrnexusjs.dev/components/legal-definition-list https://wrnexusjs.dev/components/legal-document-header https://wrnexusjs.dev/components/legal-document-layout https://wrnexusjs.dev/components/legal-hero https://wrnexusjs.dev/components/legal-language-selector https://wrnexusjs.dev/components/legal-notice https://wrnexusjs.dev/components/legal-page-shell https://wrnexusjs.dev/components/legal-print-button https://wrnexusjs.dev/components/legal-region-selector https://wrnexusjs.dev/components/legal-section https://wrnexusjs.dev/components/legal-summary https://wrnexusjs.dev/components/legal-table https://wrnexusjs.dev/components/legal-table-of-contents https://wrnexusjs.dev/components/legal-version-badge https://wrnexusjs.dev/components/letter-spacing-picker https://wrnexusjs.dev/components/license-key-input https://wrnexusjs.dev/components/lightbox https://wrnexusjs.dev/components/line-chart https://wrnexusjs.dev/components/line-height-picker https://wrnexusjs.dev/components/link https://wrnexusjs.dev/components/link-button https://wrnexusjs.dev/components/list https://wrnexusjs.dev/components/loading-button https://wrnexusjs.dev/components/locale-selector https://wrnexusjs.dev/components/localized-route-link https://wrnexusjs.dev/components/location-picker https://wrnexusjs.dev/components/logo https://wrnexusjs.dev/components/logo-cloud https://wrnexusjs.dev/components/logo-upload https://wrnexusjs.dev/components/logout-dialog https://wrnexusjs.dev/components/log-table https://wrnexusjs.dev/components/longitude-input https://wrnexusjs.dev/components/maintenance-alert https://wrnexusjs.dev/components/maintenance-banner https://wrnexusjs.dev/components/maintenance-card https://wrnexusjs.dev/components/maintenance-page https://wrnexusjs.dev/components/maintenance-state https://wrnexusjs.dev/components/maintenance-window-picker https://wrnexusjs.dev/components/map-picker https://wrnexusjs.dev/components/markdown-editor https://wrnexusjs.dev/components/marketing-page-shell https://wrnexusjs.dev/components/marketing-section-header https://wrnexusjs.dev/components/masked-secret-field https://wrnexusjs.dev/components/mega-menu https://wrnexusjs.dev/components/member-list https://wrnexusjs.dev/components/mention-input https://wrnexusjs.dev/components/message-character-counter https://wrnexusjs.dev/components/message-composer https://wrnexusjs.dev/components/message-composer-preview https://wrnexusjs.dev/components/message-limit-input https://wrnexusjs.dev/components/message-preview https://wrnexusjs.dev/components/message-volume-slider https://wrnexusjs.dev/components/metric https://wrnexusjs.dev/components/metric-card https://wrnexusjs.dev/components/metric-grid https://wrnexusjs.dev/components/metric-text https://wrnexusjs.dev/components/minute-picker https://wrnexusjs.dev/components/mission-section https://wrnexusjs.dev/components/mobile-device-frame https://wrnexusjs.dev/components/mobile-input https://wrnexusjs.dev/components/mobile-menu-button https://wrnexusjs.dev/components/mobile-navigation https://wrnexusjs.dev/components/mobile-table-card https://wrnexusjs.dev/components/modal https://wrnexusjs.dev/components/monthly-volume-selector https://wrnexusjs.dev/components/month-picker https://wrnexusjs.dev/components/month-year-picker https://wrnexusjs.dev/components/multi-file-upload https://wrnexusjs.dev/components/multiple-email-input https://wrnexusjs.dev/components/multi-select https://wrnexusjs.dev/components/muted-text https://wrnexusjs.dev/components/name-input https://wrnexusjs.dev/components/narrow-container https://wrnexusjs.dev/components/navigation https://wrnexusjs.dev/components/navigation-item https://wrnexusjs.dev/components/navigation-mega-menu https://wrnexusjs.dev/components/new-badge https://wrnexusjs.dev/components/new-password-input https://wrnexusjs.dev/components/newsletter-cta https://wrnexusjs.dev/components/newsletter-form https://wrnexusjs.dev/components/no-results-state https://wrnexusjs.dev/components/not-found-page https://wrnexusjs.dev/components/not-found-state https://wrnexusjs.dev/components/notification-card https://wrnexusjs.dev/components/notification-dot https://wrnexusjs.dev/components/notification-list https://wrnexusjs.dev/components/number-input https://wrnexusjs.dev/components/office-card https://wrnexusjs.dev/components/offline-page https://wrnexusjs.dev/components/offline-state https://wrnexusjs.dev/components/onboarding-progress https://wrnexusjs.dev/components/one-time-secret-display https://wrnexusjs.dev/components/online-indicator https://wrnexusjs.dev/components/opacity-slider https://wrnexusjs.dev/components/open-apicta https://wrnexusjs.dev/components/optional-indicator https://wrnexusjs.dev/components/organization-selector https://wrnexusjs.dev/components/otp-input https://wrnexusjs.dev/components/otp-verification-form https://wrnexusjs.dev/components/outlined-card https://wrnexusjs.dev/components/page-alert https://wrnexusjs.dev/components/page-header https://wrnexusjs.dev/components/page-heading https://wrnexusjs.dev/components/page-shell https://wrnexusjs.dev/components/page-skeleton https://wrnexusjs.dev/components/pagination https://wrnexusjs.dev/components/panel https://wrnexusjs.dev/components/partner-application-form https://wrnexusjs.dev/components/partner-logo-grid https://wrnexusjs.dev/components/partner-program-card https://wrnexusjs.dev/components/passkey-button https://wrnexusjs.dev/components/password-input https://wrnexusjs.dev/components/password-requirement-list https://wrnexusjs.dev/components/password-strength-meter https://wrnexusjs.dev/components/password-visibility-toggle https://wrnexusjs.dev/components/path-input https://wrnexusjs.dev/components/payment-method-card https://wrnexusjs.dev/components/pdf-preview https://wrnexusjs.dev/components/percentage-input https://wrnexusjs.dev/components/permission-selector https://wrnexusjs.dev/components/phone-input https://wrnexusjs.dev/components/pie-chart https://wrnexusjs.dev/components/pill https://wrnexusjs.dev/components/pin-input https://wrnexusjs.dev/components/plain-text-editor https://wrnexusjs.dev/components/plan-cta https://wrnexusjs.dev/components/plan-feature-list https://wrnexusjs.dev/components/plan-limit-list https://wrnexusjs.dev/components/plan-selector https://wrnexusjs.dev/components/platform-pillar-card https://wrnexusjs.dev/components/policy-version-table https://wrnexusjs.dev/components/popover https://wrnexusjs.dev/components/port-input https://wrnexusjs.dev/components/port-number-input https://wrnexusjs.dev/components/positive-number-input https://wrnexusjs.dev/components/postal-code-input https://wrnexusjs.dev/components/postman-cta https://wrnexusjs.dev/components/preset-date-range-picker https://wrnexusjs.dev/components/press-release-card https://wrnexusjs.dev/components/preview-badge https://wrnexusjs.dev/components/previous-next-navigation https://wrnexusjs.dev/components/price-input https://wrnexusjs.dev/components/price-range-slider https://wrnexusjs.dev/components/price-text https://wrnexusjs.dev/components/pricing-card https://wrnexusjs.dev/components/pricing-comparison-table https://wrnexusjs.dev/components/pricing-contact-form https://wrnexusjs.dev/components/pricing-feature-group https://wrnexusjs.dev/components/pricing-grid https://wrnexusjs.dev/components/pricing-hero https://wrnexusjs.dev/components/pricing-plan-card https://wrnexusjs.dev/components/pricing-table https://wrnexusjs.dev/components/pricing-toggle https://wrnexusjs.dev/components/primary-button https://wrnexusjs.dev/components/print-action https://wrnexusjs.dev/components/print-policy-button https://wrnexusjs.dev/components/priority-selector https://wrnexusjs.dev/components/privacy-notice https://wrnexusjs.dev/components/product-architecture-diagram https://wrnexusjs.dev/components/product-card https://wrnexusjs.dev/components/product-category-section https://wrnexusjs.dev/components/product-cta https://wrnexusjs.dev/components/product-feature-list https://wrnexusjs.dev/components/product-grid https://wrnexusjs.dev/components/product-hero https://wrnexusjs.dev/components/product-icon https://wrnexusjs.dev/components/product-integration-list https://wrnexusjs.dev/components/product-list https://wrnexusjs.dev/components/product-logo https://wrnexusjs.dev/components/product-mega-menu https://wrnexusjs.dev/components/product-mini-card https://wrnexusjs.dev/components/product-navigation-card https://wrnexusjs.dev/components/product-page-shell https://wrnexusjs.dev/components/product-selector https://wrnexusjs.dev/components/products-mega-menu https://wrnexusjs.dev/components/product-status-badge https://wrnexusjs.dev/components/product-use-case-list https://wrnexusjs.dev/components/progress https://wrnexusjs.dev/components/progress-bar https://wrnexusjs.dev/components/progress-chart https://wrnexusjs.dev/components/progress-ring https://wrnexusjs.dev/components/progress-slider https://wrnexusjs.dev/components/project-card https://wrnexusjs.dev/components/project-selector https://wrnexusjs.dev/components/project-switcher https://wrnexusjs.dev/components/promo-code-input https://wrnexusjs.dev/components/prompt-dialog https://wrnexusjs.dev/components/provider-selector https://wrnexusjs.dev/components/public-footer https://wrnexusjs.dev/components/public-header https://wrnexusjs.dev/components/public-header-logo https://wrnexusjs.dev/components/public-mobile-navigation https://wrnexusjs.dev/components/public-page-shell https://wrnexusjs.dev/components/public-search https://wrnexusjs.dev/components/publish-date-time-picker https://wrnexusjs.dev/components/push-composer https://wrnexusjs.dev/components/push-notification-editor https://wrnexusjs.dev/components/qr-code https://wrnexusjs.dev/components/quantity-input https://wrnexusjs.dev/components/quantity-stepper https://wrnexusjs.dev/components/quiet-hours-picker https://wrnexusjs.dev/components/quote-text https://wrnexusjs.dev/components/radio https://wrnexusjs.dev/components/radio-group https://wrnexusjs.dev/components/range-input https://wrnexusjs.dev/components/range-slider https://wrnexusjs.dev/components/rate-limited-state https://wrnexusjs.dev/components/rate-limit-input https://wrnexusjs.dev/components/rate-limit-page https://wrnexusjs.dev/components/rate-table https://wrnexusjs.dev/components/rating-slider https://wrnexusjs.dev/components/recipient-selector https://wrnexusjs.dev/components/recovery-code-form https://wrnexusjs.dev/components/recovery-code-input https://wrnexusjs.dev/components/recurrence-rule-builder https://wrnexusjs.dev/components/recurring-schedule-picker https://wrnexusjs.dev/components/redirect-uri-input https://wrnexusjs.dev/components/reference-input https://wrnexusjs.dev/components/regex-input https://wrnexusjs.dev/components/regional-privacy-banner https://wrnexusjs.dev/components/region-availability-table https://wrnexusjs.dev/components/region-selector https://wrnexusjs.dev/components/region-unavailable-alert https://wrnexusjs.dev/components/region-unavailable-state https://wrnexusjs.dev/components/reject-optional-cookies-button https://wrnexusjs.dev/components/reopen-cookie-settings-button https://wrnexusjs.dev/components/report-card https://wrnexusjs.dev/components/request-response-viewer https://wrnexusjs.dev/components/request-viewer https://wrnexusjs.dev/components/required-indicator https://wrnexusjs.dev/components/reset-password-form https://wrnexusjs.dev/components/resizable-panel https://wrnexusjs.dev/components/resource-card https://wrnexusjs.dev/components/resource-download-card https://wrnexusjs.dev/components/resource-page-shell https://wrnexusjs.dev/components/resource-search https://wrnexusjs.dev/components/resources-mega-menu https://wrnexusjs.dev/components/resource-type-badge https://wrnexusjs.dev/components/response-viewer https://wrnexusjs.dev/components/responsible-disclosure-cta https://wrnexusjs.dev/components/responsive-table https://wrnexusjs.dev/components/results-section https://wrnexusjs.dev/components/retention-table https://wrnexusjs.dev/components/retry-count-input https://wrnexusjs.dev/components/revenue-chart https://wrnexusjs.dev/components/rgb-color-input https://wrnexusjs.dev/components/rich-text-editor https://wrnexusjs.dev/components/rich-text-input https://wrnexusjs.dev/components/role-selector https://wrnexusjs.dev/components/rolling-date-range-picker https://wrnexusjs.dev/components/save-cookie-preferences-button https://wrnexusjs.dev/components/saved-filter-selector https://wrnexusjs.dev/components/scheduled-date-time-picker https://wrnexusjs.dev/components/schedule-message-picker https://wrnexusjs.dev/components/schedule-picker https://wrnexusjs.dev/components/screenshot-frame https://wrnexusjs.dev/components/scroll-area https://wrnexusjs.dev/components/sdkcard https://wrnexusjs.dev/components/sdk-language-selector https://wrnexusjs.dev/components/sdklanguage-tabs https://wrnexusjs.dev/components/sdktabs https://wrnexusjs.dev/components/search-button https://wrnexusjs.dev/components/search-category-tabs https://wrnexusjs.dev/components/search-dialog https://wrnexusjs.dev/components/search-empty-state https://wrnexusjs.dev/components/search-input https://wrnexusjs.dev/components/search-loading-state https://wrnexusjs.dev/components/search-result-item https://wrnexusjs.dev/components/secondary-button https://wrnexusjs.dev/components/second-picker https://wrnexusjs.dev/components/secret-display https://wrnexusjs.dev/components/secret-input https://wrnexusjs.dev/components/secret-reveal-dialog https://wrnexusjs.dev/components/section https://wrnexusjs.dev/components/section-actions https://wrnexusjs.dev/components/section-header https://wrnexusjs.dev/components/section-heading https://wrnexusjs.dev/components/security-alert https://wrnexusjs.dev/components/security-contact-card https://wrnexusjs.dev/components/security-feature-card https://wrnexusjs.dev/components/security-hero https://wrnexusjs.dev/components/security-pillar-grid https://wrnexusjs.dev/components/security-practice-list https://wrnexusjs.dev/components/security-report-form https://wrnexusjs.dev/components/segmented-button-group https://wrnexusjs.dev/components/select https://wrnexusjs.dev/components/sender-id-input https://wrnexusjs.dev/components/server-error-page https://wrnexusjs.dev/components/service-level-table https://wrnexusjs.dev/components/service-status-badge https://wrnexusjs.dev/components/service-status-list https://wrnexusjs.dev/components/service-status-row https://wrnexusjs.dev/components/session-card https://wrnexusjs.dev/components/session-expired-dialog https://wrnexusjs.dev/components/setup-checklist https://wrnexusjs.dev/components/severity-selector https://wrnexusjs.dev/components/shadow-picker https://wrnexusjs.dev/components/share-action https://wrnexusjs.dev/components/share-button https://wrnexusjs.dev/components/sidebar-layout https://wrnexusjs.dev/components/side-panel https://wrnexusjs.dev/components/sign-in-form https://wrnexusjs.dev/components/sign-in-link https://wrnexusjs.dev/components/sign-up-form https://wrnexusjs.dev/components/site-search https://wrnexusjs.dev/components/skeleton https://wrnexusjs.dev/components/skip-link https://wrnexusjs.dev/components/sla-table https://wrnexusjs.dev/components/slider https://wrnexusjs.dev/components/slug-input https://wrnexusjs.dev/components/small-text https://wrnexusjs.dev/components/smart-route-diagram https://wrnexusjs.dev/components/sms-composer https://wrnexusjs.dev/components/sms-message-editor https://wrnexusjs.dev/components/sms-segment-counter https://wrnexusjs.dev/components/social-share https://wrnexusjs.dev/components/solution-hero https://wrnexusjs.dev/components/solution-page-shell https://wrnexusjs.dev/components/solution-section https://wrnexusjs.dev/components/solutions-mega-menu https://wrnexusjs.dev/components/sortable-table https://wrnexusjs.dev/components/spacer https://wrnexusjs.dev/components/spinner https://wrnexusjs.dev/components/split-button https://wrnexusjs.dev/components/split-cta https://wrnexusjs.dev/components/split-hero https://wrnexusjs.dev/components/split-layout https://wrnexusjs.dev/components/split-section-header https://wrnexusjs.dev/components/stack https://wrnexusjs.dev/components/start-free-button https://wrnexusjs.dev/components/stat-card https://wrnexusjs.dev/components/state-selector https://wrnexusjs.dev/components/status-badge https://wrnexusjs.dev/components/status-banner https://wrnexusjs.dev/components/status-page-shell https://wrnexusjs.dev/components/status-selector https://wrnexusjs.dev/components/status-subscribe-form https://wrnexusjs.dev/components/status-table https://wrnexusjs.dev/components/step-navigation https://wrnexusjs.dev/components/stepper https://wrnexusjs.dev/components/stepper-input https://wrnexusjs.dev/components/step-up-authentication-dialog https://wrnexusjs.dev/components/sticker-picker https://wrnexusjs.dev/components/sticky https://wrnexusjs.dev/components/sticky-layout https://wrnexusjs.dev/components/street-address-input https://wrnexusjs.dev/components/subdomain-input https://wrnexusjs.dev/components/subject-input https://wrnexusjs.dev/components/subprocessor-table https://wrnexusjs.dev/components/subsection-heading https://wrnexusjs.dev/components/success-card https://wrnexusjs.dev/components/success-state https://wrnexusjs.dev/components/support-request-form https://wrnexusjs.dev/components/surface https://wrnexusjs.dev/components/switch https://wrnexusjs.dev/components/table https://wrnexusjs.dev/components/table-header https://wrnexusjs.dev/components/table-row https://wrnexusjs.dev/components/table-skeleton https://wrnexusjs.dev/components/tabs https://wrnexusjs.dev/components/tag https://wrnexusjs.dev/components/tag-input https://wrnexusjs.dev/components/tax-notice https://wrnexusjs.dev/components/tax-rate-input https://wrnexusjs.dev/components/team-member-card https://wrnexusjs.dev/components/team-size-selector https://wrnexusjs.dev/components/template-card https://wrnexusjs.dev/components/template-selector https://wrnexusjs.dev/components/template-variable-input https://wrnexusjs.dev/components/tenant-isolation-diagram https://wrnexusjs.dev/components/terminal-block https://wrnexusjs.dev/components/tertiary-button https://wrnexusjs.dev/components/testimonial-card https://wrnexusjs.dev/components/testimonial-carousel https://wrnexusjs.dev/components/test-message-dialog https://wrnexusjs.dev/components/textarea https://wrnexusjs.dev/components/text-input https://wrnexusjs.dev/components/text-link https://wrnexusjs.dev/components/text-skeleton https://wrnexusjs.dev/components/theme-toggle https://wrnexusjs.dev/components/theme-color-picker https://wrnexusjs.dev/components/theme-switcher https://wrnexusjs.dev/components/time-input https://wrnexusjs.dev/components/timeline https://wrnexusjs.dev/components/timeline-chart https://wrnexusjs.dev/components/timeline-item https://wrnexusjs.dev/components/timeout-input https://wrnexusjs.dev/components/time-picker https://wrnexusjs.dev/components/time-range-picker https://wrnexusjs.dev/components/timezone-aware-time-picker https://wrnexusjs.dev/components/timezone-selector https://wrnexusjs.dev/components/toast https://wrnexusjs.dev/components/toast-action https://wrnexusjs.dev/components/toast-host https://wrnexusjs.dev/components/toast-icon https://wrnexusjs.dev/components/toast-progress https://wrnexusjs.dev/components/toggle https://wrnexusjs.dev/components/toggle-group https://wrnexusjs.dev/components/token-input https://wrnexusjs.dev/components/tooltip https://wrnexusjs.dev/components/totp-verification-form https://wrnexusjs.dev/components/translated-text https://wrnexusjs.dev/components/tree-table https://wrnexusjs.dev/components/trend-indicator https://wrnexusjs.dev/components/truncated-text https://wrnexusjs.dev/components/trust-badge-list https://wrnexusjs.dev/components/typography https://wrnexusjs.dev/components/unavailable-region-state https://wrnexusjs.dev/components/unified-timeline-preview https://wrnexusjs.dev/components/unsaved-changes-dialog https://wrnexusjs.dev/components/upload-item https://wrnexusjs.dev/components/upload-preview https://wrnexusjs.dev/components/upload-progress https://wrnexusjs.dev/components/uptime-chart https://wrnexusjs.dev/components/uptime-metric https://wrnexusjs.dev/components/url-input https://wrnexusjs.dev/components/usage-pricing-table https://wrnexusjs.dev/components/use-case-selector https://wrnexusjs.dev/components/user-card https://wrnexusjs.dev/components/username-input https://wrnexusjs.dev/components/value-card https://wrnexusjs.dev/components/values-grid https://wrnexusjs.dev/components/verification-code-input https://wrnexusjs.dev/components/verified-badge https://wrnexusjs.dev/components/version-selector https://wrnexusjs.dev/components/vertical-tabs https://wrnexusjs.dev/components/video-card https://wrnexusjs.dev/components/video-preview-dialog https://wrnexusjs.dev/components/video-upload https://wrnexusjs.dev/components/virtualized-table https://wrnexusjs.dev/components/vision-section https://wrnexusjs.dev/components/visually-hidden https://wrnexusjs.dev/components/voice-script-composer https://wrnexusjs.dev/components/voice-script-editor https://wrnexusjs.dev/components/volume-input https://wrnexusjs.dev/components/volume-slider https://wrnexusjs.dev/components/warning-card https://wrnexusjs.dev/components/webhook-event-card https://wrnexusjs.dev/components/webhook-flow-diagram https://wrnexusjs.dev/components/webhook-payload-viewer https://wrnexusjs.dev/components/webhook-url-input https://wrnexusjs.dev/components/webinar-card https://wrnexusjs.dev/components/webinar-registration-form https://wrnexusjs.dev/components/well https://wrnexusjs.dev/components/whats-app-composer https://wrnexusjs.dev/components/whats-app-number-input https://wrnexusjs.dev/components/whats-app-template-editor https://wrnexusjs.dev/components/wide-container https://wrnexusjs.dev/components/wizard https://wrnexusjs.dev/components/wizard-header https://wrnexusjs.dev/components/wizard-navigation https://wrnexusjs.dev/components/workflow-canvas-preview https://wrnexusjs.dev/components/workflow-progress https://wrnexusjs.dev/components/workspace-card https://wrnexusjs.dev/components/workspace-selector https://wrnexusjs.dev/components/workspace-switcher https://wrnexusjs.dev/components/year-picker https://wrnexusjs.dev/components/zoom-slider https://wrnexusjs.dev/ https://wrnexusjs.dev/access https://wrnexusjs.dev/getting-started https://wrnexusjs.dev/tutorial https://wrnexusjs.dev/architecture https://wrnexusjs.dev/language https://wrnexusjs.dev/packages https://wrnexusjs.dev/components https://wrnexusjs.dev/guides/project-structure https://wrnexusjs.dev/guides/routing https://wrnexusjs.dev/guides/pages-and-components https://wrnexusjs.dev/guides/server-data https://wrnexusjs.dev/guides/api-routes https://wrnexusjs.dev/guides/middleware https://wrnexusjs.dev/guides/forms-and-validation https://wrnexusjs.dev/guides/authentication https://wrnexusjs.dev/guides/authorization https://wrnexusjs.dev/guides/security https://wrnexusjs.dev/guides/database https://wrnexusjs.dev/guides/uploads https://wrnexusjs.dev/guides/realtime https://wrnexusjs.dev/guides/pubsub https://wrnexusjs.dev/guides/queues https://wrnexusjs.dev/guides/testing https://wrnexusjs.dev/guides/workspaces-and-gateway https://wrnexusjs.dev/guides/deployment https://wrnexusjs.dev/guides/configuration-and-profiles https://wrnexusjs.dev/guides/i18n-and-themes https://wrnexusjs.dev/guides/mobile https://wrnexusjs.dev/guides/observability https://wrnexusjs.dev/guides/upgrading https://wrnexusjs.dev/guides/troubleshooting https://wrnexusjs.dev/examples https://wrnexusjs.dev/showcase https://wrnexusjs.dev/benchmarks https://wrnexusjs.dev/roadmap https://wrnexusjs.dev/changelog https://wrnexusjs.dev/releases/0.3.5 https://wrnexusjs.dev/security https://wrnexusjs.dev/support https://wrnexusjs.dev/license https://wrnexusjs.dev/search https://wrnexusjs.dev/404 https://wrnexusjs.dev/packages/ai https://wrnexusjs.dev/packages/authz https://wrnexusjs.dev/packages/cli https://wrnexusjs.dev/packages/compiler https://wrnexusjs.dev/packages/core https://wrnexusjs.dev/packages/csr https://wrnexusjs.dev/packages/db https://wrnexusjs.dev/packages/dev-server https://wrnexusjs.dev/packages/dev-toolbar https://wrnexusjs.dev/packages/encryption https://wrnexusjs.dev/packages/helpers https://wrnexusjs.dev/packages/i18n https://wrnexusjs.dev/packages/jwt https://wrnexusjs.dev/packages/mobile https://wrnexusjs.dev/packages/native https://wrnexusjs.dev/packages/oauth https://wrnexusjs.dev/packages/plugin https://wrnexusjs.dev/packages/pubsub https://wrnexusjs.dev/packages/queue https://wrnexusjs.dev/packages/reactive https://wrnexusjs.dev/packages/router https://wrnexusjs.dev/packages/ssr https://wrnexusjs.dev/packages/styles https://wrnexusjs.dev/packages/syntax https://wrnexusjs.dev/packages/test https://wrnexusjs.dev/packages/tracking https://wrnexusjs.dev/packages/ui https://wrnexusjs.dev/packages/uploader https://wrnexusjs.dev/packages/validation https://wrnexusjs.dev/components/accordion https://wrnexusjs.dev/components/advanced-date-picker https://wrnexusjs.dev/components/advanced-range-slider https://wrnexusjs.dev/components/advanced-select https://wrnexusjs.dev/components/alert https://wrnexusjs.dev/components/avatar https://wrnexusjs.dev/components/avatar-group https://wrnexusjs.dev/components/badge https://wrnexusjs.dev/components/blockquote https://wrnexusjs.dev/components/breadcrumb https://wrnexusjs.dev/components/button https://wrnexusjs.dev/components/button-group https://wrnexusjs.dev/components/card https://wrnexusjs.dev/components/carousel https://wrnexusjs.dev/components/chart https://wrnexusjs.dev/components/chat-bubble https://wrnexusjs.dev/components/checkbox https://wrnexusjs.dev/components/clipboard https://wrnexusjs.dev/components/collapse https://wrnexusjs.dev/components/color-picker https://wrnexusjs.dev/components/columns https://wrnexusjs.dev/components/combo-box https://wrnexusjs.dev/components/confetti https://wrnexusjs.dev/components/container https://wrnexusjs.dev/components/context-menu https://wrnexusjs.dev/components/copy-markup https://wrnexusjs.dev/components/custom-scrollbar https://wrnexusjs.dev/components/data-map https://wrnexusjs.dev/components/data-table https://wrnexusjs.dev/components/date-picker https://wrnexusjs.dev/components/device-frame https://wrnexusjs.dev/components/divider https://wrnexusjs.dev/components/drag-and-drop https://wrnexusjs.dev/components/drawer https://wrnexusjs.dev/components/dropdown https://wrnexusjs.dev/components/file-input https://wrnexusjs.dev/components/file-upload https://wrnexusjs.dev/components/file-upload-progress https://wrnexusjs.dev/components/grid https://wrnexusjs.dev/components/image https://wrnexusjs.dev/components/input https://wrnexusjs.dev/components/input-group https://wrnexusjs.dev/components/input-number https://wrnexusjs.dev/components/kbd https://wrnexusjs.dev/components/layout-splitter https://wrnexusjs.dev/components/legend-indicator https://wrnexusjs.dev/components/link https://wrnexusjs.dev/components/list https://wrnexusjs.dev/components/list-group https://wrnexusjs.dev/components/map https://wrnexusjs.dev/components/marquee https://wrnexusjs.dev/components/mega-menu https://wrnexusjs.dev/components/modal https://wrnexusjs.dev/components/nav https://wrnexusjs.dev/components/navbar https://wrnexusjs.dev/components/pagination https://wrnexusjs.dev/components/pin-input https://wrnexusjs.dev/components/popover https://wrnexusjs.dev/components/progress https://wrnexusjs.dev/components/radio https://wrnexusjs.dev/components/range-slider https://wrnexusjs.dev/components/rating https://wrnexusjs.dev/components/scrollspy https://wrnexusjs.dev/components/search-box https://wrnexusjs.dev/components/select https://wrnexusjs.dev/components/sidebar https://wrnexusjs.dev/components/skeleton https://wrnexusjs.dev/components/spinner https://wrnexusjs.dev/components/stepper https://wrnexusjs.dev/components/strong-password https://wrnexusjs.dev/components/styled-icon https://wrnexusjs.dev/components/switch https://wrnexusjs.dev/components/table https://wrnexusjs.dev/components/tabs https://wrnexusjs.dev/components/textarea https://wrnexusjs.dev/components/timeline https://wrnexusjs.dev/components/time-picker https://wrnexusjs.dev/components/toast https://wrnexusjs.dev/components/toast-notifications https://wrnexusjs.dev/components/toggle-count https://wrnexusjs.dev/components/toggle-password https://wrnexusjs.dev/components/tooltip https://wrnexusjs.dev/components/tree-view https://wrnexusjs.dev/components/typography https://wrnexusjs.dev/components/wysiwyg-editor