@24vlh/vds 0.3.4 → 0.3.6

package/dist/components/header-footer.css

@@ -21,7 +21,6 @@
 /* ---------------------------------------------------------
    1. HEADER & FOOTER TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-header-footer],
 .vds-header-footer {
     --header-height: var(--space-16);
@@ -47,7 +46,6 @@
 /* ---------------------------------------------------------
    2. GLOBAL HEADER CONTAINER
 --------------------------------------------------------- */
-
 .header {
     width: 100%;
     background-color: var(--color-header-bg);
@@ -133,7 +131,6 @@
 /* ---------------------------------------------------------
    3. LOGO HANDLING IN HEADER
 --------------------------------------------------------- */
-
 .header .logo {
     display: inline-flex;
     align-items: center;
@@ -156,7 +153,6 @@
 /* ---------------------------------------------------------
    4. PRIMARY NAVIGATION (DESKTOP)
 --------------------------------------------------------- */
-
 .header .nav {
     display: flex;
     align-items: center;
@@ -214,7 +210,6 @@
 /* ---------------------------------------------------------
    5. MOBILE NAVIGATION (CSS-ONLY HOOKS)
 --------------------------------------------------------- */
-
 .header .header__toggle {
     display: none;
     cursor: pointer;
@@ -318,7 +313,6 @@
 /* ---------------------------------------------------------
    6. SKIP-LINK (ACCESSIBILITY)
 --------------------------------------------------------- */
-
 .skip-link,
 .header .skip-link {
     position: absolute;
@@ -344,7 +338,6 @@
 /* ---------------------------------------------------------
    7. GLOBAL FOOTER CONTAINER
 --------------------------------------------------------- */
-
 .footer {
     width: 100%;
     background-color: var(--color-footer-bg);
@@ -404,7 +397,6 @@
 /* ---------------------------------------------------------
    8. FOOTER COLUMN SYSTEM
 --------------------------------------------------------- */
-
 .footer__col {
     display: flex;
     flex-direction: column;
@@ -448,7 +440,6 @@
 /* ---------------------------------------------------------
    9. FOOTER LOGO HANDLING
 --------------------------------------------------------- */
-
 .footer .logo {
     display: inline-flex;
     align-items: center;
@@ -475,7 +466,6 @@
 /* ---------------------------------------------------------
    10. FOOTER META / COPYRIGHT
 --------------------------------------------------------- */
-
 .footer__meta {
     margin-top: var(--space-8);
     font-size: var(--text-xs);

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);--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);--header-shadow:var(--shadow-1);--header-sticky-offset:0;--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)}.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-height:100dvh;width:100%}.shell__main{flex:1 1 auto;min-width:0}.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);--header-shadow:var(--shadow-1);--header-sticky-offset:0;--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{height:var(--header-toggle-size);stroke:currentColor;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{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{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)}.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-height:100dvh;width:100%}.shell__main{flex:1 1 auto;min-width:0}.shell__footer{margin-top:auto}

package/dist/components/hero.css

@@ -21,7 +21,6 @@
 /*---------------------------------------------------------
   1. HERO TOKEN DEFINITIONS
 ---------------------------------------------------------*/
-
 [data-vds-hero],
 .vds-hero {
     --hero-skeleton-speed: 1.2s;
@@ -61,7 +60,6 @@
 /* ---------------------------------------------------------
    2. GLOBAL HERO CONTAINER
 --------------------------------------------------------- */
-
 .hero {
     width: 100%;
     background-color: var(--color-surface);
@@ -162,7 +160,6 @@
 /*---------------------------------------------------------
   3. DENSITY VARIANTS (MUTUALLY EXCLUSIVE)
 ---------------------------------------------------------*/
-
 .hero.hero--a,
 .hero--a .hero {
     padding-top: var(--space-20);
@@ -259,7 +256,6 @@
 /*---------------------------------------------------------
   4. LAYOUT VARIANTS (MUTUALLY EXCLUSIVE)
 ---------------------------------------------------------*/
-
 .hero--split .hero__inner {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -343,7 +339,6 @@
 /*---------------------------------------------------------*
   5. FULL-BLEED VARIANT
 *---------------------------------------------------------*/
-
 .hero--full {
     position: relative;
     background-color: var(--color-bg-elevated);
@@ -390,7 +385,6 @@
 /*---------------------------------------------------------*
   6. INSET VARIANT
 *---------------------------------------------------------*/
-
 .hero--inset {
     background: var(--color-bg);
     padding: var(--space-8);
@@ -407,7 +401,6 @@
 /*---------------------------------------------------------*
   7. ACCENT LINE (TOKENIZED)
 *---------------------------------------------------------*/
-
 .hero__accent-line {
     width: var(--hero-accent-line-thickness);
     height: var(--space-20);
@@ -418,7 +411,6 @@
 /*---------------------------------------------------------*
   8. METRICS BLOCK
 *---------------------------------------------------------*/
-
 .hero__metrics {
     display: grid;
     grid-gap: var(--space-6);
@@ -485,7 +477,6 @@
 /*---------------------------------------------------------*
   8B. HERO POINTS (SUPPORTING BULLETS)
 *---------------------------------------------------------*/
-
 .hero__points {
     display: flex;
     flex-wrap: wrap;
@@ -519,7 +510,6 @@
 /*---------------------------------------------------------*
   9. LOADING STATE (TOKENIZED ANIMATION)
 *---------------------------------------------------------*/
-
 .hero--loading .hero__body {
     visibility: hidden;
 }
@@ -571,7 +561,6 @@
 /*---------------------------------------------------------*
   10. ERROR STATE
 *---------------------------------------------------------*/
-
 .hero--error .hero__body {
     opacity: 0.4;
 }
@@ -603,7 +592,6 @@
 /*---------------------------------------------------------*
   11. RESPONSIVE
 *---------------------------------------------------------*/
-
 @media (max-width: 1024px) {
     .hero--split .hero__inner,
     .hero--with-media .hero__inner {

package/dist/components/hero.min.css

@@ -1 +1 @@
-.vds-hero,[data-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;--hero-text-max-c:55ch;--hero-text-max-compact:50ch;--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-padding-inline:var(--space-6);--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(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding:var(--space-12) var(--hero-padding-inline,var(--space-6)) var(--space-16);width:100%}.hero__inner{display:flex;flex-direction:column;gap:var(--space-8);margin-left:auto;margin-right:auto;max-width:var(--content-width-xl)}.hero__eyebrow{color:var(--hero-eyebrow-color);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--hero-eyebrow-letter-spacing);text-transform:uppercase}.hero__title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);line-height:1.15;max-width:var(--hero-text-max-default)}.hero__body{display:flex;flex-direction:column;gap:var(--hero-body-gap);min-width:0}.hero__desc,.hero__subtitle{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal);max-width:var(--hero-text-max-default)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--hero-actions-gap);margin-top:var(--hero-actions-margin-top)}.hero__actions--stack{align-items:flex-start;flex-direction:column}.hero__actions--center{justify-content:center;width:100%}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero__badge,.hero__text-pill{align-self:flex-start;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.hero__badge{align-items:center;background:var(--hero-badge-bg);border:var(--border-width) solid var(--hero-badge-border);border-radius:999px;color:var(--hero-badge-text);display:inline-flex;gap:var(--space-2)}.hero__meta{color:var(--hero-meta-color);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--hero-meta-gap)}.hero--a .hero,.hero.hero--a{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title,.hero.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc,.hero--a .hero__subtitle,.hero.hero--a .hero__desc,.hero.hero--a .hero__subtitle{font-size:var(--text-lg)}.hero--b .hero,.hero.hero--b{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title,.hero.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc,.hero--b .hero__subtitle,.hero.hero--b .hero__desc,.hero.hero--b .hero__subtitle{font-size:var(--text-md)}.hero--c .hero,.hero.hero--c{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title,.hero.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc,.hero--c .hero__subtitle,.hero.hero--c .hero__desc,.hero.hero--c .hero__subtitle{font-size:var(--text-sm)}.hero--compact .hero,.hero.hero--compact{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title,.hero.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc,.hero--compact .hero__subtitle,.hero.hero--compact .hero__desc,.hero.hero--compact .hero__subtitle{font-size:var(--text-sm)}.hero--minimal .hero,.hero.hero--minimal{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title,.hero.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc,.hero--minimal .hero__subtitle,.hero.hero--minimal .hero__desc,.hero.hero--minimal .hero__subtitle{display:none}.hero--split .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero--with-media .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-media-max-width))}.hero--split.hero--split-reverse .hero__points,.hero--with-media.hero--media-left .hero__media{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-bottom:var(--border-width) solid var(--hero-border-color);border-top:var(--border-width) solid var(--hero-border-color)}.hero__media{align-items:center;min-width:0}.hero__media,.hero__media-inner{display:flex;justify-content:center}.hero__media-inner{align-items:stretch;background-color:var(--color-surface-subtle);border-radius:var(--hero-media-radius);max-width:100%;overflow:hidden;width:100%}.hero__media-inner>*{height:100%;width:100%}.hero__media img,.hero__media picture{aspect-ratio:var(--hero-media-aspect-ratio);border-radius:var(--hero-media-radius);-o-object-fit:cover;object-fit:cover;width:100%}.hero__media--bleed .hero__media-inner,.hero__media--bleed img,.hero__media--bleed picture{border-radius:0}.hero--full{background-color:var(--color-bg-elevated);color:var(--color-text-on-strong);padding-bottom:var(--space-32);padding-top:var(--space-24);position:relative}.hero--full:before{background:var(--hero-full-overlay,var(--color-surface-translucent-strong));bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:0}.hero--full .hero__inner{position:relative;z-index:1}.hero--full,.hero--full .hero__actions,.hero--full .hero__actions *,.hero--full .hero__body,.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__metrics *,.hero--full .hero__points *,.hero--full .hero__subtitle{color:var(--color-text-on-strong)}.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__subtitle,.hero--full .hero__title{text-shadow:0 1px 2px rgba(0,0,0,.45)}.hero--inset{background:var(--color-bg);padding:var(--space-8)}.hero--inset .hero{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero__accent-line{background-color:var(--hero-accent-line,var(--color-accent));border-radius:var(--radius-pill);height:var(--space-20);width:var(--hero-accent-line-thickness)}.hero__metrics{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(var(--hero-metric-min-width),1fr));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);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric--outline{--hero-metric-border:var(--color-border-subtle)}.hero__metric-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.hero__metric-label{color:var(--color-text-muted);font-size:var(--text-sm)}.hero__metric-trend{font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.hero__metric-trend--up{color:var(--hero-trend-up,var(--color-success-strong))}.hero__metric-trend--down{color:var(--hero-trend-down,var(--color-danger-strong))}.hero__metric-trend--neutral{color:var(--hero-trend-neutral,var(--color-text-muted))}.hero__metric--muted{background-color:var(--color-muted-bg);border-left:var(--border-width) solid var(--color-border-subtle)}.hero__metric--error{background-color:var(--hero-error-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-border,var(--color-danger-strong))}.hero__points{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__point{align-items:flex-start;color:var(--color-text-muted);display:flex;font-size:var(--text-sm);gap:var(--space-2);max-width:var(--hero-text-max-default)}.hero__point-icon{color:var(--hero-point-icon);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero__row{align-items:flex-start;display:flex;gap:var(--space-4)}.hero--loading .hero__body{visibility:hidden}.hero--loading .hero__skeleton{display:block}.hero__skeleton{border-radius:var(--radius-md);display:none;height:var(--space-40)}.hero__skeleton,.hero__skeleton-line{animation:hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;background:linear-gradient(90deg,var(--color-surface-subtle) 0,var(--color-surface-soft) 50%,var(--color-surface-subtle) 100%);background-size:200% 100%;width:100%}.hero__skeleton-line{border-radius:var(--radius-sm);height:var(--space-3);margin-bottom:var(--space-1);margin-top:var(--space-1)}@keyframes hero-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero--error .hero__body{opacity:.4}.hero--error .hero__error{align-items:center;background-color:var(--hero-error-banner-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-banner-border,var(--color-danger));border-radius:var(--radius-md);display:flex;gap:var(--space-2);padding:var(--space-4)}.hero__error-title{color:var(--hero-error-title,var(--color-danger-strong));font-size:var(--text-sm);font-weight:var(--font-weight-semibold);margin:0}.hero__error-actions{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}@media (max-width:1024px){.hero--split .hero__inner,.hero--with-media .hero__inner{grid-template-columns:1fr}}@media (max-width:768px){.hero{padding-bottom:var(--space-14);padding-top:var(--space-10)}.hero__title{font-size:var(--text-3xl)}}@media (max-width:640px){.hero__title{font-size:var(--text-2xl)}.hero__metrics{grid-template-columns:repeat(auto-fit,minmax(calc(var(--hero-metric-min-width)*.8),1fr))}}
+.vds-hero,[data-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;--hero-text-max-c:55ch;--hero-text-max-compact:50ch;--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-padding-inline:var(--space-6);--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(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding:var(--space-12) var(--hero-padding-inline,var(--space-6)) var(--space-16);width:100%}.hero__inner{display:flex;flex-direction:column;gap:var(--space-8);margin-left:auto;margin-right:auto;max-width:var(--content-width-xl)}.hero__eyebrow{color:var(--hero-eyebrow-color);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--hero-eyebrow-letter-spacing);text-transform:uppercase}.hero__title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);line-height:1.15;max-width:var(--hero-text-max-default)}.hero__body{display:flex;flex-direction:column;gap:var(--hero-body-gap);min-width:0}.hero__desc,.hero__subtitle{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal);max-width:var(--hero-text-max-default)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--hero-actions-gap);margin-top:var(--hero-actions-margin-top)}.hero__actions--stack{align-items:flex-start;flex-direction:column}.hero__actions--center{justify-content:center;width:100%}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero__badge,.hero__text-pill{align-self:flex-start;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.hero__badge{align-items:center;background:var(--hero-badge-bg);border:var(--border-width) solid var(--hero-badge-border);border-radius:999px;color:var(--hero-badge-text);display:inline-flex;gap:var(--space-2)}.hero__meta{color:var(--hero-meta-color);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--hero-meta-gap)}.hero--a .hero,.hero.hero--a{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title,.hero.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc,.hero--a .hero__subtitle,.hero.hero--a .hero__desc,.hero.hero--a .hero__subtitle{font-size:var(--text-lg)}.hero--b .hero,.hero.hero--b{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title,.hero.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc,.hero--b .hero__subtitle,.hero.hero--b .hero__desc,.hero.hero--b .hero__subtitle{font-size:var(--text-md)}.hero--c .hero,.hero.hero--c{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title,.hero.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc,.hero--c .hero__subtitle,.hero.hero--c .hero__desc,.hero.hero--c .hero__subtitle{font-size:var(--text-sm)}.hero--compact .hero,.hero.hero--compact{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title,.hero.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc,.hero--compact .hero__subtitle,.hero.hero--compact .hero__desc,.hero.hero--compact .hero__subtitle{font-size:var(--text-sm)}.hero--minimal .hero,.hero.hero--minimal{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title,.hero.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc,.hero--minimal .hero__subtitle,.hero.hero--minimal .hero__desc,.hero.hero--minimal .hero__subtitle{display:none}.hero--split .hero__inner{display:grid;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:minmax(0,1fr) minmax(0,var(--hero-media-max-width));grid-gap:var(--space-12);gap:var(--space-12)}.hero--split.hero--split-reverse .hero__points,.hero--with-media.hero--media-left .hero__media{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-bottom:var(--border-width) solid var(--hero-border-color);border-top:var(--border-width) solid var(--hero-border-color)}.hero__media{align-items:center;min-width:0}.hero__media,.hero__media-inner{display:flex;justify-content:center}.hero__media-inner{align-items:stretch;background-color:var(--color-surface-subtle);border-radius:var(--hero-media-radius);max-width:100%;overflow:hidden;width:100%}.hero__media-inner>*{height:100%;width:100%}.hero__media img,.hero__media picture{aspect-ratio:var(--hero-media-aspect-ratio);border-radius:var(--hero-media-radius);-o-object-fit:cover;object-fit:cover;width:100%}.hero__media--bleed .hero__media-inner,.hero__media--bleed img,.hero__media--bleed picture{border-radius:0}.hero--full{background-color:var(--color-bg-elevated);color:var(--color-text-on-strong);padding-bottom:var(--space-32);padding-top:var(--space-24);position:relative}.hero--full:before{background:var(--hero-full-overlay,var(--color-surface-translucent-strong));bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:0}.hero--full .hero__inner{position:relative;z-index:1}.hero--full,.hero--full .hero__actions,.hero--full .hero__actions *,.hero--full .hero__body,.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__metrics *,.hero--full .hero__points *,.hero--full .hero__subtitle{color:var(--color-text-on-strong)}.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__subtitle,.hero--full .hero__title{text-shadow:0 1px 2px rgba(0,0,0,.45)}.hero--inset{background:var(--color-bg);padding:var(--space-8)}.hero--inset .hero{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero__accent-line{background-color:var(--hero-accent-line,var(--color-accent));border-radius:var(--radius-pill);height:var(--space-20);width:var(--hero-accent-line-thickness)}.hero__metrics{display:grid;grid-gap:var(--space-6);gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(var(--hero-metric-min-width),1fr));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);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric--outline{--hero-metric-border:var(--color-border-subtle)}.hero__metric-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.hero__metric-label{color:var(--color-text-muted);font-size:var(--text-sm)}.hero__metric-trend{font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.hero__metric-trend--up{color:var(--hero-trend-up,var(--color-success-strong))}.hero__metric-trend--down{color:var(--hero-trend-down,var(--color-danger-strong))}.hero__metric-trend--neutral{color:var(--hero-trend-neutral,var(--color-text-muted))}.hero__metric--muted{background-color:var(--color-muted-bg);border-left:var(--border-width) solid var(--color-border-subtle)}.hero__metric--error{background-color:var(--hero-error-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-border,var(--color-danger-strong))}.hero__points{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__point{align-items:flex-start;color:var(--color-text-muted);display:flex;font-size:var(--text-sm);gap:var(--space-2);max-width:var(--hero-text-max-default)}.hero__point-icon{color:var(--hero-point-icon);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero__row{align-items:flex-start;display:flex;gap:var(--space-4)}.hero--loading .hero__body{visibility:hidden}.hero--loading .hero__skeleton{display:block}.hero__skeleton{border-radius:var(--radius-md);display:none;height:var(--space-40)}.hero__skeleton,.hero__skeleton-line{animation:hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;background:linear-gradient(90deg,var(--color-surface-subtle) 0,var(--color-surface-soft) 50%,var(--color-surface-subtle) 100%);background-size:200% 100%;width:100%}.hero__skeleton-line{border-radius:var(--radius-sm);height:var(--space-3);margin-bottom:var(--space-1);margin-top:var(--space-1)}@keyframes hero-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero--error .hero__body{opacity:.4}.hero--error .hero__error{align-items:center;background-color:var(--hero-error-banner-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-banner-border,var(--color-danger));border-radius:var(--radius-md);display:flex;gap:var(--space-2);padding:var(--space-4)}.hero__error-title{color:var(--hero-error-title,var(--color-danger-strong));font-size:var(--text-sm);font-weight:var(--font-weight-semibold);margin:0}.hero__error-actions{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}@media (max-width:1024px){.hero--split .hero__inner,.hero--with-media .hero__inner{grid-template-columns:1fr}}@media (max-width:768px){.hero{padding-bottom:var(--space-14);padding-top:var(--space-10)}.hero__title{font-size:var(--text-3xl)}}@media (max-width:640px){.hero__title{font-size:var(--text-2xl)}.hero__metrics{grid-template-columns:repeat(auto-fit,minmax(calc(var(--hero-metric-min-width)*.8),1fr))}}

package/dist/components/icons.css

@@ -20,7 +20,6 @@
 /* ---------------------------------------------------------
    1. BASE ICON (INLINE SVG)
 --------------------------------------------------------- */
-
 .icon {
     display: inline-block;
     width: var(--icon-md);
@@ -71,7 +70,6 @@
      - used together with .icon
      - colour driven by currentColor
 --------------------------------------------------------- */
-
 .icon--mask {
     background-color: currentColor;
     mask-mode: luminance;
@@ -95,7 +93,6 @@
    3. CORE STATE ICONS (GLYPHS)
    Usage: <span class="icon icon--mask icon--STATE"></span>
 --------------------------------------------------------- */
-
 .icon--info {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.4' y='7.0' width='1.2' height='3.5' fill='white'/%3E%3Ccircle cx='8' cy='5.0' r='0.70' fill='white'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.4' y='7.0' width='1.2' height='3.5' fill='white'/%3E%3Ccircle cx='8' cy='5.0' r='0.70' fill='white'/%3E%3C/svg%3E");
@@ -149,7 +146,6 @@
 /* ---------------------------------------------------------
    4. GENERAL UI ICONS (GLYPHS)
 --------------------------------------------------------- */
-
 .icon--chevron-left {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='10 3 5 8 10 13'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='10 3 5 8 10 13'/%3E%3C/svg%3E");
@@ -408,7 +404,6 @@
 /* ---------------------------------------------------------
    5. LOADER ICONS (GLYPHS ONLY)
 --------------------------------------------------------- */
-
 .icon--spinner {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a6.5 6.5 0 016.5 6.5h-2A4.5 4.5 0 008 3.5v-2z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a6.5 6.5 0 016.5 6.5h-2A4.5 4.5 0 008 3.5v-2z'/%3E%3C/svg%3E");
@@ -427,7 +422,6 @@
 /* ---------------------------------------------------------
    5.1 MONEY
 --------------------------------------------------------- */
-
 .icon--money {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2' fill='black'/%3E%3Cpath d='M8 6.5v3M7 7.5h2M7 8.5h2' stroke='white' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2' fill='black'/%3E%3Cpath d='M8 6.5v3M7 7.5h2M7 8.5h2' stroke='white' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
@@ -441,7 +435,6 @@
 /* ---------------------------------------------------------
    5.2 STATUS
 --------------------------------------------------------- */
-
 .icon--check {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -485,7 +478,6 @@
 /* ---------------------------------------------------------
    5.3 EMAIL
 --------------------------------------------------------- */
-
 .icon--email {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3C/svg%3E");
@@ -576,6 +568,46 @@
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3 V6 H2 V10 H6 V13 L11 8 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
+.icon--take-left-fill {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3 V6 H14 V10 H10 V13 L5 8 Z' fill='white'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3 V6 H14 V10 H10 V13 L5 8 Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.icon--take-left-outline {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3 V6 H14 V10 H10 V13 L5 8 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3 V6 H14 V10 H10 V13 L5 8 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--take-up-fill {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10 H6 V14 H10 V10 H13 L8 5 Z' fill='white'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10 H6 V14 H10 V10 H13 L8 5 Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.icon--take-up-outline {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10 H6 V14 H10 V10 H13 L8 5 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10 H6 V14 H10 V10 H13 L8 5 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--take-down-fill {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='white'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.icon--take-down-outline {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--take-dow-fill {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='white'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.icon--take-dow-outline {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 H6 V2 H10 V6 H13 L8 11 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .icon--open-fill {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='6' width='12' height='8' fill='white'/%3E%3Cpath d='M4 6 L6 2 H14 V6 Z' fill='white'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='6' width='12' height='8' fill='white'/%3E%3Cpath d='M4 6 L6 2 H14 V6 Z' fill='white'/%3E%3C/svg%3E");
@@ -686,6 +718,26 @@
     mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9h4V5M19 9h-4V5M5 15h4v4M19 15h-4v4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
+.icon--panel-expand {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='4.2' y1='11.8' x2='11.8' y2='4.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='9.6,4.2 11.8,4.2 11.8,6.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='4.2' y1='11.8' x2='11.8' y2='4.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='9.6,4.2 11.8,4.2 11.8,6.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--panel-minimize {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='11.8' y1='4.2' x2='4.2' y2='11.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='4.2,9.6 4.2,11.8 6.4,11.8' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,2.5 13.5,2.5 13.5,7' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,13.5 2.5,13.5 2.5,9' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='11.8' y1='4.2' x2='4.2' y2='11.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='4.2,9.6 4.2,11.8 6.4,11.8' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--expand-panel {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='6.6' x2='8' y2='9.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,8.4 8,10.2 9.8,8.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='6.6' x2='8' y2='9.2' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,8.4 8,10.2 9.8,8.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.icon--minimize-panel {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='9.4' x2='8' y2='6.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,7.6 8,5.8 9.8,7.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.8' fill='none' stroke='white' stroke-width='1.4'/%3E%3Cline x1='2.6' y1='5.6' x2='13.4' y2='5.6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='9.4' x2='8' y2='6.8' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolyline points='6.2,7.6 8,5.8 9.8,7.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .icon--attach-outline {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.5l6.8-6.8a3 3 0 114.2 4.2l-8.6 8.6a5 5 0 11-7.1-7.1l8.3-8.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.5l6.8-6.8a3 3 0 114.2 4.2l-8.6 8.6a5 5 0 11-7.1-7.1l8.3-8.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -819,7 +871,6 @@
 /* ---------------------------------------------------------
    5A. LOADER ANIMATION - ROTATION (SPINNER)
 --------------------------------------------------------- */
-
 @keyframes icon-spin {
     from {
         transform: rotate(0deg);
@@ -836,7 +887,6 @@
 /* ---------------------------------------------------------
    5B. LOADER ANIMATION - PULSE (DOT / icon--pulse)
 --------------------------------------------------------- */
-
 @keyframes icon-pulse {
     0% {
         transform: scale(1);
@@ -859,7 +909,6 @@
 /* ---------------------------------------------------------
    5C. UNIFIED LOADER SYSTEM
 --------------------------------------------------------- */
-
 .icon--loader.icon--spinner,
 .icon--loader.icon--spinner-dots {
     animation: icon-spin 0.85s linear infinite;
@@ -890,7 +939,6 @@
 /* ---------------------------------------------------------
    6. ICON CONTAINERS
 --------------------------------------------------------- */
-
 .icon-container {
     display: inline-flex;
     align-items: center;
@@ -980,7 +1028,6 @@
 /* ---------------------------------------------------------
    7. ICON COLOUR UTILITIES
 --------------------------------------------------------- */
-
 .icon-color--accent {
     color: var(--color-accent);
 }
@@ -1036,7 +1083,6 @@
 /* ---------------------------------------------------------
    8. ICON IN BUTTONS
 --------------------------------------------------------- */
-
 .button .icon,
 .button--icon .icon {
     width: var(--icon-sm);
@@ -1074,7 +1120,6 @@
 /* ---------------------------------------------------------
    9. ICON BADGES (NOTIFICATION DOTS)
 --------------------------------------------------------- */
-
 .icon-badge {
     position: relative;
     display: inline-flex;
@@ -1120,7 +1165,6 @@
 /* ---------------------------------------------------------
    10. ICON DENSITY LAYERS (A/B/C)
 --------------------------------------------------------- */
-
 .icon--a {
     width: var(--icon-lg);
     height: var(--icon-lg);
@@ -1156,7 +1200,6 @@
 /* ---------------------------------------------------------
    11. AUTO-CONTRAST ON DARK/LIGHT SURFACES
 --------------------------------------------------------- */
-
 .surface-on-dark .icon,
 .bg-dark .icon {
     color: var(--color-text-on-strong);
@@ -1182,7 +1225,6 @@
 /* ---------------------------------------------------------
    12. INTEGRATION WITH OTHER COMPONENTS
 --------------------------------------------------------- */
-
 .list-group__icon,
 .media__icon svg,
 .steps__bullet svg,
@@ -1208,7 +1250,6 @@
 /* ---------------------------------------------------------
    13. ICON UTILITIES
 --------------------------------------------------------- */
-
 .icon--rotate-90 {
     transform: rotate(90deg);
 }