@24vlh/vds 0.3.4 → 0.3.6

package/dist/components/overlays.css

@@ -16,7 +16,6 @@
 /* ---------------------------------------------------------
    1. OVERLAYS TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-overlay],
 .vds-overlay {
     --modal-width-xs: 22.5rem;
@@ -36,7 +35,6 @@
 /* ---------------------------------------------------------
    2. OVERLAY BACKDROP
 --------------------------------------------------------- */
-
 .backdrop {
     position: fixed;
     top: 0;
@@ -77,7 +75,6 @@
 /* ---------------------------------------------------------
    3. BASE MODAL (NO ANIMATION)
 --------------------------------------------------------- */
-
 .modal {
     position: fixed;
     top: 0;
@@ -129,7 +126,6 @@
 /* ---------------------------------------------------------
    4. MODAL HEADER / BODY / FOOTER
 --------------------------------------------------------- */
-
 .modal__header {
     padding: var(--space-6) var(--space-8);
     border-bottom: 1px solid var(--color-border-subtle);
@@ -171,7 +167,6 @@
 /* ---------------------------------------------------------
    5. MODAL DENSITY VARIANTS
 --------------------------------------------------------- */
-
 .modal--a .modal__header,
 .modal--a .modal__footer {
     padding: var(--space-8) var(--space-10);
@@ -202,7 +197,6 @@
 /* ---------------------------------------------------------
    6. MODAL SIZES
 --------------------------------------------------------- */
-
 .modal--xs .modal__inner {
     max-width: var(--modal-width-xs);
 }
@@ -233,7 +227,6 @@
 /* ---------------------------------------------------------
    7. MODAL USE-CASE VARIANTS
 --------------------------------------------------------- */
-
 .modal--workspace .modal__inner {
     max-width: var(--modal-width-workspace);
     min-height: var(--modal-workspace-min-height);
@@ -325,7 +318,6 @@
 /* ---------------------------------------------------------
    8. MOBILE FULL-SCREEN & BOTTOM-SHEET (NO ANIMATIONS)
 --------------------------------------------------------- */
-
 @media (max-width: 768px) {
 
     .modal--fullscreen-mobile .modal__inner {
@@ -355,7 +347,6 @@
 /* ---------------------------------------------------------
    9. MODAL STATES
 --------------------------------------------------------- */
-
 .modal--success .modal__header {
     border-bottom-color: var(--color-success);
     background-color: var(--color-success-soft);
@@ -383,7 +374,6 @@
 /* ---------------------------------------------------------
    10. LOADING OVERLAY (NO BLUR)
 --------------------------------------------------------- */
-
 .modal--loading .modal__inner {
     position: relative;
 }
@@ -415,7 +405,6 @@
 /* ---------------------------------------------------------
    11. DRAWERS (NO ANIMATIONS)
 --------------------------------------------------------- */
-
 .drawer {
     position: fixed;
     top: 0;
@@ -477,7 +466,6 @@
 /* ---------------------------------------------------------
    12. INLINE OVERLAY PANEL
 --------------------------------------------------------- */
-
 .overlay-inline-container {
     position: relative;
 }
@@ -539,7 +527,6 @@
 /* ---------------------------------------------------------
    13. SPLIT MODAL
 --------------------------------------------------------- */
-
 .modal--split .modal__inner {
     display: grid;
     grid-template-columns: 2fr 1fr;
@@ -566,7 +553,6 @@
 /* ---------------------------------------------------------
    14. OPTIONAL MODAL CHROME REMOVAL
 --------------------------------------------------------- */
-
 .modal--no-header .modal__header {
     display: none;
 }
@@ -578,7 +564,6 @@
 /* ---------------------------------------------------------
    15. STACKING LEVELS
 --------------------------------------------------------- */
-
 .modal--level-2 {
     z-index: calc(90 + 10);
     z-index: calc(var(--z-modal, 90) + 10);

package/dist/components/overlays.min.css

@@ -1 +1 @@
-.vds-overlay,[data-vds-overlay]{--modal-width-xs:22.5rem;--modal-width-sm:26.25rem;--modal-width-md:40rem;--modal-width-lg:51.25rem;--modal-width-xl:65rem;--modal-loader-size-lg:2.5rem;--drawer-width:22.5rem;--modal-width-workspace:58rem;--modal-workspace-min-height:26rem;--modal-workspace-max-height:calc(100vh - var(--space-10))}.backdrop{backdrop-filter:none;background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;z-index:80;z-index:var(--z-backdrop,80)}.backdrop--light{background-color:var(--overlay-backdrop-light)}.backdrop--blocking,.backdrop--heavy{background-color:var(--overlay-backdrop-heavy)}.backdrop--blocking{cursor:not-allowed}.backdrop--active{opacity:1;pointer-events:auto}.modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transform:none;transition:none;z-index:90;z-index:var(--z-modal,90)}.modal--active{opacity:1;pointer-events:auto}.modal__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-height:calc(100vh - var(--space-20));max-width:var(--modal-width-md);overflow:hidden;pointer-events:auto;transition:none;width:100%}.modal__header{align-items:center;border-bottom:1px solid var(--color-border-subtle);display:flex;justify-content:space-between;padding:var(--space-6) var(--space-8)}.modal__title{font-size:var(--text-lg);font-weight:600}.modal__close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;padding:var(--space-2)}.modal__body{flex:1;overflow-y:auto;padding:var(--space-8)}.modal__footer{border-top:1px solid var(--color-border-subtle);display:flex;gap:var(--space-4);justify-content:flex-end;padding:var(--space-6) var(--space-8)}.modal--a .modal__footer,.modal--a .modal__header{padding:var(--space-8) var(--space-10)}.modal--a .modal__body{padding:var(--space-10)}.modal--b .modal__footer,.modal--b .modal__header{padding:var(--space-6) var(--space-8)}.modal--b .modal__body{padding:var(--space-8)}.modal--c .modal__footer,.modal--c .modal__header{padding:var(--space-4) var(--space-6)}.modal--c .modal__body{padding:var(--space-6)}.modal--xs .modal__inner{max-width:var(--modal-width-xs)}.modal--sm .modal__inner{max-width:var(--modal-width-sm)}.modal--md .modal__inner{max-width:var(--modal-width-md)}.modal--lg .modal__inner{max-width:var(--modal-width-lg)}.modal--xl .modal__inner{max-width:var(--modal-width-xl)}.modal--full .modal__inner{border-radius:0;height:100%;max-width:none;width:100%}.modal--workspace .modal__inner{max-height:var(--modal-workspace-max-height);max-width:var(--modal-width-workspace);min-height:var(--modal-workspace-min-height)}.modal--confirm .modal__inner{max-width:var(--modal-width-xs)}.modal--confirm .modal__body,.modal--confirm .modal__footer,.modal--confirm .modal__header{text-align:center}.modal--confirm .modal__footer{justify-content:center}.modal--blocking .modal__close{display:none}.modal__body--form{grid-gap:var(--space-6);display:grid;gap:var(--space-6)}.modal__section{grid-gap:var(--space-3);display:grid;gap:var(--space-3)}.modal__divider{background-color:var(--color-border-subtle);border:none;height:1px}.modal__footer--split{align-items:center;justify-content:space-between}.modal__footer--stack{align-items:stretch;flex-direction:column;justify-content:flex-start}.modal__icon{align-items:center;background-color:var(--color-accent-soft);border-radius:999px;color:var(--accent-soft-on,var(--color-on-accent));display:inline-flex;flex-shrink:0;font-size:var(--text-md);height:2.5rem;justify-content:center;line-height:1;width:2.5rem}.modal__icon--success{background-color:var(--color-success-soft);color:var(--color-success-strong)}.modal__icon--danger{background-color:var(--color-danger-soft);color:var(--color-danger-strong)}.modal__icon--info{background-color:var(--color-info-soft);color:var(--color-info-strong)}.modal__icon--warning{background-color:var(--color-warning-soft);color:var(--color-warning-strong)}@media (max-width:768px){.modal--fullscreen-mobile .modal__inner{border-radius:0;height:100%;max-height:none;max-width:none;width:100%}.modal--sheet{align-items:flex-end}.modal--sheet .modal__inner{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:80vh;max-width:none;width:100%}body.modal-open{overflow:hidden}}.modal--success .modal__header{background-color:var(--color-success-soft);border-bottom-color:var(--color-success);color:var(--semantic-success-text-strong,var(--color-success-strong))}.modal--danger .modal__header{background-color:var(--color-danger-soft);border-bottom-color:var(--color-danger);color:var(--semantic-error-text-strong,var(--color-danger-strong))}.modal--info .modal__header{background-color:var(--color-info-soft);border-bottom-color:var(--color-info);color:var(--semantic-info-text-strong,var(--color-info-strong))}.modal--warning .modal__header{background-color:var(--color-warning-soft);border-bottom-color:var(--color-warning);color:var(--semantic-warning-text-strong,var(--color-warning-strong))}.modal--loading .modal__inner{position:relative}.modal--loading .modal__loader{align-items:center;backdrop-filter:none;background-color:var(--overlay-backdrop-loading);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}.modal--loading .modal__loader-icon{stroke:var(--color-accent);fill:none;height:var(--modal-loader-size-lg);width:var(--modal-loader-size-lg)}.drawer{background-color:var(--color-surface);border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-width:90vw;position:fixed;top:0;transition:none;width:var(--drawer-width);z-index:95;z-index:var(--z-drawer,95)}.drawer--left{left:0}.drawer--right{right:0}.drawer--hidden{display:none}.drawer:not(.drawer--hidden){display:flex}.drawer__footer,.drawer__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-6)}.drawer__footer{border-bottom:none;border-top:1px solid var(--color-border-subtle)}.drawer__body{flex:1;overflow-y:auto;padding:var(--space-6)}.overlay-inline-container{position:relative}.overlay-inline{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);bottom:0;box-shadow:var(--shadow-1);display:none;left:0;position:absolute;right:0;top:0;z-index:10}.overlay-inline--active{display:block}.overlay-inline__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-4) var(--space-6)}.overlay-inline__body{padding:var(--space-6)}.overlay-inline--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.overlay-inline--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.overlay-inline--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.overlay-inline--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.modal--split .modal__inner{display:grid;grid-template-columns:2fr 1fr}.modal__side{border-left:1px solid var(--color-border-subtle);overflow-y:auto;padding:var(--space-8)}@media (max-width:768px){.modal--split .modal__inner{display:flex;flex-direction:column}.modal__side{border-left:none;border-top:1px solid var(--color-border-subtle)}}.modal--no-footer .modal__footer,.modal--no-header .modal__header{display:none}.modal--level-2{z-index:100;z-index:calc(var(--z-modal, 90) + 10)}.modal--level-3{z-index:110;z-index:calc(var(--z-modal, 90) + 20)}.backdrop--level-2{z-index:90;z-index:calc(var(--z-backdrop, 80) + 10)}.backdrop--level-3{z-index:100;z-index:calc(var(--z-backdrop, 80) + 20)}
+.vds-overlay,[data-vds-overlay]{--modal-width-xs:22.5rem;--modal-width-sm:26.25rem;--modal-width-md:40rem;--modal-width-lg:51.25rem;--modal-width-xl:65rem;--modal-loader-size-lg:2.5rem;--drawer-width:22.5rem;--modal-width-workspace:58rem;--modal-workspace-min-height:26rem;--modal-workspace-max-height:calc(100vh - var(--space-10))}.backdrop{backdrop-filter:none;background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;z-index:80;z-index:var(--z-backdrop,80)}.backdrop--light{background-color:var(--overlay-backdrop-light)}.backdrop--blocking,.backdrop--heavy{background-color:var(--overlay-backdrop-heavy)}.backdrop--blocking{cursor:not-allowed}.backdrop--active{opacity:1;pointer-events:auto}.modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transform:none;transition:none;z-index:90;z-index:var(--z-modal,90)}.modal--active{opacity:1;pointer-events:auto}.modal__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-height:calc(100vh - var(--space-20));max-width:var(--modal-width-md);overflow:hidden;pointer-events:auto;transition:none;width:100%}.modal__header{align-items:center;border-bottom:1px solid var(--color-border-subtle);display:flex;justify-content:space-between;padding:var(--space-6) var(--space-8)}.modal__title{font-size:var(--text-lg);font-weight:600}.modal__close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;padding:var(--space-2)}.modal__body{flex:1;overflow-y:auto;padding:var(--space-8)}.modal__footer{border-top:1px solid var(--color-border-subtle);display:flex;gap:var(--space-4);justify-content:flex-end;padding:var(--space-6) var(--space-8)}.modal--a .modal__footer,.modal--a .modal__header{padding:var(--space-8) var(--space-10)}.modal--a .modal__body{padding:var(--space-10)}.modal--b .modal__footer,.modal--b .modal__header{padding:var(--space-6) var(--space-8)}.modal--b .modal__body{padding:var(--space-8)}.modal--c .modal__footer,.modal--c .modal__header{padding:var(--space-4) var(--space-6)}.modal--c .modal__body{padding:var(--space-6)}.modal--xs .modal__inner{max-width:var(--modal-width-xs)}.modal--sm .modal__inner{max-width:var(--modal-width-sm)}.modal--md .modal__inner{max-width:var(--modal-width-md)}.modal--lg .modal__inner{max-width:var(--modal-width-lg)}.modal--xl .modal__inner{max-width:var(--modal-width-xl)}.modal--full .modal__inner{border-radius:0;height:100%;max-width:none;width:100%}.modal--workspace .modal__inner{max-height:var(--modal-workspace-max-height);max-width:var(--modal-width-workspace);min-height:var(--modal-workspace-min-height)}.modal--confirm .modal__inner{max-width:var(--modal-width-xs)}.modal--confirm .modal__body,.modal--confirm .modal__footer,.modal--confirm .modal__header{text-align:center}.modal--confirm .modal__footer{justify-content:center}.modal--blocking .modal__close{display:none}.modal__body--form{display:grid;grid-gap:var(--space-6);gap:var(--space-6)}.modal__section{display:grid;grid-gap:var(--space-3);gap:var(--space-3)}.modal__divider{background-color:var(--color-border-subtle);border:none;height:1px}.modal__footer--split{align-items:center;justify-content:space-between}.modal__footer--stack{align-items:stretch;flex-direction:column;justify-content:flex-start}.modal__icon{align-items:center;background-color:var(--color-accent-soft);border-radius:999px;color:var(--accent-soft-on,var(--color-on-accent));display:inline-flex;flex-shrink:0;font-size:var(--text-md);height:2.5rem;justify-content:center;line-height:1;width:2.5rem}.modal__icon--success{background-color:var(--color-success-soft);color:var(--color-success-strong)}.modal__icon--danger{background-color:var(--color-danger-soft);color:var(--color-danger-strong)}.modal__icon--info{background-color:var(--color-info-soft);color:var(--color-info-strong)}.modal__icon--warning{background-color:var(--color-warning-soft);color:var(--color-warning-strong)}@media (max-width:768px){.modal--fullscreen-mobile .modal__inner{border-radius:0;height:100%;max-height:none;max-width:none;width:100%}.modal--sheet{align-items:flex-end}.modal--sheet .modal__inner{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:80vh;max-width:none;width:100%}body.modal-open{overflow:hidden}}.modal--success .modal__header{background-color:var(--color-success-soft);border-bottom-color:var(--color-success);color:var(--semantic-success-text-strong,var(--color-success-strong))}.modal--danger .modal__header{background-color:var(--color-danger-soft);border-bottom-color:var(--color-danger);color:var(--semantic-error-text-strong,var(--color-danger-strong))}.modal--info .modal__header{background-color:var(--color-info-soft);border-bottom-color:var(--color-info);color:var(--semantic-info-text-strong,var(--color-info-strong))}.modal--warning .modal__header{background-color:var(--color-warning-soft);border-bottom-color:var(--color-warning);color:var(--semantic-warning-text-strong,var(--color-warning-strong))}.modal--loading .modal__inner{position:relative}.modal--loading .modal__loader{align-items:center;backdrop-filter:none;background-color:var(--overlay-backdrop-loading);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}.modal--loading .modal__loader-icon{fill:none;height:var(--modal-loader-size-lg);stroke:var(--color-accent);width:var(--modal-loader-size-lg)}.drawer{background-color:var(--color-surface);border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-3);display:flex;flex-direction:column;max-width:90vw;position:fixed;top:0;transition:none;width:var(--drawer-width);z-index:95;z-index:var(--z-drawer,95)}.drawer--left{left:0}.drawer--right{right:0}.drawer--hidden{display:none}.drawer:not(.drawer--hidden){display:flex}.drawer__footer,.drawer__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-6)}.drawer__footer{border-bottom:none;border-top:1px solid var(--color-border-subtle)}.drawer__body{flex:1;overflow-y:auto;padding:var(--space-6)}.overlay-inline-container{position:relative}.overlay-inline{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);bottom:0;box-shadow:var(--shadow-1);display:none;left:0;position:absolute;right:0;top:0;z-index:10}.overlay-inline--active{display:block}.overlay-inline__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-4) var(--space-6)}.overlay-inline__body{padding:var(--space-6)}.overlay-inline--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.overlay-inline--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.overlay-inline--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.overlay-inline--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.modal--split .modal__inner{display:grid;grid-template-columns:2fr 1fr}.modal__side{border-left:1px solid var(--color-border-subtle);overflow-y:auto;padding:var(--space-8)}@media (max-width:768px){.modal--split .modal__inner{display:flex;flex-direction:column}.modal__side{border-left:none;border-top:1px solid var(--color-border-subtle)}}.modal--no-footer .modal__footer,.modal--no-header .modal__header{display:none}.modal--level-2{z-index:100;z-index:calc(var(--z-modal, 90) + 10)}.modal--level-3{z-index:110;z-index:calc(var(--z-modal, 90) + 20)}.backdrop--level-2{z-index:90;z-index:calc(var(--z-backdrop, 80) + 10)}.backdrop--level-3{z-index:100;z-index:calc(var(--z-backdrop, 80) + 20)}

