q2-tecton-elements 1.55.3 → 1.56.0

package/dist/q2-tecton-elements/q2-grid-area.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2GridAreaCss","Q2GridAreaStyle0","Q2GridArea","computedLgZIndex","this","lgZIndex","computedMdZIndex","mdZIndex","computedSmZIndex","smZIndex","computedXsZIndex","computedXlZIndex","xlZIndex","xsZIndex","zIndex","render","q2GridAreaStyles","columnStart","columnSpan","rowStart","rowSpan","justify","align","xsColumnStart","xsColumnSpan","xsRowStart","xsRowSpan","xsJustify","xsAlign","smColumnStart","smColumnSpan","smRowStart","smRowSpan","smJustify","smAlign","mdColumnStart","mdColumnSpan","mdRowStart","mdRowSpan","mdJustify","mdAlign","lgColumnStart","lgColumnSpan","lgRowStart","lgRowSpan","lgJustify","lgAlign","xlColumnStart","xlColumnSpan","xlRowStart","xlRowSpan","xlJustify","xlAlign","h","Host","key","style"],"sources":["src/components/q2-grid-area/q2-grid-area.scss?tag=q2-grid-area&encapsulation=shadow","src/components/q2-grid-area/q2-grid-area.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n:host {\n    // base:\n    --grid-column-start: '';\n    --grid-column-end: '';\n    --grid-row-start: '';\n    --grid-row-end: '';\n    --justify-self: '';\n    --align-self: '';\n    --z-index: '';\n    // xs:\n    --xs-grid-column-start: '';\n    --xs-grid-column-end: '';\n    --xs-grid-row-start: '';\n    --xs-grid-row-end: '';\n    --xs-justify-self: '';\n    --xs-align-self: '';\n    --xs-z-index: '';\n    // sm:\n    --sm-grid-column-start: '';\n    --sm-grid-column-end: '';\n    --sm-grid-row-start: '';\n    --sm-grid-row-end: '';\n    --sm-justify-self: '';\n    --sm-align-self: '';\n    --sm-z-index: '';\n    // md:\n    --md-grid-column-start: '';\n    --md-grid-column-end: '';\n    --md-grid-row-start: '';\n    --md-grid-row-end: '';\n    --md-justify-self: '';\n    --md-align-self: '';\n    --md-z-index: '';\n    // lg:\n    --lg-grid-column-start: '';\n    --lg-grid-column-end: '';\n    --lg-grid-row-start: '';\n    --lg-grid-row-end: '';\n    --lg-justify-self: '';\n    --lg-align-self: '';\n    --lg-z-index: '';\n    // xl:\n    --xl-grid-column-start: '';\n    --xl-grid-column-end: '';\n    --xl-grid-row-start: '';\n    --xl-grid-row-end: '';\n    --xl-justify-self: '';\n    --xl-align-self: '';\n    --xl-z-index: '';\n}\n// base:\n@include generate-q2-grid-area-styles(\n    var(--grid-column-start),\n    var(--grid-column-end),\n    var(--grid-row-start),\n    var(--grid-row-end),\n    var(--justify-self),\n    var(--align-self),\n    var(--z-index)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n    @include breakpoint($breakpoint) {\n        @include generate-q2-grid-area-styles(\n            var(--#{$breakpoint}-grid-column-start),\n            var(--#{$breakpoint}-grid-column-end),\n            var(--#{$breakpoint}-grid-row-start),\n            var(--#{$breakpoint}-grid-row-end),\n            var(--#{$breakpoint}-justify-self),\n            var(--#{$breakpoint}-align-self),\n            var(--#{$breakpoint}-z-index)\n        );\n    }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TQ2GridAreaColumnStartOptions = 'auto' | number;\nexport type TQ2GridAreaColumnSpanOptions = number;\nexport type TQ2GridAreaRowStartOptions = 'auto' | number;\nexport type TQ2GridAreaRowSpanOptions = number;\nexport type TQ2GridAreaJustifyOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaAlignOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaZIndexOptions = number;\n\n@Component({ tag: 'q2-grid-area', shadow: true, styleUrl: 'q2-grid-area.scss' })\nexport class Q2GridArea {\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAreaAlignOptions = 'auto';\n\n    /** Sets the column span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnSpan: TQ2GridAreaColumnSpanOptions = 1;\n\n    /** Sets the starting column of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnStart: TQ2GridAreaColumnStartOptions = 'auto';\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridAreaJustifyOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    lgColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    lgRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    mdColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    mdRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the row span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    rowSpan: TQ2GridAreaRowSpanOptions = 1;\n\n    /**\n     * Sets the starting row of the grid area at the baseline viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    rowStart: TQ2GridAreaRowStartOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    smColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    smRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xlColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xlRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xsColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xsRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the z-index of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    zIndex: TQ2GridAreaZIndexOptions = 0;\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgZIndex() {\n        return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;\n    }\n\n    get computedMdZIndex() {\n        return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;\n    }\n\n    get computedSmZIndex() {\n        return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;\n    }\n\n    get computedXlZIndex() {\n        return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;\n    }\n\n    get computedXsZIndex() {\n        return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridAreaStyles: { [key: string]: string } = {\n            // base:\n            '--grid-column-start': `${this.columnStart}`,\n            '--grid-column-end': `span ${this.columnSpan}`,\n            '--grid-row-start': `${this.rowStart}`,\n            '--grid-row-end': `span ${this.rowSpan}`,\n            '--justify-self': this.justify,\n            '--align-self': this.align,\n            '--z-index': `${this.zIndex}`,\n            // xs:\n            '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,\n            '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,\n            '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,\n            '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,\n            '--xs-justify-self': this.xsJustify || this.justify,\n            '--xs-align-self': this.xsAlign || this.align,\n            '--xs-z-index': `${this.computedXsZIndex}`,\n            // sm:\n            '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-self': this.smAlign || this.xsAlign || this.align,\n            '--sm-z-index': `${this.computedSmZIndex}`,\n            // md:\n            '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--md-z-index': `${this.computedMdZIndex}`,\n            // lg:\n            '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--lg-z-index': `${this.computedLgZIndex}`,\n            // xl:\n            '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--xl-justify-self':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-self':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--xl-z-index': `${this.computedXlZIndex}`,\n        };\n\n        return (\n            <Host style={q2GridAreaStyles}>\n                <slot />\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-grid.entry.js

@@ -0,0 +1,114 @@
+import { r as t, h as i, F as s } from "./index-7a5365e2.js";
+
+const e = '.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));--grid-template-columns:"";--grid-template-rows:"";--grid-gap:"";--justify-items:"";--align-items:"";--xs-grid-template-columns:"";--xs-grid-template-rows:"";--xs-grid-gap:"";--xs-justify-items:"";--xs-align-items:"";--sm-grid-template-columns:"";--sm-grid-template-rows:"";--sm-grid-gap:"";--sm-justify-items:"";--sm-align-items:"";--md-grid-template-columns:"";--md-grid-template-rows:"";--md-grid-gap:"";--md-justify-items:"";--md-align-items:"";--lg-grid-template-columns:"";--lg-grid-template-rows:"";--lg-grid-gap:"";--lg-justify-items:"";--lg-align-items:"";--xl-grid-template-columns:"";--xl-grid-template-rows:"";--xl-grid-gap:"";--xl-justify-items:"";--xl-align-items:"";display:grid;width:100%;height:100%;grid-auto-rows:auto;grid-auto-columns:1fr;grid-auto-flow:row;justify-content:center;align-content:center}.q2-grid{grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);gap:var(--grid-gap);justify-items:var(--justify-items);align-items:var(--align-items)}@media screen and (min-width: 480px){.q2-grid{grid-template-columns:var(--xs-grid-template-columns);grid-template-rows:var(--xs-grid-template-rows);gap:var(--xs-grid-gap);justify-items:var(--xs-justify-items);align-items:var(--xs-align-items)}}@media screen and (min-width: 768px){.q2-grid{grid-template-columns:var(--sm-grid-template-columns);grid-template-rows:var(--sm-grid-template-rows);gap:var(--sm-grid-gap);justify-items:var(--sm-justify-items);align-items:var(--sm-align-items)}}@media screen and (min-width: 992px){.q2-grid{grid-template-columns:var(--md-grid-template-columns);grid-template-rows:var(--md-grid-template-rows);gap:var(--md-grid-gap);justify-items:var(--md-justify-items);align-items:var(--md-align-items)}}@media screen and (min-width: 1200px){.q2-grid{grid-template-columns:var(--lg-grid-template-columns);grid-template-rows:var(--lg-grid-template-rows);gap:var(--lg-grid-gap);justify-items:var(--lg-justify-items);align-items:var(--lg-align-items)}}@media screen and (min-width: 1400px){.q2-grid{grid-template-columns:var(--xl-grid-template-columns);grid-template-rows:var(--xl-grid-template-rows);gap:var(--xl-grid-gap);justify-items:var(--xl-justify-items);align-items:var(--xl-align-items)}}';
+
+const r = e;
+
+const a = class {
+  constructor(i) {
+    t(this, i);
+    this.align = "stretch";
+    this.columns = 12;
+    this.gap = "normal";
+    this.justify = "stretch";
+    this.lgAlign = undefined;
+    this.lgColumns = undefined;
+    this.lgGap = undefined;
+    this.lgJustify = undefined;
+    this.lgRows = undefined;
+    this.mdAlign = undefined;
+    this.mdColumns = undefined;
+    this.mdGap = undefined;
+    this.mdJustify = undefined;
+    this.mdRows = undefined;
+    this.rows = "auto";
+    this.smAlign = undefined;
+    this.smColumns = undefined;
+    this.smGap = undefined;
+    this.smJustify = undefined;
+    this.smRows = undefined;
+    this.xlAlign = undefined;
+    this.xlColumns = undefined;
+    this.xlGap = undefined;
+    this.xlJustify = undefined;
+    this.xlRows = undefined;
+    this.xsAlign = undefined;
+    this.xsColumns = undefined;
+    this.xsGap = undefined;
+    this.xsJustify = undefined;
+    this.xsRows = undefined;
+  }
+  // #endregion
+  // #region Local Methods
+  get computedLgRows() {
+    return this.lgRows || this.computedMdRows;
+  }
+  get computedMdRows() {
+    return this.mdRows || this.computedSmRows;
+  }
+  get computedSmRows() {
+    return this.smRows || this.computedXsRows;
+  }
+  get computedXlRows() {
+    return this.xlRows || this.computedLgRows;
+  }
+  get computedXsRows() {
+    return this.xsRows || this.rows;
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const t = {
+      // 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})`,
+      "--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-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-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-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-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-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 i(s, {
+      key: "8a0e08bfee936e317030c9624b5d170c8ea73a6c"
+    }, i("div", {
+      key: "a9c5026ede0844709d97e4d94f51958572de10f4",
+      style: t,
+      class: "q2-grid"
+    }, i("slot", {
+      key: "fe047e24638a63e6d1b542a6b7b0e93026337aec"
+    })));
+  }
+};
+
+a.style = r;
+
+export { a as q2_grid };
+//# sourceMappingURL=q2-grid.entry.js.map

