@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/skeleton.css

@@ -1,385 +1 @@
-/************************************************************
- * 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;
-    }
-}
+.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}}