@24vlh/vds 0.1.9 → 0.2.0

package/dist/components/sections.min.css

@@ -1 +1 @@
-.section{background-color:var(--color-bg);padding-bottom:var(--section-spacing-md);padding-top:var(--section-spacing-md);position:relative;width:100%}.section__inner{display:flex;flex-direction:column;gap:var(--space-6);margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.section--a{padding-bottom:var(--space-20);padding-top:var(--space-20)}.section--b{padding-bottom:var(--space-14);padding-top:var(--space-14)}.section--c{padding-bottom:var(--space-10);padding-top:var(--space-10)}.section--flush{padding-bottom:0;padding-top:0}.section--xs{padding-bottom:var(--section-spacing-xs);padding-top:var(--section-spacing-xs)}.section--sm{padding-bottom:var(--section-spacing-sm);padding-top:var(--section-spacing-sm)}.section--md{padding-bottom:var(--section-spacing-md);padding-top:var(--section-spacing-md)}.section--lg{padding-bottom:var(--section-spacing-lg);padding-top:var(--section-spacing-lg)}.section--xl{padding-bottom:var(--section-spacing-xl);padding-top: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{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding-bottom:var(--section-spacing-lg);padding-top:var(--section-spacing-lg);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{padding-bottom:var(--space-10);padding-top:var(--space-10)}.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{--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)}

package/dist/components/skeleton.css

@@ -22,6 +22,8 @@
 [data-vds-skeleton],
 .vds-skeleton {
     --skeleton-line-height: 1rem;
+    --skeleton-radius: var(--radius-md);
+    --skeleton-shimmer-duration: 1.6s;
 }
 
 /* ---------------------------------------------------------
@@ -48,7 +50,7 @@
     width: 100%;
     height: var(--skeleton-line-height);
 
-    border-radius: var(--radius-md);
+    border-radius: var(--skeleton-radius, var(--radius-md));
     background-color: var(--color-muted-bg);
 
     overflow: hidden;
@@ -71,6 +73,8 @@
     );
 
     animation: vds-skeleton-shimmer 1.6s infinite;
+
+    animation: vds-skeleton-shimmer var(--skeleton-shimmer-duration, 1.6s) infinite;
 }
 
 .skeleton--sm {
@@ -97,6 +101,14 @@
     background-color: var(--color-muted-border);
 }
 
+.skeleton--pill {
+    --skeleton-radius: var(--radius-full);
+}
+
+.skeleton--square {
+    --skeleton-radius: var(--radius-none);
+}
+
 .skeleton--static::after {
     animation: none !important;
     display: none !important;
@@ -112,7 +124,7 @@
     height: var(--skeleton-line-height);
 
     margin-bottom: var(--space-2);
-    border-radius: var(--radius-md);
+    border-radius: var(--skeleton-radius, var(--radius-md));
     background-color: var(--color-muted-bg);
 
     position: relative;
@@ -134,6 +146,7 @@
             transparent
     );
     animation: vds-skeleton-shimmer 1.6s infinite;
+    animation: vds-skeleton-shimmer var(--skeleton-shimmer-duration, 1.6s) infinite;
 }
 
 .skeleton-line--short {
@@ -212,6 +225,7 @@
             transparent
     );
     animation: vds-skeleton-shimmer 1.6s infinite;
+    animation: vds-skeleton-shimmer var(--skeleton-shimmer-duration, 1.6s) infinite;
 }
 
 /* ---------------------------------------------------------
@@ -221,7 +235,7 @@
 .skeleton-block {
     width: 100%;
     background-color: var(--color-muted-bg);
-    border-radius: var(--radius-md);
+    border-radius: var(--skeleton-radius, var(--radius-md));
     position: relative;
     overflow: hidden;
 }
@@ -269,6 +283,7 @@
             transparent
     );
     animation: vds-skeleton-shimmer 1.6s infinite;
+    animation: vds-skeleton-shimmer var(--skeleton-shimmer-duration, 1.6s) infinite;
 }
 
 /* ---------------------------------------------------------
@@ -357,6 +372,10 @@
     gap: var(--space-3);
 }
 
+.skeleton-stack .skeleton-line {
+    margin-bottom: 0;
+}
+
 .skeleton-inline {
     display: flex;
     align-items: center;

package/dist/components/skeleton.min.css

@@ -1 +1 @@
-.vds-skeleton,[data-vds-skeleton]{--skeleton-line-height:1rem}@keyframes vds-skeleton-shimmer{0%{transform:translateX(-150%)}to{transform:translateX(150%)}}.skeleton{background-color:var(--color-muted-bg);border-radius:var(--radius-md);display:block;height:var(--skeleton-line-height);overflow:hidden;position:relative;width:100%}.skeleton:after{animation:vds-skeleton-shimmer 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton--sm{height:calc(var(--skeleton-line-height)*.75)}.skeleton--md{height:var(--skeleton-line-height)}.skeleton--lg{height:calc(var(--skeleton-line-height)*1.25)}.skeleton--xl{height:calc(var(--skeleton-line-height)*1.75)}.skeleton--subtle{background-color:var(--color-surface-subtle)}.skeleton--strong{background-color:var(--color-muted-border)}.skeleton--static:after{animation:none!important;display:none!important}.skeleton-line{background-color:var(--color-muted-bg);border-radius:var(--radius-md);display:block;height:var(--skeleton-line-height);margin-bottom:var(--space-2);overflow:hidden;position:relative;width:100%}.skeleton-line:after{animation:vds-skeleton-shimmer 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton-line--short{width:40%}.skeleton-line--medium{width:60%}.skeleton-line--long{width:80%}.skeleton-line--full{width:100%}.skeleton-line--xs{height:calc(var(--skeleton-line-height)*.6)}.skeleton-line--sm{height:calc(var(--skeleton-line-height)*.8)}.skeleton-line--lg{height:calc(var(--skeleton-line-height)*1.3)}.skeleton-avatar{background-color:var(--color-muted-bg);border-radius:var(--radius-full);display:inline-block;overflow:hidden;position:relative}.skeleton-avatar--sm{height:var(--avatar-size-sm);width:var(--avatar-size-sm)}.skeleton-avatar--md{height:var(--avatar-size-md);width:var(--avatar-size-md)}.skeleton-avatar--lg{height:var(--avatar-size-lg);width:var(--avatar-size-lg)}.skeleton-avatar--square{border-radius:var(--radius-md)}.skeleton-avatar:after{animation:vds-skeleton-shimmer 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton-block{background-color:var(--color-muted-bg);border-radius:var(--radius-md);overflow:hidden;position:relative;width:100%}.skeleton-block--1-1{aspect-ratio:1/1}.skeleton-block--4-3{aspect-ratio:4/3}.skeleton-block--16-9{aspect-ratio:16/9}.skeleton-block--21-9{aspect-ratio:21/9}.skeleton-block--sm{height:6rem}.skeleton-block--md{height:12rem}.skeleton-block--lg{height:18rem}.skeleton-block:after{animation:vds-skeleton-shimmer 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton-card{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6)}.skeleton-card--dense{padding:var(--space-4)}.skeleton-card--relaxed{padding:var(--space-8)}.skeleton-card--list{align-items:center;flex-direction:row;gap:var(--space-4)}.skeleton-card--media .skeleton-block{margin-bottom:var(--space-4)}.skeleton-card--stat .skeleton-line{height:calc(var(--skeleton-line-height)*1.6);width:50%}.skeleton-row td{padding:var(--space-3) var(--space-4)}.skeleton-row--a td{padding:var(--space-4) var(--space-5)}.skeleton-row--c td{padding:var(--space-2) var(--space-3)}.skeleton-item{align-items:center;display:flex;gap:var(--space-3);padding:var(--space-3) 0}.skeleton-item--compact{gap:var(--space-2);padding:var(--space-2) 0}.skeleton-item--spacious{gap:var(--space-4);padding:var(--space-4) 0}.skeleton-stack{display:flex;flex-direction:column;gap:var(--space-3)}.skeleton-inline{align-items:center;display:flex;gap:var(--space-3)}.skeleton-gap-sm{gap:var(--space-2)}.skeleton-gap-lg{gap:var(--space-6)}@media (prefers-reduced-motion:reduce){.skeleton-avatar:after,.skeleton-block:after,.skeleton-line:after,.skeleton:after{animation:none!important}}
+.vds-skeleton,[data-vds-skeleton]{--skeleton-line-height:1rem;--skeleton-radius:var(--radius-md);--skeleton-shimmer-duration:1.6s}@keyframes vds-skeleton-shimmer{0%{transform:translateX(-150%)}to{transform:translateX(150%)}}.skeleton{background-color:var(--color-muted-bg);border-radius:var(--skeleton-radius,var(--radius-md));display:block;height:var(--skeleton-line-height);overflow:hidden;position:relative;width:100%}.skeleton:after{animation:vds-skeleton-shimmer 1.6s infinite;animation:vds-skeleton-shimmer var(--skeleton-shimmer-duration,1.6s) infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton--sm{height:calc(var(--skeleton-line-height)*.75)}.skeleton--md{height:var(--skeleton-line-height)}.skeleton--lg{height:calc(var(--skeleton-line-height)*1.25)}.skeleton--xl{height:calc(var(--skeleton-line-height)*1.75)}.skeleton--subtle{background-color:var(--color-surface-subtle)}.skeleton--strong{background-color:var(--color-muted-border)}.skeleton--pill{--skeleton-radius:var(--radius-full)}.skeleton--square{--skeleton-radius:var(--radius-none)}.skeleton--static:after{animation:none!important;display:none!important}.skeleton-line{background-color:var(--color-muted-bg);border-radius:var(--skeleton-radius,var(--radius-md));display:block;height:var(--skeleton-line-height);margin-bottom:var(--space-2);overflow:hidden;position:relative;width:100%}.skeleton-line:after{animation:vds-skeleton-shimmer 1.6s infinite;animation:vds-skeleton-shimmer var(--skeleton-shimmer-duration,1.6s) infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton-line--short{width:40%}.skeleton-line--medium{width:60%}.skeleton-line--long{width:80%}.skeleton-line--full{width:100%}.skeleton-line--xs{height:calc(var(--skeleton-line-height)*.6)}.skeleton-line--sm{height:calc(var(--skeleton-line-height)*.8)}.skeleton-line--lg{height:calc(var(--skeleton-line-height)*1.3)}.skeleton-avatar{background-color:var(--color-muted-bg);border-radius:var(--radius-full);display:inline-block;overflow:hidden;position:relative}.skeleton-avatar--sm{height:var(--avatar-size-sm);width:var(--avatar-size-sm)}.skeleton-avatar--md{height:var(--avatar-size-md);width:var(--avatar-size-md)}.skeleton-avatar--lg{height:var(--avatar-size-lg);width:var(--avatar-size-lg)}.skeleton-avatar--square{border-radius:var(--radius-md)}.skeleton-avatar:after{animation:vds-skeleton-shimmer 1.6s infinite;animation:vds-skeleton-shimmer var(--skeleton-shimmer-duration,1.6s) infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton-block{background-color:var(--color-muted-bg);border-radius:var(--skeleton-radius,var(--radius-md));overflow:hidden;position:relative;width:100%}.skeleton-block--1-1{aspect-ratio:1/1}.skeleton-block--4-3{aspect-ratio:4/3}.skeleton-block--16-9{aspect-ratio:16/9}.skeleton-block--21-9{aspect-ratio:21/9}.skeleton-block--sm{height:6rem}.skeleton-block--md{height:12rem}.skeleton-block--lg{height:18rem}.skeleton-block:after{animation:vds-skeleton-shimmer 1.6s infinite;animation:vds-skeleton-shimmer var(--skeleton-shimmer-duration,1.6s) infinite;background:linear-gradient(90deg,transparent,var(--color-surface-subtle),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}.skeleton-card{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6)}.skeleton-card--dense{padding:var(--space-4)}.skeleton-card--relaxed{padding:var(--space-8)}.skeleton-card--list{align-items:center;flex-direction:row;gap:var(--space-4)}.skeleton-card--media .skeleton-block{margin-bottom:var(--space-4)}.skeleton-card--stat .skeleton-line{height:calc(var(--skeleton-line-height)*1.6);width:50%}.skeleton-row td{padding:var(--space-3) var(--space-4)}.skeleton-row--a td{padding:var(--space-4) var(--space-5)}.skeleton-row--c td{padding:var(--space-2) var(--space-3)}.skeleton-item{align-items:center;display:flex;gap:var(--space-3);padding:var(--space-3) 0}.skeleton-item--compact{gap:var(--space-2);padding:var(--space-2) 0}.skeleton-item--spacious{gap:var(--space-4);padding:var(--space-4) 0}.skeleton-stack{display:flex;flex-direction:column;gap:var(--space-3)}.skeleton-stack .skeleton-line{margin-bottom:0}.skeleton-inline{align-items:center;display:flex;gap:var(--space-3)}.skeleton-gap-sm{gap:var(--space-2)}.skeleton-gap-lg{gap:var(--space-6)}@media (prefers-reduced-motion:reduce){.skeleton-avatar:after,.skeleton-block:after,.skeleton-line:after,.skeleton:after{animation:none!important}}

package/dist/components/state.css

@@ -0,0 +1,172 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Empty / Zero States
+ *
+ *  Responsibilities:
+ *    - Provide empty-state shells for lists, dashboards, and setups
+ *    - Support inline, centered, and compact presentations
+ *    - Provide consistent icon, title, body, and action slots
+ *
+ *  System Notes:
+ *    - Pure CSS; use buttons and links for actions
+ *    - Token-driven spacing, surfaces, and typography
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. STATE TOKENS
+--------------------------------------------------------- */
+
+[data-vds-state],
+.vds-state {
+    --state-gap: var(--space-4);
+    --state-padding: var(--space-8);
+    --state-radius: var(--radius-lg);
+    --state-surface: var(--color-surface);
+    --state-border: var(--color-border-subtle);
+    --state-icon-size: 2.75rem;
+    --state-icon-bg: var(--color-surface-subtle);
+    --state-icon-color: var(--color-accent);
+    --state-title-size: var(--text-md);
+    --state-eyebrow-color: var(--color-text-muted);
+    --state-media-size: 3.5rem;
+    --state-media-bg: var(--color-surface-subtle);
+    --state-media-color: var(--color-text);
+    --state-border-style: dashed;
+}
+
+/* ---------------------------------------------------------
+   2. BASE STATE
+--------------------------------------------------------- */
+
+.state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--state-gap);
+    padding: var(--state-padding);
+    border-radius: var(--state-radius);
+    border: 1px var(--state-border-style) var(--state-border);
+    background: var(--state-surface);
+    text-align: center;
+}
+
+.state__eyebrow {
+    font-size: var(--text-xxs);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--state-eyebrow-color);
+}
+
+.state__icon {
+    width: var(--state-icon-size);
+    height: var(--state-icon-size);
+    border-radius: var(--radius-md);
+    background: var(--state-icon-bg);
+    color: var(--state-icon-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-md);
+}
+
+.state__media {
+    width: var(--state-media-size);
+    height: var(--state-media-size);
+    border-radius: var(--radius-lg);
+    background: var(--state-media-bg);
+    color: var(--state-media-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-lg);
+}
+
+.state__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.state__title {
+    font-size: var(--state-title-size);
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+.state__text {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+}
+
+.state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    justify-content: center;
+}
+
+.state__meta {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   3. VARIANTS
+--------------------------------------------------------- */
+
+.state--left {
+    align-items: flex-start;
+    text-align: left;
+}
+
+.state--soft {
+    --state-surface: var(--color-surface-subtle);
+    --state-border-style: solid;
+}
+
+.state--inline {
+    flex-direction: row;
+    align-items: flex-start;
+    text-align: left;
+}
+
+.state--split {
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+}
+
+.state--left .state__actions,
+.state--inline .state__actions,
+.state--split .state__actions {
+    justify-content: flex-start;
+}
+
+.state--compact {
+    --state-padding: var(--space-5);
+    --state-gap: var(--space-3);
+}
+
+.state--plain {
+    padding: 0;
+    border: none;
+    background: transparent;
+}
+
+.state--center {
+    align-items: center;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .state--inline {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .state--split {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+}

package/dist/components/state.min.css

@@ -0,0 +1 @@
+.vds-state,[data-vds-state]{--state-gap:var(--space-4);--state-padding:var(--space-8);--state-radius:var(--radius-lg);--state-surface:var(--color-surface);--state-border:var(--color-border-subtle);--state-icon-size:2.75rem;--state-icon-bg:var(--color-surface-subtle);--state-icon-color:var(--color-accent);--state-title-size:var(--text-md);--state-eyebrow-color:var(--color-text-muted);--state-media-size:3.5rem;--state-media-bg:var(--color-surface-subtle);--state-media-color:var(--color-text);--state-border-style:dashed}.state{align-items:center;background:var(--state-surface);border:1px var(--state-border-style) var(--state-border);border-radius:var(--state-radius);display:flex;flex-direction:column;gap:var(--state-gap);padding:var(--state-padding);text-align:center}.state__eyebrow{color:var(--state-eyebrow-color);font-size:var(--text-xxs);letter-spacing:.12em;text-transform:uppercase}.state__icon{background:var(--state-icon-bg);border-radius:var(--radius-md);color:var(--state-icon-color);font-size:var(--text-md);height:var(--state-icon-size);width:var(--state-icon-size)}.state__icon,.state__media{align-items:center;display:inline-flex;justify-content:center}.state__media{background:var(--state-media-bg);border-radius:var(--radius-lg);color:var(--state-media-color);font-size:var(--text-lg);height:var(--state-media-size);width:var(--state-media-size)}.state__content{display:flex;flex-direction:column;gap:var(--space-2)}.state__title{color:var(--color-text);font-size:var(--state-title-size);font-weight:600}.state__text{color:var(--color-text-muted);font-size:var(--text-sm)}.state__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.state__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.state--left{align-items:flex-start;text-align:left}.state--soft{--state-surface:var(--color-surface-subtle);--state-border-style:solid}.state--inline{align-items:flex-start}.state--inline,.state--split{flex-direction:row;text-align:left}.state--split{align-items:center}.state--inline .state__actions,.state--left .state__actions,.state--split .state__actions{justify-content:flex-start}.state--compact{--state-padding:var(--space-5);--state-gap:var(--space-3)}.state--plain{background:transparent;border:none;padding:0}.state--center{align-items:center;text-align:center}@media (max-width:768px){.state--inline,.state--split{align-items:center;flex-direction:column;text-align:center}}

package/dist/components/tables.css

@@ -64,6 +64,13 @@
     color: var(--color-text-muted);
 }
 
+.table-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
 /* ---------------------------------------------------------
    3. BASE TABLE STRUCTURE
 --------------------------------------------------------- */
@@ -80,6 +87,10 @@
     --table-cell-font-size: var(--text-sm);
 }
 
+.table--fixed {
+    table-layout: fixed;
+}
+
 .table th,
 .table td {
     padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
@@ -98,6 +109,32 @@
     font-size: var(--text-sm);
 }
 
+.table-cell--right {
+    text-align: right;
+}
+
+.table-cell--center {
+    text-align: center;
+}
+
+.table-cell--muted {
+    color: var(--color-text-muted);
+}
+
+.table-cell--strong {
+    font-weight: 600;
+}
+
+.table-cell--nowrap {
+    white-space: nowrap;
+}
+
+.table-cell--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .table caption {
     caption-side: top;
     text-align: left;
@@ -178,6 +215,11 @@
     text-overflow: ellipsis;
 }
 
+.table--nowrap th,
+.table--nowrap td {
+    white-space: nowrap;
+}
+
 /* ---------------------------------------------------------
    6. STICKY HEADER / COL
 --------------------------------------------------------- */
@@ -196,37 +238,56 @@
     left: 0;
     z-index: var(--z-sticky-col);
     background-color: var(--color-bg-elevated, var(--color-surface));
+    box-shadow: 1px 0 0 var(--color-border-subtle);
+}
+
+.table--sticky-col-end td:last-child,
+.table--sticky-col-end th:last-child {
+    position: sticky;
+    right: 0;
+    z-index: var(--z-sticky-col);
+    background-color: var(--color-bg-elevated, var(--color-surface));
+    box-shadow: -1px 0 0 var(--color-border-subtle);
 }
 
 /* ---------------------------------------------------------
    7. ROW STATES
 --------------------------------------------------------- */
 
