@ctrliq/quantic-components 1.64.4 → 1.66.0

package/dist/quantic-components.min.js

@@ -37354,13 +37354,15 @@ const to="important",io=" !"+to,no=Re(class extends Oe{constructor(e){if(super(e
     :host {
       display: contents;
     }
-  `,t([en({context:zo,subscribe:!0})],e.LayoutLogo.prototype,"expanded",void 0),e.LayoutLogo=t([be("quantic-layout-logo")],e.LayoutLogo),e.Page=class extends Ce{constructor(){super(...arguments),this.fill=!1,this.bleeds=!1}render(){return ze`
+  `,t([en({context:zo,subscribe:!0})],e.LayoutLogo.prototype,"expanded",void 0),e.LayoutLogo=t([be("quantic-layout-logo")],e.LayoutLogo),e.Page=class extends Ce{constructor(){super(...arguments),this.fill=!1,this.bleeds=!1,this.contained=!1}render(){return ze`
       <main class="main">
         <slot></slot>
       </main>
     `}},e.Page.meta={tag:"quantic-page",description:"Main content area of the quantic-layout shell. Wraps content in a semantic <main> element and fills available space.",category:"layout",slots:{"":{description:"Page content."}},relatedTo:["quantic-layout"]},e.Page.styles=l`
     :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%;
@@ -37386,7 +37388,15 @@ const to="important",io=" !"+to,no=Re(class extends Oe{constructor(e){if(super(e
     :host([fill]) .main {
       overflow: hidden;
     }
-  `,t([Ie({type:"boolean",default:"false",reflect:!0,description:"Constrain the page to the available height and clip overflow, so internal regions own their own scrolling (e.g. splitter panes, full-height grids, maps). Without this, the page grows with its content and the layout body slot scrolls."})],e.Page.prototype,"fill",void 0),t([Ie({type:"boolean",default:"false",reflect:!0,description:"Remove the default padding so content extends edge-to-edge. Useful for full-bleed layouts such as maps, images, or custom-padded regions."})],e.Page.prototype,"bleeds",void 0),e.Page=t([be("quantic-page")],e.Page);const Ho={Top:"top",TopStart:"top-start",TopEnd:"top-end",Bottom:"bottom",BottomStart:"bottom-start",BottomEnd:"bottom-end",Left:"left",LeftStart:"left-start",LeftEnd:"left-end",Right:"right",RightStart:"right-start",RightEnd:"right-end"},To={Small:"sm",Medium:"md",Large:"lg"};var Do,Vo,Fo;e.TooltipPopup=class extends Ce{constructor(){super(...arguments),this.visible=!1}render(){return G`
+
+    @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);
+      }
+    }
+  `,t([Ie({type:"boolean",default:"false",reflect:!0,description:"Constrain the page to the available height and clip overflow, so internal regions own their own scrolling (e.g. splitter panes, full-height grids, maps). Without this, the page grows with its content and the layout body slot scrolls."})],e.Page.prototype,"fill",void 0),t([Ie({type:"boolean",default:"false",reflect:!0,description:"Remove the default padding so content extends edge-to-edge. Useful for full-bleed layouts such as maps, images, or custom-padded regions."})],e.Page.prototype,"bleeds",void 0),t([Ie({type:"boolean",default:"false",reflect:!0,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."})],e.Page.prototype,"contained",void 0),e.Page=t([be("quantic-page")],e.Page);const Ho={Top:"top",TopStart:"top-start",TopEnd:"top-end",Bottom:"bottom",BottomStart:"bottom-start",BottomEnd:"bottom-end",Left:"left",LeftStart:"left-start",LeftEnd:"left-end",Right:"right",RightStart:"right-start",RightEnd:"right-end"},To={Small:"sm",Medium:"md",Large:"lg"};var Do,Vo,Fo;e.TooltipPopup=class extends Ce{constructor(){super(...arguments),this.visible=!1}render(){return G`
       <div class="content"><slot></slot></div>
       <div class="arrow"></div>
     `}},e.TooltipPopup.meta={tag:"quantic-tooltip-popup",description:"Internal floating content container for quantic-tooltip. Positioned absolutely relative to the trigger via @floating-ui/dom. Not intended for direct use — use quantic-tooltip instead.",category:"feedback",slots:{"":{description:"Tooltip content (managed by quantic-tooltip)."}},relatedTo:["quantic-tooltip"]},e.TooltipPopup.styles=l`
@@ -38421,7 +38431,47 @@ const to="important",io=" !"+to,no=Re(class extends Oe{constructor(e){if(super(e
         width: 100%;
       }
     }
-  `,t([Ie({type:"number",description:"Current progress value (0–100). Omit for indeterminate mode."})],e.Progress.prototype,"value",void 0),t([Ie({type:"ProgressSize",options:Object.values(Uo),default:Uo.Small,description:"Controls the bar height and label font size."})],e.Progress.prototype,"size",void 0),t([Ie({type:"boolean",default:"false",description:"Shows a percentage label next to the bar (only in determinate mode)."})],e.Progress.prototype,"label",void 0),t([Ie({type:"ProgressColor",options:Object.values(Zo),default:Zo.Brand,description:"Fill color of the progress bar."})],e.Progress.prototype,"color",void 0),t([Ie({attribute:"aria-label",type:"string",description:"Accessible label for the progressbar role."})],e.Progress.prototype,"ariaLabel",void 0),t([Ie({type:"string",description:"Accessible description forwarded to aria-description."})],e.Progress.prototype,"description",void 0),e.Progress=t([be("quantic-progress")],e.Progress);const Go=Pi,No={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg",ExtraLarge:"xl"};e.Spinner=class extends Ce{constructor(){super(...arguments),this.size=No.Medium,this.label="Loading"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status")}render(){return G`
+  `,t([Ie({type:"number",description:"Current progress value (0–100). Omit for indeterminate mode."})],e.Progress.prototype,"value",void 0),t([Ie({type:"ProgressSize",options:Object.values(Uo),default:Uo.Small,description:"Controls the bar height and label font size."})],e.Progress.prototype,"size",void 0),t([Ie({type:"boolean",default:"false",description:"Shows a percentage label next to the bar (only in determinate mode)."})],e.Progress.prototype,"label",void 0),t([Ie({type:"ProgressColor",options:Object.values(Zo),default:Zo.Brand,description:"Fill color of the progress bar."})],e.Progress.prototype,"color",void 0),t([Ie({attribute:"aria-label",type:"string",description:"Accessible label for the progressbar role."})],e.Progress.prototype,"ariaLabel",void 0),t([Ie({type:"string",description:"Accessible description forwarded to aria-description."})],e.Progress.prototype,"description",void 0),e.Progress=t([be("quantic-progress")],e.Progress),e.Skeleton=class extends Ce{render(){return G`
+      <span
+        class="skeleton"
+        aria-hidden="true"
+        style=${no({"--cols":null!=this.cols?String(this.cols):void 0,"--rows":null!=this.rows?String(this.rows):void 0,"animation-delay":null!=this.delay?`${this.delay}s`:void 0})}
+      ></span>
+    `}},e.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"},e.Skeleton.styles=l`
+    :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;
+      }
+    }
+  `,t([Ie({type:"number",description:"Width as a fraction of 12 columns (1–12). Defaults to 12 (full width)."})],e.Skeleton.prototype,"cols",void 0),t([Ie({type:"number",description:"Height as a multiple of 1em. Defaults to 1."})],e.Skeleton.prototype,"rows",void 0),t([Ie({type:"number",description:"Animation delay in seconds. Useful for staggering multiple skeletons."})],e.Skeleton.prototype,"delay",void 0),e.Skeleton=t([be("quantic-skeleton")],e.Skeleton);const Go=Pi,No={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg",ExtraLarge:"xl"};e.Spinner=class extends Ce{constructor(){super(...arguments),this.size=No.Medium,this.label="Loading"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status")}render(){return G`
       <div
         class=${$e({sizer:!0,[`size--${this.size}`]:!0,[`color--${this.color}`]:!!this.color})}
         aria-hidden="true"