release: complete UI component catalog 0.2.58

packages/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",

packages/authz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/cli/src/update.ts

@@ -584,6 +584,15 @@ const MIGRATIONS: Migration[] = [
       // Existing theme configuration remains compatible; blue is the default palette.
     },
   },
+  {
+    version: "0.2.58",
+    id: "complete-ui-component-catalog",
+    description:
+      "Completes the PDF-aligned UI catalog and ships generated props, slots, and events metadata.",
+    apply() {
+      // UI components remain auto-discovered; no application files require migration.
+    },
+  },
 ];
 
 /** Release tooling uses this to require an explicit migration entry per version. */

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/db/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/jwt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/oauth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/pubsub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/queue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/reactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/README.md

@@ -15,6 +15,11 @@ driven by `var(--wire-*)` theme tokens, so components restyle instantly when the
 theme changes. The tiny JS surface (`src/index.ts`) exists only so the toolchain
 (CLI build + dev server) can locate the component directory and stylesheet.
 
+The complete PDF-aligned catalog currently contains **891 components**. The
+generated `COMPONENTS.md` and `component-reference.json` files document every
+mount name, prop, inferred type, default/required status, slot, event, category,
+and source file directly from the packaged `.wrn` source.
+
 ## Installation
 
 ```bash
@@ -81,6 +86,9 @@ metadata is emitted in `<head>` instead of invalid component markup.
 The authoritative, always-current list is `uiComponentNames()` (below), which reads
 the component directory at runtime.
 
+For the full catalog, see [`COMPONENTS.md`](./COMPONENTS.md). The machine-readable
+equivalent is exported as `@wrnexus/ui/component-reference.json`.
+
 ## API
 
 The JS module (`@wrnexus/ui`) exposes four helpers used by the build tooling to

packages/ui/components/AcceptAllCookiesButton.wrn

@@ -0,0 +1,11 @@
+component AcceptAllCookiesButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}

packages/ui/components/AccessibleAccordion.wrn

@@ -0,0 +1,13 @@
+component AccessibleAccordion {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccessibleCarousel.wrn

@@ -0,0 +1,13 @@
+component AccessibleCarousel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccessibleChartSummary.wrn

@@ -0,0 +1,13 @@
+component AccessibleChartSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccessibleDialog.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AccessibleErrorSummary.wrn

@@ -0,0 +1,13 @@
+component AccessibleErrorSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccessibleIcon.wrn

@@ -0,0 +1,13 @@
+component AccessibleIcon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccessibleMenu.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AccessibleTabs.wrn

@@ -0,0 +1,13 @@
+component AccessibleTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccessibleTooltip.wrn

@@ -0,0 +1,13 @@
+component AccessibleTooltip {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AccountMenu.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AccountStatusBanner.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/ActionMenu.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ActiveFilterList.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ActivityList.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AddOnCard.wrn

@@ -0,0 +1,13 @@
+component AddOnCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AddressInput.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/AddressPreview.wrn

@@ -0,0 +1,13 @@
+component AddressPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AdvancedFilterBuilder.wrn

@@ -0,0 +1,13 @@
+component AdvancedFilterBuilder {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AlertDialog.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AmountInput.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/AnalyticsDashboardPreview.wrn

@@ -0,0 +1,13 @@
+component AnalyticsDashboardPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AnchorNavigation.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ApartmentInput.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/ApiAuthenticationNotice.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/ApiErrorExample.wrn

@@ -0,0 +1,13 @@
+component ApiErrorExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/ApiHeaderTable.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ApiKeyCreateDialog.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ApiKeyDisplay.wrn

@@ -0,0 +1,13 @@
+component ApiKeyDisplay {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/ApiKeyInput.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/ApiMethodBadge.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/ApiParameterTable.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ApiRateLimitNotice.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/ApiRequestExample.wrn

@@ -0,0 +1,13 @@
+component ApiRequestExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/ApiResponseExample.wrn

@@ -0,0 +1,13 @@
+component ApiResponseExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/ApiSchemaTable.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ApiSchemaViewer.wrn

@@ -0,0 +1,13 @@
+component ApiSchemaViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/ApiVersionBadge.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/AppHeader.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ArchitectureSection.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AreaChart.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/ArticleHero.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ArticleLayout.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ArticleNewsletterCTA.wrn

@@ -0,0 +1,11 @@
+component ArticleNewsletterCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}

packages/ui/components/ArticlePageShell.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/ArticleShareActions.wrn

@@ -0,0 +1,11 @@
+component ArticleShareActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+}

packages/ui/components/AttachmentPicker.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/AttachmentUpload.wrn

@@ -0,0 +1,13 @@
+component AttachmentUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AudioUpload.wrn

@@ -0,0 +1,13 @@
+component AudioUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AuditLogPreview.wrn

@@ -0,0 +1,13 @@
+component AuditLogPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AuditTable.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/AuthenticatorCodeInput.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/AuthorAvatar.wrn

@@ -0,0 +1,13 @@
+component AuthorAvatar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AuthorCard.wrn

@@ -0,0 +1,13 @@
+component AuthorCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AuthorizedApplicationCard.wrn

@@ -0,0 +1,13 @@
+component AuthorizedApplicationCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AutomationExampleCard.wrn

@@ -0,0 +1,13 @@
+component AutomationExampleCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AvailabilityCalendar.wrn

@@ -0,0 +1,13 @@
+component AvailabilityCalendar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/AvatarGroup.wrn

@@ -0,0 +1,16 @@
+component AvatarGroup {
+  props {
+    label = "Avatar" 
+    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> }
+}

packages/ui/components/AvatarUpload.wrn

@@ -0,0 +1,13 @@
+component AvatarUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/BankTransferDetails.wrn

@@ -0,0 +1,13 @@
+component BankTransferDetails {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/BarChart.wrn

@@ -0,0 +1,11 @@
+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> }
+}

packages/ui/components/BillingAddressForm.wrn

@@ -0,0 +1,13 @@
+component BillingAddressForm {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/BillingExample.wrn

@@ -0,0 +1,13 @@
+component BillingExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/BillingPeriodToggle.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/BlackoutDatePicker.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/BlogCard.wrn

@@ -0,0 +1,13 @@
+component BlogCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/BlogGrid.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/BlogList.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/BlogSearch.wrn

@@ -0,0 +1,13 @@
+component BlogSearch {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+}

packages/ui/components/BorderRadiusPicker.wrn

@@ -0,0 +1,16 @@
+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> }
+}

packages/ui/components/BottomNavigation.wrn

@@ -0,0 +1,10 @@
+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> }
+}

packages/ui/components/BrandColorPicker.wrn

@@ -0,0 +1,16 @@
+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> }
+}