@ctrliq/quantic-components 1.64.4 → 1.66.0

package/dist/quantic-components.js

@@ -64019,6 +64019,7 @@
             super(...arguments);
             this.fill = false;
             this.bleeds = false;
+            this.contained = false;
         }
         render() {
             return u$2 `
@@ -64038,6 +64039,8 @@
     exports.Page.styles = i$7 `
     :host {
       --quantic-component-page-padding: var(--quantic-spacing-4);
+      --quantic-component-page-max-width: 80rem;
+      --quantic-component-page-contained-padding-inline: calc(2 * var(--quantic-component-page-padding));
       display: block;
       width: 100%;
       height: 100%;
@@ -64063,6 +64066,14 @@
     :host([fill]) .main {
       overflow: hidden;
     }
+
+    @media (min-width: 48rem) {
+      :host([contained]:not([bleeds])) .main {
+        max-width: var(--quantic-component-page-max-width);
+        margin-inline: auto;
+        padding-inline: var(--quantic-component-page-contained-padding-inline);
+      }
+    }
   `;
     __decorate([
         prop({
@@ -64080,6 +64091,14 @@
             description: 'Remove the default padding so content extends edge-to-edge. Useful for full-bleed layouts such as maps, images, or custom-padded regions.',
         })
     ], exports.Page.prototype, "bleeds", void 0);
+    __decorate([
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Constrain the page content to a maximum width and center it horizontally on viewports wider than the md breakpoint. Override the width via --quantic-component-page-max-width and inline padding via --quantic-component-page-contained-padding-inline.',
+        })
+    ], exports.Page.prototype, "contained", void 0);
     exports.Page = __decorate([
         quanticElement('quantic-page')
     ], exports.Page);
@@ -66270,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',