@ctrliq/quantic-components 1.67.6 → 1.68.1

package/dist/tabs/tabs.component.js

@@ -5,14 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { provide } from '@lit/context';
-import { TabsSize, TabsOrientation } from './index.constants';
 import { classMap } from 'lit/directives/class-map.js';
+import { TabsSize, TabsOrientation, tabsTag, buttonTag, panelTag, buttonsSlot, panelsSlot, } from './index.constants';
 import { idContext, sizeContext, orientationContext, selectedIndexContext, } from './index.context';
-import { tabsTag, buttonTag, panelTag } from './index.constants';
 import { event, prop } from '../shared/component-meta.decorators';
+import { whenSlotPresent } from '../shared/slot-utils';
 let Tabs = class Tabs extends QuanticElement {
     constructor() {
         super(...arguments);
@@ -20,6 +19,19 @@ let Tabs = class Tabs extends QuanticElement {
         this.orientation = TabsOrientation.Horizontal;
         this.selectedIndex = 0;
         this.id = '';
+        this.collapseBelow = '';
+        this.resizeObserver = null;
+        this._assignSlots = () => {
+            Array.from(this.children)
+                .filter((child) => child instanceof HTMLElement)
+                .forEach((child) => {
+                const tag = child.tagName.toLowerCase();
+                if (tag === buttonTag)
+                    child.slot = buttonsSlot;
+                if (tag === panelTag)
+                    child.slot = panelsSlot;
+            });
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -28,26 +40,53 @@ let Tabs = class Tabs extends QuanticElement {
             this.id = `tabs-${Math.random().toString(36).substring(2, 9)}`;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+    }
     firstUpdated() {
         this._assignSlots();
-        const buttons = this.shadowRoot.querySelector('slot[name="buttons"]');
-        const panels = this.shadowRoot.querySelector('slot[name="panels"]');
-        buttons?.addEventListener('slotchange', this._assignSlots);
-        panels?.addEventListener('slotchange', () => {
-            this._assignSlots();
-            this.requestUpdate();
-        });
+        this.shadowRoot
+            ?.querySelectorAll(`slot[name="${buttonsSlot}"], slot[name="${panelsSlot}"]`)
+            .forEach((slot) => slot.addEventListener('slotchange', this._assignSlots));
+        this.setupResizeObserver();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('collapseBelow') || changed.has('orientation')) {
+            this.checkStacked();
+        }
     }
-    _assignSlots() {
-        Array.from(this.children)
-            .filter((child) => child instanceof HTMLElement)
-            .forEach((child) => {
-            const tag = child.tagName.toLowerCase();
-            if (tag === buttonTag)
-                child.slot = 'buttons';
-            if (tag === panelTag)
-                child.slot = 'panels';
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            this.checkStackedForSize(entry.contentRect.width);
         });
+        this.resizeObserver.observe(this);
+    }
+    checkStacked() {
+        this.checkStackedForSize(this.clientWidth);
+    }
+    checkStackedForSize(width) {
+        if (width <= 0)
+            return;
+        if (this.orientation !== TabsOrientation.Vertical) {
+            this.toggleAttribute('stacked', false);
+            return;
+        }
+        const raw = (this.collapseBelow ?? '').trim();
+        if (!raw.endsWith('px')) {
+            this.toggleAttribute('stacked', false);
+            return;
+        }
+        const threshold = parseFloat(raw);
+        if (!Number.isFinite(threshold)) {
+            this.toggleAttribute('stacked', false);
+            return;
+        }
+        this.toggleAttribute('stacked', width <= threshold);
     }
     _onTabSelect(e) {
         if (e.target.closest(tabsTag) !== this)
@@ -60,14 +99,12 @@ let Tabs = class Tabs extends QuanticElement {
             main: true,
             [`orientation--${this.orientation}`]: true,
         });
-        const panelsClasses = classMap({
-            panels: true,
-            'panels--hidden': this._panelElements.length === 0,
-        });
         return html `
       <div class=${classes}>
-        <div class="buttons" role="tablist"><slot name="buttons"></slot></div>
-        <div class=${panelsClasses}><slot name="panels"></slot></div>
+        <div class="buttons" part="nav" role="tablist">
+          <slot name=${buttonsSlot}></slot>
+        </div>
+        <div class="panels" part="panels"><slot name=${panelsSlot}></slot></div>
       </div>
     `;
     }
@@ -75,7 +112,7 @@ let Tabs = class Tabs extends QuanticElement {
 Tabs.meta = {
     tag: 'quantic-tabs',
     description: 'Tab container managing quantic-tab-button triggers and quantic-tab-panel content areas. ' +
-        'Place quantic-tab-button and quantic-tab-panel as direct children; the component auto-assigns slots. ' +
+        'Place quantic-tab-button and quantic-tab-panel as direct children. ' +
         'Emits tab-selected when the active tab changes.',
     category: 'navigation',
     slots: {
@@ -85,73 +122,93 @@ Tabs.meta = {
     },
     subComponents: ['quantic-tab-button', 'quantic-tab-panel'],
 };
-Tabs.styles = css `
-    :host {
-      display: block;
-      --quantic-component-tabs-gap: var(--quantic-spacing-8);
-    }
+Tabs.styles = [
+    css `
+      :host {
+        display: block;
+        --quantic-component-tabs-gap: var(--quantic-spacing-8);
+      }
 
-    :host([size='xs']) {
-      --quantic-component-tabs-gap: var(--quantic-spacing-2);
-    }
+      :host([size='xs']) {
+        --quantic-component-tabs-gap: var(--quantic-spacing-2);
+      }
 
-    :host([size='sm']) {
-      --quantic-component-tabs-gap: var(--quantic-spacing-4);
-    }
+      :host([size='sm']) {
+        --quantic-component-tabs-gap: var(--quantic-spacing-4);
+      }
 
-    :host([size='lg']) {
-      --quantic-component-tabs-gap: var(--quantic-spacing-12);
-    }
+      :host([size='lg']) {
+        --quantic-component-tabs-gap: var(--quantic-spacing-12);
+      }
 
-    .panels {
-      flex-grow: 1;
-    }
+      .panels {
+        flex: 1 1 auto;
+        min-width: 0;
+        min-height: 0;
+        display: none;
+      }
 
-    .panels--hidden {
-      display: none;
-    }
+      .orientation--horizontal {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        gap: var(--quantic-component-tabs-gap);
+      }
 
-    .orientation--horizontal {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: var(--quantic-component-tabs-gap);
-    }
+      .orientation--horizontal .buttons {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        align-items: flex-end;
+        border-bottom: 1px solid var(--quantic-border-secondary);
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior-x: contain;
+        scrollbar-width: none;
+        scrollbar-color: transparent transparent;
+      }
 
-    .orientation--horizontal .buttons {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      align-items: flex-end;
-      border-bottom: 1px solid var(--quantic-border-secondary);
-      flex-wrap: nowrap;
-      overflow-x: auto;
-      overflow-y: hidden;
-      overscroll-behavior-x: contain;
-      scrollbar-width: none;
-      scrollbar-color: transparent transparent;
-    }
+      .buttons::-webkit-scrollbar-track,
+      .buttons::-webkit-scrollbar-thumb {
+        background: transparent;
+      }
 
-    .buttons::-webkit-scrollbar-track,
-    .buttons::-webkit-scrollbar-thumb {
-      background: transparent;
-    }
+      .orientation--vertical {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        gap: var(--quantic-component-tabs-gap);
+      }
 
-    .orientation--vertical {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      gap: var(--quantic-component-tabs-gap);
-    }
+      .orientation--vertical .buttons {
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 auto;
+        width: var(--quantic-spacing-56);
+        border-right: 1px solid var(--quantic-border-tertiary);
+      }
 
-    .orientation--vertical .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      border-right: 1px solid var(--quantic-border-tertiary);
-      width: var(--quantic-spacing-56);
-    }
-  `;
+      :host([stacked]) .orientation--vertical {
+        flex-direction: column;
+      }
+
+      :host([stacked]) .orientation--vertical .buttons {
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--quantic-border-tertiary);
+      }
+    `,
+    whenSlotPresent(panelsSlot, css `
+        .panels {
+          display: block;
+        }
+      `),
+];
 __decorate([
     provide({ context: sizeContext }),
     prop({
@@ -187,8 +244,13 @@ __decorate([
     })
 ], Tabs.prototype, "id", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'panels' })
-], Tabs.prototype, "_panelElements", void 0);
+    prop({
+        attribute: 'collapse-below',
+        type: 'string',
+        description: 'Pixel breakpoint below which vertical tabs stack (list above panels), matching splitter. ' +
+            'Unset by default so vertical tabs stay side-by-side at every width. Example: "640px".',
+    })
+], Tabs.prototype, "collapseBelow", void 0);
 Tabs = __decorate([
     event('tab-selected', {
         description: 'Fired when a tab is selected, providing the index of the selected tab.',

package/dist/toast/toast.js

@@ -25,6 +25,7 @@ LucideIconTriangleAlert.ensureDefined();
 LucideIconX.ensureDefined();
 let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, [
     'title',
+    '',
     'action',
 ]) {
     constructor() {
@@ -169,7 +170,7 @@ Toast.styles = css `
 
     .container {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       gap: var(--quantic-component-toast-gap);
       min-width: var(--quantic-component-toast-min-width);
       max-width: var(--quantic-component-toast-max-width);
@@ -217,7 +218,6 @@ Toast.styles = css `
     .close-button {
       flex-shrink: 0;
       margin-inline-start: auto;
-      margin-block-start: calc(var(--quantic-spacing-2) * -1);
       margin-inline-end: calc(var(--quantic-spacing-2) * -1);
     }
 

package/dist/toggle/index.js

@@ -226,7 +226,7 @@ Toggle.styles = css `
       opacity: 0;
     }
 
-    input:focus + .track::before {
+    input:focus-visible + .track::before {
       inset: -4px;
       opacity: 1;
       border: 2px solid var(--quantic-focus-ring);

package/dist/tooltip/index.stories.d.ts

@@ -19,7 +19,7 @@ declare const _default: {
             control: {
                 type: string;
             };
-            options: ("top" | "right" | "bottom" | "left" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start")[];
+            options: ("bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start")[];
             description: string;
         };
         size: {

package/dist/truncate/index.stories.d.ts

@@ -13,7 +13,7 @@ declare const _default: {
             control: {
                 type: string;
             };
-            options: ("top" | "right" | "bottom" | "left" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start")[];
+            options: ("bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start")[];
         };
     };
 };

package/dist/types/card/card-title.component.d.ts

@@ -1,8 +1,10 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
+import { CardTitleVariant } from './index.constants';
 declare const CardTitle_base: typeof QuanticElement;
 export declare class CardTitle extends CardTitle_base {
     static meta: ComponentMeta;
+    variant: CardTitleVariant;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }

package/dist/types/card/index.constants.d.ts

@@ -9,6 +9,10 @@ export declare enum CardSize {
     Medium = "md",
     Large = "lg"
 }
+export declare enum CardTitleVariant {
+    Primary = "primary",
+    Secondary = "secondary"
+}
 /**
  * @deprecated Use GridDensity instead.
  */

package/dist/types/card/index.stories.d.ts

@@ -45,5 +45,6 @@ export declare const SizeSmall: import("../shared/story").StoryObject<object>;
 export declare const SizeMedium: import("../shared/story").StoryObject<object>;
 export declare const SizeLarge: import("../shared/story").StoryObject<object>;
 export declare const AllSizes: import("../shared/story").StoryObject<object>;
+export declare const CustomPadding: import("../shared/story").StoryObject<object>;
 export declare const WithFooter: import("../shared/story").StoryObject<object>;
 export declare const CompleteExample: import("../shared/story").StoryObject<object>;

package/dist/types/checkbox/checkbox-group.component.d.ts

@@ -0,0 +1,35 @@
+import { CheckboxGroupGap } from './index.constants';
+import { type CheckboxGroupVariant } from './index.context';
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+declare const CheckboxGroup_base: {
+    new (...args: any[]): {
+        ariaLabel: string | null;
+        ariaDescription: string | null;
+        ariaInvalid: string | null;
+        getA11yAttributes(options?: {
+            label?: string | null;
+            description?: string | null;
+            invalid?: boolean;
+        } | undefined): import("../shared/a11y-attributes.mixin").A11yAttributeValues;
+    };
+} & typeof QuanticElement;
+export declare class CheckboxGroup extends CheckboxGroup_base {
+    static meta: ComponentMeta;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    variant: CheckboxGroupVariant;
+    gap: CheckboxGroupGap;
+    static styles: import("lit").CSSResult;
+    updated(changedProperties: Map<string, unknown>): void;
+    private syncCheckboxProperties;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-checkbox-group': CheckboxGroup;
+    }
+}
+export {};

package/dist/types/checkbox/checkbox-group.stories.d.ts

@@ -0,0 +1,39 @@
+import { CheckboxSize, CheckboxGroupGap } from './index.constants';
+interface Args {
+    size?: CheckboxSize;
+    gap?: CheckboxGroupGap;
+    required?: boolean;
+    disabled?: boolean;
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        gap: {
+            control: {
+                type: string;
+            };
+            options: ("sm" | "md" | "lg")[];
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const Inline: import("../shared/story").StoryObject<Args>;
+export declare const Disabled: import("../shared/story").StoryObject<Args>;
+export declare const Required: import("../shared/story").StoryObject<Args>;

package/dist/types/checkbox/index.constants.d.ts

@@ -4,3 +4,9 @@ export declare const CheckboxSize: {
     Large: string;
 };
 export type CheckboxSize = (typeof CheckboxSize)[keyof typeof CheckboxSize];
+export declare const CheckboxGroupGap: {
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export type CheckboxGroupGap = (typeof CheckboxGroupGap)[keyof typeof CheckboxGroupGap];

package/dist/types/checkbox/index.context.d.ts

@@ -0,0 +1,5 @@
+export declare const CheckboxGroupVariant: {
+    readonly Default: "default";
+    readonly Inline: "inline";
+};
+export type CheckboxGroupVariant = (typeof CheckboxGroupVariant)[keyof typeof CheckboxGroupVariant];

package/dist/types/checkbox/index.d.ts

@@ -2,7 +2,9 @@ import { PropertyValueMap } from 'lit';
 import { CheckboxSize } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-export { CheckboxSize } from './index.constants';
+export { CheckboxSize, CheckboxGroupGap } from './index.constants';
+export { CheckboxGroup } from './checkbox-group.component';
+export { CheckboxGroupVariant } from './index.context';
 declare const Checkbox_base: {
     new (...args: any[]): {
         ariaLabel: string | null;

package/dist/types/cluster/cluster.component.d.ts

@@ -0,0 +1,17 @@
+import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class Cluster extends QuanticElement {
+    static meta: ComponentMeta;
+    axis: ClusterAxis;
+    gap: ClusterGap;
+    align: ClusterAlign;
+    wrap: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-cluster': Cluster;
+    }
+}

package/dist/types/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/types/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/types/cluster/index.d.ts

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

package/dist/types/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/types/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/types/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/types/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/types/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;
+    }
+}