@24vlh/vds 0.1.10 → 0.2.1

package/dist/components/header-footer.css

@@ -27,9 +27,19 @@
     --header-height: var(--space-16);
     --header-logo-height: var(--space-12);
     --header-toggle-size: var(--space-6);
+    --header-padding-inline: var(--space-6);
+    --header-gap: var(--space-6);
+    --header-max-width: var(--layout-max-width);
+    --header-panel-bg: var(--color-surface);
+    --header-panel-border: var(--color-border-subtle);
+    --header-panel-shadow: var(--shadow-1);
 
     --footer-logo-height: var(--space-8);
     --footer-col-min-width: var(--space-40);
+    --footer-padding-block: var(--space-10);
+    --footer-padding-inline: var(--space-6);
+    --footer-gap: var(--space-8);
+    --footer-max-width: var(--layout-max-width);
 }
 
 /* ---------------------------------------------------------
@@ -47,24 +57,77 @@
 .header--sticky {
     position: sticky;
     top: 0;
+    top: var(--header-sticky-offset, 0);
 }
 
 .header--elevated {
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--header-shadow, var(--shadow-1));
 }
 
 .header__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--header-gap);
 
     height: var(--header-height);
-    padding: 0 var(--space-6);
+    padding: 0 var(--header-padding-inline);
 
-    max-width: var(--layout-max-width);
+    max-width: var(--header-max-width);
     margin: 0 auto;
 }
 
+.header--compact {
+    --header-height: var(--space-12);
+    --header-logo-height: var(--space-8);
+}
+
+.header--tall {
+    --header-height: var(--space-20);
+    --header-logo-height: var(--space-14);
+}
+
+.header--borderless {
+    border-bottom: none;
+}
+
+.header--transparent {
+    background-color: transparent;
+}
+
+.header__left,
+.header__right,
+.header__center {
+    display: flex;
+    align-items: center;
+    gap: var(--header-gap);
+}
+
+.header__right {
+    margin-left: auto;
+}
+
+.header__center {
+    margin: 0 auto;
+}
+
+.header__stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.header__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.header__meta {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
 /* ---------------------------------------------------------
    3. LOGO HANDLING IN HEADER
 --------------------------------------------------------- */
@@ -98,7 +161,8 @@
     gap: var(--space-6);
 }
 