-.table-row--selected {
+.table tbody tr.table-row--selected {
     background-color: var(--color-accent-soft);
 }
 
-.table-row--success {
+.table tbody tr.table-row--success {
     background-color: var(--table-row-good-bg, var(--color-success-soft));
 }
 
-.table-row--danger {
+.table tbody tr.table-row--danger {
     background-color: var(--table-row-bad-bg, var(--color-danger-soft));
 }
 
-.table-row--warning {
+.table tbody tr.table-row--warning {
     background-color: var(--table-row-warning-bg, var(--color-warning-soft));
 }
 
-.table-row--info {
+.table tbody tr.table-row--info {
     background-color: var(--table-row-info-bg, var(--color-info-soft));
 }
 
-.table-row--muted {
+.table tbody tr.table-row--muted {
     background-color: var(--table-row-muted-bg, var(--color-muted-bg));
     color: var(--color-text-muted);
 }
 
+.table tr.table-row--summary {
+    font-weight: 600;
+    background-color: var(--color-surface-subtle);
+}
+
+.table--selectable tbody tr {
+    cursor: pointer;
+}
+
 /* ---------------------------------------------------------
    8. INLINE ACTIONS
 --------------------------------------------------------- */
@@ -493,7 +554,24 @@
 }
 
 /* ---------------------------------------------------------
-   16. TREND HELPERS (SPAN-BASED)
+   16. FOOTER / SUMMARY ROWS
+--------------------------------------------------------- */
+
+.table tfoot td {
+    border-top: var(--border-width-strong) solid var(--color-border-strong);
+    background-color: var(--color-surface-subtle);
+    font-weight: 600;
+}
+
+.table--sticky-footer tfoot td {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--z-sticky);
+    background-color: var(--color-bg-elevated, var(--color-surface));
+}
+
+/* ---------------------------------------------------------
+   17. TREND HELPERS (SPAN-BASED)
 --------------------------------------------------------- */
 
 .t-trend {
@@ -556,36 +634,36 @@
 }
 
 /* ---------------------------------------------------------
-   17. FINANCE ROW STATES (NAMESPACED)
+   18. FINANCE ROW STATES (NAMESPACED)
 --------------------------------------------------------- */
 
-.table-fin--good {
+.table tbody tr.table-fin--good {
     background-color: var(--table-row-good-bg, var(--color-success-soft));
 }
 
-.table-fin--bad {
+.table tbody tr.table-fin--bad {
     background-color: var(--table-row-bad-bg, var(--color-danger-soft));
 }
 
-.table-fin--warning {
+.table tbody tr.table-fin--warning {
     background-color: var(--table-row-warning-bg, var(--color-warning-soft));
 }
 
-.table-fin--info {
+.table tbody tr.table-fin--info {
     background-color: var(--table-row-info-bg, var(--color-info-soft));
 }
 
-.table-fin--muted {
+.table tbody tr.table-fin--muted {
     background-color: var(--table-row-muted-bg, var(--color-muted-bg));
     color: var(--color-text-muted);
 }
 
-.table-fin--flagged {
+.table tbody tr.table-fin--flagged {
     background-color: var(--table-row-flagged-bg, var(--color-danger-soft));
     border-left: var(--border-width-strong) solid var(--color-danger);
 }
 
-.table-fin--curious {
+.table tbody tr.table-fin--curious {
     background-color: var(--table-row-curious-bg, var(--color-surface-subtle));
     border-left: var(--border-width-strong) solid var(--color-accent);
 }

package/dist/components/tables.min.css

@@ -1 +1 @@
-.vds-table,[data-vds-table]{--table-currency-tint:color-mix(in srgb,currentColor 50%,transparent 30%)}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto;width:100%}.table-panel{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:var(--space-4)}.table-panel__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between;margin-bottom:var(--space-3)}.table-panel__title{color:var(--color-text);font-size:var(--text-sm);font-weight:600}.table-panel__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.table{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm);background-color:var(--color-surface);border-collapse:collapse;border-spacing:0;color:var(--color-text);width:100%}.table td,.table th{border-bottom:var(--border-width) solid var(--color-border-subtle);font-size:var(--table-cell-font-size);padding:var(--table-cell-pad-y) var(--table-cell-pad-x);text-align:left;vertical-align:middle}.table th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);color:var(--color-text);font-size:var(--text-sm);font-weight:600;white-space:nowrap}.table caption{caption-side:top;color:var(--color-text-muted);font-size:var(--text-xs);margin-bottom:var(--space-2);text-align:left}.table--a{--table-cell-pad-y:var(--space-4);--table-cell-pad-x:var(--space-5);--table-cell-font-size:var(--text-md)}.table--b{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm)}.table--c{--table-cell-pad-y:var(--space-2);--table-cell-pad-x:var(--space-3);--table-cell-font-size:var(--text-xs)}.table--compact{--table-cell-pad-y:var(--space-1)}.table--bordered td,.table--bordered th{border:var(--border-width) solid var(--color-border-subtle)}.table--no-borders td,.table--no-borders th{border:none}.table--striped tbody tr:nth-child(odd){background-color:var(--color-surface-subtle)}.table--hover tbody tr:hover{background-color:var(--color-surface-soft)}.table--minimal td,.table--minimal th{background-color:transparent;border-bottom-color:var(--color-border-subtle)}.table--clear td,.table--clear th{background-color:transparent;border:none}.table--inset{border-radius:var(--radius-md);overflow:hidden}.table--truncate-cells td,.table--truncate-cells th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table--sticky-header thead th{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:0 1px 0 var(--color-border-subtle);position:sticky;top:0;z-index:var(--z-sticky)}.table--sticky-col td:first-child,.table--sticky-col th:first-child{background-color:var(--color-bg-elevated,var(--color-surface));left:0;position:sticky;z-index:var(--z-sticky-col)}.table-row--selected{background-color:var(--color-accent-soft)}.table-row--success{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table-row--danger{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table-row--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table-row--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table-row--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table-actions{align-items:center;display:flex;gap:var(--space-2)}.table-actions .icon{color:var(--color-icon-muted);cursor:pointer;flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.table-actions .icon:hover{color:var(--color-icon-strong)}.table-row--expandable{cursor:pointer}.table-row--details{display:none}.table-row--details[data-expanded=true],.table-row--expanded+.table-row--details{display:table-row}.table-row--details td{background-color:var(--color-surface-subtle);padding:var(--space-4)}.table-group-header th{background-color:var(--color-surface-soft);border-top:var(--border-width-strong) solid var(--color-border-strong);font-weight:600;padding-bottom:var(--space-2);padding-top:var(--space-3)}.metric-table{border-collapse:collapse;width:100%}.metric-table tr:not(:last-child) td{border-bottom:var(--border-width) solid var(--color-border-subtle)}.metric-table__label{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) 0}.metric-table__value{font-feature-settings:"tnum";font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:600;padding:var(--space-2) 0;text-align:right}.table-empty{color:var(--color-text-muted);padding:var(--space-6) 0;text-align:center}.table-empty__content{align-items:center;display:flex;flex-direction:column;text-align:center}.table-empty__icon{align-items:center;display:flex;justify-content:center;margin-bottom:.5rem;margin-bottom:var(--space-2,.5rem)}.table-loading td{color:transparent;overflow:hidden;position:relative}.table-loading td:after{animation:table-loading 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-muted-bg),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}@keyframes table-loading{0%{transform:translateX(-150%)}to{transform:translateX(150%)}}@media (max-width:640px){.table--collapse thead{display:none}.table--collapse tbody tr{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:block;margin-bottom:var(--space-4);overflow:hidden}.table--collapse tbody td{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;font-size:var(--text-sm);justify-content:space-between;padding:var(--space-3)}.table--collapse tbody td:last-child{border-bottom:none}.table--collapse tbody td:before{color:var(--color-text-muted);content:attr(data-label);font-size:var(--text-xs);font-weight:600;margin-right:var(--space-2)}}.table--hf{font-size:var(--text-xs)}.table--hf td,.table--hf th{border:var(--border-width) solid var(--color-border-subtle);padding:var(--space-1) var(--space-2)}.table--hf thead th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);position:sticky;top:0;z-index:var(--z-sticky)}.t-num,.t-pct,.table--hf td[data-type=num]{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right}.t-cur,.t-num,.t-pct{white-space:nowrap}.t-cur{font-feature-settings:"tnum";align-items:baseline;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between}.cur-eur:before{content:"€"}.cur-usd:before{content:"$"}.cur-gbp:before{content:"£"}.cur-ron:before{content:"RON"}.cur-chf:before{content:"CHF"}.cur-jpy:before{content:"¥"}.cur-chf:before,.cur-eur:before,.cur-gbp:before,.cur-jpy:before,.cur-ron:before,.cur-usd:before{color:var(--table-currency-tint);font-size:var(--text-xxxs);font-weight:600;margin-right:var(--space-1)}.t-pct{color:inherit}.t-trend{font-feature-settings:"tnum";align-items:center;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between;text-align:right;white-space:nowrap;width:100%}.t-down,.t-flat,.t-up{align-items:center;display:inline-flex}.t-up{color:var(--table-trend-up,var(--color-success-strong))}.t-down{color:var(--table-trend-down,var(--color-danger-strong))}.t-flat{color:var(--table-trend-flat,var(--color-text-muted))}.t-down:before,.t-flat:before,.t-up:before{background-color:currentColor;content:"";height:var(--icon-xs);margin-right:var(--space-1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-xs)}.t-up:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>')}.t-down:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>')}.t-flat:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>')}.table-fin--good{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table-fin--bad{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table-fin--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table-fin--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table-fin--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table-fin--flagged{background-color:var(--table-row-flagged-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--color-danger)}.table-fin--curious{background-color:var(--table-row-curious-bg,var(--color-surface-subtle));border-left:var(--border-width-strong) solid var(--color-accent)}
+.vds-table,[data-vds-table]{--table-currency-tint:color-mix(in srgb,currentColor 50%,transparent 30%)}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto;width:100%}.table-panel{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:var(--space-4)}.table-panel__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between;margin-bottom:var(--space-3)}.table-panel__title{color:var(--color-text);font-size:var(--text-sm);font-weight:600}.table-panel__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.table-panel__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.table{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm);background-color:var(--color-surface);border-collapse:collapse;border-spacing:0;color:var(--color-text);width:100%}.table--fixed{table-layout:fixed}.table td,.table th{border-bottom:var(--border-width) solid var(--color-border-subtle);font-size:var(--table-cell-font-size);padding:var(--table-cell-pad-y) var(--table-cell-pad-x);text-align:left;vertical-align:middle}.table th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);color:var(--color-text);font-size:var(--text-sm);font-weight:600;white-space:nowrap}.table-cell--right{text-align:right}.table-cell--center{text-align:center}.table-cell--muted{color:var(--color-text-muted)}.table-cell--strong{font-weight:600}.table-cell--nowrap{white-space:nowrap}.table-cell--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table caption{caption-side:top;color:var(--color-text-muted);font-size:var(--text-xs);margin-bottom:var(--space-2);text-align:left}.table--a{--table-cell-pad-y:var(--space-4);--table-cell-pad-x:var(--space-5);--table-cell-font-size:var(--text-md)}.table--b{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm)}.table--c{--table-cell-pad-y:var(--space-2);--table-cell-pad-x:var(--space-3);--table-cell-font-size:var(--text-xs)}.table--compact{--table-cell-pad-y:var(--space-1)}.table--bordered td,.table--bordered th{border:var(--border-width) solid var(--color-border-subtle)}.table--no-borders td,.table--no-borders th{border:none}.table--striped tbody tr:nth-child(odd){background-color:var(--color-surface-subtle)}.table--hover tbody tr:hover{background-color:var(--color-surface-soft)}.table--minimal td,.table--minimal th{background-color:transparent;border-bottom-color:var(--color-border-subtle)}.table--clear td,.table--clear th{background-color:transparent;border:none}.table--inset{border-radius:var(--radius-md);overflow:hidden}.table--truncate-cells td,.table--truncate-cells th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table--nowrap td,.table--nowrap th{white-space:nowrap}.table--sticky-header thead th{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:0 1px 0 var(--color-border-subtle);position:sticky;top:0;z-index:var(--z-sticky)}.table--sticky-col td:first-child,.table--sticky-col th:first-child{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:1px 0 0 var(--color-border-subtle);left:0;position:sticky;z-index:var(--z-sticky-col)}.table--sticky-col-end td:last-child,.table--sticky-col-end th:last-child{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:-1px 0 0 var(--color-border-subtle);position:sticky;right:0;z-index:var(--z-sticky-col)}.table tbody tr.table-row--selected{background-color:var(--color-accent-soft)}.table tbody tr.table-row--success{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table tbody tr.table-row--danger{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table tbody tr.table-row--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table tbody tr.table-row--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table tbody tr.table-row--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table tr.table-row--summary{background-color:var(--color-surface-subtle);font-weight:600}.table--selectable tbody tr{cursor:pointer}.table-actions{align-items:center;display:flex;gap:var(--space-2)}.table-actions .icon{color:var(--color-icon-muted);cursor:pointer;flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.table-actions .icon:hover{color:var(--color-icon-strong)}.table-row--expandable{cursor:pointer}.table-row--details{display:none}.table-row--details[data-expanded=true],.table-row--expanded+.table-row--details{display:table-row}.table-row--details td{background-color:var(--color-surface-subtle);padding:var(--space-4)}.table-group-header th{background-color:var(--color-surface-soft);border-top:var(--border-width-strong) solid var(--color-border-strong);font-weight:600;padding-bottom:var(--space-2);padding-top:var(--space-3)}.metric-table{border-collapse:collapse;width:100%}.metric-table tr:not(:last-child) td{border-bottom:var(--border-width) solid var(--color-border-subtle)}.metric-table__label{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) 0}.metric-table__value{font-feature-settings:"tnum";font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:600;padding:var(--space-2) 0;text-align:right}.table-empty{color:var(--color-text-muted);padding:var(--space-6) 0;text-align:center}.table-empty__content{align-items:center;display:flex;flex-direction:column;text-align:center}.table-empty__icon{align-items:center;display:flex;justify-content:center;margin-bottom:.5rem;margin-bottom:var(--space-2,.5rem)}.table-loading td{color:transparent;overflow:hidden;position:relative}.table-loading td:after{animation:table-loading 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-muted-bg),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}@keyframes table-loading{0%{transform:translateX(-150%)}to{transform:translateX(150%)}}@media (max-width:640px){.table--collapse thead{display:none}.table--collapse tbody tr{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:block;margin-bottom:var(--space-4);overflow:hidden}.table--collapse tbody td{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;font-size:var(--text-sm);justify-content:space-between;padding:var(--space-3)}.table--collapse tbody td:last-child{border-bottom:none}.table--collapse tbody td:before{color:var(--color-text-muted);content:attr(data-label);font-size:var(--text-xs);font-weight:600;margin-right:var(--space-2)}}.table--hf{font-size:var(--text-xs)}.table--hf td,.table--hf th{border:var(--border-width) solid var(--color-border-subtle);padding:var(--space-1) var(--space-2)}.table--hf thead th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);position:sticky;top:0;z-index:var(--z-sticky)}.t-num,.t-pct,.table--hf td[data-type=num]{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right}.t-cur,.t-num,.t-pct{white-space:nowrap}.t-cur{font-feature-settings:"tnum";align-items:baseline;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between}.cur-eur:before{content:"€"}.cur-usd:before{content:"$"}.cur-gbp:before{content:"£"}.cur-ron:before{content:"RON"}.cur-chf:before{content:"CHF"}.cur-jpy:before{content:"¥"}.cur-chf:before,.cur-eur:before,.cur-gbp:before,.cur-jpy:before,.cur-ron:before,.cur-usd:before{color:var(--table-currency-tint);font-size:var(--text-xxxs);font-weight:600;margin-right:var(--space-1)}.t-pct{color:inherit}.table tfoot td{background-color:var(--color-surface-subtle);border-top:var(--border-width-strong) solid var(--color-border-strong);font-weight:600}.table--sticky-footer tfoot td{background-color:var(--color-bg-elevated,var(--color-surface));bottom:0;position:sticky;z-index:var(--z-sticky)}.t-trend{font-feature-settings:"tnum";align-items:center;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between;text-align:right;white-space:nowrap;width:100%}.t-down,.t-flat,.t-up{align-items:center;display:inline-flex}.t-up{color:var(--table-trend-up,var(--color-success-strong))}.t-down{color:var(--table-trend-down,var(--color-danger-strong))}.t-flat{color:var(--table-trend-flat,var(--color-text-muted))}.t-down:before,.t-flat:before,.t-up:before{background-color:currentColor;content:"";height:var(--icon-xs);margin-right:var(--space-1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-xs)}.t-up:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>')}.t-down:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>')}.t-flat:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>')}.table tbody tr.table-fin--good{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table tbody tr.table-fin--bad{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table tbody tr.table-fin--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table tbody tr.table-fin--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table tbody tr.table-fin--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table tbody tr.table-fin--flagged{background-color:var(--table-row-flagged-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--color-danger)}.table tbody tr.table-fin--curious{background-color:var(--table-row-curious-bg,var(--color-surface-subtle));border-left:var(--border-width-strong) solid var(--color-accent)}