package/dist/components/progress.css

@@ -14,7 +14,6 @@
 /* ---------------------------------------------------------
    1. PROGRESS TOKENS
 --------------------------------------------------------- */
-
 [data-vds-progress],
 .vds-progress {
     --progress-height-sm: 0.35rem;
@@ -42,7 +41,6 @@
 /* ---------------------------------------------------------
    2. LINEAR PROGRESS
 --------------------------------------------------------- */
-
 .progress-stack {
     display: grid;
     grid-gap: var(--space-2);
@@ -157,7 +155,6 @@
 /* ---------------------------------------------------------
    3. PROGRESS SEMANTICS
 --------------------------------------------------------- */
-
 [data-vds-progress] .progress--success, .vds-progress .progress--success {
     --progress-fill: var(--color-success);
 }
@@ -177,7 +174,6 @@
 /* ---------------------------------------------------------
    4. STEPPER
 --------------------------------------------------------- */
-
 .stepper {
     display: flex;
     gap: var(--stepper-gap);
@@ -273,7 +269,6 @@
 /* ---------------------------------------------------------
    5. VERTICAL STEPPER
 --------------------------------------------------------- */
-
 .stepper--vertical {
     flex-direction: column;
     gap: var(--space-4);

package/dist/components/progress.min.css

@@ -1 +1 @@
-.vds-progress,[data-vds-progress]{--progress-height-sm:0.35rem;--progress-height-md:var(--space-2);--progress-height-lg:0.9rem;--progress-radius:var(--radius-sm);--progress-track-bg:var(--color-muted-bg);--progress-track-border:transparent;--progress-fill:var(--color-accent);--progress-label-color:var(--color-text-muted);--progress-value-color:var(--color-text);--progress-meta-color:var(--color-text-muted);--stepper-gap:var(--space-6);--stepper-marker-size:var(--space-6);--stepper-line-size:2px;--stepper-line:var(--color-border-subtle);--stepper-marker-bg:var(--color-surface);--stepper-marker-border:var(--color-border-subtle);--stepper-marker-text:var(--color-text);--stepper-active:var(--color-accent);--stepper-title-bg:var(--color-surface)}.progress-stack{grid-gap:var(--space-2);display:grid;gap:var(--space-2);width:100%}.progress-stack--compact{gap:var(--space-1_5)}.progress__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.progress__label{color:var(--progress-label-color);font-size:var(--text-xs)}.progress__value{color:var(--progress-value-color);font-size:var(--text-xs);font-weight:600}.progress__meta{color:var(--progress-meta-color);font-size:var(--text-xs)}.progress,.progress__track{background:var(--progress-track-bg);border:1px solid var(--progress-track-border);border-radius:var(--progress-radius);height:var(--progress-height-md);overflow:hidden;position:relative;width:100%}.progress__bar{background:var(--progress-fill);border-radius:inherit;height:100%;transition:width var(--transition-normal);width:0;width:var(--progress-value,0)}.vds-progress .progress--sm,.vds-progress .progress--sm .progress__track,[data-vds-progress] .progress--sm,[data-vds-progress] .progress--sm .progress__track{height:var(--progress-height-sm)}.vds-progress .progress--lg,.vds-progress .progress--lg .progress__track,[data-vds-progress] .progress--lg,[data-vds-progress] .progress--lg .progress__track{height:var(--progress-height-lg)}.vds-progress .progress--outlined,[data-vds-progress] .progress--outlined{--progress-track-border:var(--color-border-subtle)}.vds-progress .progress--pill,[data-vds-progress] .progress--pill{--progress-radius:var(--radius-full)}.vds-progress .progress--striped .progress__bar,[data-vds-progress] .progress--striped .progress__bar{background-image:linear-gradient(45deg,hsla(0,0%,100%,.2) 25%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 50%,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 75%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0));background-size:1.2rem 1.2rem}.vds-progress .progress--animated .progress__bar,[data-vds-progress] .progress--animated .progress__bar{animation:vds-progress-stripes .9s linear infinite}.vds-progress .progress--indeterminate .progress__bar,[data-vds-progress] .progress--indeterminate .progress__bar{animation:progress-indeterminate 1.4s ease infinite;width:35%}@keyframes vds-progress-stripes{0%{background-position:1.2rem 0}to{background-position:0 0}}@keyframes progress-indeterminate{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}.vds-progress .progress--success,[data-vds-progress] .progress--success{--progress-fill:var(--color-success)}.vds-progress .progress--info,[data-vds-progress] .progress--info{--progress-fill:var(--color-info)}.vds-progress .progress--warning,[data-vds-progress] .progress--warning{--progress-fill:var(--color-warning)}.vds-progress .progress--danger,[data-vds-progress] .progress--danger{--progress-fill:var(--color-danger)}.stepper{align-items:flex-start;display:flex;gap:var(--stepper-gap);padding:var(--space-5)}.stepper__item{display:flex;flex:1 1 0;gap:var(--space-3);min-width:0;position:relative}.stepper__item:not(:last-child):after{background:var(--stepper-line);content:"";height:var(--stepper-line-size);left:calc(var(--stepper-marker-size) + var(--space-3));position:absolute;right:calc(var(--stepper-gap)*-1 + var(--stepper-marker-size)/2);top:calc(var(--stepper-marker-size)/2);z-index:0}.stepper__marker{align-items:center;background:var(--stepper-marker-bg);border:1px solid var(--stepper-marker-border);border-radius:999px;color:var(--stepper-marker-text);display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:600;height:var(--stepper-marker-size);justify-content:center;width:var(--stepper-marker-size);z-index:1}.stepper__content{display:flex;flex-direction:column;gap:var(--space-1);position:relative;z-index:1}.stepper__title{align-self:flex-start;background:var(--stepper-title-bg);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--color-text);font-size:var(--text-sm);font-weight:600;padding-right:var(--space-2)}.stepper__desc{color:var(--color-text-muted);font-size:var(--text-xs)}.stepper__item--active .stepper__marker{border-color:var(--stepper-active);box-shadow:0 0 0 2px color-mix(in srgb,var(--stepper-active) 30%,transparent);color:var(--stepper-active)}.stepper__item--complete .stepper__marker{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-success)}.stepper__item--disabled .stepper__content{opacity:.5;pointer-events:none}.stepper__item--disabled .stepper__marker{pointer-events:none}.stepper--compact{--stepper-gap:var(--space-4);--stepper-marker-size:var(--space-5)}.stepper--vertical{flex-direction:column;gap:var(--space-4)}.stepper--vertical .stepper__item{padding-left:calc(var(--stepper-marker-size) + var(--space-3))}.stepper--vertical .stepper__marker{left:0;position:absolute;top:0}.stepper--vertical .stepper__item:not(:last-child):after{height:calc(100% + var(--space-4));left:calc(var(--stepper-marker-size)/2);right:auto;top:var(--stepper-marker-size);width:var(--stepper-line-size)}@media (max-width:768px){.stepper{flex-direction:column}.stepper__item{padding-left:calc(var(--stepper-marker-size) + var(--space-3))}.stepper__marker{left:0;position:absolute;top:0}.stepper__item:not(:last-child):after{height:calc(100% + var(--space-4));left:calc(var(--stepper-marker-size)/2);right:auto;top:var(--stepper-marker-size);width:var(--stepper-line-size)}}
+.vds-progress,[data-vds-progress]{--progress-height-sm:0.35rem;--progress-height-md:var(--space-2);--progress-height-lg:0.9rem;--progress-radius:var(--radius-sm);--progress-track-bg:var(--color-muted-bg);--progress-track-border:transparent;--progress-fill:var(--color-accent);--progress-label-color:var(--color-text-muted);--progress-value-color:var(--color-text);--progress-meta-color:var(--color-text-muted);--stepper-gap:var(--space-6);--stepper-marker-size:var(--space-6);--stepper-line-size:2px;--stepper-line:var(--color-border-subtle);--stepper-marker-bg:var(--color-surface);--stepper-marker-border:var(--color-border-subtle);--stepper-marker-text:var(--color-text);--stepper-active:var(--color-accent);--stepper-title-bg:var(--color-surface)}.progress-stack{display:grid;grid-gap:var(--space-2);gap:var(--space-2);width:100%}.progress-stack--compact{gap:var(--space-1_5)}.progress__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.progress__label{color:var(--progress-label-color);font-size:var(--text-xs)}.progress__value{color:var(--progress-value-color);font-size:var(--text-xs);font-weight:600}.progress__meta{color:var(--progress-meta-color);font-size:var(--text-xs)}.progress,.progress__track{background:var(--progress-track-bg);border:1px solid var(--progress-track-border);border-radius:var(--progress-radius);height:var(--progress-height-md);overflow:hidden;position:relative;width:100%}.progress__bar{background:var(--progress-fill);border-radius:inherit;height:100%;transition:width var(--transition-normal);width:0;width:var(--progress-value,0)}.vds-progress .progress--sm,.vds-progress .progress--sm .progress__track,[data-vds-progress] .progress--sm,[data-vds-progress] .progress--sm .progress__track{height:var(--progress-height-sm)}.vds-progress .progress--lg,.vds-progress .progress--lg .progress__track,[data-vds-progress] .progress--lg,[data-vds-progress] .progress--lg .progress__track{height:var(--progress-height-lg)}.vds-progress .progress--outlined,[data-vds-progress] .progress--outlined{--progress-track-border:var(--color-border-subtle)}.vds-progress .progress--pill,[data-vds-progress] .progress--pill{--progress-radius:var(--radius-full)}.vds-progress .progress--striped .progress__bar,[data-vds-progress] .progress--striped .progress__bar{background-image:linear-gradient(45deg,hsla(0,0%,100%,.2) 25%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 50%,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 75%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0));background-size:1.2rem 1.2rem}.vds-progress .progress--animated .progress__bar,[data-vds-progress] .progress--animated .progress__bar{animation:vds-progress-stripes .9s linear infinite}.vds-progress .progress--indeterminate .progress__bar,[data-vds-progress] .progress--indeterminate .progress__bar{animation:progress-indeterminate 1.4s ease infinite;width:35%}@keyframes vds-progress-stripes{0%{background-position:1.2rem 0}to{background-position:0 0}}@keyframes progress-indeterminate{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}.vds-progress .progress--success,[data-vds-progress] .progress--success{--progress-fill:var(--color-success)}.vds-progress .progress--info,[data-vds-progress] .progress--info{--progress-fill:var(--color-info)}.vds-progress .progress--warning,[data-vds-progress] .progress--warning{--progress-fill:var(--color-warning)}.vds-progress .progress--danger,[data-vds-progress] .progress--danger{--progress-fill:var(--color-danger)}.stepper{align-items:flex-start;display:flex;gap:var(--stepper-gap);padding:var(--space-5)}.stepper__item{display:flex;flex:1 1 0;gap:var(--space-3);min-width:0;position:relative}.stepper__item:not(:last-child):after{background:var(--stepper-line);content:"";height:var(--stepper-line-size);left:calc(var(--stepper-marker-size) + var(--space-3));position:absolute;right:calc(var(--stepper-gap)*-1 + var(--stepper-marker-size)/2);top:calc(var(--stepper-marker-size)/2);z-index:0}.stepper__marker{align-items:center;background:var(--stepper-marker-bg);border:1px solid var(--stepper-marker-border);border-radius:999px;color:var(--stepper-marker-text);display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:600;height:var(--stepper-marker-size);justify-content:center;width:var(--stepper-marker-size);z-index:1}.stepper__content{display:flex;flex-direction:column;gap:var(--space-1);position:relative;z-index:1}.stepper__title{align-self:flex-start;background:var(--stepper-title-bg);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--color-text);font-size:var(--text-sm);font-weight:600;padding-right:var(--space-2)}.stepper__desc{color:var(--color-text-muted);font-size:var(--text-xs)}.stepper__item--active .stepper__marker{border-color:var(--stepper-active);box-shadow:0 0 0 2px color-mix(in srgb,var(--stepper-active) 30%,transparent);color:var(--stepper-active)}.stepper__item--complete .stepper__marker{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-success)}.stepper__item--disabled .stepper__content{opacity:.5;pointer-events:none}.stepper__item--disabled .stepper__marker{pointer-events:none}.stepper--compact{--stepper-gap:var(--space-4);--stepper-marker-size:var(--space-5)}.stepper--vertical{flex-direction:column;gap:var(--space-4)}.stepper--vertical .stepper__item{padding-left:calc(var(--stepper-marker-size) + var(--space-3))}.stepper--vertical .stepper__marker{left:0;position:absolute;top:0}.stepper--vertical .stepper__item:not(:last-child):after{height:calc(100% + var(--space-4));left:calc(var(--stepper-marker-size)/2);right:auto;top:var(--stepper-marker-size);width:var(--stepper-line-size)}@media (max-width:768px){.stepper{flex-direction:column}.stepper__item{padding-left:calc(var(--stepper-marker-size) + var(--space-3))}.stepper__marker{left:0;position:absolute;top:0}.stepper__item:not(:last-child):after{height:calc(100% + var(--space-4));left:calc(var(--stepper-marker-size)/2);right:auto;top:var(--stepper-marker-size);width:var(--stepper-line-size)}}

