diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md
index 9e35069c..d0cec520 100644
--- a/packages/ui/COMPONENTS.md
+++ b/packages/ui/COMPONENTS.md
@@ -369,8 +369,8 @@ Reusable open a p i c t a component.
 Reusable passkey button component.
 
 - Mount: `data-component="PasskeyButton"`
-- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
-- Slots: `default`
+- Props: `label: string = "Continue with a passkey"`, `description: string = "Use fingerprint, face recognition, or device PIN"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: None
 - Events: None
 
 ### PlanCTA
@@ -513,8 +513,8 @@ Reusable share button component.
 Reusable sign in link component.
 
 - Mount: `data-component="SignInLink"`
-- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
-- Slots: `default`
+- Props: `label: string = "Sign in with password"`, `description: string = "Use your username or email and password"`, `href: string = ""`, `type: string = "button"`, `variant: string = "secondary"`, `disabled: boolean = false`, `icon: string = "icon-[lucide--lock-keyhole]"`, `class: string = ""`
+- Slots: None
 - Events: None
 
 ### SkipLink
@@ -2884,7 +2884,7 @@ Reusable zoom slider component.
 Reusable announcement bar component.
 
 - Mount: `data-component="AnnouncementBar"`
-- Props: `class: string = ""`, `badge: string = "New"`, `message: string = "WrNexus 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"`
+- Props: `class: string = ""`, `badge: string = "New"`, `message: string = "WrNexus 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`
 - Slots: None
 - Events: `click`
 
@@ -3253,8 +3253,8 @@ Reusable progress bar component.
 Reusable public footer component.
 
 - Mount: `data-component="PublicFooter"`
-- Props: `class: string = ""`
-- Slots: None
+- Props: `class: string = ""`, `homeHref: string = "/"`, `brandName: string = "WrNexus"`, `brandTagline: string = "Identity Cloud"`, `brandAriaLabel: string = "WrNexus home"`, `newsletterEyebrow: string = "WrNexus 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."`, `copyrightText: string = "© 2026 WrNexus. All rights reserved."`, `attributionText: string = "Built by WorkRoot Workspace."`, `showNewsletter: boolean = true`, `showSocialLinks: boolean = true`, `showThemeToggle: boolean = true`
+- Slots: `navigation`
 - Events: `submit`
 
 ### PublicMobileNavigation
@@ -5383,7 +5383,7 @@ Reusable email body editor component.
 Reusable email input component.
 
 - Mount: `data-component="EmailInput"`
-- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Email"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""`
+- Props: `class: string = ""`, `id: string = "email"`, `name: string = "email"`, `label: string = "Email"`, `value: string = ""`, `placeholder: string = "you@company.com"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = "email"`
 - Slots: None
 - Events: None
 
@@ -5941,9 +5941,9 @@ Reusable otp input component.
 Reusable password input component.
 
 - Mount: `data-component="PasswordInput"`
-- Props: `class: string = ""`, `id: string = ""`, `name: string = ""`, `label: string = "Password"`, `value: string = ""`, `placeholder: string = ""`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = ""`
+- Props: `class: string = ""`, `id: string = "password"`, `name: string = "password"`, `label: string = "Password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `help: string = ""`, `error: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `autocomplete: string = "current-password"`, `revealable: boolean = true`
 - Slots: None
-- Events: None
+- Events: `click`
 
 ### PasswordVisibilityToggle
 
@@ -7203,8 +7203,8 @@ Reusable product page shell component.
 Reusable public header component.
 
 - Mount: `data-component="PublicHeader"`
-- Props: `class: string = ""`
-- Slots: None
+- Props: `class: string = ""`, `homeHref: string = "/"`, `brandName: string = "WrNexus"`, `brandTagline: string = "Identity Cloud"`, `brandAriaLabel: string = "WrNexus 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"`
+- Slots: `navigation`, `actions`
 - Events: `click`
 
 ### PublicPageShell
diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json
index 28b87a8d..e5868a41 100644
--- a/packages/ui/component-reference.json
+++ b/packages/ui/component-reference.json
@@ -1344,6 +1344,48 @@
           "type": "string",
           "required": false,
           "default": "\"Announcement\""
+        },
+        {
+          "name": "badgeIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--sparkles]\""
+        },
+        {
+          "name": "actionIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--arrow-right]\""
+        },
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Dismiss announcement\""
+        },
+        {
+          "name": "showBadge",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showDescription",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showAction",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
         }
       ],
       "slots": [],
@@ -14706,13 +14748,13 @@
           "name": "id",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"email\""
         },
         {
           "name": "name",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"email\""
         },
         {
           "name": "label",
@@ -14730,7 +14772,7 @@
           "name": "placeholder",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"you@company.com\""
         },
         {
           "name": "help",
@@ -14766,7 +14808,7 @@
           "name": "autocomplete",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"email\""
         }
       ],
       "slots": [],
@@ -29674,7 +29716,13 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Action\""
+          "default": "\"Continue with a passkey\""
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "default": "\"Use fingerprint, face recognition, or device PIN\""
         },
         {
           "name": "href",
@@ -29707,7 +29755,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": [],
       "events": [],
       "source": "components/PasskeyButton.wrn"
     },
@@ -29727,13 +29775,13 @@
           "name": "id",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"password\""
         },
         {
           "name": "name",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"password\""
         },
         {
           "name": "label",
@@ -29751,7 +29799,7 @@
           "name": "placeholder",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"Enter your password\""
         },
         {
           "name": "help",
@@ -29787,11 +29835,17 @@
           "name": "autocomplete",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"current-password\""
+        },
+        {
+          "name": "revealable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
         }
       ],
       "slots": [],
-      "events": [],
+      "events": ["click"],
       "source": "components/PasswordInput.wrn"
     },
     {
@@ -33875,9 +33929,105 @@
           "type": "string",
           "required": false,
           "default": "\"\""
+        },
+        {
+          "name": "homeHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/\""
+        },
+        {
+          "name": "brandName",
+          "type": "string",
+          "required": false,
+          "default": "\"WrNexus\""
+        },
+        {
+          "name": "brandTagline",
+          "type": "string",
+          "required": false,
+          "default": "\"Identity Cloud\""
+        },
+        {
+          "name": "brandAriaLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"WrNexus home\""
+        },
+        {
+          "name": "newsletterEyebrow",
+          "type": "string",
+          "required": false,
+          "default": "\"WrNexus updates\""
+        },
+        {
+          "name": "newsletterTitle",
+          "type": "string",
+          "required": false,
+          "default": "\"Identity insights delivered to your inbox\""
+        },
+        {
+          "name": "newsletterDescription",
+          "type": "string",
+          "required": false,
+          "default": "\"Get product updates, security guidance, implementation strategies, and practical identity architecture resources.\""
+        },
+        {
+          "name": "newsletterAction",
+          "type": "string",
+          "required": false,
+          "default": "\"/api/newsletter/subscribe\""
+        },
+        {
+          "name": "newsletterButtonLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Subscribe\""
+        },
+        {
+          "name": "newsletterPlaceholder",
+          "type": "string",
+          "required": false,
+          "default": "\"Enter your work email\""
+        },
+        {
+          "name": "newsletterSuccessMessage",
+          "type": "string",
+          "required": false,
+          "default": "\"Thanks. Please check your inbox to confirm your subscription.\""
+        },
+        {
+          "name": "copyrightText",
+          "type": "string",
+          "required": false,
+          "default": "\"© 2026 WrNexus. All rights reserved.\""
+        },
+        {
+          "name": "attributionText",
+          "type": "string",
+          "required": false,
+          "default": "\"Built by WorkRoot Workspace.\""
+        },
+        {
+          "name": "showNewsletter",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showSocialLinks",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showThemeToggle",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
         }
       ],
-      "slots": [],
+      "slots": ["navigation"],
       "events": ["submit"],
       "source": "components/PublicFooter.wrn"
     },
@@ -33892,9 +34042,135 @@
           "type": "string",
           "required": false,
           "default": "\"\""
+        },
+        {
+          "name": "homeHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/\""
+        },
+        {
+          "name": "brandName",
+          "type": "string",
+          "required": false,
+          "default": "\"WrNexus\""
+        },
+        {
+          "name": "brandTagline",
+          "type": "string",
+          "required": false,
+          "default": "\"Identity Cloud\""
+        },
+        {
+          "name": "brandAriaLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"WrNexus home\""
+        },
+        {
+          "name": "brandIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--blocks]\""
+        },
+        {
+          "name": "pricingLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Pricing\""
+        },
+        {
+          "name": "pricingHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/pricing\""
+        },
+        {
+          "name": "statusLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"All systems operational\""
+        },
+        {
+          "name": "statusHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/status\""
+        },
+        {
+          "name": "signInLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Sign in\""
+        },
+        {
+          "name": "signInHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/sign-in\""
+        },
+        {
+          "name": "primaryLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Start free\""
+        },
+        {
+          "name": "primaryHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/sign-up\""
+        },
+        {
+          "name": "showStatus",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showThemeToggle",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showSignIn",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "showPrimaryAction",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "productLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Product\""
+        },
+        {
+          "name": "solutionsLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Solutions\""
+        },
+        {
+          "name": "developersLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Developers\""
+        },
+        {
+          "name": "resourcesLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Resources\""
         }
       ],
-      "slots": [],
+      "slots": ["navigation", "actions"],
       "events": ["click"],
       "source": "components/PublicHeader.wrn"
     },
@@ -40013,7 +40289,13 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Action\""
+          "default": "\"Sign in with password\""
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "default": "\"Use your username or email and password\""
         },
         {
           "name": "href",
@@ -40031,7 +40313,7 @@
           "name": "variant",
           "type": "string",
           "required": false,
-          "default": "\"primary\""
+          "default": "\"secondary\""
         },
         {
           "name": "disabled",
@@ -40039,6 +40321,12 @@
           "required": false,
           "default": "false"
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--lock-keyhole]\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -40046,7 +40334,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": [],
       "events": [],
       "source": "components/SignInLink.wrn"
     },
