@24vlh/vds 0.1.0

package/dist/components/skeleton.css

@@ -0,0 +1,385 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Skeleton Loading System
+ *
+ *  Responsibilities:
+ *    - Define skeleton primitives (line, avatar, block, card, row, item)
+ *    - Provide a unified shimmer animation shared across VDS
+ *    - Support density variants and multi-component composition
+ *    - Ensure accessibility via reduced-motion compliance
+ *    - Match form, content-block, and layout surfaces for coherent loading
+ *
+ *  System Notes:
+ *    - 100% token-driven: spacing, radii, surfaces, aspect-ratios
+ *    - Animation is pure CSS; JS only toggles visibility
+ *    - Shimmer uses vds-skeleton-shimmer and respects prefers-reduced-motion
+ *    - Patterns are responsive and safe for all layout containers
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. SKELETON TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-skeleton],
+.vds-skeleton {
+    --skeleton-line-height: 1rem;
+}
+
+/* ---------------------------------------------------------
+   2. SHIMMER ANIMATION (Shared with forms)
+--------------------------------------------------------- */
+
+@keyframes vds-skeleton-shimmer {
+    0% {
+        transform: translateX(-150%);
+    }
+    100% {
+        transform: translateX(150%);
+    }
+}
+
+/* ---------------------------------------------------------
+   3. BASE SKELETON
+--------------------------------------------------------- */
+
+.skeleton {
+    position: relative;
+    display: block;
+
+    width: 100%;
+    height: var(--skeleton-line-height);
+
+    border-radius: var(--radius-md);
+    background-color: var(--color-muted-bg);
+
+    overflow: hidden;
+}
+
+.skeleton::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    transform: translateX(-150%);
+    background: linear-gradient(
+            90deg,
+            transparent,
+            var(--color-surface-subtle),
+            transparent
+    );
+
+    animation: vds-skeleton-shimmer 1.6s infinite;
+}
+
+.skeleton--sm {
+    height: calc(var(--skeleton-line-height) * 0.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;
+}
+
+/* ---------------------------------------------------------
+   4. SKELETON LINE (Text simulation)
+--------------------------------------------------------- */
+
+.skeleton-line {
+    display: block;
+    width: 100%;
+    height: var(--skeleton-line-height);
+
+    margin-bottom: var(--space-2);
+    border-radius: var(--radius-md);
+    background-color: var(--color-muted-bg);
+
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-line::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-150%);
+    background: linear-gradient(
+            90deg,
+            transparent,
+            var(--color-surface-subtle),
+            transparent
+    );
+    animation: vds-skeleton-shimmer 1.6s infinite;
+}
+
+.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) * 0.6);
+}
+
+.skeleton-line--sm {
+    height: calc(var(--skeleton-line-height) * 0.8);
+}
+
+.skeleton-line--lg {
+    height: calc(var(--skeleton-line-height) * 1.3);
+}
+
+/* ---------------------------------------------------------
+   5. SKELETON AVATAR
+--------------------------------------------------------- */
+
+.skeleton-avatar {
+    display: inline-block;
+
+    background-color: var(--color-muted-bg);
+    border-radius: var(--radius-full);
+
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-avatar--sm {
+    width: var(--avatar-size-sm);
+    height: var(--avatar-size-sm);
+}
+
+.skeleton-avatar--md {
+    width: var(--avatar-size-md);
+    height: var(--avatar-size-md);
+}
+
+.skeleton-avatar--lg {
+    width: var(--avatar-size-lg);
+    height: var(--avatar-size-lg);
+}
+
+.skeleton-avatar--square {
+    border-radius: var(--radius-md);
+}
+
+.skeleton-avatar::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-150%);
+    background: linear-gradient(
+            90deg,
+            transparent,
+            var(--color-surface-subtle),
+            transparent
+    );
+    animation: vds-skeleton-shimmer 1.6s infinite;
+}
+
+/* ---------------------------------------------------------
+   6. SKELETON BLOCK (Media / Images)
+--------------------------------------------------------- */
+
+.skeleton-block {
+    width: 100%;
+    background-color: var(--color-muted-bg);
+    border-radius: var(--radius-md);
+    position: relative;
+    overflow: hidden;
+}
+
+.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 {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-150%);
+    background: linear-gradient(
+            90deg,
+            transparent,
+            var(--color-surface-subtle),
+            transparent
+    );
+    animation: vds-skeleton-shimmer 1.6s infinite;
+}
+
+/* ---------------------------------------------------------
+   7. SKELETON CARD (Composite pattern)
+--------------------------------------------------------- */
+
+.skeleton-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+
+    padding: var(--space-6);
+}
+
+.skeleton-card--dense {
+    padding: var(--space-4);
+}
+
+.skeleton-card--relaxed {
+    padding: var(--space-8);
+}
+
+.skeleton-card--list {
+    flex-direction: row;
+    align-items: center;
+    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%;
+}
+
+/* ---------------------------------------------------------
+   8. SKELETON ROW (Table loading)
+--------------------------------------------------------- */
+
+.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);
+}
+
+/* ---------------------------------------------------------
+   9. SKELETON ITEM (List items)
+--------------------------------------------------------- */
+
+.skeleton-item {
+    display: flex;
+    align-items: center;
+    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;
+}
+
+/* ---------------------------------------------------------
+   10. COMPOSITION HELPERS
+--------------------------------------------------------- */
+
+.skeleton-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.skeleton-inline {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.skeleton-gap-sm {
+    gap: var(--space-2);
+}
+
+.skeleton-gap-lg {
+    gap: var(--space-6);
+}
+
+/* ---------------------------------------------------------
+   11. REDUCED MOTION HANDLING
+--------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+    .skeleton::after,
+    .skeleton-line::after,
+    .skeleton-avatar::after,
+    .skeleton-block::after {
+        animation: none !important;
+    }
+}

package/dist/components/skeleton.min.css

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