@ctrliq/quantic-components 1.67.6 → 1.68.1

package/dist/cluster/cluster.component.js

@@ -0,0 +1,139 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css } from 'lit';
+import { html } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
+import { QuanticElement, quanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+let Cluster = class Cluster extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.axis = ClusterAxis.Horizontal;
+        this.gap = ClusterGap.Medium;
+        this.align = ClusterAlign.Start;
+        this.wrap = true;
+    }
+    render() {
+        const classes = classMap({
+            cluster: true,
+            [`axis--${this.axis}`]: true,
+            [`gap--${this.gap}`]: true,
+            [`align--${this.align}`]: true,
+            nowrap: !this.wrap && this.axis === ClusterAxis.Horizontal,
+        });
+        return html `
+      <div class=${classes}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+Cluster.meta = {
+    tag: 'quantic-cluster',
+    description: 'Generic flex container that arranges child items along a horizontal or vertical axis with consistent spacing. ' +
+        'Use for grouping small inline elements like badges, tags, or buttons. ' +
+        'Prefer quantic-card-group for cards, quantic-panel-group for panels, and quantic-grid for multi-column responsive layouts — ' +
+        'those components provide semantics and density presets that Cluster does not.',
+    category: 'layout',
+    slots: { '': { description: 'Items to arrange.' } },
+    relatedTo: ['quantic-grid', 'quantic-card-group', 'quantic-panel-group'],
+};
+Cluster.styles = css `
+    :host {
+      display: block;
+    }
+
+    .cluster {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .axis--vertical {
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
+
+    .nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .gap--none {
+      gap: 0;
+    }
+
+    .gap--xs {
+      gap: var(--quantic-spacing-0-5);
+    }
+
+    .gap--sm {
+      gap: var(--quantic-spacing-1);
+    }
+
+    .gap--md {
+      gap: var(--quantic-spacing-1-5);
+    }
+
+    .gap--lg {
+      gap: var(--quantic-spacing-3);
+    }
+
+    .gap--xl {
+      gap: var(--quantic-spacing-5);
+    }
+
+    .align--start {
+      align-items: flex-start;
+    }
+
+    .align--center {
+      align-items: center;
+    }
+
+    .align--end {
+      align-items: flex-end;
+    }
+
+    .align--stretch {
+      align-items: stretch;
+    }
+  `;
+__decorate([
+    prop({
+        type: 'ClusterAxis',
+        options: Object.values(ClusterAxis),
+        default: ClusterAxis.Horizontal,
+        description: 'Layout direction.',
+    })
+], Cluster.prototype, "axis", void 0);
+__decorate([
+    prop({
+        type: 'ClusterGap',
+        options: Object.values(ClusterGap),
+        default: ClusterGap.Medium,
+        description: 'Spacing between items.',
+    })
+], Cluster.prototype, "gap", void 0);
+__decorate([
+    prop({
+        type: 'ClusterAlign',
+        options: Object.values(ClusterAlign),
+        default: ClusterAlign.Start,
+        description: 'Cross-axis alignment.',
+    })
+], Cluster.prototype, "align", void 0);
+__decorate([
+    prop({
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether items wrap to the next line (horizontal axis only).',
+    })
+], Cluster.prototype, "wrap", void 0);
+Cluster = __decorate([
+    quanticElement('quantic-cluster')
+], Cluster);
+export { Cluster };

package/dist/cluster/cluster.stories.d.ts

@@ -0,0 +1,57 @@
+import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        axis: {
+            control: string;
+            options: ClusterAxis[];
+            table: {
+                defaultValue: {
+                    summary: ClusterAxis;
+                };
+            };
+        };
+        gap: {
+            control: string;
+            options: ClusterGap[];
+            table: {
+                defaultValue: {
+                    summary: ClusterGap;
+                };
+            };
+        };
+        align: {
+            control: string;
+            options: ClusterAlign[];
+            table: {
+                defaultValue: {
+                    summary: ClusterAlign;
+                };
+            };
+        };
+        wrap: {
+            control: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default _default;
+interface Args {
+    axis: ClusterAxis;
+    gap: ClusterGap;
+    align: ClusterAlign;
+    wrap: boolean;
+}
+export declare const Horizontal: import("../shared/story").StoryObject<Args>;
+export declare const Vertical: import("../shared/story").StoryObject<Args>;
+export declare const ExtraSmall: import("../shared/story").StoryObject<Args>;
+export declare const Small: import("../shared/story").StoryObject<Args>;
+export declare const Large: import("../shared/story").StoryObject<Args>;
+export declare const ExtraLarge: import("../shared/story").StoryObject<Args>;
+export declare const Centered: import("../shared/story").StoryObject<Args>;

package/dist/cluster/cluster.stories.js

@@ -0,0 +1,67 @@
+import { story } from '../shared/story';
+import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
+export default {
+    title: 'Components/Layout/Cluster',
+    component: 'quantic-cluster',
+    tags: ['autodocs'],
+    argTypes: {
+        axis: {
+            control: 'select',
+            options: Object.values(ClusterAxis),
+            table: { defaultValue: { summary: ClusterAxis.Horizontal } },
+        },
+        gap: {
+            control: 'select',
+            options: Object.values(ClusterGap),
+            table: { defaultValue: { summary: ClusterGap.Medium } },
+        },
+        align: {
+            control: 'select',
+            options: Object.values(ClusterAlign),
+            table: { defaultValue: { summary: ClusterAlign.Start } },
+        },
+        wrap: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+    },
+};
+const badges = [
+    'Backgrounds',
+    'Email signatures',
+    'LinkedIn header graphic',
+    'Social media posts',
+    'Presentation slides',
+];
+const renderBadges = () => badges.map((label) => `<quantic-badge color="purple" size="xs">${label}</quantic-badge>`).join('\n');
+const base = story({
+    args: {
+        axis: ClusterAxis.Horizontal,
+        gap: ClusterGap.Medium,
+        align: ClusterAlign.Start,
+        wrap: true,
+    },
+}).render(({ axis, gap, align, wrap }) => `
+    <quantic-cluster axis="${axis}" gap="${gap}" align="${align}" ${wrap ? 'wrap' : 'nowrap'}>
+      ${renderBadges()}
+    </quantic-cluster>
+  `);
+export const Horizontal = base;
+export const Vertical = base.override({
+    axis: ClusterAxis.Vertical,
+});
+export const ExtraSmall = base.override({
+    gap: ClusterGap.ExtraSmall,
+});
+export const Small = base.override({
+    gap: ClusterGap.Small,
+});
+export const Large = base.override({
+    gap: ClusterGap.Large,
+});
+export const ExtraLarge = base.override({
+    gap: ClusterGap.ExtraLarge,
+});
+export const Centered = base.override({
+    align: ClusterAlign.Center,
+});

package/dist/cluster/index.constants.d.ts

@@ -0,0 +1,18 @@
+export declare enum ClusterAxis {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export declare enum ClusterGap {
+    None = "none",
+    ExtraSmall = "xs",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg",
+    ExtraLarge = "xl"
+}
+export declare enum ClusterAlign {
+    Start = "start",
+    Center = "center",
+    End = "end",
+    Stretch = "stretch"
+}

package/dist/cluster/index.constants.js

@@ -0,0 +1,21 @@
+export var ClusterAxis;
+(function (ClusterAxis) {
+    ClusterAxis["Horizontal"] = "horizontal";
+    ClusterAxis["Vertical"] = "vertical";
+})(ClusterAxis || (ClusterAxis = {}));
+export var ClusterGap;
+(function (ClusterGap) {
+    ClusterGap["None"] = "none";
+    ClusterGap["ExtraSmall"] = "xs";
+    ClusterGap["Small"] = "sm";
+    ClusterGap["Medium"] = "md";
+    ClusterGap["Large"] = "lg";
+    ClusterGap["ExtraLarge"] = "xl";
+})(ClusterGap || (ClusterGap = {}));
+export var ClusterAlign;
+(function (ClusterAlign) {
+    ClusterAlign["Start"] = "start";
+    ClusterAlign["Center"] = "center";
+    ClusterAlign["End"] = "end";
+    ClusterAlign["Stretch"] = "stretch";
+})(ClusterAlign || (ClusterAlign = {}));

package/dist/cluster/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cluster.component';
+export * from './index.constants';

package/dist/cluster/index.js

@@ -0,0 +1,2 @@
+export * from './cluster.component';
+export * from './index.constants';

package/dist/code-input/index.js

@@ -306,9 +306,7 @@ CodeInput.styles = css `
       overflow: hidden;
       background-color: var(--quantic-bg-secondary);
       color: var(--quantic-color-gray-dark-mode-600);
-      font-family:
-        ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-        'DejaVu Sans Mono', monospace;
+      font-family: var(--quantic-font-family-mono);
       font-size: var(--quantic-component-code-input-font-size);
       line-height: var(--quantic-component-code-input-line-height);
       user-select: none;
@@ -329,9 +327,7 @@ CodeInput.styles = css `
       color: var(--quantic-text-primary);
       padding: var(--quantic-component-code-input-padding-block)
         var(--quantic-component-code-input-padding-inline);
-      font-family:
-        ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-        'DejaVu Sans Mono', monospace;
+      font-family: var(--quantic-font-family-mono);
       font-size: var(--quantic-component-code-input-font-size);
       line-height: var(--quantic-component-code-input-line-height);
       resize: none;

package/dist/field/field-group.component.d.ts

@@ -5,7 +5,9 @@ export declare class FieldGroup extends QuanticElement {
     static meta: ComponentMeta;
     size: FieldGroupSize;
     layout: FieldGroupLayout;
+    columns?: number;
     static styles: import("lit").CSSResult;
+    private get pinnedColumns();
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/field/field-group.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { FieldGroupSize, FieldGroupLayout } from './index.constants';
@@ -15,14 +15,24 @@ let FieldGroup = class FieldGroup extends QuanticElement {
         this.size = FieldGroupSize.Medium;
         this.layout = FieldGroupLayout.Default;
     }
+    get pinnedColumns() {
+        return this.columns && this.columns > 0 ? this.columns : undefined;
+    }
     render() {
+        const pinnedColumns = this.pinnedColumns;
         const classes = classMap({
             'field-group': true,
             [`size--${this.size}`]: true,
             [`layout--${this.layout}`]: true,
+            'fixed-columns': pinnedColumns !== undefined,
         });
         return html `
-      <div class=${classes}>
+      <div
+        class=${classes}
+        style=${pinnedColumns
+            ? `--quantic-component-field-group-columns: ${pinnedColumns}`
+            : nothing}
+      >
         <slot></slot>
       </div>
     `;
@@ -32,6 +42,7 @@ FieldGroup.meta = {
     tag: 'quantic-field-group',
     description: 'Non-semantic container that groups multiple form fields with consistent spacing. ' +
         'Use layout="grid" for a responsive auto-fit column layout. ' +
+        'Set columns (or --quantic-component-field-group-columns) to pin a fixed column count. ' +
         'For semantically grouped fields with a legend, use quantic-fieldset instead.',
     category: 'form',
     slots: {
@@ -77,13 +88,24 @@ FieldGroup.styles = css `
     .layout--grid {
       display: grid;
       grid-template-columns: repeat(
-        auto-fit,
+        var(--quantic-component-field-group-columns, auto-fit),
         minmax(
           min(var(--quantic-component-field-group-grid-max-size), 100%),
           1fr
         )
       );
     }
+
+    .layout--grid.fixed-columns {
+      grid-template-columns: repeat(
+        var(--quantic-component-field-group-columns),
+        minmax(0, 1fr)
+      );
+    }
+
+    .layout--grid ::slotted(*) {
+      min-width: 0;
+    }
   `;
 __decorate([
     prop({
@@ -101,6 +123,13 @@ __decorate([
         description: 'Layout mode. "grid" arranges fields in responsive columns.',
     })
 ], FieldGroup.prototype, "layout", void 0);
+__decorate([
+    prop({
+        type: 'number',
+        description: 'When layout is "grid", pin this many equal columns instead of auto-fit wrapping. ' +
+            'Unset keeps the size-based wrap. Also settable via --quantic-component-field-group-columns.',
+    })
+], FieldGroup.prototype, "columns", void 0);
 FieldGroup = __decorate([
     quanticElement('quantic-field-group')
 ], FieldGroup);

package/dist/field/field-group.stories.d.ts

@@ -2,6 +2,7 @@ import { FieldGroupSize, FieldGroupLayout } from './index.constants';
 type FieldGroupArgs = {
     size: FieldGroupSize;
     layout: FieldGroupLayout;
+    columns?: number;
 };
 declare const _default: {
     title: string;
@@ -20,6 +21,11 @@ declare const _default: {
             };
             options: ("default" | "grid")[];
         };
+        columns: {
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;
@@ -28,4 +34,5 @@ export declare const ExtraSmall: import("../shared/story").StoryObject<FieldGrou
 export declare const Small: import("../shared/story").StoryObject<FieldGroupArgs>;
 export declare const Large: import("../shared/story").StoryObject<FieldGroupArgs>;
 export declare const Grid: import("../shared/story").StoryObject<FieldGroupArgs>;
+export declare const GridColumns: import("../shared/story").StoryObject<FieldGroupArgs>;
 export declare const GridBreakpoints: import("../shared/story").StoryObject<FieldGroupArgs>;

package/dist/field/field-group.stories.js

@@ -13,6 +13,9 @@ export default {
             control: { type: 'select' },
             options: Object.values(FieldGroupLayout),
         },
+        columns: {
+            control: { type: 'number' },
+        },
     },
 };
 const fields = (html, size) => html `
@@ -47,8 +50,12 @@ const fields = (html, size) => html `
 `;
 const base = story({
     args: { size: FieldGroupSize.Medium, layout: FieldGroupLayout.Default },
-}).render(({ size, layout, html }) => html `
-    <quantic-field-group size="${size}" layout="${layout}">
+}).render(({ size, layout, columns, html }) => html `
+    <quantic-field-group
+      size="${size}"
+      layout="${layout}"
+      .columns=${columns}
+    >
       ${fields(html, size)}
     </quantic-field-group>
   `);
@@ -57,6 +64,10 @@ export const ExtraSmall = base.override({ size: FieldGroupSize.ExtraSmall });
 export const Small = base.override({ size: FieldGroupSize.Small });
 export const Large = base.override({ size: FieldGroupSize.Large });
 export const Grid = base.override({ layout: FieldGroupLayout.Grid });
+export const GridColumns = base.override({
+    layout: FieldGroupLayout.Grid,
+    columns: 2,
+});
 // Container widths chosen to bracket each size's grid wrap point. A second
 // column appears at roughly 2 × grid-max-size + gap; since the gap grows with
 // size, the real thresholds sit a little above the approximate values below:

package/dist/fieldset/fieldset.component.js

@@ -139,6 +139,10 @@ Fieldset.styles = css `
       font-weight: var(--quantic-font-weight-medium);
       margin: 0;
       padding: 0;
+      display: block;
+      float: none;
+      width: 100%;
+      text-align: start;
     }
 
     .description {

package/dist/grid/grid.component.js

@@ -39,23 +39,20 @@ Grid.styles = css `
       display: block;
       font-family: var(--quantic-font-family-body);
       container-type: inline-size;
-
-      --quantic-component-grid-gap: var(--quantic-spacing-4);
-      --quantic-component-grid-columns: 1;
     }
 
     .grid {
       display: grid;
-      gap: var(--quantic-component-grid-gap);
+      gap: var(--quantic-component-grid-gap, var(--quantic-spacing-4));
       grid-template-columns: repeat(
-        var(--quantic-component-grid-columns),
+        var(--quantic-component-grid-columns, 1),
         minmax(0, 1fr)
       );
       align-items: stretch;
     }
 
     .density--custom {
-      /* Uses :host defaults or external overrides */
+      /* Defers to inherited --quantic-component-grid-* or the fallbacks above */
     }
 
     .density--dense {

package/dist/icon/IconBase.component.js

@@ -8,6 +8,7 @@ import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconSize } from './index.constants.js';
 import { QuanticElement } from '../shared/quantic-element.js';
+import { setHostVar } from '../shared/shared.utils';
 export { IconSize, IconName } from './index.constants.js';
 export class IconBase extends QuanticElement {
     constructor() {
@@ -17,10 +18,10 @@ export class IconBase extends QuanticElement {
     }
     willUpdate(changed) {
         if (changed.has('size') && typeof this.size === 'number') {
-            this.style.setProperty('--icon-size', `${this.size}px`);
+            setHostVar(this, '--icon-size', `${this.size}px`);
         }
-        if (changed.has('strokeWidth')) {
-            this.style.setProperty('--icon-stroke-width', `${this.strokeWidth}`);
+        if (changed.has('strokeWidth') && this.strokeWidth != null) {
+            setHostVar(this, '--icon-stroke-width', `${this.strokeWidth}`);
         }
     }
 }

package/dist/icon/__generated__/brand/apptainer.outline.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconApptainerOutline extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-apptainer-outline': BrandIconApptainerOutline;
+    }
+}

package/dist/icon/__generated__/brand/apptainer.solid.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconApptainerSolid extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-apptainer-solid': BrandIconApptainerSolid;
+    }
+}

package/dist/icon/__generated__/brand/ascender.outline.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconAscenderOutline extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-ascender-outline': BrandIconAscenderOutline;
+    }
+}

package/dist/icon/__generated__/brand/ascender.solid.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconAscenderSolid extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-ascender-solid': BrandIconAscenderSolid;
+    }
+}

package/dist/icon/__generated__/brand/ciq-bridge.outline.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconCiqBridgeOutline extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-ciq-bridge-outline': BrandIconCiqBridgeOutline;
+    }
+}

package/dist/icon/__generated__/brand/ciq-bridge.solid.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconCiqBridgeSolid extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-ciq-bridge-solid': BrandIconCiqBridgeSolid;
+    }
+}

package/dist/icon/__generated__/brand/fuzzball.outline.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconFuzzballOutline extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-fuzzball-outline': BrandIconFuzzballOutline;
+    }
+}

package/dist/icon/__generated__/brand/fuzzball.solid.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconFuzzballSolid extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-fuzzball-solid': BrandIconFuzzballSolid;
+    }
+}

package/dist/icon/__generated__/brand/rlc-hardened.outline.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconRlcHardenedOutline extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-rlc-hardened-outline': BrandIconRlcHardenedOutline;
+    }
+}

package/dist/icon/__generated__/brand/rlc-hardened.solid.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconRlcHardenedSolid extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-rlc-hardened-solid': BrandIconRlcHardenedSolid;
+    }
+}

package/dist/icon/__generated__/brand/rlc-plus.outline.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconRlcPlusOutline extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-rlc-plus-outline': BrandIconRlcPlusOutline;
+    }
+}

package/dist/icon/__generated__/brand/rlc-plus.solid.d.ts

@@ -3,3 +3,8 @@ export declare class BrandIconRlcPlusSolid extends IconBaseLitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<2>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-icon-brand-rlc-plus-solid': BrandIconRlcPlusSolid;
+    }
+}