package/dist/q2-tecton-elements/q2-grid.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2GridCss","Q2GridStyle0","Q2Grid","computedLgRows","this","lgRows","computedMdRows","mdRows","computedSmRows","smRows","computedXsRows","computedXlRows","xlRows","xsRows","rows","render","q2GridStyles","columns","gap","justify","align","xsColumns","xsGap","xsJustify","xsAlign","smColumns","smGap","smJustify","smAlign","mdColumns","mdGap","mdJustify","mdAlign","lgColumns","lgGap","lgJustify","lgAlign","xlColumns","xlGap","xlJustify","xlAlign","h","Fragment","key","style","class"],"sources":["src/components/q2-grid/q2-grid.scss?tag=q2-grid&encapsulation=shadow","src/components/q2-grid/q2-grid.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n.q2-grid {\n    // computed:\n    --comp-grid-gap-none: #{var-list(--tct-grid-gap-none, --app-scale-0x, 0px)};\n    --comp-grid-gap-compact: #{var-list(--tct-grid-gap-compact, --app-scale-1x, 5px)};\n    --comp-grid-gap-normal: #{var-list(--tct-grid-gap-normal, --app-scale-3x, 15px)};\n    --comp-grid-gap-comfortable: #{var-list(--tct-grid-gap-comfortable, --app-scale-5x, 25px)};\n    // base:\n    --grid-template-columns: '';\n    --grid-template-rows: '';\n    --grid-gap: '';\n    --justify-items: '';\n    --align-items: '';\n    // xs:\n    --xs-grid-template-columns: '';\n    --xs-grid-template-rows: '';\n    --xs-grid-gap: '';\n    --xs-justify-items: '';\n    --xs-align-items: '';\n    // sm:\n    --sm-grid-template-columns: '';\n    --sm-grid-template-rows: '';\n    --sm-grid-gap: '';\n    --sm-justify-items: '';\n    --sm-align-items: '';\n    // md:\n    --md-grid-template-columns: '';\n    --md-grid-template-rows: '';\n    --md-grid-gap: '';\n    --md-justify-items: '';\n    --md-align-items: '';\n    // lg:\n    --lg-grid-template-columns: '';\n    --lg-grid-template-rows: '';\n    --lg-grid-gap: '';\n    --lg-justify-items: '';\n    --lg-align-items: '';\n    // xl:\n    --xl-grid-template-columns: '';\n    --xl-grid-template-rows: '';\n    --xl-grid-gap: '';\n    --xl-justify-items: '';\n    --xl-align-items: '';\n    // q2-grid styles w/o prop configs:\n    display: grid;\n    width: 100%;\n    height: 100%;\n    grid-auto-rows: auto;\n    grid-auto-columns: 1fr;\n    grid-auto-flow: row;\n    justify-content: center;\n    align-content: center;\n}\n// base:\n@include generate-q2-grid-styles(\n    var(--grid-template-columns),\n    var(--grid-template-rows),\n    var(--grid-gap),\n    var(--justify-items),\n    var(--align-items)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n    @include breakpoint($breakpoint) {\n        @include generate-q2-grid-styles(\n            var(--#{$breakpoint}-grid-template-columns),\n            var(--#{$breakpoint}-grid-template-rows),\n            var(--#{$breakpoint}-grid-gap),\n            var(--#{$breakpoint}-justify-items),\n            var(--#{$breakpoint}-align-items)\n        );\n    }\n}\n","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@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"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-item_3.entry.js

@@ -1,8 +1,8 @@
 import { r as t, h as e, g as i, c as o } from "./index-7a5365e2.js";
 
-import { o as n, e as r } from "./index-f2a66217.js";
+import { o as n, e as r } from "./index-c215e8ef.js";
 
-const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 
 const s = a;
 
@@ -106,44 +106,44 @@ const d = class {
   render() {
     const {clickable: t} = this;
     return e("div", {
-      key: "7b0894fa0180d68cba7b47a6e63f837255a70057",
+      key: "40ce0bd3c330b4fff2b4e846035dac01c0fd7773",
       "test-id": "itemContainer",
       class: this.itemClasses,
       ref: t => this.itemElement = t,
       role: t ? "button" : undefined,
       tabIndex: t ? 0 : undefined
     }, this.hasBulletSlotContent && e("div", {
-      key: "5ef5a26d2fb4644e9b9d902bc7ff314a90df9976",
+      key: "b1bbdfbd340cc93e3fda71e361b3f42e46757914",
       class: this.bulletClasses
     }, e("slot", {
-      key: "7db082ffd73b04494e67cbdee93b140afb11e016",
+      key: "57b96870dec3b052b561726c138af977dfb72b50",
       name: "bullet"
     })), e("div", {
-      key: "42212f56e12da4b57ae14b613efcdc59fbbc93b4",
+      key: "47c92c8eeaecbc20cf83d08589369f56fa84327d",
       class: this.mainClasses
     }, this.hasHeaderSlotContent && e("div", {
-      key: "9153d8de21c4809716f17f31717d97463bb045a5",
+      key: "005de58a8d3570e3e487b1ee8feb75778a67e5df",
       class: "header"
     }, e("slot", {
-      key: "ab504063f003daa1ea3984555ccf703426116dc0",
+      key: "d18a38954f1418b998a0e666409806161d00710a",
       name: "header"
     })), this.hasBodySlotContent && e("div", {
-      key: "1a8b650df30033853919f6492aaa194f60a11c60",
+      key: "3c49afb728f1d850680ce340540f96f4e66b038d",
       class: "body"
     }, e("slot", {
-      key: "b8262d4ef02751e63b62b525543394d0f14824db",
+      key: "a48218bf13429473b3dfeaca8188350da2028edf",
       name: "body"
     }))), this.hasActionSlotContent && e("div", {
-      key: "056bc3b9f932495baf46613b66857325d19c0e3b",
+      key: "4d0b77a7ae10ee942dcd9e99cdacc6344fb31993",
       class: this.actionClasses
     }, e("slot", {
-      key: "f5332dd36657b470c993b773195044f7c809fe66",
+      key: "c3877b2dbe56a15ed3a4ab5e5dfa221495f905e1",
       name: "action"
     })), this.hasFooterSlotContent && e("div", {
-      key: "111359c030a37ad8e72df6e3a40d8b8d226a4734",
+      key: "8fb01a51cb3a663886a6f985f6195ea2d639c573",
       class: this.footerClasses
     }, e("slot", {
-      key: "8afe6c9372a9c53663d6383116256f19b470858b",
+      key: "0469761b85c1e10e9379865c089e0bea16c401a2",
       name: "footer"
     })));
   }
@@ -302,23 +302,23 @@ const f = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "cb7c090b2e018bc46ef3ae829f4fd7f3cbb896e8",
+      key: "a62513330a8eb2a86fd42c4769631118d6ed73bb",
       class: this.listClasses,
       ref: t => this.listElement = t
     }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
-      key: "16672b343894a78a378b17e18f21b1412b103683",
+      key: "59a5e757c4a2e905ab6e3ea556772f025b0f3e9d",
       class: this.headerClasses
     }, e("div", {
-      key: "4f78dabab7f982fb6e472c29195bbcc8f4c6758c",
+      key: "b0e25c5d70ea57d5a003e41df0d2bef18e8546ac",
       class: "label"
     }, this.label), this.hasFilterSlot && e("slot", {
-      key: "7ce97a75b66749f137a6c1b70827ddcef60df8ce",
+      key: "13a72e5ff372225b81baa82c30dc048cffdcf3bb",
       name: "filter"
     })), e("div", {
-      key: "05f39d183177a30f3d5edacecafa57503e1bef9c",
+      key: "c1046e879e12b2582862afe0dda3f6209ff901dc",
       role: "list"
     }, e("slot", {
-      key: "37be8bca5d3b81404db947d96605585b3a1cce32"
+      key: "c4bd23906fbed01d15b54e473cd36e289d9c7b31"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-item_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name","q2LinkCss","Q2LinkStyle0","Q2Link","clickLink","anchor","shadowRoot","querySelector","click","list","variant","disabled","handleClick","stopPropagation","tctClick","emit","target","referrerpolicy","href","label","onClick","e","referrerPolicy","title","tctTitle","type","iconType","q2ListCss","Q2ListStyle0","Q2List","scheduledAfterRender","onMutationObserved","Array","from","children","forEach","child","tagName","disconnectedCallback","disconnect","componentDidRender","fn","hasFilterSlot","hasLabelContent","headerClasses","listClasses","listElement"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx","src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasBulletSlotContent && (\n                    <div class={this.bulletClasses}>\n                        <slot name=\"bullet\" />\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            height: var(--tct-link-height, 24px);\n            display: flex;\n            align-items: center;\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n                opacity: 0.5;\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n        &:focus-visible & {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string = 'chevron-right';\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type={this.iconType}></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name","q2LinkCss","Q2LinkStyle0","Q2Link","clickLink","anchor","shadowRoot","querySelector","click","list","variant","disabled","handleClick","stopPropagation","tctClick","emit","target","referrerpolicy","href","label","onClick","e","referrerPolicy","title","tctTitle","type","iconType","q2ListCss","Q2ListStyle0","Q2List","scheduledAfterRender","onMutationObserved","Array","from","children","forEach","child","tagName","disconnectedCallback","disconnect","componentDidRender","fn","hasFilterSlot","hasLabelContent","headerClasses","listClasses","listElement"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx","src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasBulletSlotContent && (\n                    <div class={this.bulletClasses}>\n                        <slot name=\"bullet\" />\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            height: var(--tct-link-height, 24px);\n            display: flex;\n            align-items: center;\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n                opacity: 0.5;\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n        &:focus-visible & {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string = 'chevron-right';\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type={this.iconType}></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-legend.entry.js

@@ -103,10 +103,10 @@ const o = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "17df977aa81845d2b4e6db411b2860495ba61e4b",
+      key: "9e3655b908d343e9184630069adf04b3917902bb",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "21d4f05b1b2e5f5374e04a8a93249704043ed447"
+      key: "7dbda73b13652bc876bab45b53a4864161b64f8b"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {

package/dist/q2-tecton-elements/q2-loc.entry.js

@@ -1,6 +1,6 @@
 import { r as t, g as s } from "./index-7a5365e2.js";
 
-import { l as i } from "./index-f2a66217.js";
+import { l as i } from "./index-c215e8ef.js";
 
 const e = class {
   constructor(s) {

package/dist/q2-tecton-elements/q2-message.entry.js

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as a } from "./index-7a5365e2.js";
 
-import { o as s, i as o, n as r, t as i, l as n } from "./index-f2a66217.js";
+import { o as s, i as o, n as r, t as i, l as n } from "./index-c215e8ef.js";
 
 const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 
@@ -66,7 +66,7 @@ const d = class {
     const {description: o} = this;
     const r = n(`tecton.element.message.type.${this.type ? this.type : "info"}`);
     return e("div", {
-      key: "ccca9e80908f73482c73f865743e5f7cd6438d99",
+      key: "5f3c103f660a2417f5c7843ee4d8a65170945ac4",
       tabindex: "-1",
       class: "message",
       role: o ? undefined : "alert",
@@ -75,17 +75,17 @@ const d = class {
       "aria-relevant": o && a ? undefined : "all",
       "test-id": "messageContainer"
     }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
-      key: "a9937495e83a7e0852034c36639d8c60ea3c30ac",
+      key: "9646ad49631660393be05303568ac2f120eb4c3a",
       class: "sr"
     }), e("div", {
-      key: "e650f7ef7c2544e44f63ce7a23f33f04145a7e83",
+      key: "f1b9a59acc27ccec3f988c69dcda0a41aba71f45",
       class: "sr message-label"
     }, r), e("div", {
-      key: "daa66069373ac3030fb33dc3c88c0621c91bb6a4",
+      key: "5397f4a9e266630aa0ef97f37e0b28262c7a1995",
       class: "message-content",
       "aria-hidden": a ? "true" : undefined
     }, e("slot", {
-      key: "464a52a941be194c1267beee2c1b307ece17f964"
+      key: "a856f4f132ed0e40061499a889bb9429e5e7a088"
     })));
   }
   get hostElement() {