q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js

@@ -71,7 +71,7 @@ export class Q2FormattedText {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '0e3cb56f89a3ab403b45b411a4cd38ec267ed58b', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: 'a9bb42690d67bce14debcb99db50c63582c6ba63' }, this.formattedValue)));
+        return (h("div", { key: '9345b2829e7ac6dd1e5e308e1b840dcb298dbc0d', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '4687a60218658aeced2507ffd9f5eef6c5c9b40e' }, this.formattedValue)));
     }
     static get is() { return "q2-formatted-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-formatted-text/test/q2-formatted-text-test.vr.js

@@ -0,0 +1,55 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const VARIANTS = [
+    {
+        name: 'inline',
+        html: `<q2-formatted-text value="1234.5"></q2-formatted-text>`,
+    },
+    {
+        name: 'size-small',
+        html: `<q2-formatted-text value="1234.5" size="small"></q2-formatted-text>`,
+    },
+    {
+        name: 'size-medium',
+        html: `<q2-formatted-text value="1234.5" size="medium"></q2-formatted-text>`,
+    },
+    {
+        name: 'size-large',
+        html: `<q2-formatted-text value="1234.5" size="large"></q2-formatted-text>`,
+    },
+    {
+        name: 'percent',
+        html: `<q2-formatted-text value="0.4567" format="percent" size="medium"></q2-formatted-text>`,
+    },
+    {
+        name: 'locale-de-DE',
+        html: `<q2-formatted-text value="1234.5" locale="de-DE" size="medium"></q2-formatted-text>`,
+    },
+    {
+        name: 'sign-always-positive',
+        html: `<q2-formatted-text value="1234.5" sign-display="always" size="medium"></q2-formatted-text>`,
+    },
+    {
+        name: 'sign-always-negative',
+        html: `<q2-formatted-text value="-1234.5" sign-display="always" size="medium"></q2-formatted-text>`,
+    },
+    {
+        name: 'fraction-digits-zero',
+        html: `<q2-formatted-text value="1234" minimum-fraction-digits="0" maximum-fraction-digits="0" size="medium"></q2-formatted-text>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-formatted-text--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await expect(page).toHaveScreenshot(`q2-formatted-text--${variant.name}--resting--${theme}.png`);
+    });
+};
+test.describe('q2-formatted-text — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-formatted-text-test.vr.js.map

package/dist/collection/components/q2-formatted-text/test/q2-formatted-text-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-formatted-text-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-formatted-text/test/q2-formatted-text-test.vr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,gCAAgC,CAAC;AAI1E,MAAM,QAAQ,GAAc;IACxB;QACI,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,wDAAwD;KACjE;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,qEAAqE;KAC9E;IACD;QACI,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,sEAAsE;KAC/E;IACD;QACI,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,qEAAqE;KAC9E;IACD;QACI,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,uFAAuF;KAChG;IACD;QACI,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,qFAAqF;KAC9F;IACD;QACI,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,4FAA4F;KACrG;IACD;QACI,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,6FAA6F;KACtG;IACD;QACI,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,4HAA4H;KACrI;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IACnD,IAAI,CAAC,sBAAsB,OAAO,CAAC,IAAI,eAAe,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9E,MAAM,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,sBAAsB,OAAO,CAAC,IAAI,cAAc,KAAK,MAAM,CAAC,CAAC;IACrG,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;IACxD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = { name: string; html: string };\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'inline',\n        html: `<q2-formatted-text value=\"1234.5\"></q2-formatted-text>`,\n    },\n    {\n        name: 'size-small',\n        html: `<q2-formatted-text value=\"1234.5\" size=\"small\"></q2-formatted-text>`,\n    },\n    {\n        name: 'size-medium',\n        html: `<q2-formatted-text value=\"1234.5\" size=\"medium\"></q2-formatted-text>`,\n    },\n    {\n        name: 'size-large',\n        html: `<q2-formatted-text value=\"1234.5\" size=\"large\"></q2-formatted-text>`,\n    },\n    {\n        name: 'percent',\n        html: `<q2-formatted-text value=\"0.4567\" format=\"percent\" size=\"medium\"></q2-formatted-text>`,\n    },\n    {\n        name: 'locale-de-DE',\n        html: `<q2-formatted-text value=\"1234.5\" locale=\"de-DE\" size=\"medium\"></q2-formatted-text>`,\n    },\n    {\n        name: 'sign-always-positive',\n        html: `<q2-formatted-text value=\"1234.5\" sign-display=\"always\" size=\"medium\"></q2-formatted-text>`,\n    },\n    {\n        name: 'sign-always-negative',\n        html: `<q2-formatted-text value=\"-1234.5\" sign-display=\"always\" size=\"medium\"></q2-formatted-text>`,\n    },\n    {\n        name: 'fraction-digits-zero',\n        html: `<q2-formatted-text value=\"1234\" minimum-fraction-digits=\"0\" maximum-fraction-digits=\"0\" size=\"medium\"></q2-formatted-text>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-formatted-text--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await expect(page).toHaveScreenshot(`q2-formatted-text--${variant.name}--resting--${theme}.png`);\n    });\n};\n\ntest.describe('q2-formatted-text — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n});\n"]}

package/dist/collection/components/q2-grid/q2-grid.css

@@ -1,8 +1,21 @@
+/**
+ * @prop --tct-grid-gap-none: (<length-percentage>+) Controls the gap between grid rows and columns when gap is none.
+ * @prop --tct-grid-gap-compact: (<length-percentage>+) Controls the gap between grid rows and columns when gap is compact.
+ * @prop --tct-grid-gap-normal: (<length-percentage>+) Controls the gap between grid rows and columns when gap is normal.
+ * @prop --tct-grid-gap-comfortable: (<length-percentage>+) Controls the gap between grid rows and columns when gap is comfortable.
+ */
 .q2-grid {
   --comp-grid-gap-none: var(--tct-grid-gap-none, var(--app-scale-0x, 0px));
   --comp-grid-gap-compact: var(--tct-grid-gap-compact, var(--app-scale-1x, 5px));
   --comp-grid-gap-normal: var(--tct-grid-gap-normal, var(--app-scale-3x, 15px));
   --comp-grid-gap-comfortable: var(--tct-grid-gap-comfortable, var(--app-scale-5x, 25px));
+  --tct-input-margin: 0;
+  --tct-select-margin: 0;
+  --tct-calendar-margin: 0;
+  --tct-file-picker-margin: 0;
+  --tct-textarea-margin: 0;
+  --tct-checkbox-group-margin: 0;
+  --tct-radio-group-margin: 0;
   --grid-template-columns: "";
   --grid-template-rows: "";
   --grid-gap: "";

package/dist/collection/components/q2-grid/q2-grid.js

@@ -6,6 +6,15 @@ import { h, Fragment } from "@stencil/core";
  */
 export class Q2Grid {
     constructor() {
+        // #region Own Properties
+        /**
+         * Tracks whether the `gap` attribute was explicitly set on this element at mount.
+         * When false (and the grid is inside a q2-form), the grid's gap defers to the
+         * form's --comp-spacing so form+grid matches form-only spacing without the
+         * consumer having to mirror tokens.
+         */
+        this.hasExplicitGap = false;
+        // #endregion
         // #region Public Property API
         /**
          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at
@@ -33,6 +42,11 @@ export class Q2Grid {
         this.rows = 'auto';
     }
     // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.hasExplicitGap = this.element.hasAttribute('gap');
+    }
+    // #endregion
     // #region Local Methods
     get computedLgRows() {
         return this.lgRows || this.computedMdRows;
@@ -49,6 +63,15 @@ export class Q2Grid {
     get computedXsRows() {
         return this.xsRows || this.rows;
     }
+    gapValue(...keys) {
+        const resolved = keys.find(k => !!k);
+        if (resolved === this.gap && !this.hasExplicitGap) {
+            // No explicit gap at this breakpoint — inherit q2-form's spacing if present,
+            // otherwise fall back to the normal gap token.
+            return `var(--comp-spacing, var(--comp-grid-gap-${this.gap}))`;
+        }
+        return `var(--comp-grid-gap-${resolved})`;
+    }
     // #endregion
     // #region Render Methods
     render() {
@@ -56,41 +79,41 @@ export class Q2Grid {
             // base:
             '--grid-template-columns': `repeat(${this.columns}, 1fr)`,
             '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,
-            '--grid-gap': `var(--comp-grid-gap-${this.gap})`,
+            '--grid-gap': this.gapValue(this.gap),
             '--justify-items': this.justify,
             '--align-items': this.align,
             // xs:
             '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,
             '--xs-grid-template-rows': this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,
-            '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,
+            '--xs-grid-gap': this.gapValue(this.xsGap, this.gap),
             '--xs-justify-items': this.xsJustify || this.justify,
             '--xs-align-items': this.xsAlign || this.align,
             // sm:
             '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--sm-grid-template-rows': this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,
-            '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,
+            '--sm-grid-gap': this.gapValue(this.smGap, this.xsGap, this.gap),
             '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,
             '--sm-align-items': this.smAlign || this.xsAlign || this.align,
             // md:
             '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--md-grid-template-rows': this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,
-            '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--md-grid-gap': this.gapValue(this.mdGap, this.smGap, this.xsGap, this.gap),
             '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,
             // lg:
             '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--lg-grid-template-rows': this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,
-            '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--lg-grid-gap': this.gapValue(this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),
             '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
             // xl:
             '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--xl-grid-template-rows': this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,
-            '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--xl-grid-gap': this.gapValue(this.xlGap, this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),
             '--xl-justify-items': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--xl-align-items': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
         };
-        return (h(Fragment, { key: 'ab38b4849ec0cdf8ab49d536bb440df6f21b93d7' }, h("div", { key: '0fd537b2867d871be69269d983234f9f6e47edeb', style: q2GridStyles, class: "q2-grid" }, h("slot", { key: 'd9d7b5d7bbcde66f0bcef49c2c31906e12536e90' }))));
+        return (h(Fragment, { key: '03e2c1cd82120cba9c38c2a1f5a34fe1dabf52bd' }, h("div", { key: 'b9bb38073a2edb5cd0fedf667d8c552328b4f4c6', style: q2GridStyles, class: "q2-grid" }, h("slot", { key: '1a3668ba1ed13df94aa9355a8a24bfef39e5087b' }))));
     }
     static get is() { return "q2-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -863,5 +886,6 @@ export class Q2Grid {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=q2-grid.js.map

package/dist/collection/components/q2-grid/q2-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-grid.js","sourceRoot":"","sources":["../../../../src/components/q2-grid/q2-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' | number;\nexport type TQ2GridGapOptions = 'none' | 'compact' | 'normal' | 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAlignOptions = 'stretch' | 'start' | 'center' | 'end';\n\n/**\n * @name Grid\n * @category Display\n * @summary Use for responsive grid layouts with flexible rows and columns.\n */\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the baseline viewport size.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAlignOptions = 'stretch';\n\n    /** Sets the amount of columns to render within the grid at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columns: TQ2GridColumnsOptions = 12;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the baseline viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    gap: TQ2GridGapOptions = 'normal';\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n     * at the baseline viewport size.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridJustifyOptions = 'stretch';\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n     * 'LG' viewport size.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'LG' viewport size.*/\n    @Prop({ reflect: true })\n    lgColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    lgGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'LG' viewport size.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'LG' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    lgRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'MD' viewport size.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'MD' viewport size.*/\n    @Prop({ reflect: true })\n    mdColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    mdGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'MD' viewport size.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'MD' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    mdRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the baseline viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    rows: TQ2GridRowsOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'SM' viewport size.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'SM' viewport size.*/\n    @Prop({ reflect: true })\n    smColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    smGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'SM' viewport size.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'SM' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    smRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n     * 'XL' viewport size.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'XL' viewport size.*/\n    @Prop({ reflect: true })\n    xlColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    xlGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'XL' viewport size.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'XL' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    xlRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'XS' viewport size.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'XS' viewport size.*/\n    @Prop({ reflect: true })\n    xsColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    xsGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n     * at the 'XS' viewport size.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'XS' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    xsRows: TQ2GridRowsOptions;\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgRows() {\n        return this.lgRows || this.computedMdRows;\n    }\n\n    get computedMdRows() {\n        return this.mdRows || this.computedSmRows;\n    }\n\n    get computedSmRows() {\n        return this.smRows || this.computedXsRows;\n    }\n\n    get computedXlRows() {\n        return this.xlRows || this.computedLgRows;\n    }\n\n    get computedXsRows() {\n        return this.xsRows || this.rows;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridStyles: { [key: string]: string } = {\n            // base:\n            '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n            '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n            '--grid-gap': `var(--comp-grid-gap-${this.gap})`,\n            '--justify-items': this.justify,\n            '--align-items': this.align,\n            // xs:\n            '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,\n            '--xs-grid-template-rows':\n                this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n            '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,\n            '--xs-justify-items': this.xsJustify || this.justify,\n            '--xs-align-items': this.xsAlign || this.align,\n            // sm:\n            '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--sm-grid-template-rows':\n                this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n            '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,\n            '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-items': this.smAlign || this.xsAlign || this.align,\n            // md:\n            '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--md-grid-template-rows':\n                this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n            '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,\n            '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            // lg:\n            '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--lg-grid-template-rows':\n                this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n            '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,\n            '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            // xl:\n            '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--xl-grid-template-rows':\n                this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n            '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,\n            '--xl-justify-items':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-items':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n        };\n        return (\n            <Fragment>\n                <div\n                    style={q2GridStyles}\n                    class=\"q2-grid\"\n                >\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-grid.js","sourceRoot":"","sources":["../../../../src/components/q2-grid/q2-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' | number;\nexport type TQ2GridGapOptions = 'none' | 'compact' | 'normal' | 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAlignOptions = 'stretch' | 'start' | 'center' | 'end';\n\n/**\n * @name Grid\n * @category Display\n * @summary Use for responsive grid layouts with flexible rows and columns.\n */\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n    // #region Own Properties\n\n    /**\n     * Tracks whether the `gap` attribute was explicitly set on this element at mount.\n     * When false (and the grid is inside a q2-form), the grid's gap defers to the\n     * form's --comp-spacing so form+grid matches form-only spacing without the\n     * consumer having to mirror tokens.\n     */\n    private hasExplicitGap = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    element: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the baseline viewport size.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAlignOptions = 'stretch';\n\n    /** Sets the amount of columns to render within the grid at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columns: TQ2GridColumnsOptions = 12;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the baseline viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    gap: TQ2GridGapOptions = 'normal';\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n     * at the baseline viewport size.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridJustifyOptions = 'stretch';\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n     * 'LG' viewport size.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'LG' viewport size.*/\n    @Prop({ reflect: true })\n    lgColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    lgGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'LG' viewport size.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'LG' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    lgRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'MD' viewport size.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'MD' viewport size.*/\n    @Prop({ reflect: true })\n    mdColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    mdGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'MD' viewport size.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'MD' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    mdRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the baseline viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    rows: TQ2GridRowsOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'SM' viewport size.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'SM' viewport size.*/\n    @Prop({ reflect: true })\n    smColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    smGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'SM' viewport size.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'SM' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    smRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n     * 'XL' viewport size.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'XL' viewport size.*/\n    @Prop({ reflect: true })\n    xlColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    xlGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'XL' viewport size.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'XL' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    xlRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'XS' viewport size.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'XS' viewport size.*/\n    @Prop({ reflect: true })\n    xsColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    xsGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n     * at the 'XS' viewport size.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'XS' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    xsRows: TQ2GridRowsOptions;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.hasExplicitGap = this.element.hasAttribute('gap');\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgRows() {\n        return this.lgRows || this.computedMdRows;\n    }\n\n    get computedMdRows() {\n        return this.mdRows || this.computedSmRows;\n    }\n\n    get computedSmRows() {\n        return this.smRows || this.computedXsRows;\n    }\n\n    get computedXlRows() {\n        return this.xlRows || this.computedLgRows;\n    }\n\n    get computedXsRows() {\n        return this.xsRows || this.rows;\n    }\n\n    private gapValue(...keys: TQ2GridGapOptions[]) {\n        const resolved = keys.find(k => !!k);\n        if (resolved === this.gap && !this.hasExplicitGap) {\n            // No explicit gap at this breakpoint — inherit q2-form's spacing if present,\n            // otherwise fall back to the normal gap token.\n            return `var(--comp-spacing, var(--comp-grid-gap-${this.gap}))`;\n        }\n        return `var(--comp-grid-gap-${resolved})`;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridStyles: { [key: string]: string } = {\n            // base:\n            '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n            '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n            '--grid-gap': this.gapValue(this.gap),\n            '--justify-items': this.justify,\n            '--align-items': this.align,\n            // xs:\n            '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,\n            '--xs-grid-template-rows':\n                this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n            '--xs-grid-gap': this.gapValue(this.xsGap, this.gap),\n            '--xs-justify-items': this.xsJustify || this.justify,\n            '--xs-align-items': this.xsAlign || this.align,\n            // sm:\n            '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--sm-grid-template-rows':\n                this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n            '--sm-grid-gap': this.gapValue(this.smGap, this.xsGap, this.gap),\n            '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-items': this.smAlign || this.xsAlign || this.align,\n            // md:\n            '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--md-grid-template-rows':\n                this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n            '--md-grid-gap': this.gapValue(this.mdGap, this.smGap, this.xsGap, this.gap),\n            '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            // lg:\n            '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--lg-grid-template-rows':\n                this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n            '--lg-grid-gap': this.gapValue(this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),\n            '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            // xl:\n            '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--xl-grid-template-rows':\n                this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n            '--xl-grid-gap': this.gapValue(this.xlGap, this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),\n            '--xl-justify-items':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-items':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n        };\n        return (\n            <Fragment>\n                <div\n                    style={q2GridStyles}\n                    class=\"q2-grid\"\n                >\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"]}