package/dist/components/sections.css

@@ -20,7 +20,6 @@
 /* ---------------------------------------------------------
    1. BASE SECTION CONTAINER
 --------------------------------------------------------- */
-
 .section {
     --section-pad-top: var(--section-spacing-md);
     --section-pad-bottom: var(--section-spacing-md);
@@ -49,7 +48,6 @@
 /* ---------------------------------------------------------
    2. INNER WIDTH + EDGE CONTROL
 --------------------------------------------------------- */
-
 .section--tight {
     --section-inner-max: var(--content-width-md);
 }
@@ -105,7 +103,6 @@
 /* ---------------------------------------------------------
    3. LEGACY DENSITY SYSTEM (A / B / C / FLUSH)
 --------------------------------------------------------- */
-
 .section--a {
     --section-pad-top: var(--space-20);
     --section-pad-bottom: var(--space-20);
@@ -129,7 +126,6 @@
 /* ---------------------------------------------------------
    4. NEW UNIVERSAL SECTION RHYTHM (XS–XL)
 --------------------------------------------------------- */
-
 .section--xs {
     --section-pad-top: var(--section-spacing-xs);
     --section-pad-bottom: var(--section-spacing-xs);
@@ -158,7 +154,6 @@
 /* ---------------------------------------------------------
    5. SECTION HEADER SYSTEM
 --------------------------------------------------------- */
-
 .section__header {
     display: flex;
     flex-direction: column;
@@ -220,7 +215,6 @@
 /* ---------------------------------------------------------
    6. SECTION DIVIDERS
 --------------------------------------------------------- */
-
 .section--divided {
     border-top: 1px solid var(--color-border-subtle);
 }
@@ -238,7 +232,6 @@
 /* ---------------------------------------------------------
    7. SURFACES (surface / subtle / brand)
 --------------------------------------------------------- */
-
 .section--surface {
     --section-pad-top: var(--section-spacing-lg);
     --section-pad-bottom: var(--section-spacing-lg);
@@ -265,7 +258,6 @@
 /* ---------------------------------------------------------
    8. ALTERNATE BACKGROUND
 --------------------------------------------------------- */
-
 .section--alt {
     background-color: var(--color-bg-soft);
 }
@@ -273,7 +265,6 @@
 /* ---------------------------------------------------------
    9. SPLIT SECTIONS - CLEAN GRID REVERSAL
 --------------------------------------------------------- */
-
 .section--split .section__inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -299,7 +290,6 @@
 /* ---------------------------------------------------------
    10. INSET SECTIONS (Base + SM/LG)
 --------------------------------------------------------- */
-
 .section--inset .section__inner {
     background-color: var(--color-surface);
     border-radius: var(--radius-md);
@@ -318,7 +308,6 @@
 /* ---------------------------------------------------------
    11. COLUMN GRIDS (2/3/4/5/6/auto) + GAP VARIANTS
 --------------------------------------------------------- */
-
 .section__grid-2,
 .section__grid-3,
 .section__grid-4,
@@ -369,7 +358,6 @@
 /* ---------------------------------------------------------
    12. CONTENT STACKS (VERTICAL)
 --------------------------------------------------------- */
-
 .section__stack {
     display: flex;
     flex-direction: column;
@@ -391,7 +379,6 @@
 /* ---------------------------------------------------------
    13. INLINE STACKS (HORIZONTAL)
 --------------------------------------------------------- */
-
 .section__inline {
     display: flex;
     flex-direction: row;
@@ -416,7 +403,6 @@
 /* ---------------------------------------------------------
    14. VALUE / LIST SECTIONS
 --------------------------------------------------------- */
-
 .section__list {
     display: flex;
     flex-direction: column;
@@ -452,7 +438,6 @@
 /* ---------------------------------------------------------
    15. RESPONSIVE BEHAVIOUR
 --------------------------------------------------------- */
-
 @media (max-width: 1280px) {
     .section__grid-2,
     .section__grid-3,
@@ -540,7 +525,6 @@
 /* ---------------------------------------------------------
    16. PADDING OVERRIDES (TOP / BOTTOM)
 --------------------------------------------------------- */
-
 .section--pad-top-none {
     --section-pad-top: 0;
 }

package/dist/components/sections.min.css

@@ -1 +1 @@
-.section{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md);--section-inner-max:var(--layout-max-width);--section-inner-pad:var(--space-6);--section-inner-gap:var(--space-6);background-color:var(--color-bg);padding-bottom:var(--section-pad-bottom);padding-top:var(--section-pad-top);position:relative;width:100%}.section__inner{display:flex;flex-direction:column;gap:var(--section-inner-gap);margin:0 auto;max-width:var(--section-inner-max);padding:0 var(--section-inner-pad);width:100%}.section--tight{--section-inner-max:var(--content-width-md)}.section--narrow{--section-inner-max:var(--content-width-lg)}.section--relaxed{--section-inner-max:90ch}.section--wide{--section-inner-max:var(--content-width-2xl)}.section--full{--section-inner-max:none}.section--pad-x-sm{--section-inner-pad:var(--space-4)}.section--pad-x-md{--section-inner-pad:var(--space-6)}.section--pad-x-lg{--section-inner-pad:var(--space-8)}.section--pad-x-xl{--section-inner-pad:var(--space-10)}.section--edge{--section-inner-pad:0}.section--gap-sm{--section-inner-gap:var(--space-4)}.section--gap-lg{--section-inner-gap:var(--space-10)}.section--gap-xl{--section-inner-gap:var(--space-14)}.section--a{--section-pad-top:var(--space-20);--section-pad-bottom:var(--space-20)}.section--b{--section-pad-top:var(--space-14);--section-pad-bottom:var(--space-14)}.section--c{--section-pad-top:var(--space-10);--section-pad-bottom:var(--space-10)}.section--flush{--section-pad-top:0;--section-pad-bottom:0}.section--xs{--section-pad-top:var(--section-spacing-xs);--section-pad-bottom:var(--section-spacing-xs)}.section--sm{--section-pad-top:var(--section-spacing-sm);--section-pad-bottom:var(--section-spacing-sm)}.section--md{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md)}.section--lg{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg)}.section--xl{--section-pad-top:var(--section-spacing-xl);--section-pad-bottom:var(--section-spacing-xl)}.section__header{display:flex;flex-direction:column;gap:var(--space-3);max-width:70ch}.section__eyebrow{color:var(--section-brand-eyebrow,var(--color-text-muted));font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.section__title{color:var(--section-brand-title,var(--color-text));font-size:var(--text-2xl);font-weight:600;line-height:1.2}.section__subtitle{color:var(--section-brand-subtitle,var(--color-text-muted));font-size:var(--text-sm);max-width:60ch}.section--a .section__title{font-size:var(--text-3xl)}.section--b .section__title{font-size:var(--text-2xl)}.section--c .section__title{font-size:var(--text-xl)}.section--center .section__header{align-items:center;text-align:center}.section--right .section__header{align-items:flex-end;text-align:right}.section__header--tight{gap:var(--space-2)}.section__header--wide{gap:var(--space-6)}.section--divided{border-top:1px solid var(--color-border-subtle)}.section--divided+.section--divided{border-bottom:1px solid var(--color-border-subtle);border-top:none}.section--divided-x{border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle)}.section--surface{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg);background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);transition:background-color .15s ease}.section--surface:hover{background-color:var(--color-surface-hover)}.section--subtle{background-color:var(--color-surface-subtle)}.section--brand{background-color:var(--color-accent-soft)}.section--alt{background-color:var(--color-bg-soft)}.section--split .section__inner,.section--split-reverse .section__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.section--split-reverse .section__inner>:first-child{order:2}.section--split-reverse .section__inner>:last-child{order:1}.section--inset .section__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-10)}.section--inset-sm .section__inner{padding:var(--space-6)}.section--inset-lg .section__inner{padding:var(--space-14)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-gap:var(--space-10);display:grid;gap:var(--space-10)}.section__grid-2{grid-template-columns:repeat(2,1fr)}.section__grid-3{grid-template-columns:repeat(3,1fr)}.section__grid-4{grid-template-columns:repeat(4,1fr)}.section__grid-5{grid-template-columns:repeat(5,1fr)}.section__grid-6{grid-template-columns:repeat(6,1fr)}.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.section__grid-sm{gap:var(--space-4)}.section__grid-md{gap:var(--space-6)}.section__grid-lg{gap:var(--space-14)}.section__stack{display:flex;flex-direction:column;gap:var(--space-6)}.section__stack-sm{display:flex;flex-direction:column;gap:var(--space-4)}.section__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.section__inline{gap:var(--space-3)}.section__inline,.section__inline-sm{align-items:center;display:flex;flex-direction:row}.section__inline-sm{gap:var(--space-2)}.section__inline-lg{align-items:center;display:flex;flex-direction:row;gap:var(--space-4)}.section__list{display:flex;flex-direction:column;gap:var(--space-3)}.section__list-item{align-items:flex-start;color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--space-3)}.section__list-item svg{stroke:var(--color-accent);fill:none;flex-shrink:0;height:1.25em;width:1.25em}.section__list-item-title{color:var(--color-text);font-weight:600}.section__list-item-desc{color:var(--color-text-muted);font-size:var(--text-sm)}@media (max-width:1280px){.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media (max-width:1024px){.section--split .section__inner,.section--split-reverse .section__inner{grid-template-columns:1fr}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width:768px){.section,.section--a,.section--b,.section--c{--section-pad-top:var(--space-10);--section-pad-bottom:var(--space-10)}.section--xs{--section-pad-top:var(--section-spacing-xs);--section-pad-bottom:var(--section-spacing-xs)}.section--sm{--section-pad-top:var(--section-spacing-sm);--section-pad-bottom:var(--section-spacing-sm)}.section--md{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md)}.section--lg{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg)}.section--xl{--section-pad-top:var(--section-spacing-xl);--section-pad-bottom:var(--section-spacing-xl)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.section__title{font-size:var(--text-xl)}.section__subtitle{font-size:var(--text-sm)}.section--inset .section__inner{padding:var(--space-6)}}.section--pad-top-none{--section-pad-top:0}.section--pad-top-xs{--section-pad-top:var(--section-spacing-xs)}.section--pad-top-sm{--section-pad-top:var(--section-spacing-sm)}.section--pad-top-md{--section-pad-top:var(--section-spacing-md)}.section--pad-top-lg{--section-pad-top:var(--section-spacing-lg)}.section--pad-top-xl{--section-pad-top:var(--section-spacing-xl)}.section--pad-bottom-none{--section-pad-bottom:0}.section--pad-bottom-xs{--section-pad-bottom:var(--section-spacing-xs)}.section--pad-bottom-sm{--section-pad-bottom:var(--section-spacing-sm)}.section--pad-bottom-md{--section-pad-bottom:var(--section-spacing-md)}.section--pad-bottom-lg{--section-pad-bottom:var(--section-spacing-lg)}.section--pad-bottom-xl{--section-pad-bottom:var(--section-spacing-xl)}
+.section{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md);--section-inner-max:var(--layout-max-width);--section-inner-pad:var(--space-6);--section-inner-gap:var(--space-6);background-color:var(--color-bg);padding-bottom:var(--section-pad-bottom);padding-top:var(--section-pad-top);position:relative;width:100%}.section__inner{display:flex;flex-direction:column;gap:var(--section-inner-gap);margin:0 auto;max-width:var(--section-inner-max);padding:0 var(--section-inner-pad);width:100%}.section--tight{--section-inner-max:var(--content-width-md)}.section--narrow{--section-inner-max:var(--content-width-lg)}.section--relaxed{--section-inner-max:90ch}.section--wide{--section-inner-max:var(--content-width-2xl)}.section--full{--section-inner-max:none}.section--pad-x-sm{--section-inner-pad:var(--space-4)}.section--pad-x-md{--section-inner-pad:var(--space-6)}.section--pad-x-lg{--section-inner-pad:var(--space-8)}.section--pad-x-xl{--section-inner-pad:var(--space-10)}.section--edge{--section-inner-pad:0}.section--gap-sm{--section-inner-gap:var(--space-4)}.section--gap-lg{--section-inner-gap:var(--space-10)}.section--gap-xl{--section-inner-gap:var(--space-14)}.section--a{--section-pad-top:var(--space-20);--section-pad-bottom:var(--space-20)}.section--b{--section-pad-top:var(--space-14);--section-pad-bottom:var(--space-14)}.section--c{--section-pad-top:var(--space-10);--section-pad-bottom:var(--space-10)}.section--flush{--section-pad-top:0;--section-pad-bottom:0}.section--xs{--section-pad-top:var(--section-spacing-xs);--section-pad-bottom:var(--section-spacing-xs)}.section--sm{--section-pad-top:var(--section-spacing-sm);--section-pad-bottom:var(--section-spacing-sm)}.section--md{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md)}.section--lg{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg)}.section--xl{--section-pad-top:var(--section-spacing-xl);--section-pad-bottom:var(--section-spacing-xl)}.section__header{display:flex;flex-direction:column;gap:var(--space-3);max-width:70ch}.section__eyebrow{color:var(--section-brand-eyebrow,var(--color-text-muted));font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.section__title{color:var(--section-brand-title,var(--color-text));font-size:var(--text-2xl);font-weight:600;line-height:1.2}.section__subtitle{color:var(--section-brand-subtitle,var(--color-text-muted));font-size:var(--text-sm);max-width:60ch}.section--a .section__title{font-size:var(--text-3xl)}.section--b .section__title{font-size:var(--text-2xl)}.section--c .section__title{font-size:var(--text-xl)}.section--center .section__header{align-items:center;text-align:center}.section--right .section__header{align-items:flex-end;text-align:right}.section__header--tight{gap:var(--space-2)}.section__header--wide{gap:var(--space-6)}.section--divided{border-top:1px solid var(--color-border-subtle)}.section--divided+.section--divided{border-bottom:1px solid var(--color-border-subtle);border-top:none}.section--divided-x{border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle)}.section--surface{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg);background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);transition:background-color .15s ease}.section--surface:hover{background-color:var(--color-surface-hover)}.section--subtle{background-color:var(--color-surface-subtle)}.section--brand{background-color:var(--color-accent-soft)}.section--alt{background-color:var(--color-bg-soft)}.section--split .section__inner,.section--split-reverse .section__inner{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-12);gap:var(--space-12)}.section--split-reverse .section__inner>:first-child{order:2}.section--split-reverse .section__inner>:last-child{order:1}.section--inset .section__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-10)}.section--inset-sm .section__inner{padding:var(--space-6)}.section--inset-lg .section__inner{padding:var(--space-14)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{display:grid;grid-gap:var(--space-10);gap:var(--space-10)}.section__grid-2{grid-template-columns:repeat(2,1fr)}.section__grid-3{grid-template-columns:repeat(3,1fr)}.section__grid-4{grid-template-columns:repeat(4,1fr)}.section__grid-5{grid-template-columns:repeat(5,1fr)}.section__grid-6{grid-template-columns:repeat(6,1fr)}.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.section__grid-sm{gap:var(--space-4)}.section__grid-md{gap:var(--space-6)}.section__grid-lg{gap:var(--space-14)}.section__stack{display:flex;flex-direction:column;gap:var(--space-6)}.section__stack-sm{display:flex;flex-direction:column;gap:var(--space-4)}.section__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.section__inline{gap:var(--space-3)}.section__inline,.section__inline-sm{align-items:center;display:flex;flex-direction:row}.section__inline-sm{gap:var(--space-2)}.section__inline-lg{align-items:center;display:flex;flex-direction:row;gap:var(--space-4)}.section__list{display:flex;flex-direction:column;gap:var(--space-3)}.section__list-item{align-items:flex-start;color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--space-3)}.section__list-item svg{fill:none;flex-shrink:0;height:1.25em;stroke:var(--color-accent);width:1.25em}.section__list-item-title{color:var(--color-text);font-weight:600}.section__list-item-desc{color:var(--color-text-muted);font-size:var(--text-sm)}@media (max-width:1280px){.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media (max-width:1024px){.section--split .section__inner,.section--split-reverse .section__inner{grid-template-columns:1fr}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width:768px){.section,.section--a,.section--b,.section--c{--section-pad-top:var(--space-10);--section-pad-bottom:var(--space-10)}.section--xs{--section-pad-top:var(--section-spacing-xs);--section-pad-bottom:var(--section-spacing-xs)}.section--sm{--section-pad-top:var(--section-spacing-sm);--section-pad-bottom:var(--section-spacing-sm)}.section--md{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md)}.section--lg{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg)}.section--xl{--section-pad-top:var(--section-spacing-xl);--section-pad-bottom:var(--section-spacing-xl)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.section__title{font-size:var(--text-xl)}.section__subtitle{font-size:var(--text-sm)}.section--inset .section__inner{padding:var(--space-6)}}.section--pad-top-none{--section-pad-top:0}.section--pad-top-xs{--section-pad-top:var(--section-spacing-xs)}.section--pad-top-sm{--section-pad-top:var(--section-spacing-sm)}.section--pad-top-md{--section-pad-top:var(--section-spacing-md)}.section--pad-top-lg{--section-pad-top:var(--section-spacing-lg)}.section--pad-top-xl{--section-pad-top:var(--section-spacing-xl)}.section--pad-bottom-none{--section-pad-bottom:0}.section--pad-bottom-xs{--section-pad-bottom:var(--section-spacing-xs)}.section--pad-bottom-sm{--section-pad-bottom:var(--section-spacing-sm)}.section--pad-bottom-md{--section-pad-bottom:var(--section-spacing-md)}.section--pad-bottom-lg{--section-pad-bottom:var(--section-spacing-lg)}.section--pad-bottom-xl{--section-pad-bottom:var(--section-spacing-xl)}