-.header .nav__item {
+.header .nav__item,
+.header .nav__link {
     font-size: var(--text-sm);
     color: var(--color-text);
     padding: var(--space-1) 0;
@@ -108,16 +172,19 @@
     position: relative;
 }
 
-.header .nav__item:hover {
+.header .nav__item:hover,
+.header .nav__link:hover {
     color: var(--color-text-muted);
 }
 
-.header .nav__item--active {
+.header .nav__item--active,
+.header .nav__link--active {
     color: var(--color-text);
     font-weight: 600;
 }
 
-.header .nav__item--active::after {
+.header .nav__item--active::after,
+.header .nav__link--active::after {
     content: "";
     position: absolute;
     left: 0;
@@ -128,13 +195,15 @@
     border-radius: var(--radius-pill, var(--radius-md));
 }
 
-.header .nav__item--disabled {
+.header .nav__item--disabled,
+.header .nav__link--disabled {
     opacity: 0.5;
     cursor: default;
     pointer-events: none;
 }
 
-.header .nav__item:focus-visible {
+.header .nav__item:focus-visible,
+.header .nav__link:focus-visible {
     outline: var(--border-width) solid var(--focus-ring-color);
     outline-offset: var(--space-1);
     border-radius: var(--radius-sm);
@@ -165,6 +234,30 @@
     outline-offset: var(--space-1);
 }
 
+.header__panel {
+    display: none;
+    position: absolute;
+    top: var(--header-height);
+    left: 0;
+    right: 0;
+    max-height: calc(100vh - var(--header-height));
+    max-height: calc(100svh - var(--header-height));
+    max-height: calc(100dvh - var(--header-height));
+    overflow-y: auto;
+    padding: var(--space-6);
+    background-color: var(--header-panel-bg);
+    border-bottom: var(--border-width) solid var(--header-panel-border);
+    box-shadow: var(--header-panel-shadow);
+    z-index: var(--z-header);
+}
+
+.header__panel .nav {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-4);
+}
+
 @media (max-width: 768px) {
 
     .header .nav {
@@ -184,23 +277,47 @@
 
         position: absolute;
         top: var(--header-height);
+        left: 0;
         right: 0;
         width: 100%;
 
         padding: var(--space-6);
-        background-color: var(--color-surface);
-        border-bottom: var(--border-width) solid var(--color-border-subtle);
+        background-color: var(--header-panel-bg);
+        border-bottom: var(--border-width) solid var(--header-panel-border);
+        box-shadow: var(--header-panel-shadow);
     }
 
     .header.header--nav-open .nav__item {
         padding: var(--space-1) 0;
     }
+
+    .header.header--nav-open .nav__link {
+        padding: var(--space-1) 0;
+    }
+
+    .header--nav-panel .header__inner .nav {
+        display: none;
+    }
+
+    .header--nav-panel.header--nav-open .header__panel {
+        display: block;
+    }
+
+    .header--nav-panel.header--nav-open .nav {
+        position: static;
+        width: auto;
+        padding: 0;
+        background-color: transparent;
+        border-bottom: none;
+        box-shadow: none;
+    }
 }
 
 /* ---------------------------------------------------------
    6. SKIP-LINK (ACCESSIBILITY)
 --------------------------------------------------------- */
 
+.skip-link,
 .header .skip-link {
     position: absolute;
     left: var(--space-4);
@@ -216,7 +333,7 @@
     z-index: var(--z-header);
 }
 
-.header .skip-link:focus-visible {
+.skip-link:focus-visible {
     transform: translateY(0);
     outline: var(--border-width) solid var(--focus-ring-color);
     outline-offset: var(--space-1);
@@ -231,21 +348,55 @@
     background-color: var(--color-footer-bg);
     color: var(--color-footer-text);
 
-    padding-top: var(--space-10);
-    padding-bottom: var(--space-10);
+    padding-top: var(--footer-padding-block);
+    padding-bottom: var(--footer-padding-block);
     border-top: var(--border-width) solid var(--color-border-strong);
 }
 
 .footer__inner {
-    max-width: var(--layout-max-width);
+    max-width: var(--footer-max-width);
     margin: 0 auto;
 
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
+    gap: var(--footer-gap);
+
+    padding: 0 var(--footer-padding-inline);
+}
+
+.footer--compact {
+    --footer-padding-block: var(--space-6);
+}
 
-    padding: 0 var(--space-6);
+.footer--borderless {
+    border-top: none;
+}
+
+.footer__columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--footer-col-min-width), 1fr));
+    grid-gap: var(--footer-gap);
+    gap: var(--footer-gap);
+    width: 100%;
+}
+
+.footer__bottom {
+    margin-top: var(--space-8);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    width: 100%;
+}
+
+.footer__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
 }
 
 /* ---------------------------------------------------------
@@ -257,6 +408,7 @@
     flex-direction: column;
     gap: var(--space-3);
     min-width: var(--footer-col-min-width);
+    flex: 1 1 var(--footer-col-min-width);
 }
 
 .footer__col-title {
@@ -328,6 +480,10 @@
     opacity: 0.75;
 }
 
+.footer__bottom .footer__meta {
+    margin-top: 0;
+}
+
 .footer__meta,
 .footer__meta p,
 .footer__meta a,
@@ -353,12 +509,16 @@
 
 .vds-shell {
     min-height: 100vh;
+    min-height: 100svh;
+    min-height: 100dvh;
     display: flex;
     flex-direction: column;
+    width: 100%;
 }
 
 .vds-shell__main {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .vds-shell__footer {

package/dist/components/header-footer.min.css

@@ -1 +1 @@
-.vds-header-footer,[data-vds-header-footer]{--header-height:var(--space-16);--header-logo-height:var(--space-12);--header-toggle-size:var(--space-6);--footer-logo-height:var(--space-8);--footer-col-min-width:var(--space-40)}.header{background-color:var(--color-header-bg);border-bottom:var(--border-width) solid var(--color-header-border);position:relative;width:100%;z-index:var(--z-header)}.header--sticky{position:sticky;top:0}.header--elevated{box-shadow:var(--shadow-1)}.header__inner{align-items:center;display:flex;height:var(--header-height);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.header .logo{align-items:center;display:inline-flex;height:100%;justify-content:center;margin-right:var(--space-6);padding:0}.header .logo svg{height:var(--header-logo-height);width:auto}.header .logo[href]:hover{opacity:.9}.header .nav{align-items:center;display:flex;gap:var(--space-6)}.header .nav__item{color:var(--color-text);font-size:var(--text-sm);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease}.header .nav__item:hover{color:var(--color-text-muted)}.header .nav__item--active{color:var(--color-text);font-weight:600}.header .nav__item--active:after{background-color:var(--color-accent);border-radius:var(--radius-pill,var(--radius-md));bottom:calc(var(--space-1)*-1);content:"";height:var(--border-width);left:0;position:absolute;right:0}.header .nav__item--disabled{cursor:default;opacity:.5;pointer-events:none}.header .nav__item:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header .header__toggle{background-color:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2)}.header .header__toggle svg{stroke:currentColor;height:var(--header-toggle-size);width:var(--header-toggle-size)}.header .header__toggle:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}@media (max-width:768px){.header .nav{display:none}.header .header__toggle{align-items:center;display:flex;justify-content:center}.header.header--nav-open .nav{background-color:var(--color-surface);border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);position:absolute;right:0;top:var(--header-height);width:100%}.header.header--nav-open .nav__item{padding:var(--space-1) 0}}.header .skip-link{background-color:var(--color-accent);border-radius:var(--radius-sm);color:var(--color-on-accent);left:var(--space-4);padding:var(--space-2) var(--space-3);position:absolute;-webkit-text-decoration:none;text-decoration:none;top:var(--space-4);transform:translateY(calc(var(--space-6)*-1));transition:transform .15s ease;z-index:var(--z-header)}.header .skip-link:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1);transform:translateY(0)}.footer{background-color:var(--color-footer-bg);border-top:var(--border-width) solid var(--color-border-strong);color:var(--color-footer-text);padding-bottom:var(--space-10);padding-top:var(--space-10);width:100%}.footer__inner{align-items:flex-start;display:flex;flex-wrap:nowrap;justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.footer__col{display:flex;flex-direction:column;gap:var(--space-3);min-width:var(--footer-col-min-width)}.footer__col-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}.footer__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;-webkit-text-decoration:none;text-decoration:none;transition:opacity .15s ease}.footer__link:hover{opacity:1}.footer__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}@media (max-width:768px){.footer__inner{flex-direction:column;gap:var(--space-10)}}.footer .logo{align-items:center;display:inline-flex;justify-content:flex-start;margin-bottom:var(--space-6);padding:0}.footer .logo svg{height:var(--footer-logo-height);width:auto}.footer .logo-frame,.footer .logo-rail{stroke:var(--color-logo-ink-inverse)}.footer .logo-chevron{stroke:var(--color-logo-accent-inverse)}.footer__meta{font-size:var(--text-xs);margin-top:var(--space-8);opacity:.75}.footer__meta,.footer__meta a,.footer__meta p,.footer__meta small,.footer__meta span{color:var(--color-footer-text)}.footer__meta a{-webkit-text-decoration:none;text-decoration:none}.footer__meta a:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.vds-shell{display:flex;flex-direction:column;min-height:100vh}.vds-shell__main{flex:1 0 auto}.vds-shell__footer{margin-top:auto}
+.vds-header-footer,[data-vds-header-footer]{--header-height:var(--space-16);--header-logo-height:var(--space-12);--header-toggle-size:var(--space-6);--header-padding-inline:var(--space-6);--header-gap:var(--space-6);--header-max-width:var(--layout-max-width);--header-panel-bg:var(--color-surface);--header-panel-border:var(--color-border-subtle);--header-panel-shadow:var(--shadow-1);--footer-logo-height:var(--space-8);--footer-col-min-width:var(--space-40);--footer-padding-block:var(--space-10);--footer-padding-inline:var(--space-6);--footer-gap:var(--space-8);--footer-max-width:var(--layout-max-width)}.header{background-color:var(--color-header-bg);border-bottom:var(--border-width) solid var(--color-header-border);position:relative;width:100%;z-index:var(--z-header)}.header--sticky{position:sticky;top:0;top:var(--header-sticky-offset,0)}.header--elevated{box-shadow:var(--header-shadow,var(--shadow-1))}.header__inner{align-items:center;display:flex;gap:var(--header-gap);height:var(--header-height);justify-content:space-between;margin:0 auto;max-width:var(--header-max-width);padding:0 var(--header-padding-inline)}.header--compact{--header-height:var(--space-12);--header-logo-height:var(--space-8)}.header--tall{--header-height:var(--space-20);--header-logo-height:var(--space-14)}.header--borderless{border-bottom:none}.header--transparent{background-color:transparent}.header__center,.header__left,.header__right{align-items:center;display:flex;gap:var(--header-gap)}.header__right{margin-left:auto}.header__center{margin:0 auto}.header__stack{display:flex;flex-direction:column;gap:var(--space-1)}.header__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.header__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.header .logo{align-items:center;display:inline-flex;height:100%;justify-content:center;margin-right:var(--space-6);padding:0}.header .logo svg{height:var(--header-logo-height);width:auto}.header .logo[href]:hover{opacity:.9}.header .nav{align-items:center;display:flex;gap:var(--space-6)}.header .nav__item,.header .nav__link{color:var(--color-text);font-size:var(--text-sm);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease}.header .nav__item:hover,.header .nav__link:hover{color:var(--color-text-muted)}.header .nav__item--active,.header .nav__link--active{color:var(--color-text);font-weight:600}.header .nav__item--active:after,.header .nav__link--active:after{background-color:var(--color-accent);border-radius:var(--radius-pill,var(--radius-md));bottom:calc(var(--space-1)*-1);content:"";height:var(--border-width);left:0;position:absolute;right:0}.header .nav__item--disabled,.header .nav__link--disabled{cursor:default;opacity:.5;pointer-events:none}.header .nav__item:focus-visible,.header .nav__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header .header__toggle{background-color:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2)}.header .header__toggle svg{stroke:currentColor;height:var(--header-toggle-size);width:var(--header-toggle-size)}.header .header__toggle:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header__panel{background-color:var(--header-panel-bg);border-bottom:var(--border-width) solid var(--header-panel-border);box-shadow:var(--header-panel-shadow);display:none;left:0;max-height:calc(100vh - var(--header-height));max-height:calc(100svh - var(--header-height));max-height:calc(100dvh - var(--header-height));overflow-y:auto;padding:var(--space-6);position:absolute;right:0;top:var(--header-height);z-index:var(--z-header)}.header__panel .nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4)}@media (max-width:768px){.header .nav{display:none}.header .header__toggle{align-items:center;display:flex;justify-content:center}.header.header--nav-open .nav{background-color:var(--header-panel-bg);border-bottom:var(--border-width) solid var(--header-panel-border);box-shadow:var(--header-panel-shadow);display:flex;flex-direction:column;gap:var(--space-4);left:0;padding:var(--space-6);position:absolute;right:0;top:var(--header-height);width:100%}.header.header--nav-open .nav__item,.header.header--nav-open .nav__link{padding:var(--space-1) 0}.header--nav-panel .header__inner .nav{display:none}.header--nav-panel.header--nav-open .header__panel{display:block}.header--nav-panel.header--nav-open .nav{background-color:transparent;border-bottom:none;box-shadow:none;padding:0;position:static;width:auto}}.header .skip-link,.skip-link{background-color:var(--color-accent);border-radius:var(--radius-sm);color:var(--color-on-accent);left:var(--space-4);padding:var(--space-2) var(--space-3);position:absolute;-webkit-text-decoration:none;text-decoration:none;top:var(--space-4);transform:translateY(calc(var(--space-6)*-1));transition:transform .15s ease;z-index:var(--z-header)}.skip-link:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1);transform:translateY(0)}.footer{background-color:var(--color-footer-bg);border-top:var(--border-width) solid var(--color-border-strong);color:var(--color-footer-text);padding-bottom:var(--footer-padding-block);padding-top:var(--footer-padding-block);width:100%}.footer__inner{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--footer-gap);justify-content:space-between;margin:0 auto;max-width:var(--footer-max-width);padding:0 var(--footer-padding-inline)}.footer--compact{--footer-padding-block:var(--space-6)}.footer--borderless{border-top:none}.footer__columns{grid-gap:var(--footer-gap);display:grid;gap:var(--footer-gap);grid-template-columns:repeat(auto-fit,minmax(var(--footer-col-min-width),1fr));width:100%}.footer__bottom{gap:var(--space-4);justify-content:space-between;margin-top:var(--space-8);width:100%}.footer__actions,.footer__bottom{align-items:center;display:flex;flex-wrap:wrap}.footer__actions,.footer__col{gap:var(--space-3)}.footer__col{display:flex;flex:1 1 var(--footer-col-min-width);flex-direction:column;min-width:var(--footer-col-min-width)}.footer__col-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}.footer__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;-webkit-text-decoration:none;text-decoration:none;transition:opacity .15s ease}.footer__link:hover{opacity:1}.footer__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}@media (max-width:768px){.footer__inner{flex-direction:column;gap:var(--space-10)}}.footer .logo{align-items:center;display:inline-flex;justify-content:flex-start;margin-bottom:var(--space-6);padding:0}.footer .logo svg{height:var(--footer-logo-height);width:auto}.footer .logo-frame,.footer .logo-rail{stroke:var(--color-logo-ink-inverse)}.footer .logo-chevron{stroke:var(--color-logo-accent-inverse)}.footer__meta{font-size:var(--text-xs);margin-top:var(--space-8);opacity:.75}.footer__bottom .footer__meta{margin-top:0}.footer__meta,.footer__meta a,.footer__meta p,.footer__meta small,.footer__meta span{color:var(--color-footer-text)}.footer__meta a{-webkit-text-decoration:none;text-decoration:none}.footer__meta a:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.vds-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-height:100dvh;width:100%}.vds-shell__main{flex:1 1 auto;min-width:0}.vds-shell__footer{margin-top:auto}

package/dist/components/hero.css

@@ -26,6 +26,7 @@
 .vds-hero {
     --hero-skeleton-speed: 1.2s;
     --hero-eyebrow-letter-spacing: var(--letter-loose);
+    --hero-eyebrow-color: var(--color-text-muted);
 
     --hero-text-max-default: 60ch;
     --hero-text-max-a: 70ch;
@@ -34,10 +35,24 @@
 
     --hero-media-aspect-ratio: 16/9;
     --hero-media-max-width: 32rem;
+    --hero-media-radius: var(--radius-lg);
 
     --hero-metric-min-width: 11rem;
+    --hero-metric-bg: var(--color-surface-subtle);
+    --hero-metric-border: transparent;
 
     --hero-accent-line-thickness: 3px;
+    --hero-body-gap: var(--space-4);
+    --hero-actions-gap: var(--space-4);
+    --hero-actions-margin-top: var(--space-6);
+    --hero-meta-gap: var(--space-3);
+    --hero-meta-color: var(--color-text-muted);
+    --hero-badge-bg: var(--color-surface-subtle);
+    --hero-badge-border: var(--color-border-subtle);
+    --hero-badge-text: var(--color-text);
+    --hero-point-icon: var(--color-accent);
+    --hero-border-color: var(--color-border-subtle);
+    --hero-soft-bg: var(--color-surface-subtle);
 
     --hero-full-overlay: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.0));
 }
@@ -52,6 +67,8 @@
     color: var(--color-text);
     padding-top: var(--space-12);
     padding-bottom: var(--space-16);
+    padding-left: var(--hero-padding-inline, var(--space-6));
+    padding-right: var(--hero-padding-inline, var(--space-6));
 }
 
 .hero__inner {
@@ -68,7 +85,7 @@
     font-weight: var(--font-weight-semibold);
     text-transform: uppercase;
     letter-spacing: var(--hero-eyebrow-letter-spacing);
-    color: var(--color-text-muted);
+    color: var(--hero-eyebrow-color);
 }
 
 .hero__title {
@@ -78,7 +95,15 @@
     line-height: 1.15;
 }
 
-.hero__desc {
+.hero__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hero-body-gap);
+    min-width: 0;
+}
+
+.hero__desc,
+.hero__subtitle {
     font-size: var(--text-md);
     line-height: var(--line-height-normal);
     color: var(--color-text-muted);
@@ -87,9 +112,19 @@
 
 .hero__actions {
     display: flex;
-    gap: var(--space-4);
+    gap: var(--hero-actions-gap);
     flex-wrap: wrap;
-    margin-top: var(--space-6);
+    margin-top: var(--hero-actions-margin-top);
+}
+
+.hero__actions--stack {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.hero__actions--center {
+    justify-content: center;
+    width: 100%;
 }
 
 .hero__text-pill {
@@ -97,77 +132,126 @@
     color: var(--color-text-on-strong);
     border-radius: var(--radius-sm);
     display: inline-block;
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-xs);
+    align-self: flex-start;
+}
+
+.hero__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-3);
+    border-radius: 999px;
+    font-size: var(--text-xs);
+    border: var(--border-width) solid var(--hero-badge-border);
+    background: var(--hero-badge-bg);
+    color: var(--hero-badge-text);
+    align-self: flex-start;
+}
+
+.hero__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--hero-meta-gap);
+    font-size: var(--text-xs);
+    color: var(--hero-meta-color);
 }
 
 /*---------------------------------------------------------
   3. DENSITY VARIANTS (MUTUALLY EXCLUSIVE)
 ---------------------------------------------------------*/
 
+.hero.hero--a,
 .hero--a .hero {
     padding-top: var(--space-20);
     padding-bottom: var(--space-24);
 }
 
+.hero.hero--a .hero__title,
 .hero--a .hero__title {
     font-size: var(--text-5xl);
     max-width: var(--hero-text-max-a);
 }
 
-.hero--a .hero__desc {
+.hero.hero--a .hero__desc,
+.hero.hero--a .hero__subtitle,
+.hero--a .hero__desc,
+.hero--a .hero__subtitle {
     font-size: var(--text-lg);
 }
 
+.hero.hero--b,
 .hero--b .hero {
     padding-top: var(--space-16);
     padding-bottom: var(--space-20);
 }
 
+.hero.hero--b .hero__title,
 .hero--b .hero__title {
     font-size: var(--text-4xl);
 }
 
-.hero--b .hero__desc {
+.hero.hero--b .hero__desc,
+.hero.hero--b .hero__subtitle,
+.hero--b .hero__desc,
+.hero--b .hero__subtitle {
     font-size: var(--text-md);
 }
 
+.hero.hero--c,
 .hero--c .hero {
     padding-top: var(--space-12);
     padding-bottom: var(--space-16);
 }
 
+.hero.hero--c .hero__title,
 .hero--c .hero__title {
     font-size: var(--text-3xl);
     max-width: var(--hero-text-max-c);
 }
 
-.hero--c .hero__desc {
+.hero.hero--c .hero__desc,
+.hero.hero--c .hero__subtitle,
+.hero--c .hero__desc,
+.hero--c .hero__subtitle {
     font-size: var(--text-sm);
 }
 
+.hero.hero--compact,
 .hero--compact .hero {
     padding-top: var(--space-10);
     padding-bottom: var(--space-12);
 }
 
+.hero.hero--compact .hero__title,
 .hero--compact .hero__title {
     font-size: var(--text-2xl);
     max-width: var(--hero-text-max-compact);
 }
 
-.hero--compact .hero__desc {
+.hero.hero--compact .hero__desc,
+.hero.hero--compact .hero__subtitle,
+.hero--compact .hero__desc,
+.hero--compact .hero__subtitle {
     font-size: var(--text-sm);
 }
 
+.hero.hero--minimal,
 .hero--minimal .hero {
     padding-top: var(--space-8);
     padding-bottom: var(--space-10);
 }
 
+.hero.hero--minimal .hero__title,
 .hero--minimal .hero__title {
     font-size: var(--text-xl);
 }
 
-.hero--minimal .hero__desc {
+.hero.hero--minimal .hero__desc,
+.hero.hero--minimal .hero__subtitle,
+.hero--minimal .hero__desc,
+.hero--minimal .hero__subtitle {
     display: none;
 }
 
@@ -177,28 +261,57 @@
 
 .hero--split .hero__inner {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     grid-gap: var(--space-12);
     gap: var(--space-12);
 }
 
 .hero--with-media .hero__inner {
     display: grid;
-    grid-template-columns: 1fr var(--hero-media-max-width);
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-media-max-width));
     grid-gap: var(--space-12);
     gap: var(--space-12);
 }
 
+.hero--with-media.hero--media-left .hero__media {
+    order: -1;
+}
+
+.hero--split.hero--split-reverse .hero__points {
+    order: -1;
+}
+
+.hero--center .hero__inner {
+    align-items: center;
+    text-align: center;
+}
+
+.hero--center .hero__actions,
+.hero--center .hero__metrics,
+.hero--center .hero__points {
+    justify-content: center;
+}
+
+.hero--soft {
+    background-color: var(--hero-soft-bg);
+}
+
+.hero--bordered {
+    border-top: var(--border-width) solid var(--hero-border-color);
+    border-bottom: var(--border-width) solid var(--hero-border-color);
+}
+
 .hero__media {
     display: flex;
     justify-content: center;
     align-items: center;
+    min-width: 0;
 }
 
 .hero__media-inner {
     width: 100%;
     max-width: 100%;
-    border-radius: var(--radius-lg);
+    border-radius: var(--hero-media-radius);
     overflow: hidden;
     display: flex;
     align-items: stretch;
@@ -217,7 +330,13 @@
     aspect-ratio: var(--hero-media-aspect-ratio);
     -o-object-fit: cover;
        object-fit: cover;
-    border-radius: var(--radius-lg);
+    border-radius: var(--hero-media-radius);
+}
+
+.hero__media--bleed .hero__media-inner,
+.hero__media--bleed img,
+.hero__media--bleed picture {
+    border-radius: 0;
 }
 
 /*---------------------------------------------------------*
@@ -307,8 +426,13 @@
     margin-top: var(--space-8);
 }
 
+.hero__metrics--compact {
+    gap: var(--space-4);
+}
+
 .hero__metric {
     background-color: var(--hero-metric-bg);
+    border: var(--border-width) solid var(--hero-metric-border);
     padding: var(--space-4);
     border-radius: var(--radius-md);
     display: flex;
@@ -316,6 +440,10 @@
     gap: var(--space-2);
 }
 
+.hero__metric--outline {
+    --hero-metric-border: var(--color-border-subtle);
+}
+
 .hero__metric-value {
     font-size: var(--text-xl);
     font-weight: var(--font-weight-bold);
@@ -378,7 +506,13 @@
     height: var(--icon-sm);
     flex-shrink: 0;
     margin-top: 0.125rem;
-    color: var(--color-accent);
+    color: var(--hero-point-icon);
+}
+
+.hero__row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-4);
 }
 
 /*---------------------------------------------------------*