feat(ui): own responsive marketing layout APIs

packages/ui/components/AnnouncementBar.wrn

@@ -16,6 +16,15 @@ badge: string = ""
     dismissLabel: string = "Dismiss announcement"
     sticky: boolean = false
     compact: boolean = false
+    flush: boolean = false
+    mobileCompact: boolean = false
+    mobileMessageLines: number = 2
+    hideBadgeOnMobile: boolean = false
+    hideDescriptionOnMobile: boolean = false
+    mobileActionSize: string = "default"
+    gutter: string = "md"
+    contentGutter: string = "md"
+    flushMobile: boolean = false
     size: string = "default"
     width: string = "default"
     color: string = "primary"
@@ -36,6 +45,7 @@ badge: string = ""
       data-color='{color}'
       data-variant='{variant}'
       data-compact='{compact}'
+      data-flush='{flush ? "true" : "false"}' data-mobile-compact='{mobileCompact ? "true" : "false"}' data-mobile-message-lines='{mobileMessageLines}' data-hide-badge-mobile='{hideBadgeOnMobile ? "true" : "false"}' data-hide-description-mobile='{hideDescriptionOnMobile ? "true" : "false"}' data-mobile-action-size='{mobileActionSize}' data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}'
       data-sticky='{sticky}'
       data-show='{!dismissed}'
       aria-hidden='{dismissed ? "true" : "false"}'
@@ -163,6 +173,8 @@ badge: string = ""
       margin-inline: auto;
     }
 
+    .wrn-announcement[data-flush="true"] .wrn-announcement__surface { border-radius: 0; box-shadow: none; }
+
     .wrn-announcement[data-width="wide"] .wrn-announcement__surface {
       width: min(calc(100% - 2rem), 90rem);
     }