diff --git a/packages/ui/components/AcceptAllCookiesButton.wrn b/packages/ui/components/AcceptAllCookiesButton.wrn
index 43db17ca..3afd8aad 100644
--- a/packages/ui/components/AcceptAllCookiesButton.wrn
+++ b/packages/ui/components/AcceptAllCookiesButton.wrn
@@ -7,5 +7,5 @@ component AcceptAllCookiesButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AccessibleAccordion.wrn b/packages/ui/components/AccessibleAccordion.wrn
index fea11ae2..ba182b91 100644
--- a/packages/ui/components/AccessibleAccordion.wrn
+++ b/packages/ui/components/AccessibleAccordion.wrn
@@ -9,5 +9,5 @@ component AccessibleAccordion {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AccessibleCarousel.wrn b/packages/ui/components/AccessibleCarousel.wrn
index e4a30d46..301c01ac 100644
--- a/packages/ui/components/AccessibleCarousel.wrn
+++ b/packages/ui/components/AccessibleCarousel.wrn
@@ -9,5 +9,5 @@ component AccessibleCarousel {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AccessibleErrorSummary.wrn b/packages/ui/components/AccessibleErrorSummary.wrn
index d2bd4381..931e1e14 100644
--- a/packages/ui/components/AccessibleErrorSummary.wrn
+++ b/packages/ui/components/AccessibleErrorSummary.wrn
@@ -9,5 +9,5 @@ component AccessibleErrorSummary {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AccessibleIcon.wrn b/packages/ui/components/AccessibleIcon.wrn
index 323c774f..5dd97370 100644
--- a/packages/ui/components/AccessibleIcon.wrn
+++ b/packages/ui/components/AccessibleIcon.wrn
@@ -9,5 +9,5 @@ component AccessibleIcon {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AccessibleTabs.wrn b/packages/ui/components/AccessibleTabs.wrn
index bfba41fa..6c67b8b2 100644
--- a/packages/ui/components/AccessibleTabs.wrn
+++ b/packages/ui/components/AccessibleTabs.wrn
@@ -9,5 +9,5 @@ component AccessibleTabs {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AccessibleTooltip.wrn b/packages/ui/components/AccessibleTooltip.wrn
index dd62776d..eca4ad23 100644
--- a/packages/ui/components/AccessibleTooltip.wrn
+++ b/packages/ui/components/AccessibleTooltip.wrn
@@ -9,5 +9,5 @@ component AccessibleTooltip {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AddOnCard.wrn b/packages/ui/components/AddOnCard.wrn
index 198bc9e8..4472c0b4 100644
--- a/packages/ui/components/AddOnCard.wrn
+++ b/packages/ui/components/AddOnCard.wrn
@@ -9,5 +9,5 @@ component AddOnCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AddressPreview.wrn b/packages/ui/components/AddressPreview.wrn
index d543124f..3d508f3f 100644
--- a/packages/ui/components/AddressPreview.wrn
+++ b/packages/ui/components/AddressPreview.wrn
@@ -9,5 +9,5 @@ component AddressPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AdvancedFilterBuilder.wrn b/packages/ui/components/AdvancedFilterBuilder.wrn
index 124a67d5..e66322aa 100644
--- a/packages/ui/components/AdvancedFilterBuilder.wrn
+++ b/packages/ui/components/AdvancedFilterBuilder.wrn
@@ -9,5 +9,5 @@ component AdvancedFilterBuilder {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ApiErrorExample.wrn b/packages/ui/components/ApiErrorExample.wrn
index ca682e44..1e857232 100644
--- a/packages/ui/components/ApiErrorExample.wrn
+++ b/packages/ui/components/ApiErrorExample.wrn
@@ -9,5 +9,5 @@ component ApiErrorExample {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ApiKeyDisplay.wrn b/packages/ui/components/ApiKeyDisplay.wrn
index 3b561ce6..6a142190 100644
--- a/packages/ui/components/ApiKeyDisplay.wrn
+++ b/packages/ui/components/ApiKeyDisplay.wrn
@@ -9,5 +9,5 @@ component ApiKeyDisplay {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ApiRequestExample.wrn b/packages/ui/components/ApiRequestExample.wrn
index 16e60b4e..f6eb2323 100644
--- a/packages/ui/components/ApiRequestExample.wrn
+++ b/packages/ui/components/ApiRequestExample.wrn
@@ -9,5 +9,5 @@ component ApiRequestExample {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ApiResponseExample.wrn b/packages/ui/components/ApiResponseExample.wrn
index 795bcf56..37341e3d 100644
--- a/packages/ui/components/ApiResponseExample.wrn
+++ b/packages/ui/components/ApiResponseExample.wrn
@@ -9,5 +9,5 @@ component ApiResponseExample {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ApiSchemaViewer.wrn b/packages/ui/components/ApiSchemaViewer.wrn
index 164dd0b5..dc1bce2c 100644
--- a/packages/ui/components/ApiSchemaViewer.wrn
+++ b/packages/ui/components/ApiSchemaViewer.wrn
@@ -9,5 +9,5 @@ component ApiSchemaViewer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ArticleNewsletterCTA.wrn b/packages/ui/components/ArticleNewsletterCTA.wrn
index 9abe4482..d2643221 100644
--- a/packages/ui/components/ArticleNewsletterCTA.wrn
+++ b/packages/ui/components/ArticleNewsletterCTA.wrn
@@ -7,5 +7,5 @@ component ArticleNewsletterCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ArticleShareActions.wrn b/packages/ui/components/ArticleShareActions.wrn
index ca2165d8..e9600199 100644
--- a/packages/ui/components/ArticleShareActions.wrn
+++ b/packages/ui/components/ArticleShareActions.wrn
@@ -7,5 +7,5 @@ component ArticleShareActions {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AttachmentUpload.wrn b/packages/ui/components/AttachmentUpload.wrn
index 567bc298..10d4204c 100644
--- a/packages/ui/components/AttachmentUpload.wrn
+++ b/packages/ui/components/AttachmentUpload.wrn
@@ -9,5 +9,5 @@ component AttachmentUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AudioUpload.wrn b/packages/ui/components/AudioUpload.wrn
index 626adf09..06646ec0 100644
--- a/packages/ui/components/AudioUpload.wrn
+++ b/packages/ui/components/AudioUpload.wrn
@@ -9,5 +9,5 @@ component AudioUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AuditLogPreview.wrn b/packages/ui/components/AuditLogPreview.wrn
index 7544ccc8..d8c1a820 100644
--- a/packages/ui/components/AuditLogPreview.wrn
+++ b/packages/ui/components/AuditLogPreview.wrn
@@ -9,5 +9,5 @@ component AuditLogPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AuthorAvatar.wrn b/packages/ui/components/AuthorAvatar.wrn
index 754d71c6..c9196a01 100644
--- a/packages/ui/components/AuthorAvatar.wrn
+++ b/packages/ui/components/AuthorAvatar.wrn
@@ -9,5 +9,5 @@ component AuthorAvatar {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AuthorCard.wrn b/packages/ui/components/AuthorCard.wrn
index 906db84c..b2e6e57b 100644
--- a/packages/ui/components/AuthorCard.wrn
+++ b/packages/ui/components/AuthorCard.wrn
@@ -9,5 +9,5 @@ component AuthorCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AuthorizedApplicationCard.wrn b/packages/ui/components/AuthorizedApplicationCard.wrn
index adf64d7f..3662c9df 100644
--- a/packages/ui/components/AuthorizedApplicationCard.wrn
+++ b/packages/ui/components/AuthorizedApplicationCard.wrn
@@ -9,5 +9,5 @@ component AuthorizedApplicationCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AutomationExampleCard.wrn b/packages/ui/components/AutomationExampleCard.wrn
index 1b230710..6e64cff1 100644
--- a/packages/ui/components/AutomationExampleCard.wrn
+++ b/packages/ui/components/AutomationExampleCard.wrn
@@ -9,5 +9,5 @@ component AutomationExampleCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AvailabilityCalendar.wrn b/packages/ui/components/AvailabilityCalendar.wrn
index a62cc9fd..5a9ef54a 100644
--- a/packages/ui/components/AvailabilityCalendar.wrn
+++ b/packages/ui/components/AvailabilityCalendar.wrn
@@ -9,5 +9,5 @@ component AvailabilityCalendar {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/AvatarUpload.wrn b/packages/ui/components/AvatarUpload.wrn
index f84c8728..70f92346 100644
--- a/packages/ui/components/AvatarUpload.wrn
+++ b/packages/ui/components/AvatarUpload.wrn
@@ -9,5 +9,5 @@ component AvatarUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/BankTransferDetails.wrn b/packages/ui/components/BankTransferDetails.wrn
index 17550cef..9f4bee22 100644
--- a/packages/ui/components/BankTransferDetails.wrn
+++ b/packages/ui/components/BankTransferDetails.wrn
@@ -9,5 +9,5 @@ component BankTransferDetails {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/BillingAddressForm.wrn b/packages/ui/components/BillingAddressForm.wrn
index 2d5ac459..61d86ca6 100644
--- a/packages/ui/components/BillingAddressForm.wrn
+++ b/packages/ui/components/BillingAddressForm.wrn
@@ -9,5 +9,5 @@ component BillingAddressForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/BillingExample.wrn b/packages/ui/components/BillingExample.wrn
index c91d27e4..7d6fb269 100644
--- a/packages/ui/components/BillingExample.wrn
+++ b/packages/ui/components/BillingExample.wrn
@@ -9,5 +9,5 @@ component BillingExample {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/BlogCard.wrn b/packages/ui/components/BlogCard.wrn
index ec4374c5..fb85219a 100644
--- a/packages/ui/components/BlogCard.wrn
+++ b/packages/ui/components/BlogCard.wrn
@@ -9,5 +9,5 @@ component BlogCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/BlogSearch.wrn b/packages/ui/components/BlogSearch.wrn
index 69914cd7..1d1c9475 100644
--- a/packages/ui/components/BlogSearch.wrn
+++ b/packages/ui/components/BlogSearch.wrn
@@ -9,5 +9,5 @@ component BlogSearch {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/BudgetRangeSlider.wrn b/packages/ui/components/BudgetRangeSlider.wrn
index 6e7837eb..cd5f3577 100644
--- a/packages/ui/components/BudgetRangeSlider.wrn
+++ b/packages/ui/components/BudgetRangeSlider.wrn
@@ -9,5 +9,5 @@ component BudgetRangeSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Calendar.wrn b/packages/ui/components/Calendar.wrn
index f3001ec9..ade705d9 100644
--- a/packages/ui/components/Calendar.wrn
+++ b/packages/ui/components/Calendar.wrn
@@ -9,5 +9,5 @@ component Calendar {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CampaignPerformancePreview.wrn b/packages/ui/components/CampaignPerformancePreview.wrn
index 369a75b7..36195fc8 100644
--- a/packages/ui/components/CampaignPerformancePreview.wrn
+++ b/packages/ui/components/CampaignPerformancePreview.wrn
@@ -9,5 +9,5 @@ component CampaignPerformancePreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CardPaymentForm.wrn b/packages/ui/components/CardPaymentForm.wrn
index 004bcbc5..2842925a 100644
--- a/packages/ui/components/CardPaymentForm.wrn
+++ b/packages/ui/components/CardPaymentForm.wrn
@@ -9,5 +9,5 @@ component CardPaymentForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CareerApplicationForm.wrn b/packages/ui/components/CareerApplicationForm.wrn
index a6db3e12..1f674c08 100644
--- a/packages/ui/components/CareerApplicationForm.wrn
+++ b/packages/ui/components/CareerApplicationForm.wrn
@@ -9,5 +9,5 @@ component CareerApplicationForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Carousel.wrn b/packages/ui/components/Carousel.wrn
index 63eb0cdb..0ab6f8ab 100644
--- a/packages/ui/components/Carousel.wrn
+++ b/packages/ui/components/Carousel.wrn
@@ -9,5 +9,5 @@ component Carousel {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CaseStudyCard.wrn b/packages/ui/components/CaseStudyCard.wrn
index 9a5fafb4..7e3b9831 100644
--- a/packages/ui/components/CaseStudyCard.wrn
+++ b/packages/ui/components/CaseStudyCard.wrn
@@ -9,5 +9,5 @@ component CaseStudyCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CaseStudyPreview.wrn b/packages/ui/components/CaseStudyPreview.wrn
index ffbfc434..5b95a4cc 100644
--- a/packages/ui/components/CaseStudyPreview.wrn
+++ b/packages/ui/components/CaseStudyPreview.wrn
@@ -9,5 +9,5 @@ component CaseStudyPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CenteredCTA.wrn b/packages/ui/components/CenteredCTA.wrn
index a663ab67..878af5a3 100644
--- a/packages/ui/components/CenteredCTA.wrn
+++ b/packages/ui/components/CenteredCTA.wrn
@@ -7,5 +7,5 @@ component CenteredCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CertificateUpload.wrn b/packages/ui/components/CertificateUpload.wrn
index 3b796ebc..4a77b5c7 100644
--- a/packages/ui/components/CertificateUpload.wrn
+++ b/packages/ui/components/CertificateUpload.wrn
@@ -9,5 +9,5 @@ component CertificateUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ChannelIcon.wrn b/packages/ui/components/ChannelIcon.wrn
index 56b327b2..eec37ab3 100644
--- a/packages/ui/components/ChannelIcon.wrn
+++ b/packages/ui/components/ChannelIcon.wrn
@@ -9,5 +9,5 @@ component ChannelIcon {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ChartTooltip.wrn b/packages/ui/components/ChartTooltip.wrn
index 379e04d3..d47fc253 100644
--- a/packages/ui/components/ChartTooltip.wrn
+++ b/packages/ui/components/ChartTooltip.wrn
@@ -9,5 +9,5 @@ component ChartTooltip {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Checklist.wrn b/packages/ui/components/Checklist.wrn
index 4ca7d9ed..6bc5e9c8 100644
--- a/packages/ui/components/Checklist.wrn
+++ b/packages/ui/components/Checklist.wrn
@@ -9,5 +9,5 @@ component Checklist {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ClearFiltersButton.wrn b/packages/ui/components/ClearFiltersButton.wrn
index 218acb71..68eb3b71 100644
--- a/packages/ui/components/ClearFiltersButton.wrn
+++ b/packages/ui/components/ClearFiltersButton.wrn
@@ -7,5 +7,5 @@ component ClearFiltersButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Code.wrn b/packages/ui/components/Code.wrn
index aa52f99a..831fc056 100644
--- a/packages/ui/components/Code.wrn
+++ b/packages/ui/components/Code.wrn
@@ -9,5 +9,5 @@ component Code {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CodeCopyButton.wrn b/packages/ui/components/CodeCopyButton.wrn
index ad592a73..dced3b68 100644
--- a/packages/ui/components/CodeCopyButton.wrn
+++ b/packages/ui/components/CodeCopyButton.wrn
@@ -7,5 +7,5 @@ component CodeCopyButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CodeTabs.wrn b/packages/ui/components/CodeTabs.wrn
index 0647a94f..6d838fab 100644
--- a/packages/ui/components/CodeTabs.wrn
+++ b/packages/ui/components/CodeTabs.wrn
@@ -9,5 +9,5 @@ component CodeTabs {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ColorSwatch.wrn b/packages/ui/components/ColorSwatch.wrn
index d36b75b1..f82bf09c 100644
--- a/packages/ui/components/ColorSwatch.wrn
+++ b/packages/ui/components/ColorSwatch.wrn
@@ -9,5 +9,5 @@ component ColorSwatch {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CommandBlock.wrn b/packages/ui/components/CommandBlock.wrn
index a227cec7..5ec7f164 100644
--- a/packages/ui/components/CommandBlock.wrn
+++ b/packages/ui/components/CommandBlock.wrn
@@ -9,5 +9,5 @@ component CommandBlock {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ComplianceProgramCard.wrn b/packages/ui/components/ComplianceProgramCard.wrn
index 3c9dc289..e3591731 100644
--- a/packages/ui/components/ComplianceProgramCard.wrn
+++ b/packages/ui/components/ComplianceProgramCard.wrn
@@ -9,5 +9,5 @@ component ComplianceProgramCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ConnectedAccountCard.wrn b/packages/ui/components/ConnectedAccountCard.wrn
index ff711310..6abc75d7 100644
--- a/packages/ui/components/ConnectedAccountCard.wrn
+++ b/packages/ui/components/ConnectedAccountCard.wrn
@@ -9,5 +9,5 @@ component ConnectedAccountCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ContactCTA.wrn b/packages/ui/components/ContactCTA.wrn
index 404d6959..0c1de8f0 100644
--- a/packages/ui/components/ContactCTA.wrn
+++ b/packages/ui/components/ContactCTA.wrn
@@ -7,5 +7,5 @@ component ContactCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ContactForm.wrn b/packages/ui/components/ContactForm.wrn
index 6f8b7a60..c9c619d3 100644
--- a/packages/ui/components/ContactForm.wrn
+++ b/packages/ui/components/ContactForm.wrn
@@ -9,5 +9,5 @@ component ContactForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ContactSalesButton.wrn b/packages/ui/components/ContactSalesButton.wrn
index 6edb599d..8d721b0e 100644
--- a/packages/ui/components/ContactSalesButton.wrn
+++ b/packages/ui/components/ContactSalesButton.wrn
@@ -7,5 +7,5 @@ component ContactSalesButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ContactSalesForm.wrn b/packages/ui/components/ContactSalesForm.wrn
index 98e3f441..2a734465 100644
--- a/packages/ui/components/ContactSalesForm.wrn
+++ b/packages/ui/components/ContactSalesForm.wrn
@@ -9,5 +9,5 @@ component ContactSalesForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ContextSwitcher.wrn b/packages/ui/components/ContextSwitcher.wrn
index 3dc90a87..ab6cff0c 100644
--- a/packages/ui/components/ContextSwitcher.wrn
+++ b/packages/ui/components/ContextSwitcher.wrn
@@ -9,5 +9,5 @@ component ContextSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CopyCodeButton.wrn b/packages/ui/components/CopyCodeButton.wrn
index 105e1b54..da387b20 100644
--- a/packages/ui/components/CopyCodeButton.wrn
+++ b/packages/ui/components/CopyCodeButton.wrn
@@ -7,5 +7,5 @@ component CopyCodeButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CostSummary.wrn b/packages/ui/components/CostSummary.wrn
index 2a77cce1..98368415 100644
--- a/packages/ui/components/CostSummary.wrn
+++ b/packages/ui/components/CostSummary.wrn
@@ -9,5 +9,5 @@ component CostSummary {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CronBuilder.wrn b/packages/ui/components/CronBuilder.wrn
index e8d25777..cf7ec37a 100644
--- a/packages/ui/components/CronBuilder.wrn
+++ b/packages/ui/components/CronBuilder.wrn
@@ -9,5 +9,5 @@ component CronBuilder {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CsvUpload.wrn b/packages/ui/components/CsvUpload.wrn
index ece10c9e..7fb0953e 100644
--- a/packages/ui/components/CsvUpload.wrn
+++ b/packages/ui/components/CsvUpload.wrn
@@ -9,5 +9,5 @@ component CsvUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CustomerLogo.wrn b/packages/ui/components/CustomerLogo.wrn
index c377b692..a13c1ec3 100644
--- a/packages/ui/components/CustomerLogo.wrn
+++ b/packages/ui/components/CustomerLogo.wrn
@@ -9,5 +9,5 @@ component CustomerLogo {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/CustomerStoryCard.wrn b/packages/ui/components/CustomerStoryCard.wrn
index f0b2a100..b0945b4f 100644
--- a/packages/ui/components/CustomerStoryCard.wrn
+++ b/packages/ui/components/CustomerStoryCard.wrn
@@ -9,5 +9,5 @@ component CustomerStoryCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DataProtectionCard.wrn b/packages/ui/components/DataProtectionCard.wrn
index 02326619..a3c5dcbf 100644
--- a/packages/ui/components/DataProtectionCard.wrn
+++ b/packages/ui/components/DataProtectionCard.wrn
@@ -9,5 +9,5 @@ component DataProtectionCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DateRangeCalendar.wrn b/packages/ui/components/DateRangeCalendar.wrn
index d9315b5c..03333d98 100644
--- a/packages/ui/components/DateRangeCalendar.wrn
+++ b/packages/ui/components/DateRangeCalendar.wrn
@@ -9,5 +9,5 @@ component DateRangeCalendar {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DateRangeSlider.wrn b/packages/ui/components/DateRangeSlider.wrn
index e0fb5e78..a7ab515a 100644
--- a/packages/ui/components/DateRangeSlider.wrn
+++ b/packages/ui/components/DateRangeSlider.wrn
@@ -9,5 +9,5 @@ component DateRangeSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DeliveryPreview.wrn b/packages/ui/components/DeliveryPreview.wrn
index 3805f5f0..dcf13d00 100644
--- a/packages/ui/components/DeliveryPreview.wrn
+++ b/packages/ui/components/DeliveryPreview.wrn
@@ -9,5 +9,5 @@ component DeliveryPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DemoRequestForm.wrn b/packages/ui/components/DemoRequestForm.wrn
index d2c4ef09..daec8dee 100644
--- a/packages/ui/components/DemoRequestForm.wrn
+++ b/packages/ui/components/DemoRequestForm.wrn
@@ -9,5 +9,5 @@ component DemoRequestForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DeveloperCTA.wrn b/packages/ui/components/DeveloperCTA.wrn
index 0f4e3fbd..ed4aafe0 100644
--- a/packages/ui/components/DeveloperCTA.wrn
+++ b/packages/ui/components/DeveloperCTA.wrn
@@ -7,5 +7,5 @@ component DeveloperCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DeveloperSearch.wrn b/packages/ui/components/DeveloperSearch.wrn
index d6b8106a..cd049bfd 100644
--- a/packages/ui/components/DeveloperSearch.wrn
+++ b/packages/ui/components/DeveloperSearch.wrn
@@ -9,5 +9,5 @@ component DeveloperSearch {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DeviceCard.wrn b/packages/ui/components/DeviceCard.wrn
index 895a9dca..cedc0bcb 100644
--- a/packages/ui/components/DeviceCard.wrn
+++ b/packages/ui/components/DeviceCard.wrn
@@ -9,5 +9,5 @@ component DeviceCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DoNotSellLink.wrn b/packages/ui/components/DoNotSellLink.wrn
index 7a02b360..a98c0af4 100644
--- a/packages/ui/components/DoNotSellLink.wrn
+++ b/packages/ui/components/DoNotSellLink.wrn
@@ -7,5 +7,5 @@ component DoNotSellLink {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DocumentPreview.wrn b/packages/ui/components/DocumentPreview.wrn
index 61ed225c..c08fd513 100644
--- a/packages/ui/components/DocumentPreview.wrn
+++ b/packages/ui/components/DocumentPreview.wrn
@@ -9,5 +9,5 @@ component DocumentPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DocumentUpload.wrn b/packages/ui/components/DocumentUpload.wrn
index 002a920b..4b2665cb 100644
--- a/packages/ui/components/DocumentUpload.wrn
+++ b/packages/ui/components/DocumentUpload.wrn
@@ -9,5 +9,5 @@ component DocumentUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DownloadAction.wrn b/packages/ui/components/DownloadAction.wrn
index 1d0ee84d..80555512 100644
--- a/packages/ui/components/DownloadAction.wrn
+++ b/packages/ui/components/DownloadAction.wrn
@@ -7,5 +7,5 @@ component DownloadAction {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DownloadGateForm.wrn b/packages/ui/components/DownloadGateForm.wrn
index ed3ada8b..88f03dec 100644
--- a/packages/ui/components/DownloadGateForm.wrn
+++ b/packages/ui/components/DownloadGateForm.wrn
@@ -9,5 +9,5 @@ component DownloadGateForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DownloadPolicyButton.wrn b/packages/ui/components/DownloadPolicyButton.wrn
index 1ee82d26..08635cab 100644
--- a/packages/ui/components/DownloadPolicyButton.wrn
+++ b/packages/ui/components/DownloadPolicyButton.wrn
@@ -7,5 +7,5 @@ component DownloadPolicyButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DownloadResourceForm.wrn b/packages/ui/components/DownloadResourceForm.wrn
index ffd18940..91bcaf6d 100644
--- a/packages/ui/components/DownloadResourceForm.wrn
+++ b/packages/ui/components/DownloadResourceForm.wrn
@@ -9,5 +9,5 @@ component DownloadResourceForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/DurationSlider.wrn b/packages/ui/components/DurationSlider.wrn
index 33f14043..1d3557c7 100644
--- a/packages/ui/components/DurationSlider.wrn
+++ b/packages/ui/components/DurationSlider.wrn
@@ -9,5 +9,5 @@ component DurationSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/EmailComposer.wrn b/packages/ui/components/EmailComposer.wrn
index 02f1368b..08e7fa58 100644
--- a/packages/ui/components/EmailComposer.wrn
+++ b/packages/ui/components/EmailComposer.wrn
@@ -9,5 +9,5 @@ component EmailComposer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/EmailInput.wrn b/packages/ui/components/EmailInput.wrn
index 9b6bd85f..d601b5ec 100644
--- a/packages/ui/components/EmailInput.wrn
+++ b/packages/ui/components/EmailInput.wrn
@@ -1,24 +1,27 @@
 component EmailInput {
   props {
     class = ""
-    id = ""
-    name = ""
+    id = "email"
+    name = "email"
     label = "Email"
     value = ""
-    placeholder = ""
+    placeholder = "you@company.com"
     help = ""
     error = ""
     required = false
     disabled = false
     readonly = false
-    autocomplete = ""
+    autocomplete = "email"
   }
   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="email" 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 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>
   }
 }
diff --git a/packages/ui/components/EnterpriseCTA.wrn b/packages/ui/components/EnterpriseCTA.wrn
index 008e0fba..5d35e4ab 100644
--- a/packages/ui/components/EnterpriseCTA.wrn
+++ b/packages/ui/components/EnterpriseCTA.wrn
@@ -7,5 +7,5 @@ component EnterpriseCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/EnterprisePricingCard.wrn b/packages/ui/components/EnterprisePricingCard.wrn
index 4d5589e9..420f76fd 100644
--- a/packages/ui/components/EnterprisePricingCard.wrn
+++ b/packages/ui/components/EnterprisePricingCard.wrn
@@ -9,5 +9,5 @@ component EnterprisePricingCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/EnvironmentSwitcher.wrn b/packages/ui/components/EnvironmentSwitcher.wrn
index 5cff628c..36b25835 100644
--- a/packages/ui/components/EnvironmentSwitcher.wrn
+++ b/packages/ui/components/EnvironmentSwitcher.wrn
@@ -9,5 +9,5 @@ component EnvironmentSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ErrorActions.wrn b/packages/ui/components/ErrorActions.wrn
index 3464087a..4ea87d53 100644
--- a/packages/ui/components/ErrorActions.wrn
+++ b/packages/ui/components/ErrorActions.wrn
@@ -7,5 +7,5 @@ component ErrorActions {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ErrorCode.wrn b/packages/ui/components/ErrorCode.wrn
index 09f0ef91..50e60779 100644
--- a/packages/ui/components/ErrorCode.wrn
+++ b/packages/ui/components/ErrorCode.wrn
@@ -9,5 +9,5 @@ component ErrorCode {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ErrorIllustration.wrn b/packages/ui/components/ErrorIllustration.wrn
index e31e54d7..c588c2b2 100644
--- a/packages/ui/components/ErrorIllustration.wrn
+++ b/packages/ui/components/ErrorIllustration.wrn
@@ -9,5 +9,5 @@ component ErrorIllustration {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ErrorPage.wrn b/packages/ui/components/ErrorPage.wrn
index beb34f82..74749556 100644
--- a/packages/ui/components/ErrorPage.wrn
+++ b/packages/ui/components/ErrorPage.wrn
@@ -9,5 +9,5 @@ component ErrorPage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ErrorSupportLink.wrn b/packages/ui/components/ErrorSupportLink.wrn
index 047a751d..f1ae500b 100644
--- a/packages/ui/components/ErrorSupportLink.wrn
+++ b/packages/ui/components/ErrorSupportLink.wrn
@@ -7,5 +7,5 @@ component ErrorSupportLink {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/EstimatedCostSummary.wrn b/packages/ui/components/EstimatedCostSummary.wrn
index f90ec28b..7ecf7ad0 100644
--- a/packages/ui/components/EstimatedCostSummary.wrn
+++ b/packages/ui/components/EstimatedCostSummary.wrn
@@ -9,5 +9,5 @@ component EstimatedCostSummary {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ExpandableText.wrn b/packages/ui/components/ExpandableText.wrn
index 4ad005a7..bdd2e5e6 100644
--- a/packages/ui/components/ExpandableText.wrn
+++ b/packages/ui/components/ExpandableText.wrn
@@ -9,5 +9,5 @@ component ExpandableText {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ExternalLink.wrn b/packages/ui/components/ExternalLink.wrn
index 87d4c306..25122f36 100644
--- a/packages/ui/components/ExternalLink.wrn
+++ b/packages/ui/components/ExternalLink.wrn
@@ -7,5 +7,5 @@ component ExternalLink {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FactorCard.wrn b/packages/ui/components/FactorCard.wrn
index 0d5f8d4a..9f92c2ec 100644
--- a/packages/ui/components/FactorCard.wrn
+++ b/packages/ui/components/FactorCard.wrn
@@ -9,5 +9,5 @@ component FactorCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FallbackRouteBuilder.wrn b/packages/ui/components/FallbackRouteBuilder.wrn
index c8037e01..11a3ba03 100644
--- a/packages/ui/components/FallbackRouteBuilder.wrn
+++ b/packages/ui/components/FallbackRouteBuilder.wrn
@@ -9,5 +9,5 @@ component FallbackRouteBuilder {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FaviconUpload.wrn b/packages/ui/components/FaviconUpload.wrn
index 64ea175f..12eefaf9 100644
--- a/packages/ui/components/FaviconUpload.wrn
+++ b/packages/ui/components/FaviconUpload.wrn
@@ -9,5 +9,5 @@ component FaviconUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FeatureIconCard.wrn b/packages/ui/components/FeatureIconCard.wrn
index 5c92f827..4b88987b 100644
--- a/packages/ui/components/FeatureIconCard.wrn
+++ b/packages/ui/components/FeatureIconCard.wrn
@@ -9,5 +9,5 @@ component FeatureIconCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FeatureTabs.wrn b/packages/ui/components/FeatureTabs.wrn
index 63841164..23a273ec 100644
--- a/packages/ui/components/FeatureTabs.wrn
+++ b/packages/ui/components/FeatureTabs.wrn
@@ -9,5 +9,5 @@ component FeatureTabs {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FeaturedBlogCard.wrn b/packages/ui/components/FeaturedBlogCard.wrn
index 7c01743c..829c11a6 100644
--- a/packages/ui/components/FeaturedBlogCard.wrn
+++ b/packages/ui/components/FeaturedBlogCard.wrn
@@ -9,5 +9,5 @@ component FeaturedBlogCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FieldActions.wrn b/packages/ui/components/FieldActions.wrn
index a63d1590..931903b4 100644
--- a/packages/ui/components/FieldActions.wrn
+++ b/packages/ui/components/FieldActions.wrn
@@ -7,5 +7,5 @@ component FieldActions {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FileSizeLabel.wrn b/packages/ui/components/FileSizeLabel.wrn
index 41268a88..4b01894f 100644
--- a/packages/ui/components/FileSizeLabel.wrn
+++ b/packages/ui/components/FileSizeLabel.wrn
@@ -9,5 +9,5 @@ component FileSizeLabel {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FinalCTA.wrn b/packages/ui/components/FinalCTA.wrn
index d7019215..b0899f7b 100644
--- a/packages/ui/components/FinalCTA.wrn
+++ b/packages/ui/components/FinalCTA.wrn
@@ -7,5 +7,5 @@ component FinalCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FooterLanguageSwitcher.wrn b/packages/ui/components/FooterLanguageSwitcher.wrn
index 8166c067..92dc9730 100644
--- a/packages/ui/components/FooterLanguageSwitcher.wrn
+++ b/packages/ui/components/FooterLanguageSwitcher.wrn
@@ -9,5 +9,5 @@ component FooterLanguageSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ForbiddenPage.wrn b/packages/ui/components/ForbiddenPage.wrn
index b7c2cc15..fc13981f 100644
--- a/packages/ui/components/ForbiddenPage.wrn
+++ b/packages/ui/components/ForbiddenPage.wrn
@@ -9,5 +9,5 @@ component ForbiddenPage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ForgotPasswordForm.wrn b/packages/ui/components/ForgotPasswordForm.wrn
index 8bb68418..123da4a7 100644
--- a/packages/ui/components/ForgotPasswordForm.wrn
+++ b/packages/ui/components/ForgotPasswordForm.wrn
@@ -9,5 +9,5 @@ component ForgotPasswordForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/FormActions.wrn b/packages/ui/components/FormActions.wrn
index caa3d21b..3b152799 100644
--- a/packages/ui/components/FormActions.wrn
+++ b/packages/ui/components/FormActions.wrn
@@ -7,5 +7,5 @@ component FormActions {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/GlobalSearch.wrn b/packages/ui/components/GlobalSearch.wrn
index 8ed535b1..9d9c555b 100644
--- a/packages/ui/components/GlobalSearch.wrn
+++ b/packages/ui/components/GlobalSearch.wrn
@@ -9,5 +9,5 @@ component GlobalSearch {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/GradientCTA.wrn b/packages/ui/components/GradientCTA.wrn
index 45c250fc..f1df07ee 100644
--- a/packages/ui/components/GradientCTA.wrn
+++ b/packages/ui/components/GradientCTA.wrn
@@ -7,5 +7,5 @@ component GradientCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/GuideCard.wrn b/packages/ui/components/GuideCard.wrn
index 9faa305a..57fde5ad 100644
--- a/packages/ui/components/GuideCard.wrn
+++ b/packages/ui/components/GuideCard.wrn
@@ -9,5 +9,5 @@ component GuideCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/GuideChecklist.wrn b/packages/ui/components/GuideChecklist.wrn
index afb78f17..30655b0c 100644
--- a/packages/ui/components/GuideChecklist.wrn
+++ b/packages/ui/components/GuideChecklist.wrn
@@ -9,5 +9,5 @@ component GuideChecklist {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/GuideStep.wrn b/packages/ui/components/GuideStep.wrn
index 54cd1728..e9b95ff4 100644
--- a/packages/ui/components/GuideStep.wrn
+++ b/packages/ui/components/GuideStep.wrn
@@ -9,5 +9,5 @@ component GuideStep {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeaderActions.wrn b/packages/ui/components/HeaderActions.wrn
index 26db0c30..6bde395f 100644
--- a/packages/ui/components/HeaderActions.wrn
+++ b/packages/ui/components/HeaderActions.wrn
@@ -7,5 +7,5 @@ component HeaderActions {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeroActions.wrn b/packages/ui/components/HeroActions.wrn
index 708eaeb0..ca1d1b07 100644
--- a/packages/ui/components/HeroActions.wrn
+++ b/packages/ui/components/HeroActions.wrn
@@ -7,5 +7,5 @@ component HeroActions {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeroGradientText.wrn b/packages/ui/components/HeroGradientText.wrn
index 9f54f25c..d277e268 100644
--- a/packages/ui/components/HeroGradientText.wrn
+++ b/packages/ui/components/HeroGradientText.wrn
@@ -9,5 +9,5 @@ component HeroGradientText {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeroPrimaryAction.wrn b/packages/ui/components/HeroPrimaryAction.wrn
index 3e5fedb6..9fdf8f1e 100644
--- a/packages/ui/components/HeroPrimaryAction.wrn
+++ b/packages/ui/components/HeroPrimaryAction.wrn
@@ -7,5 +7,5 @@ component HeroPrimaryAction {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeroProductPreview.wrn b/packages/ui/components/HeroProductPreview.wrn
index 903667f2..da9bb31a 100644
--- a/packages/ui/components/HeroProductPreview.wrn
+++ b/packages/ui/components/HeroProductPreview.wrn
@@ -9,5 +9,5 @@ component HeroProductPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeroSecondaryAction.wrn b/packages/ui/components/HeroSecondaryAction.wrn
index 3682b597..c42ba5d7 100644
--- a/packages/ui/components/HeroSecondaryAction.wrn
+++ b/packages/ui/components/HeroSecondaryAction.wrn
@@ -7,5 +7,5 @@ component HeroSecondaryAction {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HeroTrustText.wrn b/packages/ui/components/HeroTrustText.wrn
index 5ec05c16..3550bb9c 100644
--- a/packages/ui/components/HeroTrustText.wrn
+++ b/packages/ui/components/HeroTrustText.wrn
@@ -9,5 +9,5 @@ component HeroTrustText {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HighlightText.wrn b/packages/ui/components/HighlightText.wrn
index 43750dab..872ce24c 100644
--- a/packages/ui/components/HighlightText.wrn
+++ b/packages/ui/components/HighlightText.wrn
@@ -9,5 +9,5 @@ component HighlightText {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HolidayCalendar.wrn b/packages/ui/components/HolidayCalendar.wrn
index 299934b1..7c0fb8ee 100644
--- a/packages/ui/components/HolidayCalendar.wrn
+++ b/packages/ui/components/HolidayCalendar.wrn
@@ -9,5 +9,5 @@ component HolidayCalendar {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/HumanApprovalStep.wrn b/packages/ui/components/HumanApprovalStep.wrn
index 900eebb4..cc865e21 100644
--- a/packages/ui/components/HumanApprovalStep.wrn
+++ b/packages/ui/components/HumanApprovalStep.wrn
@@ -9,5 +9,5 @@ component HumanApprovalStep {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Icon.wrn b/packages/ui/components/Icon.wrn
index d6123ded..3cb40b0a 100644
--- a/packages/ui/components/Icon.wrn
+++ b/packages/ui/components/Icon.wrn
@@ -9,5 +9,5 @@ component Icon {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Illustration.wrn b/packages/ui/components/Illustration.wrn
index c9cf28f9..466b378b 100644
--- a/packages/ui/components/Illustration.wrn
+++ b/packages/ui/components/Illustration.wrn
@@ -9,5 +9,5 @@ component Illustration {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ImageCompressionPreview.wrn b/packages/ui/components/ImageCompressionPreview.wrn
index 000bbf22..123877e6 100644
--- a/packages/ui/components/ImageCompressionPreview.wrn
+++ b/packages/ui/components/ImageCompressionPreview.wrn
@@ -9,5 +9,5 @@ component ImageCompressionPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ImageUpload.wrn b/packages/ui/components/ImageUpload.wrn
index bb300e60..4ddd8374 100644
--- a/packages/ui/components/ImageUpload.wrn
+++ b/packages/ui/components/ImageUpload.wrn
@@ -9,5 +9,5 @@ component ImageUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/IncidentCard.wrn b/packages/ui/components/IncidentCard.wrn
index 15b8456c..c0410d86 100644
--- a/packages/ui/components/IncidentCard.wrn
+++ b/packages/ui/components/IncidentCard.wrn
@@ -9,5 +9,5 @@ component IncidentCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/InvoiceLineItem.wrn b/packages/ui/components/InvoiceLineItem.wrn
index eb691526..5bfa739e 100644
--- a/packages/ui/components/InvoiceLineItem.wrn
+++ b/packages/ui/components/InvoiceLineItem.wrn
@@ -9,5 +9,5 @@ component InvoiceLineItem {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/InvoiceSummary.wrn b/packages/ui/components/InvoiceSummary.wrn
index f898bc76..1de0700f 100644
--- a/packages/ui/components/InvoiceSummary.wrn
+++ b/packages/ui/components/InvoiceSummary.wrn
@@ -9,5 +9,5 @@ component InvoiceSummary {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/JobCard.wrn b/packages/ui/components/JobCard.wrn
index a13bf2b4..f3b76c9a 100644
--- a/packages/ui/components/JobCard.wrn
+++ b/packages/ui/components/JobCard.wrn
@@ -9,5 +9,5 @@ component JobCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/JsonViewer.wrn b/packages/ui/components/JsonViewer.wrn
index 98bcd0db..6cf7a2c1 100644
--- a/packages/ui/components/JsonViewer.wrn
+++ b/packages/ui/components/JsonViewer.wrn
@@ -9,5 +9,5 @@ component JsonViewer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/KycDocumentUpload.wrn b/packages/ui/components/KycDocumentUpload.wrn
index ecda9424..3d26f7b5 100644
--- a/packages/ui/components/KycDocumentUpload.wrn
+++ b/packages/ui/components/KycDocumentUpload.wrn
@@ -9,5 +9,5 @@ component KycDocumentUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/LanguageSwitcher.wrn b/packages/ui/components/LanguageSwitcher.wrn
index 5b0599d8..d2eaed7e 100644
--- a/packages/ui/components/LanguageSwitcher.wrn
+++ b/packages/ui/components/LanguageSwitcher.wrn
@@ -9,5 +9,5 @@ component LanguageSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/LegalContactBlock.wrn b/packages/ui/components/LegalContactBlock.wrn
index a525ebf0..1a9831ad 100644
--- a/packages/ui/components/LegalContactBlock.wrn
+++ b/packages/ui/components/LegalContactBlock.wrn
@@ -9,5 +9,5 @@ component LegalContactBlock {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/LegalPrintButton.wrn b/packages/ui/components/LegalPrintButton.wrn
index 3ffb72c7..c10634c5 100644
--- a/packages/ui/components/LegalPrintButton.wrn
+++ b/packages/ui/components/LegalPrintButton.wrn
@@ -7,5 +7,5 @@ component LegalPrintButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/LegalSummary.wrn b/packages/ui/components/LegalSummary.wrn
index 24b6a3ef..50181ead 100644
--- a/packages/ui/components/LegalSummary.wrn
+++ b/packages/ui/components/LegalSummary.wrn
@@ -9,5 +9,5 @@ component LegalSummary {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/LocalizedRouteLink.wrn b/packages/ui/components/LocalizedRouteLink.wrn
index d35e8944..aa4f9c04 100644
--- a/packages/ui/components/LocalizedRouteLink.wrn
+++ b/packages/ui/components/LocalizedRouteLink.wrn
@@ -7,5 +7,5 @@ component LocalizedRouteLink {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Logo.wrn b/packages/ui/components/Logo.wrn
index 72a2c027..05e7fb91 100644
--- a/packages/ui/components/Logo.wrn
+++ b/packages/ui/components/Logo.wrn
@@ -9,5 +9,5 @@ component Logo {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/LogoUpload.wrn b/packages/ui/components/LogoUpload.wrn
index 3926d10b..68d901c6 100644
--- a/packages/ui/components/LogoUpload.wrn
+++ b/packages/ui/components/LogoUpload.wrn
@@ -9,5 +9,5 @@ component LogoUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MaintenanceCard.wrn b/packages/ui/components/MaintenanceCard.wrn
index a059041a..f1ec2682 100644
--- a/packages/ui/components/MaintenanceCard.wrn
+++ b/packages/ui/components/MaintenanceCard.wrn
@@ -9,5 +9,5 @@ component MaintenanceCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MaintenancePage.wrn b/packages/ui/components/MaintenancePage.wrn
index 187824fb..be54ebf7 100644
--- a/packages/ui/components/MaintenancePage.wrn
+++ b/packages/ui/components/MaintenancePage.wrn
@@ -9,5 +9,5 @@ component MaintenancePage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MessageComposer.wrn b/packages/ui/components/MessageComposer.wrn
index 641f447c..363b24e5 100644
--- a/packages/ui/components/MessageComposer.wrn
+++ b/packages/ui/components/MessageComposer.wrn
@@ -9,5 +9,5 @@ component MessageComposer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MessageComposerPreview.wrn b/packages/ui/components/MessageComposerPreview.wrn
index 1fa56c8f..7a932470 100644
--- a/packages/ui/components/MessageComposerPreview.wrn
+++ b/packages/ui/components/MessageComposerPreview.wrn
@@ -9,5 +9,5 @@ component MessageComposerPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MessagePreview.wrn b/packages/ui/components/MessagePreview.wrn
index 47cafcf9..8b5aa348 100644
--- a/packages/ui/components/MessagePreview.wrn
+++ b/packages/ui/components/MessagePreview.wrn
@@ -9,5 +9,5 @@ component MessagePreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MessageVolumeSlider.wrn b/packages/ui/components/MessageVolumeSlider.wrn
index bd9f3a4a..24450718 100644
--- a/packages/ui/components/MessageVolumeSlider.wrn
+++ b/packages/ui/components/MessageVolumeSlider.wrn
@@ -9,5 +9,5 @@ component MessageVolumeSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MetricCard.wrn b/packages/ui/components/MetricCard.wrn
index dc9f82a6..65cc2f20 100644
--- a/packages/ui/components/MetricCard.wrn
+++ b/packages/ui/components/MetricCard.wrn
@@ -9,5 +9,5 @@ component MetricCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MobileMenuButton.wrn b/packages/ui/components/MobileMenuButton.wrn
index 2ff988f4..530e53b2 100644
--- a/packages/ui/components/MobileMenuButton.wrn
+++ b/packages/ui/components/MobileMenuButton.wrn
@@ -7,5 +7,5 @@ component MobileMenuButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MobileTableCard.wrn b/packages/ui/components/MobileTableCard.wrn
index 877aff18..5041a401 100644
--- a/packages/ui/components/MobileTableCard.wrn
+++ b/packages/ui/components/MobileTableCard.wrn
@@ -9,5 +9,5 @@ component MobileTableCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/MultiFileUpload.wrn b/packages/ui/components/MultiFileUpload.wrn
index 02757e41..ca495a49 100644
--- a/packages/ui/components/MultiFileUpload.wrn
+++ b/packages/ui/components/MultiFileUpload.wrn
@@ -9,5 +9,5 @@ component MultiFileUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/NavigationItem.wrn b/packages/ui/components/NavigationItem.wrn
index f2ea7812..100702d9 100644
--- a/packages/ui/components/NavigationItem.wrn
+++ b/packages/ui/components/NavigationItem.wrn
@@ -9,5 +9,5 @@ component NavigationItem {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/NewsletterCTA.wrn b/packages/ui/components/NewsletterCTA.wrn
index 67159e1b..be6021ff 100644
--- a/packages/ui/components/NewsletterCTA.wrn
+++ b/packages/ui/components/NewsletterCTA.wrn
@@ -7,5 +7,5 @@ component NewsletterCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/NotFoundPage.wrn b/packages/ui/components/NotFoundPage.wrn
index 8ee30ab4..4caee5a9 100644
--- a/packages/ui/components/NotFoundPage.wrn
+++ b/packages/ui/components/NotFoundPage.wrn
@@ -9,5 +9,5 @@ component NotFoundPage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/OfficeCard.wrn b/packages/ui/components/OfficeCard.wrn
index f99cfbbd..c3d2e77b 100644
--- a/packages/ui/components/OfficeCard.wrn
+++ b/packages/ui/components/OfficeCard.wrn
@@ -9,5 +9,5 @@ component OfficeCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/OfflinePage.wrn b/packages/ui/components/OfflinePage.wrn
index 2843fc2f..007a272f 100644
--- a/packages/ui/components/OfflinePage.wrn
+++ b/packages/ui/components/OfflinePage.wrn
@@ -9,5 +9,5 @@ component OfflinePage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/OneTimeSecretDisplay.wrn b/packages/ui/components/OneTimeSecretDisplay.wrn
index b29bbe12..8cbf0b90 100644
--- a/packages/ui/components/OneTimeSecretDisplay.wrn
+++ b/packages/ui/components/OneTimeSecretDisplay.wrn
@@ -9,5 +9,5 @@ component OneTimeSecretDisplay {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/OpacitySlider.wrn b/packages/ui/components/OpacitySlider.wrn
index 254b8368..b1d725d7 100644
--- a/packages/ui/components/OpacitySlider.wrn
+++ b/packages/ui/components/OpacitySlider.wrn
@@ -9,5 +9,5 @@ component OpacitySlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/OpenAPICTA.wrn b/packages/ui/components/OpenAPICTA.wrn
index 2ad977f9..2a01aabf 100644
--- a/packages/ui/components/OpenAPICTA.wrn
+++ b/packages/ui/components/OpenAPICTA.wrn
@@ -7,5 +7,5 @@ component OpenAPICTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/OtpVerificationForm.wrn b/packages/ui/components/OtpVerificationForm.wrn
index 5d969440..6c2635ef 100644
--- a/packages/ui/components/OtpVerificationForm.wrn
+++ b/packages/ui/components/OtpVerificationForm.wrn
@@ -9,5 +9,5 @@ component OtpVerificationForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PartnerApplicationForm.wrn b/packages/ui/components/PartnerApplicationForm.wrn
index 20c1ba63..1ba11f0b 100644
--- a/packages/ui/components/PartnerApplicationForm.wrn
+++ b/packages/ui/components/PartnerApplicationForm.wrn
@@ -9,5 +9,5 @@ component PartnerApplicationForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PartnerProgramCard.wrn b/packages/ui/components/PartnerProgramCard.wrn
index 4615780b..82d4fb92 100644
--- a/packages/ui/components/PartnerProgramCard.wrn
+++ b/packages/ui/components/PartnerProgramCard.wrn
@@ -9,5 +9,5 @@ component PartnerProgramCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PasskeyButton.wrn b/packages/ui/components/PasskeyButton.wrn
index 2f67bdd2..302e2ca3 100644
--- a/packages/ui/components/PasskeyButton.wrn
+++ b/packages/ui/components/PasskeyButton.wrn
@@ -1,11 +1,28 @@
 component PasskeyButton {
   props {
-    label = "Action"
+    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 {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> }
+  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"><span class="icon-[lucide--fingerprint] size-6" aria-hidden="true"></span></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>
+          <span class="icon-[lucide--arrow-right] wire-auth-action__arrow" aria-hidden="true"></span>
+        </a>
+      {:else}
+        <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
+          <span class="wire-auth-action__icon"><span class="icon-[lucide--fingerprint] size-6" aria-hidden="true"></span></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>
+          <span class="icon-[lucide--arrow-right] wire-auth-action__arrow" aria-hidden="true"></span>
+        </button>
+      {/if}
+    </span>
+  }
 }
diff --git a/packages/ui/components/PasswordInput.wrn b/packages/ui/components/PasswordInput.wrn
index c46b6daa..f4430383 100644
--- a/packages/ui/components/PasswordInput.wrn
+++ b/packages/ui/components/PasswordInput.wrn
@@ -1,24 +1,32 @@
 component PasswordInput {
   props {
     class = ""
-    id = ""
-    name = ""
+    id = "password"
+    name = "password"
     label = "Password"
     value = ""
-    placeholder = ""
+    placeholder = "Enter your password"
     help = ""
     error = ""
     required = false
     disabled = false
     readonly = false
-    autocomplete = ""
+    autocomplete = "current-password"
+    revealable = true
   }
+
+  state visible = false
+
   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="password" 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 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>
   }
 }
diff --git a/packages/ui/components/PaymentMethodCard.wrn b/packages/ui/components/PaymentMethodCard.wrn
index b22f7274..0bb1a4c8 100644
--- a/packages/ui/components/PaymentMethodCard.wrn
+++ b/packages/ui/components/PaymentMethodCard.wrn
@@ -9,5 +9,5 @@ component PaymentMethodCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PdfPreview.wrn b/packages/ui/components/PdfPreview.wrn
index 6b4e805b..ab11d701 100644
--- a/packages/ui/components/PdfPreview.wrn
+++ b/packages/ui/components/PdfPreview.wrn
@@ -9,5 +9,5 @@ component PdfPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PlanCTA.wrn b/packages/ui/components/PlanCTA.wrn
index a70b9335..335e4dd7 100644
--- a/packages/ui/components/PlanCTA.wrn
+++ b/packages/ui/components/PlanCTA.wrn
@@ -7,5 +7,5 @@ component PlanCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PlatformPillarCard.wrn b/packages/ui/components/PlatformPillarCard.wrn
index b3b45988..15c71388 100644
--- a/packages/ui/components/PlatformPillarCard.wrn
+++ b/packages/ui/components/PlatformPillarCard.wrn
@@ -9,5 +9,5 @@ component PlatformPillarCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PostmanCTA.wrn b/packages/ui/components/PostmanCTA.wrn
index 27b3d6aa..4bd53e2d 100644
--- a/packages/ui/components/PostmanCTA.wrn
+++ b/packages/ui/components/PostmanCTA.wrn
@@ -7,5 +7,5 @@ component PostmanCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PressReleaseCard.wrn b/packages/ui/components/PressReleaseCard.wrn
index ce5b91ac..37e73f47 100644
--- a/packages/ui/components/PressReleaseCard.wrn
+++ b/packages/ui/components/PressReleaseCard.wrn
@@ -9,5 +9,5 @@ component PressReleaseCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PriceRangeSlider.wrn b/packages/ui/components/PriceRangeSlider.wrn
index 98237bf5..c810af4e 100644
--- a/packages/ui/components/PriceRangeSlider.wrn
+++ b/packages/ui/components/PriceRangeSlider.wrn
@@ -9,5 +9,5 @@ component PriceRangeSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PricingCard.wrn b/packages/ui/components/PricingCard.wrn
index 4577cd45..fddb5f60 100644
--- a/packages/ui/components/PricingCard.wrn
+++ b/packages/ui/components/PricingCard.wrn
@@ -9,5 +9,5 @@ component PricingCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PricingContactForm.wrn b/packages/ui/components/PricingContactForm.wrn
index f54e6e1e..2b845fab 100644
--- a/packages/ui/components/PricingContactForm.wrn
+++ b/packages/ui/components/PricingContactForm.wrn
@@ -9,5 +9,5 @@ component PricingContactForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PrintAction.wrn b/packages/ui/components/PrintAction.wrn
index 3944cb54..a7b6f5c0 100644
--- a/packages/ui/components/PrintAction.wrn
+++ b/packages/ui/components/PrintAction.wrn
@@ -7,5 +7,5 @@ component PrintAction {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PrintPolicyButton.wrn b/packages/ui/components/PrintPolicyButton.wrn
index 06cb3b04..40faf05e 100644
--- a/packages/ui/components/PrintPolicyButton.wrn
+++ b/packages/ui/components/PrintPolicyButton.wrn
@@ -7,5 +7,5 @@ component PrintPolicyButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProductCTA.wrn b/packages/ui/components/ProductCTA.wrn
index ca3b16fd..e852e0a9 100644
--- a/packages/ui/components/ProductCTA.wrn
+++ b/packages/ui/components/ProductCTA.wrn
@@ -7,5 +7,5 @@ component ProductCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProductIcon.wrn b/packages/ui/components/ProductIcon.wrn
index fab9d96c..e1a09cc3 100644
--- a/packages/ui/components/ProductIcon.wrn
+++ b/packages/ui/components/ProductIcon.wrn
@@ -9,5 +9,5 @@ component ProductIcon {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProductLogo.wrn b/packages/ui/components/ProductLogo.wrn
index 2b331577..60467865 100644
--- a/packages/ui/components/ProductLogo.wrn
+++ b/packages/ui/components/ProductLogo.wrn
@@ -9,5 +9,5 @@ component ProductLogo {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProductMiniCard.wrn b/packages/ui/components/ProductMiniCard.wrn
index c80c5724..69e298e2 100644
--- a/packages/ui/components/ProductMiniCard.wrn
+++ b/packages/ui/components/ProductMiniCard.wrn
@@ -9,5 +9,5 @@ component ProductMiniCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProductNavigationCard.wrn b/packages/ui/components/ProductNavigationCard.wrn
index acf98501..0d17fb86 100644
--- a/packages/ui/components/ProductNavigationCard.wrn
+++ b/packages/ui/components/ProductNavigationCard.wrn
@@ -9,5 +9,5 @@ component ProductNavigationCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProgressSlider.wrn b/packages/ui/components/ProgressSlider.wrn
index a9dfcbcb..58b14dcb 100644
--- a/packages/ui/components/ProgressSlider.wrn
+++ b/packages/ui/components/ProgressSlider.wrn
@@ -9,5 +9,5 @@ component ProgressSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ProjectSwitcher.wrn b/packages/ui/components/ProjectSwitcher.wrn
index 2253dbc2..4702a2b4 100644
--- a/packages/ui/components/ProjectSwitcher.wrn
+++ b/packages/ui/components/ProjectSwitcher.wrn
@@ -9,5 +9,5 @@ component ProjectSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PublicHeaderLogo.wrn b/packages/ui/components/PublicHeaderLogo.wrn
index 314ef363..6c857ae8 100644
--- a/packages/ui/components/PublicHeaderLogo.wrn
+++ b/packages/ui/components/PublicHeaderLogo.wrn
@@ -9,5 +9,5 @@ component PublicHeaderLogo {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/PushComposer.wrn b/packages/ui/components/PushComposer.wrn
index e3155e10..601ac0e4 100644
--- a/packages/ui/components/PushComposer.wrn
+++ b/packages/ui/components/PushComposer.wrn
@@ -9,5 +9,5 @@ component PushComposer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/QrCode.wrn b/packages/ui/components/QrCode.wrn
index 03f7c772..02a3d04d 100644
--- a/packages/ui/components/QrCode.wrn
+++ b/packages/ui/components/QrCode.wrn
@@ -9,5 +9,5 @@ component QrCode {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/QuantityStepper.wrn b/packages/ui/components/QuantityStepper.wrn
index edda8783..4b43430e 100644
--- a/packages/ui/components/QuantityStepper.wrn
+++ b/packages/ui/components/QuantityStepper.wrn
@@ -9,5 +9,5 @@ component QuantityStepper {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RangeSlider.wrn b/packages/ui/components/RangeSlider.wrn
index 35603684..a5b7517d 100644
--- a/packages/ui/components/RangeSlider.wrn
+++ b/packages/ui/components/RangeSlider.wrn
@@ -9,5 +9,5 @@ component RangeSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RateLimitPage.wrn b/packages/ui/components/RateLimitPage.wrn
index a6c616cb..f90235b6 100644
--- a/packages/ui/components/RateLimitPage.wrn
+++ b/packages/ui/components/RateLimitPage.wrn
@@ -9,5 +9,5 @@ component RateLimitPage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RatingSlider.wrn b/packages/ui/components/RatingSlider.wrn
index c11d1244..9c8eaebe 100644
--- a/packages/ui/components/RatingSlider.wrn
+++ b/packages/ui/components/RatingSlider.wrn
@@ -9,5 +9,5 @@ component RatingSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RecoveryCodeForm.wrn b/packages/ui/components/RecoveryCodeForm.wrn
index 6143ca51..884062e8 100644
--- a/packages/ui/components/RecoveryCodeForm.wrn
+++ b/packages/ui/components/RecoveryCodeForm.wrn
@@ -9,5 +9,5 @@ component RecoveryCodeForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RecurrenceRuleBuilder.wrn b/packages/ui/components/RecurrenceRuleBuilder.wrn
index 02b22531..b77ed077 100644
--- a/packages/ui/components/RecurrenceRuleBuilder.wrn
+++ b/packages/ui/components/RecurrenceRuleBuilder.wrn
@@ -9,5 +9,5 @@ component RecurrenceRuleBuilder {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RejectOptionalCookiesButton.wrn b/packages/ui/components/RejectOptionalCookiesButton.wrn
index 96481ae6..78e29b4e 100644
--- a/packages/ui/components/RejectOptionalCookiesButton.wrn
+++ b/packages/ui/components/RejectOptionalCookiesButton.wrn
@@ -7,5 +7,5 @@ component RejectOptionalCookiesButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ReopenCookieSettingsButton.wrn b/packages/ui/components/ReopenCookieSettingsButton.wrn
index f7858ae3..8a9959ad 100644
--- a/packages/ui/components/ReopenCookieSettingsButton.wrn
+++ b/packages/ui/components/ReopenCookieSettingsButton.wrn
@@ -7,5 +7,5 @@ component ReopenCookieSettingsButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ReportCard.wrn b/packages/ui/components/ReportCard.wrn
index 98c2029d..84721dc0 100644
--- a/packages/ui/components/ReportCard.wrn
+++ b/packages/ui/components/ReportCard.wrn
@@ -9,5 +9,5 @@ component ReportCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RequestResponseViewer.wrn b/packages/ui/components/RequestResponseViewer.wrn
index 6917ae03..06383d12 100644
--- a/packages/ui/components/RequestResponseViewer.wrn
+++ b/packages/ui/components/RequestResponseViewer.wrn
@@ -9,5 +9,5 @@ component RequestResponseViewer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/RequestViewer.wrn b/packages/ui/components/RequestViewer.wrn
index c7fc4b30..32531ac7 100644
--- a/packages/ui/components/RequestViewer.wrn
+++ b/packages/ui/components/RequestViewer.wrn
@@ -9,5 +9,5 @@ component RequestViewer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ResetPasswordForm.wrn b/packages/ui/components/ResetPasswordForm.wrn
index ff705fa3..a2bcaccc 100644
--- a/packages/ui/components/ResetPasswordForm.wrn
+++ b/packages/ui/components/ResetPasswordForm.wrn
@@ -9,5 +9,5 @@ component ResetPasswordForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ResourceCard.wrn b/packages/ui/components/ResourceCard.wrn
index f5fbf36a..1b9de0fb 100644
--- a/packages/ui/components/ResourceCard.wrn
+++ b/packages/ui/components/ResourceCard.wrn
@@ -9,5 +9,5 @@ component ResourceCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ResourceDownloadCard.wrn b/packages/ui/components/ResourceDownloadCard.wrn
index baa27775..4cf3bf02 100644
--- a/packages/ui/components/ResourceDownloadCard.wrn
+++ b/packages/ui/components/ResourceDownloadCard.wrn
@@ -9,5 +9,5 @@ component ResourceDownloadCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ResourceSearch.wrn b/packages/ui/components/ResourceSearch.wrn
index 4be0f39e..2277b9da 100644
--- a/packages/ui/components/ResourceSearch.wrn
+++ b/packages/ui/components/ResourceSearch.wrn
@@ -9,5 +9,5 @@ component ResourceSearch {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ResponseViewer.wrn b/packages/ui/components/ResponseViewer.wrn
index cab04fbc..30a92d7c 100644
--- a/packages/ui/components/ResponseViewer.wrn
+++ b/packages/ui/components/ResponseViewer.wrn
@@ -9,5 +9,5 @@ component ResponseViewer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ResponsibleDisclosureCTA.wrn b/packages/ui/components/ResponsibleDisclosureCTA.wrn
index ba4c3de2..0b823cb2 100644
--- a/packages/ui/components/ResponsibleDisclosureCTA.wrn
+++ b/packages/ui/components/ResponsibleDisclosureCTA.wrn
@@ -7,5 +7,5 @@ component ResponsibleDisclosureCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SDKCard.wrn b/packages/ui/components/SDKCard.wrn
index 59009e25..215e3103 100644
--- a/packages/ui/components/SDKCard.wrn
+++ b/packages/ui/components/SDKCard.wrn
@@ -9,5 +9,5 @@ component SDKCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SDKLanguageTabs.wrn b/packages/ui/components/SDKLanguageTabs.wrn
index 994e27ae..f95d40b2 100644
--- a/packages/ui/components/SDKLanguageTabs.wrn
+++ b/packages/ui/components/SDKLanguageTabs.wrn
@@ -9,5 +9,5 @@ component SDKLanguageTabs {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SaveCookiePreferencesButton.wrn b/packages/ui/components/SaveCookiePreferencesButton.wrn
index c83edbb2..b38f2961 100644
--- a/packages/ui/components/SaveCookiePreferencesButton.wrn
+++ b/packages/ui/components/SaveCookiePreferencesButton.wrn
@@ -7,5 +7,5 @@ component SaveCookiePreferencesButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SearchButton.wrn b/packages/ui/components/SearchButton.wrn
index 2debfcae..36a45fec 100644
--- a/packages/ui/components/SearchButton.wrn
+++ b/packages/ui/components/SearchButton.wrn
@@ -7,5 +7,5 @@ component SearchButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SearchCategoryTabs.wrn b/packages/ui/components/SearchCategoryTabs.wrn
index 91ab30a1..25c4abc5 100644
--- a/packages/ui/components/SearchCategoryTabs.wrn
+++ b/packages/ui/components/SearchCategoryTabs.wrn
@@ -9,5 +9,5 @@ component SearchCategoryTabs {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SearchResultItem.wrn b/packages/ui/components/SearchResultItem.wrn
index 0e836112..443b72c4 100644
--- a/packages/ui/components/SearchResultItem.wrn
+++ b/packages/ui/components/SearchResultItem.wrn
@@ -9,5 +9,5 @@ component SearchResultItem {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SecretDisplay.wrn b/packages/ui/components/SecretDisplay.wrn
index f9cfb61e..0195d982 100644
--- a/packages/ui/components/SecretDisplay.wrn
+++ b/packages/ui/components/SecretDisplay.wrn
@@ -9,5 +9,5 @@ component SecretDisplay {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SecurityContactCard.wrn b/packages/ui/components/SecurityContactCard.wrn
index 11d70bf9..59b4c5b4 100644
--- a/packages/ui/components/SecurityContactCard.wrn
+++ b/packages/ui/components/SecurityContactCard.wrn
@@ -9,5 +9,5 @@ component SecurityContactCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SecurityFeatureCard.wrn b/packages/ui/components/SecurityFeatureCard.wrn
index d1fa097e..1c83a8df 100644
--- a/packages/ui/components/SecurityFeatureCard.wrn
+++ b/packages/ui/components/SecurityFeatureCard.wrn
@@ -9,5 +9,5 @@ component SecurityFeatureCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SecurityReportForm.wrn b/packages/ui/components/SecurityReportForm.wrn
index f92a654f..b94dbd1a 100644
--- a/packages/ui/components/SecurityReportForm.wrn
+++ b/packages/ui/components/SecurityReportForm.wrn
@@ -9,5 +9,5 @@ component SecurityReportForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ServerErrorPage.wrn b/packages/ui/components/ServerErrorPage.wrn
index c7ea335a..b83167dc 100644
--- a/packages/ui/components/ServerErrorPage.wrn
+++ b/packages/ui/components/ServerErrorPage.wrn
@@ -9,5 +9,5 @@ component ServerErrorPage {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SessionCard.wrn b/packages/ui/components/SessionCard.wrn
index 9a7ca774..6853a7f2 100644
--- a/packages/ui/components/SessionCard.wrn
+++ b/packages/ui/components/SessionCard.wrn
@@ -9,5 +9,5 @@ component SessionCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SetupChecklist.wrn b/packages/ui/components/SetupChecklist.wrn
index e30e8f24..56336e91 100644
--- a/packages/ui/components/SetupChecklist.wrn
+++ b/packages/ui/components/SetupChecklist.wrn
@@ -9,5 +9,5 @@ component SetupChecklist {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ShareAction.wrn b/packages/ui/components/ShareAction.wrn
index 0cbc2d80..a15c143b 100644
--- a/packages/ui/components/ShareAction.wrn
+++ b/packages/ui/components/ShareAction.wrn
@@ -7,5 +7,5 @@ component ShareAction {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SignInForm.wrn b/packages/ui/components/SignInForm.wrn
index d15a848a..86c32145 100644
--- a/packages/ui/components/SignInForm.wrn
+++ b/packages/ui/components/SignInForm.wrn
@@ -9,5 +9,5 @@ component SignInForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SignInLink.wrn b/packages/ui/components/SignInLink.wrn
index 237291c2..699c2b90 100644
--- a/packages/ui/components/SignInLink.wrn
+++ b/packages/ui/components/SignInLink.wrn
@@ -1,11 +1,29 @@
 component SignInLink {
   props {
-    label = "Action"
+    label = "Sign in with password"
+    description = "Use your username or email and password"
     href = ""
     type = "button"
-    variant = "primary"
+    variant = "secondary"
     disabled = false
+    icon = "icon-[lucide--lock-keyhole]"
     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> }
+  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"><span class="{icon} size-5" aria-hidden="true"></span></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>
+          <span class="icon-[lucide--chevron-right] wire-auth-action__arrow" aria-hidden="true"></span>
+        </a>
+      {:else}
+        <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
+          <span class="wire-auth-action__icon"><span class="{icon} size-5" aria-hidden="true"></span></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>
+          <span class="icon-[lucide--chevron-right] wire-auth-action__arrow" aria-hidden="true"></span>
+        </button>
+      {/if}
+    </span>
+  }
 }
diff --git a/packages/ui/components/SignUpForm.wrn b/packages/ui/components/SignUpForm.wrn
index 10dbe8f7..8d0f8c3b 100644
--- a/packages/ui/components/SignUpForm.wrn
+++ b/packages/ui/components/SignUpForm.wrn
@@ -9,5 +9,5 @@ component SignUpForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SiteSearch.wrn b/packages/ui/components/SiteSearch.wrn
index b33615f4..108cc320 100644
--- a/packages/ui/components/SiteSearch.wrn
+++ b/packages/ui/components/SiteSearch.wrn
@@ -9,5 +9,5 @@ component SiteSearch {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SkipLink.wrn b/packages/ui/components/SkipLink.wrn
index 9be4cdf7..ec7e55eb 100644
--- a/packages/ui/components/SkipLink.wrn
+++ b/packages/ui/components/SkipLink.wrn
@@ -7,5 +7,5 @@ component SkipLink {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Slider.wrn b/packages/ui/components/Slider.wrn
index 664cd45d..da39f7ff 100644
--- a/packages/ui/components/Slider.wrn
+++ b/packages/ui/components/Slider.wrn
@@ -9,5 +9,5 @@ component Slider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SmsComposer.wrn b/packages/ui/components/SmsComposer.wrn
index 3f4ac7ce..72965025 100644
--- a/packages/ui/components/SmsComposer.wrn
+++ b/packages/ui/components/SmsComposer.wrn
@@ -9,5 +9,5 @@ component SmsComposer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SplitButton.wrn b/packages/ui/components/SplitButton.wrn
index fb71da40..a64a924d 100644
--- a/packages/ui/components/SplitButton.wrn
+++ b/packages/ui/components/SplitButton.wrn
@@ -7,5 +7,5 @@ component SplitButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SplitCTA.wrn b/packages/ui/components/SplitCTA.wrn
index b15725c4..72f2c2cc 100644
--- a/packages/ui/components/SplitCTA.wrn
+++ b/packages/ui/components/SplitCTA.wrn
@@ -7,5 +7,5 @@ component SplitCTA {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/StartFreeButton.wrn b/packages/ui/components/StartFreeButton.wrn
index 37556ef8..2004690c 100644
--- a/packages/ui/components/StartFreeButton.wrn
+++ b/packages/ui/components/StartFreeButton.wrn
@@ -7,5 +7,5 @@ component StartFreeButton {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/StatusSubscribeForm.wrn b/packages/ui/components/StatusSubscribeForm.wrn
index bcae7f8b..8720f0b3 100644
--- a/packages/ui/components/StatusSubscribeForm.wrn
+++ b/packages/ui/components/StatusSubscribeForm.wrn
@@ -9,5 +9,5 @@ component StatusSubscribeForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Stepper.wrn b/packages/ui/components/Stepper.wrn
index c336abca..2f74d729 100644
--- a/packages/ui/components/Stepper.wrn
+++ b/packages/ui/components/Stepper.wrn
@@ -9,5 +9,5 @@ component Stepper {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/SupportRequestForm.wrn b/packages/ui/components/SupportRequestForm.wrn
index 287d8fdd..3cf42b46 100644
--- a/packages/ui/components/SupportRequestForm.wrn
+++ b/packages/ui/components/SupportRequestForm.wrn
@@ -9,5 +9,5 @@ component SupportRequestForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TeamMemberCard.wrn b/packages/ui/components/TeamMemberCard.wrn
index 92d85b0c..e7d96db8 100644
--- a/packages/ui/components/TeamMemberCard.wrn
+++ b/packages/ui/components/TeamMemberCard.wrn
@@ -9,5 +9,5 @@ component TeamMemberCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TerminalBlock.wrn b/packages/ui/components/TerminalBlock.wrn
index 7f90e0a6..54043019 100644
--- a/packages/ui/components/TerminalBlock.wrn
+++ b/packages/ui/components/TerminalBlock.wrn
@@ -9,5 +9,5 @@ component TerminalBlock {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TestimonialCarousel.wrn b/packages/ui/components/TestimonialCarousel.wrn
index 62baf0c1..01bd0721 100644
--- a/packages/ui/components/TestimonialCarousel.wrn
+++ b/packages/ui/components/TestimonialCarousel.wrn
@@ -9,5 +9,5 @@ component TestimonialCarousel {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TextLink.wrn b/packages/ui/components/TextLink.wrn
index 47bbe159..85bd38bd 100644
--- a/packages/ui/components/TextLink.wrn
+++ b/packages/ui/components/TextLink.wrn
@@ -7,5 +7,5 @@ component TextLink {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ThemeSwitcher.wrn b/packages/ui/components/ThemeSwitcher.wrn
index 4c57749b..882397ce 100644
--- a/packages/ui/components/ThemeSwitcher.wrn
+++ b/packages/ui/components/ThemeSwitcher.wrn
@@ -9,5 +9,5 @@ component ThemeSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ToastAction.wrn b/packages/ui/components/ToastAction.wrn
index 1ff95eea..816fc95d 100644
--- a/packages/ui/components/ToastAction.wrn
+++ b/packages/ui/components/ToastAction.wrn
@@ -7,5 +7,5 @@ component ToastAction {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ToastIcon.wrn b/packages/ui/components/ToastIcon.wrn
index b2c0ff80..a60a6800 100644
--- a/packages/ui/components/ToastIcon.wrn
+++ b/packages/ui/components/ToastIcon.wrn
@@ -9,5 +9,5 @@ component ToastIcon {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TotpVerificationForm.wrn b/packages/ui/components/TotpVerificationForm.wrn
index a1f50e07..f6d8d8a4 100644
--- a/packages/ui/components/TotpVerificationForm.wrn
+++ b/packages/ui/components/TotpVerificationForm.wrn
@@ -9,5 +9,5 @@ component TotpVerificationForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TranslatedText.wrn b/packages/ui/components/TranslatedText.wrn
index 5a2dffd9..477cce79 100644
--- a/packages/ui/components/TranslatedText.wrn
+++ b/packages/ui/components/TranslatedText.wrn
@@ -9,5 +9,5 @@ component TranslatedText {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/TruncatedText.wrn b/packages/ui/components/TruncatedText.wrn
index 60068ab1..5dcc0be5 100644
--- a/packages/ui/components/TruncatedText.wrn
+++ b/packages/ui/components/TruncatedText.wrn
@@ -9,5 +9,5 @@ component TruncatedText {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/UploadItem.wrn b/packages/ui/components/UploadItem.wrn
index 10f5d98a..81ceb207 100644
--- a/packages/ui/components/UploadItem.wrn
+++ b/packages/ui/components/UploadItem.wrn
@@ -9,5 +9,5 @@ component UploadItem {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/UploadPreview.wrn b/packages/ui/components/UploadPreview.wrn
index e5b99d45..79013b80 100644
--- a/packages/ui/components/UploadPreview.wrn
+++ b/packages/ui/components/UploadPreview.wrn
@@ -9,5 +9,5 @@ component UploadPreview {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ValueCard.wrn b/packages/ui/components/ValueCard.wrn
index 56c7543c..15a9de30 100644
--- a/packages/ui/components/ValueCard.wrn
+++ b/packages/ui/components/ValueCard.wrn
@@ -9,5 +9,5 @@ component ValueCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/VerticalTabs.wrn b/packages/ui/components/VerticalTabs.wrn
index e3a4a148..e48cbe8f 100644
--- a/packages/ui/components/VerticalTabs.wrn
+++ b/packages/ui/components/VerticalTabs.wrn
@@ -9,5 +9,5 @@ component VerticalTabs {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/VideoCard.wrn b/packages/ui/components/VideoCard.wrn
index 16e2ab47..8a7d2a3e 100644
--- a/packages/ui/components/VideoCard.wrn
+++ b/packages/ui/components/VideoCard.wrn
@@ -9,5 +9,5 @@ component VideoCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/VideoUpload.wrn b/packages/ui/components/VideoUpload.wrn
index b59bf39f..2e058390 100644
--- a/packages/ui/components/VideoUpload.wrn
+++ b/packages/ui/components/VideoUpload.wrn
@@ -9,5 +9,5 @@ component VideoUpload {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/VoiceScriptComposer.wrn b/packages/ui/components/VoiceScriptComposer.wrn
index f8aa2852..ace34f3e 100644
--- a/packages/ui/components/VoiceScriptComposer.wrn
+++ b/packages/ui/components/VoiceScriptComposer.wrn
@@ -9,5 +9,5 @@ component VoiceScriptComposer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/VolumeSlider.wrn b/packages/ui/components/VolumeSlider.wrn
index 10ae4e30..3fe2439b 100644
--- a/packages/ui/components/VolumeSlider.wrn
+++ b/packages/ui/components/VolumeSlider.wrn
@@ -9,5 +9,5 @@ component VolumeSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/WebhookEventCard.wrn b/packages/ui/components/WebhookEventCard.wrn
index 0e1765e3..9a1a5014 100644
--- a/packages/ui/components/WebhookEventCard.wrn
+++ b/packages/ui/components/WebhookEventCard.wrn
@@ -9,5 +9,5 @@ component WebhookEventCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/WebhookPayloadViewer.wrn b/packages/ui/components/WebhookPayloadViewer.wrn
index 734275cd..49be2b1b 100644
--- a/packages/ui/components/WebhookPayloadViewer.wrn
+++ b/packages/ui/components/WebhookPayloadViewer.wrn
@@ -9,5 +9,5 @@ component WebhookPayloadViewer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/WebinarCard.wrn b/packages/ui/components/WebinarCard.wrn
index f91e500d..0320138a 100644
--- a/packages/ui/components/WebinarCard.wrn
+++ b/packages/ui/components/WebinarCard.wrn
@@ -9,5 +9,5 @@ component WebinarCard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/WebinarRegistrationForm.wrn b/packages/ui/components/WebinarRegistrationForm.wrn
index 3ada7509..adb252ca 100644
--- a/packages/ui/components/WebinarRegistrationForm.wrn
+++ b/packages/ui/components/WebinarRegistrationForm.wrn
@@ -9,5 +9,5 @@ component WebinarRegistrationForm {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/WhatsAppComposer.wrn b/packages/ui/components/WhatsAppComposer.wrn
index 42faff4f..9b4d9405 100644
--- a/packages/ui/components/WhatsAppComposer.wrn
+++ b/packages/ui/components/WhatsAppComposer.wrn
@@ -9,5 +9,5 @@ component WhatsAppComposer {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/Wizard.wrn b/packages/ui/components/Wizard.wrn
index 58b2d36d..6198321e 100644
--- a/packages/ui/components/Wizard.wrn
+++ b/packages/ui/components/Wizard.wrn
@@ -9,5 +9,5 @@ component Wizard {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/WorkspaceSwitcher.wrn b/packages/ui/components/WorkspaceSwitcher.wrn
index e5439564..77efce7b 100644
--- a/packages/ui/components/WorkspaceSwitcher.wrn
+++ b/packages/ui/components/WorkspaceSwitcher.wrn
@@ -9,5 +9,5 @@ component WorkspaceSwitcher {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/ZoomSlider.wrn b/packages/ui/components/ZoomSlider.wrn
index 51f7d58e..d2c6aca0 100644
--- a/packages/ui/components/ZoomSlider.wrn
+++ b/packages/ui/components/ZoomSlider.wrn
@@ -9,5 +9,5 @@ component ZoomSlider {
     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> }
+  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> }
 }
diff --git a/packages/ui/components/alert.wrn b/packages/ui/components/alert.wrn
index c675700f..c875e270 100644
--- a/packages/ui/components/alert.wrn
+++ b/packages/ui/components/alert.wrn
@@ -1,43 +1,23 @@
 component Alert {
-    props {
-        class = ""
-        title = "Notice"
-        description = ""
-        variant = "info"
-        dismissible = false
-    }
+  props {
+    class = ""
+    title = "Notice"
+    description = ""
+    variant = "info"
+    dismissible = false
+  }
 
-    state visible = true
+  state visible = true
 
-    view {
-        <div
-            data-show="visible"
-            role="alert"
-            class="flex items-start gap-3 rounded-2xl border p-4 {variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'} {class}"
-        >
-            <div class="min-w-0 flex-1" >
-                <h3 class="font-semibold" >
-                    {title}
-                </h3>
-                <p
-                    data-show="description"
-                    class="mt-1 text-sm opacity-80"
-                >
-                    {description}
-                </p>
-                <div class="mt-2" >
-                    <slot />
-                </div>
-            </div>
-            <button
-                data-show="dismissible"
-                type="button"
-                aria-label="Dismiss"
-                @click="visible = false"
-                class="rounded-lg p-1 hover:bg-black/5"
-            >
-                ×
-            </button>
+  view {
+      <aside data-show="visible" role="alert" class="wire-alert wire-alert--{variant} wire-alert--rich {class}">
+        <span class="wire-alert__icon" aria-hidden="true"></span>
+        <div class="wire-alert__content">
+          {#if title}<h3 class="wire-alert__title">{title}</h3>{/if}
+          {#if description}<p class="wire-alert__body">{description}</p>{/if}
+          <slot />
         </div>
-    }
+        {#if dismissible}<button type="button" aria-label="Dismiss" @click="visible = false" class="wire-alert__dismiss">×</button>{/if}
+      </aside>
+  }
 }
diff --git a/packages/ui/components/button.wrn b/packages/ui/components/button.wrn
index d20ff2a5..f29253c1 100644
--- a/packages/ui/components/button.wrn
+++ b/packages/ui/components/button.wrn
@@ -10,8 +10,9 @@ component Button {
     className = ""
   }
   view {
-    <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
-      <span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+    <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="wire-btn wire-btn--{variant} wire-btn--{size} {className}">
+      {#if loading}<span class="wire-spinner" aria-hidden="true"></span>{/if}
+      {#if icon && !loading}<span class="{icon} size-4" aria-hidden="true"></span>{/if}
       <span>{label}</span>
     </button>
   }
diff --git a/packages/ui/components/card.wrn b/packages/ui/components/card.wrn
index a99a532d..6e69bbc3 100644
--- a/packages/ui/components/card.wrn
+++ b/packages/ui/components/card.wrn
@@ -6,6 +6,6 @@ component Card {
     className = ""
   }
   view {
-    <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}"><slot /></article>
+    <article class="wire-card wire-card--{variant} wire-card--padding-{padding} {interactive ? 'wire-card--interactive' : ''} {className}"><slot /></article>
   }
 }
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 0810520a..7d72e203 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -85,6 +85,8 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toContain(".wire-visually-hidden");
   expect(css).toContain(".wire-catalog-card--channel::before");
   expect(css).toContain(".wire-catalog-card--integration::before");
+  expect(css).toContain('[data-show="false"]');
+  expect(css).toContain("display: none !important");
 });
 
 test("page shells leave background ownership to the page", () => {
diff --git a/packages/ui/ui.css b/packages/ui/ui.css
index 65e36d33..1d9718f3 100644
--- a/packages/ui/ui.css
+++ b/packages/ui/ui.css
@@ -4,6 +4,17 @@
  * Override any of these classes in your own CSS (it loads after ui.css).
  */
 
+/* SSR visibility fallback. The reactive runtime also manages `data-show`, but
+ * server-rendered components must not flash or permanently expose inactive
+ * branches before hydration (for example an action's link and button at once). */
+[data-show=""],
+[data-show="false"],
+[data-show="0"],
+[data-show="null"],
+[data-show="undefined"] {
+  display: none !important;
+}
+
 /* --- Layout --------------------------------------------------------------- */
 .wire-container {
   width: 100%;
@@ -109,13 +120,16 @@
   padding: 0.55rem 0.9rem;
   cursor: pointer;
   text-decoration: none;
+  min-height: 44px;
   transition:
-    filter 0.15s ease,
-    background 0.15s ease,
-    transform 0.04s ease;
+    color var(--wire-motion-base) var(--wire-ease-standard),
+    border-color var(--wire-motion-base) var(--wire-ease-standard),
+    background var(--wire-motion-base) var(--wire-ease-standard),
+    box-shadow var(--wire-motion-base) var(--wire-ease-standard),
+    transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
 .wire-btn:active {
-  transform: translateY(1px);
+  transform: scale(0.98);
 }
 .wire-btn:focus-visible {
   outline: 2px solid var(--wire-color-primary);
@@ -130,9 +144,12 @@
 .wire-btn--primary {
   background: var(--wire-color-primary);
   color: var(--wire-color-primary-contrast);
+  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 20%, transparent);
 }
 .wire-btn--primary:hover {
   background: var(--wire-color-primary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 1rem 2rem color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
 }
 .wire-btn--danger {
   background: var(--wire-color-danger);
@@ -146,6 +163,25 @@
 .wire-btn--ghost:hover {
   background: var(--wire-color-surface-2);
 }
+.wire-btn--secondary {
+  color: var(--wire-color-text);
+  background: var(--wire-color-surface);
+  border-color: var(--wire-color-border);
+  box-shadow: var(--wire-shadow-1);
+}
+.wire-btn--secondary:hover {
+  color: var(--wire-color-primary);
+  border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border));
+  background: var(--wire-color-surface-2);
+  transform: translateY(-2px);
+}
+.wire-btn:disabled,
+.wire-btn[aria-busy="true"] {
+  cursor: not-allowed;
+  opacity: 0.58;
+  transform: none;
+  box-shadow: none;
+}
 
 .wire-btn--sm {
   padding: 0.35rem 0.6rem;
@@ -155,8 +191,9 @@
   padding: 0.55rem 0.9rem;
 }
 .wire-btn--lg {
-  padding: 0.7rem 1.2rem;
-  font-size: 1.05rem;
+  min-height: 3.5rem;
+  padding: 0.8rem 1.25rem;
+  font-size: 1rem;
 }
 
 /* --- Inputs --------------------------------------------------------------- */
@@ -275,6 +312,36 @@
 .wire-alert--warning {
   border-left-color: var(--wire-color-warning);
 }
+.wire-alert--rich {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+  padding: 1rem;
+  border-left-width: 1px;
+  border-radius: var(--wire-radius);
+  box-shadow: var(--wire-shadow-1);
+}
+.wire-alert--rich .wire-alert__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: calc(var(--wire-radius-sm) * 0.8);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.wire-alert--rich .wire-alert__body {
+  margin: 0.25rem 0 0;
+  line-height: 1.55;
+}
+.wire-alert__dismiss {
+  border: 0;
+  border-radius: 0.5rem;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.wire-alert__dismiss:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
 
 /* --- Card ----------------------------------------------------------------- */
 .wire-card {
@@ -283,6 +350,35 @@
   border-radius: var(--wire-radius);
   padding: 1.25rem;
   box-shadow: var(--wire-shadow-1);
+  color: var(--wire-color-text);
+  transition:
+    border-color var(--wire-motion-base),
+    box-shadow var(--wire-motion-slow),
+    transform var(--wire-motion-slow) var(--wire-ease-emphasized);
+}
+.wire-card--padding-none {
+  padding: 0;
+}
+.wire-card--padding-sm {
+  padding: 1rem;
+}
+.wire-card--padding-md {
+  padding: 1.5rem;
+}
+.wire-card--padding-lg {
+  padding: 2rem;
+}
+.wire-card--glass {
+  background: color-mix(in srgb, var(--wire-color-surface) 78%, transparent);
+  backdrop-filter: blur(18px);
+}
+.wire-card--elevated {
+  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
+}
+.wire-card--interactive:hover {
+  transform: translateY(-0.25rem);
+  border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
+  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 11%, transparent);
 }
 
 /* --- Avatar --------------------------------------------------------------- */
@@ -940,6 +1036,162 @@
   display: inline-flex;
   max-width: 100%;
 }
+.wire-catalog-action > :only-child {
+  min-width: 0;
+}
+
+/* Authentication compositions intentionally mirror the polished identity
+ * experience: compact hierarchy, generous controls, and token-driven color. */
+.wire-auth-card {
+  display: grid;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+  padding: clamp(1.25rem, 4vw, 2rem);
+  border-color: color-mix(in srgb, var(--wire-color-border) 82%, transparent);
+  background: color-mix(in srgb, var(--wire-color-surface) 94%, transparent);
+  box-shadow: 0 1.5rem 5rem color-mix(in srgb, var(--wire-color-text) 8%, transparent);
+  backdrop-filter: blur(18px);
+}
+.wire-auth-card > .wire-eyebrow {
+  justify-self: start;
+  margin-bottom: 0.9rem;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--wire-color-primary) 24%, transparent);
+  border-radius: 999px;
+  color: var(--wire-color-primary);
+  background: color-mix(in srgb, var(--wire-color-primary) 9%, transparent);
+  font-size: 0.7rem;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.wire-auth-card > h3 {
+  margin: 0;
+  color: var(--wire-color-text);
+  font-size: clamp(1.9rem, 5vw, 2.5rem);
+  line-height: 1.08;
+  letter-spacing: -0.045em;
+}
+.wire-auth-card > h3 + p {
+  margin: 0.85rem 0 0;
+  color: var(--wire-color-muted);
+  font-size: 0.925rem;
+  line-height: 1.7;
+}
+.wire-auth-card > .wire-catalog-card__image {
+  margin-bottom: 1.25rem;
+}
+
+.wire-auth-action {
+  display: flex;
+  width: 100%;
+}
+.wire-auth-action > :where(a, button) {
+  display: grid;
+  width: 100%;
+  min-height: 5.5rem;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  text-align: left;
+  border-radius: var(--wire-radius);
+}
+.wire-auth-action__icon {
+  display: grid;
+  width: 3rem;
+  height: 3rem;
+  place-items: center;
+  border-radius: calc(var(--wire-radius-sm) * 0.9);
+  color: currentColor;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.wire-auth-action__copy {
+  min-width: 0;
+}
+.wire-auth-action__label {
+  display: block;
+  font-weight: 750;
+  line-height: 1.3;
+}
+.wire-auth-action__description {
+  display: block;
+  margin-top: 0.25rem;
+  color: color-mix(in srgb, currentColor 66%, transparent);
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.wire-auth-action__arrow {
+  width: 1.1rem;
+  height: 1.1rem;
+  opacity: 0.65;
+  transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
+}
+.wire-auth-action > :where(a, button):hover .wire-auth-action__arrow {
+  transform: translateX(0.25rem);
+}
+
+.wire-auth-field {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.wire-auth-field__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.wire-auth-field__input {
+  width: 100%;
+  min-height: 3.5rem;
+  padding-inline: 3rem;
+  border-radius: var(--wire-radius-sm);
+  box-shadow: var(--wire-shadow-1);
+  transition:
+    border-color var(--wire-motion-base),
+    box-shadow var(--wire-motion-base),
+    background var(--wire-motion-base);
+}
+.wire-auth-field__input:focus {
+  border-color: var(--wire-color-primary);
+  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
+}
+.wire-auth-field__icon {
+  position: absolute;
+  left: 1rem;
+  z-index: 1;
+  width: 1.15rem;
+  height: 1.15rem;
+  color: var(--wire-color-muted);
+  pointer-events: none;
+  transition: color var(--wire-motion-base);
+}
+.wire-auth-field__control:focus-within .wire-auth-field__icon {
+  color: var(--wire-color-primary);
+}
+.wire-auth-field__toggle {
+  position: absolute;
+  right: 0.25rem;
+  display: grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  place-items: center;
+  border: 0;
+  border-radius: calc(var(--wire-radius-sm) * 0.75);
+  color: var(--wire-color-muted);
+  background: transparent;
+  cursor: pointer;
+}
+.wire-auth-field__toggle:hover {
+  color: var(--wire-color-primary);
+  background: var(--wire-color-surface-2);
+}
+.wire-auth-field__toggle:focus-visible {
+  outline: 2px solid var(--wire-color-primary);
+  outline-offset: -2px;
+}
 .wire-catalog-form,
 .wire-catalog-collection,
 .wire-catalog-section {
diff --git a/scripts/generate-ui-complete-catalog.mjs b/scripts/generate-ui-complete-catalog.mjs
index 7b6bfa2c..373e3add 100644
--- a/scripts/generate-ui-complete-catalog.mjs
+++ b/scripts/generate-ui-complete-catalog.mjs
@@ -21,7 +21,7 @@ function action(name) {
     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> }
+  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> }
 }`;
 }
 
@@ -138,7 +138,7 @@ function content(name) {
     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> }
+  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> }
 }`;
 }
 
diff --git a/scripts/generate-ui-component-reference.mjs b/scripts/generate-ui-component-reference.mjs
index e603d9e6..b59e6767 100644
--- a/scripts/generate-ui-component-reference.mjs
+++ b/scripts/generate-ui-component-reference.mjs
@@ -107,4 +107,4 @@ for (const category of [...new Set(components.map((component) => component.categ
     );
   }
 }
-writeFileSync(join(uiRoot, "COMPONENTS.md"), `${lines.join("\n")}\n`);
+writeFileSync(join(uiRoot, "COMPONENTS.md"), `${lines.join("\n").trimEnd()}\n`);