package/dist/components/skeleton.css

@@ -18,7 +18,6 @@
 /* ---------------------------------------------------------
    1. SKELETON TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-skeleton],
 .vds-skeleton {
     --skeleton-line-height: 1rem;
@@ -29,7 +28,6 @@
 /* ---------------------------------------------------------
    2. SHIMMER ANIMATION (Shared with forms)
 --------------------------------------------------------- */
-
 @keyframes vds-skeleton-shimmer {
     0% {
         transform: translateX(-150%);
@@ -42,7 +40,6 @@
 /* ---------------------------------------------------------
    3. BASE SKELETON
 --------------------------------------------------------- */
-
 .skeleton {
     position: relative;
     display: block;
@@ -117,7 +114,6 @@
 /* ---------------------------------------------------------
    4. SKELETON LINE (Text simulation)
 --------------------------------------------------------- */
-
 .skeleton-line {
     display: block;
     width: 100%;
@@ -180,7 +176,6 @@
 /* ---------------------------------------------------------
    5. SKELETON AVATAR
 --------------------------------------------------------- */
-
 .skeleton-avatar {
     display: inline-block;
 
@@ -231,7 +226,6 @@
 /* ---------------------------------------------------------
    6. SKELETON BLOCK (Media / Images)
 --------------------------------------------------------- */
-
 .skeleton-block {
     width: 100%;
     background-color: var(--color-muted-bg);
@@ -289,7 +283,6 @@
 /* ---------------------------------------------------------
    7. SKELETON CARD (Composite pattern)
 --------------------------------------------------------- */
-
 .skeleton-card {
     display: flex;
     flex-direction: column;
@@ -328,7 +321,6 @@
 /* ---------------------------------------------------------
    8. SKELETON ROW (Table loading)
 --------------------------------------------------------- */
-
 .skeleton-row td {
     padding: var(--space-3) var(--space-4);
 }
@@ -344,7 +336,6 @@
 /* ---------------------------------------------------------
    9. SKELETON ITEM (List items)
 --------------------------------------------------------- */
-
 .skeleton-item {
     display: flex;
     align-items: center;
@@ -365,7 +356,6 @@
 /* ---------------------------------------------------------
    10. COMPOSITION HELPERS
 --------------------------------------------------------- */
-
 .skeleton-stack {
     display: flex;
     flex-direction: column;
@@ -393,7 +383,6 @@
 /* ---------------------------------------------------------
    11. REDUCED MOTION HANDLING
 --------------------------------------------------------- */
-
 @media (prefers-reduced-motion: reduce) {
     .skeleton::after,
     .skeleton-line::after,

package/dist/components/state.css

@@ -14,7 +14,6 @@
 /* ---------------------------------------------------------
    1. STATE TOKENS
 --------------------------------------------------------- */
-
 [data-vds-state],
 .vds-state {
     --state-gap: var(--space-4);
@@ -36,7 +35,6 @@
 /* ---------------------------------------------------------
    2. BASE STATE
 --------------------------------------------------------- */
-
 .state {
     display: flex;
     flex-direction: column;
@@ -112,7 +110,6 @@
 /* ---------------------------------------------------------
    3. VARIANTS
 --------------------------------------------------------- */
-
 .state--left {
     align-items: flex-start;
     text-align: left;

package/dist/components/tables.css

@@ -21,7 +21,6 @@
 /* ---------------------------------------------------------
    1. TABLE TOKEN DEFINITIONS
 --------------------------------------------------------- */
-
 [data-vds-table],
 .vds-table {
     --table-currency-tint: color-mix(in srgb, currentColor 50%, transparent 30%);
@@ -30,7 +29,6 @@
 /* ---------------------------------------------------------
    2. TABLE WRAPPERS & PANELS
 --------------------------------------------------------- */
-
 .table-wrapper {
     width: 100%;
     overflow-x: auto;
@@ -74,7 +72,6 @@
 /* ---------------------------------------------------------
    3. BASE TABLE STRUCTURE
 --------------------------------------------------------- */
-
 .table {
     width: 100%;
     border-collapse: collapse;
@@ -146,7 +143,6 @@
 /* ---------------------------------------------------------
    4. DENSITY (A/B/C) & COMPACT
 --------------------------------------------------------- */
-
 .table--a {
     --table-cell-pad-y: var(--space-4);
     --table-cell-pad-x: var(--space-5);
@@ -172,7 +168,6 @@
 /* ---------------------------------------------------------
    5. VISUAL VARIANTS
 --------------------------------------------------------- */
-
 .table--bordered th,
 .table--bordered td {
     border: var(--border-width) solid var(--color-border-subtle);
@@ -223,7 +218,6 @@
 /* ---------------------------------------------------------
    6. STICKY HEADER / COL
 --------------------------------------------------------- */
-
 .table--sticky-header thead th {
     position: sticky;
     top: 0;
@@ -253,7 +247,6 @@
 /* ---------------------------------------------------------
    7. ROW STATES
 --------------------------------------------------------- */
-
 .table tbody tr.table-row--selected {
     background-color: var(--color-accent-soft);
 }
@@ -291,7 +284,6 @@
 /* ---------------------------------------------------------
    8. INLINE ACTIONS
 --------------------------------------------------------- */
-
 .table-actions {
     display: flex;
     gap: var(--space-2);
@@ -313,7 +305,6 @@
 /* ---------------------------------------------------------
    9. EXPANDABLE ROWS
 --------------------------------------------------------- */
-
 .table-row--expandable {
     cursor: pointer;
 }
@@ -335,7 +326,6 @@
 /* ---------------------------------------------------------
    10. GROUP HEADERS
 --------------------------------------------------------- */
-
 .table-group-header th {
     background-color: var(--color-surface-soft);
     font-weight: 600;
@@ -347,7 +337,6 @@
 /* ---------------------------------------------------------
    11. METRIC TABLES
 --------------------------------------------------------- */
-
 .metric-table {
     width: 100%;
     border-collapse: collapse;
@@ -376,7 +365,6 @@
 /* ---------------------------------------------------------
    12. EMPTY & LOADING STATES
 --------------------------------------------------------- */
-
 .table-empty {
     text-align: center;
     padding: var(--space-6) 0;
@@ -428,7 +416,6 @@
 /* ---------------------------------------------------------
    13. RESPONSIVE COLLAPSE
 --------------------------------------------------------- */
-
 @media (max-width: 640px) {
     .table--collapse thead {
         display: none;
@@ -467,7 +454,6 @@
 /* ---------------------------------------------------------
    14. HIGH FREQUENCY TABLE (HF)
 --------------------------------------------------------- */
-
 .table--hf {
     font-size: var(--text-xs);
 }
@@ -495,7 +481,6 @@
 /* ---------------------------------------------------------
    15. NUMERIC / CURRENCY / PERCENT HELPERS (SPAN-BASED)
 --------------------------------------------------------- */
-
 .t-num,
 .t-pct {
     text-align: right;
@@ -556,7 +541,6 @@
 /* ---------------------------------------------------------
    16. FOOTER / SUMMARY ROWS
 --------------------------------------------------------- */
-
 .table tfoot td {
     border-top: var(--border-width-strong) solid var(--color-border-strong);
     background-color: var(--color-surface-subtle);
@@ -573,7 +557,6 @@
 /* ---------------------------------------------------------
    17. TREND HELPERS (SPAN-BASED)
 --------------------------------------------------------- */
-
 .t-trend {
     display: flex;
     justify-content: space-between;
@@ -636,7 +619,6 @@
 /* ---------------------------------------------------------
    18. FINANCE ROW STATES (NAMESPACED)
 --------------------------------------------------------- */
-
 .table tbody tr.table-fin--good {
     background-color: var(--table-row-good-bg, var(--color-success-soft));
 }