@ctrliq/quantic-components 1.64.4 → 1.66.0

package/dist/layout/page.component.d.ts

@@ -4,6 +4,7 @@ export declare class Page extends QuanticElement {
     static meta: ComponentMeta;
     fill: boolean;
     bleeds: boolean;
+    contained: boolean;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }

package/dist/layout/page.component.js

@@ -13,6 +13,7 @@ let Page = class Page extends QuanticElement {
         super(...arguments);
         this.fill = false;
         this.bleeds = false;
+        this.contained = false;
     }
     render() {
         return html `
@@ -32,6 +33,8 @@ Page.meta = {
 Page.styles = css `
     :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%;
@@ -57,6 +60,14 @@ Page.styles = css `
     :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({
@@ -74,6 +85,14 @@ __decorate([
         description: 'Remove the default padding so content extends edge-to-edge. Useful for full-bleed layouts such as maps, images, or custom-padded regions.',
     })
 ], 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.',
+    })
+], Page.prototype, "contained", void 0);
 Page = __decorate([
     quanticElement('quantic-page')
 ], Page);

package/dist/layout/page.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<object>;
+export declare const Contained: import("../shared/story").StoryObject<object>;
+export declare const ContainedCustomWidth: import("../shared/story").StoryObject<object>;
+export declare const Bleeds: import("../shared/story").StoryObject<object>;

package/dist/layout/page.stories.js

@@ -0,0 +1,23 @@
+import { story } from '../shared/story';
+export default {
+    title: 'Components/Layout/Page',
+    component: 'quantic-page',
+    tags: ['autodocs'],
+};
+const box = `<div style="background: var(--quantic-bg-secondary); border: 1px solid var(--quantic-border-primary); border-radius: var(--quantic-radius-lg); height: 80px; display: flex; align-items: center; justify-content: center; color: var(--quantic-text-tertiary); font-size: var(--quantic-font-size-body-sm);">Content</div>`;
+export const Default = story().render(() => `<quantic-page style="height: 200px; border: 1px solid var(--quantic-border-primary);">
+  ${box}
+  <p>Page content renders inside a semantic &lt;main&gt; element with default padding.</p>
+</quantic-page>`);
+export const Contained = story().render(() => `<quantic-page contained style="height: 200px; border: 1px solid var(--quantic-border-primary);">
+  ${box}
+  <p>Content is constrained to <code>--quantic-component-page-max-width</code> (default 80rem) and centered on viewports wider than the md breakpoint.</p>
+</quantic-page>`);
+export const ContainedCustomWidth = story().render(() => `<quantic-page contained style="--quantic-component-page-max-width: 40rem; height: 200px;">
+  ${box}
+  <p>Override <code>--quantic-component-page-max-width</code> to control the constraint. Here it is set to 40rem.</p>
+</quantic-page>`);
+export const Bleeds = story().render(() => `<quantic-page bleeds style="height: 200px; border: 1px solid var(--quantic-border-primary);">
+  ${box}
+  <p style="padding-block: var(--quantic-spacing-4);">Content extends edge-to-edge — no default padding applied.</p>
+</quantic-page>`);

package/dist/meta/index.js

@@ -48,6 +48,7 @@ import { Progress } from '../progress/index';
 import { Radio } from '../radio/radio.component';
 import { RadioGroup } from '../radio/radio-group.component';
 import { Select } from '../select/index';
+import { Skeleton } from '../skeleton/skeleton.component';
 import { Sparkline } from '../sparkline/index';
 import { Spinner } from '../spinner/index';
 import { SplitterGroup } from '../splitter/splitter-group.component';
@@ -123,6 +124,7 @@ export const allMeta = [
     Radio.meta,
     RadioGroup.meta,
     Select.meta,
+    Skeleton.meta,
     Sparkline.meta,
     Spinner.meta,
     SplitterGroup.meta,