@24vlh/vds 0.1.10 → 0.2.0

package/dist/components/progress.css

@@ -0,0 +1,322 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Progress & Stepper Indicators
+ *
+ *  Responsibilities:
+ *    - Provide linear progress bars (determinate + indeterminate)
+ *    - Support semantic states and density variants
+ *    - Offer stepper indicators for multi-step flows
+ *
+ *  System Notes:
+ *    - Pure CSS; JS only updates width or active states
+ *    - Fully token-driven for sizing and colour
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. PROGRESS TOKENS
+--------------------------------------------------------- */
+
+[data-vds-progress],
+.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);
+}
+
+/* ---------------------------------------------------------
+   2. LINEAR PROGRESS
+--------------------------------------------------------- */
+
+.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 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+}
+
+.progress__label {
+    font-size: var(--text-xs);
+    color: var(--progress-label-color);
+}
+
+.progress__value {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--progress-value-color);
+}
+
+.progress__meta {
+    font-size: var(--text-xs);
+    color: var(--progress-meta-color);
+}
+
+.progress,
+.progress__track {
+    position: relative;
+    width: 100%;
+    height: var(--progress-height-md);
+    border-radius: var(--progress-radius);
+    background: var(--progress-track-bg);
+    border: 1px solid var(--progress-track-border);
+    overflow: hidden;
+}
+
+.progress__bar {
+    height: 100%;
+    width: 0%;
+    width: var(--progress-value, 0%);
+    border-radius: inherit;
+    background: var(--progress-fill);
+    transition: width var(--transition-normal);
+}
+
+[data-vds-progress] .progress--sm, .vds-progress .progress--sm, [data-vds-progress] .progress--sm .progress__track, .vds-progress .progress--sm .progress__track {
+    height: var(--progress-height-sm);
+}
+
+[data-vds-progress] .progress--lg, .vds-progress .progress--lg, [data-vds-progress] .progress--lg .progress__track, .vds-progress .progress--lg .progress__track {
+    height: var(--progress-height-lg);
+}
+
+[data-vds-progress] .progress--outlined, .vds-progress .progress--outlined {
+    --progress-track-border: var(--color-border-subtle);
+}
+
+[data-vds-progress] .progress--pill, .vds-progress .progress--pill {
+    --progress-radius: var(--radius-full);
+}
+
+[data-vds-progress] .progress--striped .progress__bar, .vds-progress .progress--striped .progress__bar {
+    background-image: linear-gradient(
+            45deg,
+            rgba(255, 255, 255, 0.2) 25%,
+            rgba(255, 255, 255, 0) 25%,
+            rgba(255, 255, 255, 0) 50%,
+            rgba(255, 255, 255, 0.2) 50%,
+            rgba(255, 255, 255, 0.2) 75%,
+            rgba(255, 255, 255, 0) 75%,
+            rgba(255, 255, 255, 0)
+    );
+    background-size: 1.2rem 1.2rem;
+}
+
+[data-vds-progress] .progress--animated .progress__bar, .vds-progress .progress--animated .progress__bar {
+    animation: vds-progress-stripes 0.9s linear infinite;
+}
+
+[data-vds-progress] .progress--indeterminate .progress__bar, .vds-progress .progress--indeterminate .progress__bar {
+    width: 35%;
+    animation: progress-indeterminate 1.4s ease infinite;
+}
+
+@keyframes vds-progress-stripes {
+    0% {
+        background-position: 1.2rem 0;
+    }
+    100% {
+        background-position: 0 0;
+    }
+}
+
+@keyframes progress-indeterminate {
+    0% {
+        transform: translateX(-120%);
+    }
+    100% {
+        transform: translateX(260%);
+    }
+}
+
+/* ---------------------------------------------------------
+   3. PROGRESS SEMANTICS
+--------------------------------------------------------- */
+
+[data-vds-progress] .progress--success, .vds-progress .progress--success {
+    --progress-fill: var(--color-success);
+}
+
+[data-vds-progress] .progress--info, .vds-progress .progress--info {
+    --progress-fill: var(--color-info);
+}
+
+[data-vds-progress] .progress--warning, .vds-progress .progress--warning {
+    --progress-fill: var(--color-warning);
+}
+
+[data-vds-progress] .progress--danger, .vds-progress .progress--danger {
+    --progress-fill: var(--color-danger);
+}
+
+/* ---------------------------------------------------------
+   4. STEPPER
+--------------------------------------------------------- */
+
+.stepper {
+    display: flex;
+    gap: var(--stepper-gap);
+    align-items: flex-start;
+    padding: var(--space-5);
+}
+
+.stepper__item {
+    position: relative;
+    display: flex;
+    gap: var(--space-3);
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.stepper__item:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: calc(var(--stepper-marker-size) / 2);
+    left: calc(var(--stepper-marker-size) + var(--space-3));
+    right: calc(-1 * var(--stepper-gap) + (var(--stepper-marker-size) / 2));
+    height: var(--stepper-line-size);
+    background: var(--stepper-line);
+    z-index: 0;
+}
+
+.stepper__marker {
+    width: var(--stepper-marker-size);
+    height: var(--stepper-marker-size);
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--stepper-marker-border);
+    background: var(--stepper-marker-bg);
+    color: var(--stepper-marker-text);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    flex-shrink: 0;
+    z-index: 1;
+}
+
+.stepper__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    position: relative;
+    z-index: 1;
+}
+
+.stepper__title {
+    padding-right: var(--space-2);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text);
+    align-self: flex-start;
+    background: var(--stepper-title-bg);
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+}
+
+.stepper__desc {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.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 {
+    border-color: var(--color-success);
+    background: var(--color-success);
+    color: var(--color-on-success);
+}
+
+.stepper__item--disabled .stepper__content {
+    opacity: 0.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);
+}
+
+/* ---------------------------------------------------------
+   5. VERTICAL STEPPER
+--------------------------------------------------------- */
+
+.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 {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.stepper--vertical .stepper__item:not(:last-child)::after {
+    left: calc(var(--stepper-marker-size) / 2);
+    top: var(--stepper-marker-size);
+    right: auto;
+    width: var(--stepper-line-size);
+    height: calc(100% + var(--space-4));
+}
+
+@media (max-width: 768px) {
+    .stepper {
+        flex-direction: column;
+    }
+
+    .stepper__item {
+        padding-left: calc(var(--stepper-marker-size) + var(--space-3));
+    }
+
+    .stepper__marker {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    .stepper__item:not(:last-child)::after {
+        left: calc(var(--stepper-marker-size) / 2);
+        top: var(--stepper-marker-size);
+        right: auto;
+        width: var(--stepper-line-size);
+        height: calc(100% + var(--space-4));
+    }
+}

package/dist/components/progress.min.css

@@ -0,0 +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)}}

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}}