@@ -573,6 +585,15 @@ badge: string = ""
     }
 
     @media (max-width: 639px) {
+      .wrn-announcement[data-mobile-compact="true"] .wrn-announcement__inner,
+      .wrn-announcement[data-compact="true"] .wrn-announcement__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
+      .wrn-announcement[data-hide-badge-mobile="true"] .wrn-announcement__badge,
+      .wrn-announcement[data-mobile-compact="true"] .wrn-announcement__badge { display: none; }
+      .wrn-announcement[data-hide-description-mobile="true"] .wrn-announcement__description,
+      .wrn-announcement[data-mobile-compact="true"] .wrn-announcement__description { display: none; }
+      .wrn-announcement[data-mobile-message-lines="2"] .wrn-announcement__message { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+      .wrn-announcement[data-mobile-action-size="sm"] .wrn-announcement__action { min-height: 2.25rem; padding-inline: 0.7rem; }
+      .wrn-announcement[data-flush-mobile="false"] .wrn-announcement__inner { padding-inline: 1rem; }
       .wrn-announcement__surface,
       .wrn-announcement[data-width="wide"] .wrn-announcement__surface {
         width: calc(100% - 1rem);

packages/ui/components/CTASection.wrn

@@ -9,6 +9,11 @@ component CTASection {
     color: string = "primary"
     variant: string = "solid"
     spacing: string = "none"
+    radius: string = "default"
+    titleMaxWidth: string = ""
+    contentPadding: string = "default"
+    mobilePadding: string = "default"
+    mobileActions: string = "stack"
     primaryLabel: string = "Get started"
     primaryHref: string = "#"
     primaryIcon: string = ""
@@ -37,6 +42,8 @@ component CTASection {
       data-color='{color}'
       data-variant='{variant}'
       data-spacing='{spacing}'
+      data-radius='{radius}' data-content-padding='{contentPadding}' data-mobile-padding='{mobilePadding}' data-mobile-actions='{mobileActions}'
+      style='--wrn-cta-title-max-width: {titleMaxWidth || "18ch"}'
       data-max-width='{maxWidth}'
       data-full-bleed='{fullBleed ? "true" : "false"}'
       data-visual-position='{visualPosition}'
@@ -288,6 +295,8 @@ component CTASection {
         0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
         0 24px 70px color-mix(in srgb, black 15%, transparent);
     }
+    .wrn-cta-section[data-radius="xl"] .wrn-cta-section__surface { border-radius: 1.5rem; }
+    .wrn-cta-section[data-content-padding="lg"] .wrn-cta-section__surface { padding: 3.5rem clamp(1.5rem, 5vw, 4rem); }
 
     .wrn-cta-section[data-size="compact"] .wrn-cta-section__surface,
     .wrn-cta-section[data-size="sm"] .wrn-cta-section__surface {
@@ -429,7 +438,7 @@ component CTASection {
     }
 
     .wrn-cta-section__title {
-      max-width: 18ch;
+      max-width: var(--wrn-cta-title-max-width);
       margin: 0.75rem 0 0;
       color: var(--wrn-color-text);
       font-size: clamp(2rem, 5vw, 4rem);
@@ -665,11 +674,11 @@ component CTASection {
       line-height: 1.5;
     }
 
-    .wrn-cta-section__footer:empty {
+    .wrn-cta-section__footer:not(:has(> *)) {
       display: none;
     }
 
-    .wrn-cta-section__footer:not(:empty) {
+    .wrn-cta-section__footer:has(> *) {
       margin-top: 2rem;
       padding-top: 1.25rem;
       border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
@@ -699,6 +708,8 @@ component CTASection {
     }
 
     @media (max-width: 639px) {
+      .wrn-cta-section[data-mobile-padding="md"] .wrn-cta-section__surface { padding: 2.5rem 1.25rem; }
+      .wrn-cta-section[data-mobile-actions="inline"] .wrn-cta-section__action { width: auto; }
       .wrn-cta-section__surface {
         padding: 1.6rem;
         border-radius: 1.2rem;

packages/ui/components/Card.wrn

@@ -9,7 +9,8 @@ component Card {
   }
 
   props {
-    title: string = "Card title"
+    title: string = ""
+    icon: string = ""
     titleKey: string = ""
     subtitle: string = ""
     subtitleKey: string = ""
@@ -39,6 +40,9 @@ component Card {
     layout: string = "vertical"
     align: string = "left"
     hover: string = "none"
+    radius: string = "default"
+    shadow: string = "default"
+    equalHeight: boolean = false
     scrollable: boolean = false
     maxHeight: string = "18rem"
     dismissible: boolean = false
@@ -84,6 +88,7 @@ component Card {
       data-layout='{layout}'
       data-hover='{hover}'
       data-align='{align}'
+      data-radius='{radius}' data-shadow='{shadow}' data-equal-height='{equalHeight ? "true" : "false"}'
       class='wrn-component wrn-next--card wrn-component--color-{color} wrn-component--size-{size} wrn-next--variant-{variant} {class}'
     >
       {#if items.length > 0}
@@ -271,6 +276,7 @@ component Card {
                   <p>{emptyTitle}</p>
                 </div>
               {:else}
+                {#if icon}<span class='wrn-next__card-icon {icon}' aria-hidden="true"></span>{/if}
                 {#if description}
                   <p class="wrn-next__card-description" data-t='{descriptionKey}'>{description}</p>
                 {/if}
@@ -343,6 +349,12 @@ component Card {
     .wrn-next--card[data-size="sm"] {
       --wrn-card-padding: 0.85rem;
     }
+    .wrn-next--card[data-size="compact"] .wrn-next__card-body { padding: 1rem; }
+    .wrn-next--card[data-radius="lg"] > .wrn-next__card-panel { border-radius: 1rem; }
+    .wrn-next--card[data-shadow="none"] > .wrn-next__card-panel { box-shadow: none; }
+    .wrn-next--card[data-equal-height="true"], .wrn-next--card[data-equal-height="true"] > .wrn-next__card-panel { height: 100%; }
+    .wrn-next--card[data-layout="horizontal"] .wrn-next__card-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; }
+    .wrn-next__card-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 0.7rem; color: var(--wrn-color-primary); background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent); font-size: 1.15rem; }
 
     .wrn-next--card[data-size="lg"] {
       --wrn-card-padding: 1.75rem;

packages/ui/components/FeatureIconCard.wrn

@@ -15,13 +15,17 @@ component FeatureIconCard {
     variant: string = "default"
     align: string = "left"
     hover: string = "lift"
+    radius: string = "default"
+    shadow: string = "default"
+    clickableSurface: boolean = false
+    descriptionTone: string = "default"
     class: string = ""
   }
 
   view {
     <article
       data-ui-component="FeatureIconCard"
-      data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}'
+      data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}' data-radius='{radius}' data-shadow='{shadow}' data-clickable-surface='{clickableSurface ? "true" : "false"}' data-description-tone='{descriptionTone}'
       class='wrn-feature-icon-card {class}'
     >
       <div
@@ -62,6 +66,11 @@ component FeatureIconCard {
   style {
     .wrn-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 2); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: transform var(--wrn-motion-base), border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base); }
     .wrn-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wrn-feature-icon-card[data-size="lg"] { padding: 2rem; }
+    .wrn-feature-icon-card[data-size="compact"] { min-height: 0; padding: 1.25rem; }
+    .wrn-feature-icon-card[data-radius="lg"] { border-radius: 1rem; }
+    .wrn-feature-icon-card[data-shadow="sm"] { box-shadow: 0 5px 18px rgb(15 23 42 / 0.06); }
+    .wrn-feature-icon-card[data-description-tone="muted"] .wrn-feature-icon-card__description { color: var(--wrn-color-text-muted); font-weight: 500; }
+    .wrn-feature-icon-card[data-clickable-surface="true"] .wrn-feature-icon-card__action::after { position: absolute; inset: 0; content: ""; }
     .wrn-feature-icon-card[data-variant="soft"] { background: var(--wrn-color-surface-soft); }
     .wrn-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
     .wrn-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }

packages/ui/components/Footer.wrn

@@ -12,6 +12,8 @@ component Footer {
     items: unknown[] = []
     columns: number = 3
     maxWidth: string = "compact"
+    mobileColumns: number = 2
+    mobileCopyrightAlign: string = "center"
     copyright: string = ""
     copyrightKey: string = ""
     translationPrefix: string = ""
@@ -36,6 +38,7 @@ component Footer {
       data-ui-component="Footer"
       data-size='{size}'
       data-color='{color}'
+      data-mobile-columns='{mobileColumns}' data-mobile-copyright-align='{mobileCopyrightAlign}'
       class='wrn-footer {maxWidth === "full" ? "wrn-footer--width-full" : ""} {class}'
     >
       <div
@@ -531,6 +534,9 @@ component Footer {
     .wrn-footer__links {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
+    .wrn-footer[data-mobile-columns="1"] .wrn-footer__links { grid-template-columns: 1fr; }
+    .wrn-footer[data-mobile-columns="2"] .wrn-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .wrn-footer[data-mobile-copyright-align="start"] :is(.wrn-footer__copyright-left, .wrn-footer__copyright-right) { justify-content: flex-start; text-align: left; }
     .wrn-footer__bottom,
       .wrn-footer__bottom--slots {
         grid-template-columns: 1fr;

packages/ui/components/Navbar.wrn

@@ -20,6 +20,12 @@ size: string = "default"
     openOnHover: boolean = false
     maxWidth: string = "full"
     mobileLabel: string = "Toggle navigation"
+    collapseAt: string = "900px"
+    mobilePanel: string = "content"
+    mobileUtilitiesPosition: string = "header"
+    gutter: string = "md"
+    contentGutter: string = "md"
+    flushMobile: boolean = false
     translationPrefix: string = ""
     class: string = ""
   }
@@ -70,7 +76,7 @@ size: string = "default"
   }
 
   view {
-    <header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
+    <header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
       <div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
         <slot name="topbar" />
       </div>
@@ -93,10 +99,6 @@ size: string = "default"
         </a>
         {/if}
 
-        <button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
-          <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
-        </button>
-
         <div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}">
           <nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
             {#each items as item}
@@ -149,6 +151,12 @@ size: string = "default"
             <slot name="actions" />
           </div>
         </div>
+
+        <div class="wrn-navbar__utilities"><slot name="utilities" /></div>
+
+        <button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
+          <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
+        </button>
       </div>
     </header>
   }
@@ -198,6 +206,17 @@ size: string = "default"
       gap: 1.5rem;
     }
 
+    .wrn-navbar[data-gutter="sm"] .wrn-navbar__main { padding-inline: 1rem; }
+    .wrn-navbar[data-gutter="lg"] .wrn-navbar__main { padding-inline: clamp(1.5rem, 5vw, 4rem); }
+
+    .wrn-navbar__utilities {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+    }
+
+    .wrn-navbar__utilities:not(:has(> *)) { display: none; }
+
     .wrn-navbar--width-full .wrn-navbar__main {
       width: 100%;
       max-width: none;
@@ -532,12 +551,15 @@ size: string = "default"
         background: var(--wrn-color-surface);
         border-bottom: 1px solid var(--wrn-color-border);
         box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
-        height: calc(100dvh - 3.5rem);
+        height: auto;
         max-height: calc(100dvh - 3.5rem);
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
       }
+    .wrn-navbar[data-mobile-panel="sheet"] .wrn-navbar__collapse {
+        height: calc(100dvh - 3.5rem);
+      }
     .wrn-navbar__collapse.is-open {
         display: flex;
       }
@@ -582,7 +604,37 @@ size: string = "default"
       }
     }
 
+    @media (max-width: 1100px) and (min-width: 901px) {
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__toggle { display: block; }
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: 0;
+        display: none;
+        max-height: calc(100dvh - 3.5rem);
+        padding: 0.75rem 1rem 1rem;
+        align-items: stretch;
+        flex-direction: column;
+        overflow-y: auto;
+        background: var(--wrn-color-surface);
+        border-bottom: 1px solid var(--wrn-color-border);
+        box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
+      }
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse.is-open { display: flex; }
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__menus,
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__actions {
+        width: 100%;
+        align-items: stretch;
+        flex: none;
+        flex-direction: column;
+      }
+      .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__panel { position: static; width: 100%; max-width: none; transform: none; }
+    }
+
     @media (max-width: 600px) {
+    .wrn-navbar[data-flush-mobile="false"] .wrn-navbar__main { padding-inline: 1rem; }
     .wrn-navbar__brand-copy small {
         display: none;
       }

packages/ui/components/PreferenceSwitcher.wrn

@@ -25,6 +25,13 @@ size: string = "default"
       {"label": "Amber", "value": "amber", "hex": "#d97706"}
     ]
     compact: boolean = true
+    iconOnly: boolean = true
+    themeIcon: string = "icon-[lucide--sun-moon]"
+    colorIcon: string = "icon-[lucide--palette]"
+    languageIcon: string = "icon-[lucide--languages]"
+    panelPlacement: string = "bottom-end"
+    mobilePanel: string = "dropdown"
+    showCurrentLanguage: boolean = true
     class: string = ""
   }
 
@@ -37,11 +44,11 @@ size: string = "default"
   }
 
   view {
-    <div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
+    <div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences">
       <details class="wrn-preferences__menu" name="wrn-preference-menu">
         <summary aria-label="{themeLabel}" title="{themeLabel}">
-          <span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
-          {#if !compact}<span>{themeLabel}</span>{/if}
+          <span class="{themeIcon}" aria-hidden="true"></span>
+          {#if !iconOnly && !compact}<span>{themeLabel}</span>{/if}
         </summary>
         <div class="wrn-preferences__panel">
           <strong>{themeLabel}</strong>
@@ -54,8 +61,8 @@ size: string = "default"
 
       <details class="wrn-preferences__menu" name="wrn-preference-menu">
         <summary aria-label="{colorLabel}" title="{colorLabel}">
-          <span class="icon-[lucide--palette]" aria-hidden="true"></span>
-          {#if !compact}<span>{colorLabel}</span>{/if}
+          <span class="{colorIcon}" aria-hidden="true"></span>
+          {#if !iconOnly && !compact}<span>{colorLabel}</span>{/if}
         </summary>
         <div class="wrn-preferences__panel wrn-preferences__panel--colors">
           <strong>{colorLabel}</strong>
@@ -69,9 +76,9 @@ size: string = "default"
 
       <details class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu">
         <summary aria-label="{languageLabel}" title="{languageLabel}">
-          <span class="icon-[lucide--languages]" aria-hidden="true"></span>
-          <span class="wrn-preferences__current-language" aria-hidden="true">EN</span>
-          {#if !compact}<span>{languageLabel}</span>{/if}
+          <span class="{languageIcon}" aria-hidden="true"></span>
+          {#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>{/if}
+          {#if !iconOnly && !compact}<span>{languageLabel}</span>{/if}
         </summary>
         <div class="wrn-preferences__panel wrn-preferences__panel--language">
           <strong>{languageLabel}</strong>
@@ -157,6 +164,9 @@ size: string = "default"
       animation: wrn-component-enter 160ms ease both;
     }
 
+    .wrn-preferences[data-panel-placement="bottom-start"] .wrn-preferences__panel { right: auto; left: 0; }
+    .wrn-preferences[data-panel-placement="bottom-center"] .wrn-preferences__panel { right: auto; left: 50%; transform: translateX(-50%); }
+
     .wrn-preferences__panel > strong {
       padding-inline: 0.25rem;
       font-size: 0.7rem;
@@ -242,7 +252,7 @@ size: string = "default"
     }
 
     @media (max-width: 640px) {
-    .wrn-preferences__panel {
+    .wrn-preferences[data-mobile-panel="sheet"] .wrn-preferences__panel {
         position: fixed;
         top: auto;
         right: 1rem;
@@ -250,6 +260,15 @@ size: string = "default"
         left: 1rem;
         width: auto;
       }
+    .wrn-preferences[data-mobile-panel="dropdown"] .wrn-preferences__panel {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        right: 0;
+        bottom: auto;
+        left: auto;
+        width: max-content;
+        max-width: min(22rem, calc(100vw - 2rem));
+      }
     }
 
     /* Shared component foundation. */

packages/ui/components/Scrollspy.wrn

@@ -24,6 +24,10 @@ component Scrollspy {
     active: string = ""
     label: string = "On this page"
     heading: string = ""
+    sticky: boolean = false
+    topOffset: string = "6rem"
+    sectionOffset: string = "7rem"
+    collapseAt: string = "800px"
     class: string = ""
   }
 
@@ -44,6 +48,7 @@ component Scrollspy {
       class='wrn-scrollspy {class}'
       data-color='{color}'
       data-size='{size}'
+      data-sticky='{sticky ? "true" : "false"}' data-collapse-at='{collapseAt}' style='--wrn-scrollspy-top: {topOffset}; --wrn-scrollspy-section-offset: {sectionOffset};'
       data-wrn-scrollspy="true"
       role="navigation"
       aria-label='{label}'
@@ -74,6 +79,8 @@ component Scrollspy {
       --scrollspy-accent: var(--wrn-color-primary);
       max-width: 100%;
     }
+    .wrn-scrollspy[data-sticky="true"] { position: sticky; top: var(--wrn-scrollspy-top); height: max-content; }
+    .wrn-scrollspy__link { scroll-margin-top: var(--wrn-scrollspy-section-offset); }
 
     .wrn-scrollspy:not(:has(.wrn-scrollspy__item)):not(:has(slot > *)) {
       display: none;
@@ -152,6 +159,7 @@ component Scrollspy {
      * line rather than a screenful.
      */
     @media (max-width: 767px) {
+      .wrn-scrollspy[data-collapse-at="800px"] { position: static; }
       .wrn-scrollspy__list {
         grid-auto-flow: column;
         grid-auto-columns: max-content;

packages/ui/components/SplitHero.wrn

@@ -20,6 +20,14 @@ component SplitHero {
     variant: string = "default"
     maxWidth: string = "xl"
     fullBleed: boolean = true
+    gutter: string = "md"
+    contentGutter: string = "md"
+    flushMobile: boolean = false
+    titleSize: string = "default"
+    titleMaxWidth: string = ""
+    descriptionWeight: string = "default"
+    mobileTitleSize: string = "default"
+    mobileStack: boolean = true
     backgroundImage: string = ""
     visualImage: string = ""
     visualAlt: string = ""
@@ -45,6 +53,8 @@ component SplitHero {
       data-variant='{variant}'
       data-max-width='{maxWidth}'
       data-full-bleed='{fullBleed ? "true" : "false"}'
+      data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}' data-title-size='{titleSize}' data-description-weight='{descriptionWeight}' data-mobile-title-size='{mobileTitleSize}' data-mobile-stack='{mobileStack ? "true" : "false"}'
+      style='--wrn-split-title-max-width: {titleMaxWidth || "18ch"}'
       data-visual-style='{visualStyle}'
       class='wrn-split-hero {class}'
     >
@@ -413,6 +423,7 @@ component SplitHero {
     }
 
     .wrn-split-hero__title {
+      max-width: var(--wrn-split-title-max-width);
       max-width: 15ch;
       margin: 1.45rem 0 0;
       color: var(--wrn-color-text);
@@ -421,6 +432,8 @@ component SplitHero {
       line-height: 1.02;
       letter-spacing: -0.05em;
     }
+    .wrn-split-hero[data-title-size="xl"] .wrn-split-hero__title { font-size: clamp(3rem, 5.5vw, 5rem); }
+    .wrn-split-hero[data-description-weight="medium"] .wrn-split-hero__description { font-weight: 500; }
 
     .wrn-split-hero[data-size="compact"] .wrn-split-hero__title,
     .wrn-split-hero[data-size="sm"] .wrn-split-hero__title {
@@ -771,6 +784,7 @@ component SplitHero {
       .wrn-split-hero[data-ratio="content"] .wrn-split-hero__layout {
         grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
       }
+      .wrn-split-hero[data-ratio="wide-copy"] .wrn-split-hero__layout { grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr); }
 
       .wrn-split-hero[data-ratio="visual"] .wrn-split-hero__layout {
         grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
@@ -786,6 +800,8 @@ component SplitHero {
     }
 
     @media (max-width: 639px) {
+      .wrn-split-hero[data-flush-mobile="false"] .wrn-split-hero__inner { width: calc(100% - 2rem); }
+      .wrn-split-hero[data-mobile-title-size="lg"] .wrn-split-hero__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
       .wrn-split-hero__inner {
         padding-block: 3.25rem;
       }

packages/ui/components/StatsBar.wrn

@@ -9,6 +9,11 @@ component StatsBar {
     color: string = "primary"
     variant: string = "raised"
     maxWidth: string = "xl"
+    radius: string = "default"
+    shadow: string = "default"
+    gutter: string = "md"
+    outerSpacing: string = "none"
+    mobileColumns: number = 1
     class: string = ""
   }
 
@@ -24,6 +29,7 @@ component StatsBar {
       data-color='{color}'
       data-variant='{variant}'
       data-max-width='{maxWidth}'
+      data-radius='{radius}' data-shadow='{shadow}' data-gutter='{gutter}' data-outer-spacing='{outerSpacing}' data-mobile-columns='{mobileColumns}'
       class='wrn-stats-bar {class}'
       aria-label="Key statistics"
     >
@@ -149,6 +155,10 @@ component StatsBar {
       width: min(calc(100% - 2rem), 80rem);
       margin-inline: auto;
     }
+    .wrn-stats-bar[data-outer-spacing="md"] { margin-block: 2rem; }
+    .wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface { overflow: hidden; border-radius: 1.25rem; }
+    .wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
+    .wrn-stats-bar[data-variant="card"] .wrn-stats-bar__surface { border: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface); }
 
     .wrn-stats-bar[data-max-width="compact"] .wrn-stats-bar__inner {
       width: min(calc(100% - 2rem), 64rem);
@@ -480,6 +490,8 @@ component StatsBar {
     }
 
     @media (max-width: 639px) {
+      .wrn-stats-bar[data-mobile-columns="1"] .wrn-stats-bar__surface { grid-template-columns: 1fr; }
+      .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner { width: calc(100% - 2rem); }
       .wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__surface {
         border-inline: 0;
         border-radius: 0;