@ctrliq/quantic-components 1.65.0 → 1.67.0

package/dist/quantic-components.js

@@ -66289,6 +66289,75 @@
         quanticElement('quantic-progress')
     ], exports.Progress);
 
+    exports.Skeleton = class Skeleton extends QuanticElement {
+        render() {
+            return b `
+      <span
+        class="skeleton"
+        aria-hidden="true"
+        style=${o({
+            '--cols': this.cols != null ? String(this.cols) : undefined,
+            '--rows': this.rows != null ? String(this.rows) : undefined,
+            'animation-delay': this.delay != null ? `${this.delay}s` : undefined,
+        })}
+      ></span>
+    `;
+        }
+    };
+    exports.Skeleton.meta = {
+        tag: 'quantic-skeleton',
+        description: 'Animated placeholder used while content is loading. ' +
+            'Renders a shimmering block sized by column span and line-height units.',
+        category: 'feedback',
+    };
+    exports.Skeleton.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      display: block;
+      border-radius: var(--quantic-radius-sm);
+      width: calc(var(--cols, 12) / 12 * 100%);
+      height: calc(var(--rows, 1) * 1em);
+      background: linear-gradient(
+        120deg,
+        rgb(var(--quantic-bg-tertiary-rgb) / 0.5) 25%,
+        var(--quantic-bg-tertiary) 50%,
+        rgb(var(--quantic-bg-tertiary-rgb) / 0.5) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer var(--quantic-component-skeleton-duration, 2.5s) ease-in-out infinite;
+    }
+
+    @keyframes shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+  `;
+    __decorate([
+        prop({ type: 'number', description: 'Width as a fraction of 12 columns (1–12). Defaults to 12 (full width).' })
+    ], exports.Skeleton.prototype, "cols", void 0);
+    __decorate([
+        prop({ type: 'number', description: 'Height as a multiple of 1em. Defaults to 1.' })
+    ], exports.Skeleton.prototype, "rows", void 0);
+    __decorate([
+        prop({ type: 'number', description: 'Animation delay in seconds. Useful for staggering multiple skeletons.' })
+    ], exports.Skeleton.prototype, "delay", void 0);
+    exports.Skeleton = __decorate([
+        quanticElement('quantic-skeleton')
+    ], exports.Skeleton);
+
     const SpinnerColor = ComponentColor;
     const SpinnerSize = {
         ExtraSmall: 'xs',