@ctrliq/quantic-components 1.68.0 → 1.69.0

package/dist/types/icon/__generated__/lucide/x.d.ts

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

package/dist/types/icon/__generated__/lucide/youtube.d.ts

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

package/dist/types/icon/__generated__/lucide/zap-off.d.ts

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

package/dist/types/icon/__generated__/lucide/zap.d.ts

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

package/dist/types/icon/__generated__/lucide/zoom-in.d.ts

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

package/dist/types/icon/__generated__/lucide/zoom-out.d.ts

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

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './button-group';
 export * from './card';
 export * from './code-input';
 export * from './checkbox';
+export * from './cluster';
 export * from './confirm-dialog';
 export * from './dialog';
 export * from './dropdown-menu';

package/dist/types/layout/layout-logo.component.d.ts

@@ -2,7 +2,12 @@ import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
 export declare class LayoutLogo extends QuanticElement {
     static meta: ComponentMeta;
-    expanded?: boolean;
+    expanded: boolean;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-layout-logo': LayoutLogo;
+    }
+}

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

@@ -8,6 +8,9 @@ export declare class Layout extends Layout_base {
     variant: LayoutVariant;
     private isSmallViewport;
     private previousIsSmallViewport?;
+    private _initializedInBrowser;
+    private _asideStateInitialized;
+    private ssrHasSidebar;
     private hasSidebarSlot;
     private hasTitlebarSlot;
     private asideElement?;
@@ -27,9 +30,12 @@ export declare class Layout extends Layout_base {
     protected updated(props: PropertyValues): void;
     static styles: import("lit").CSSResult;
     static finalizeStyles(styles?: CSSResultGroup): import("lit").CSSResultOrNative[];
-    private get isAsideCollapsible();
     private get hasSidebar();
-    private get hasTitlebar();
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-layout': Layout;
+    }
+}
 export {};

package/dist/types/layout/navbar-menu-item.component.d.ts

@@ -8,3 +8,8 @@ export declare class NavbarMenuItem extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-navbar-menu-item': NavbarMenuItem;
+    }
+}

package/dist/types/layout/navbar.component.d.ts

@@ -6,3 +6,8 @@ export declare class Navbar extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-navbar': Navbar;
+    }
+}

package/dist/types/layout/page.component.d.ts

@@ -8,3 +8,8 @@ export declare class Page extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-page': Page;
+    }
+}

package/dist/types/layout/sidebar-menu-item-group.component.d.ts

@@ -7,3 +7,8 @@ export declare class SidebarMenuItemGroup extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-sidebar-menu-item-group': SidebarMenuItemGroup;
+    }
+}

package/dist/types/layout/sidebar-menu-item.component.d.ts

@@ -13,3 +13,8 @@ export declare class SidebarMenuItem extends QuanticElement {
     private hasIcon;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-sidebar-menu-item': SidebarMenuItem;
+    }
+}

package/dist/types/layout/sidebar.component.d.ts

@@ -8,7 +8,13 @@ export declare class Sidebar extends Sidebar_base {
     collapsible: boolean;
     private isDesktopViewport;
     static styles: import("lit").CSSResult;
+    connectedCallback(): void;
     private handleToggle;
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-sidebar': Sidebar;
+    }
+}
 export {};

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

@@ -3,8 +3,20 @@ export declare enum PanelVariant {
     Outline = "outline",
     Ghost = "ghost"
 }
+export declare enum PanelGroupGap {
+    None = "none",
+    ExtraSmall = "xs",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg",
+    ExtraLarge = "xl"
+}
 export declare enum PanelHeaderSize {
     Small = "sm",
     Medium = "md",
     Large = "lg"
 }
+export declare enum PanelHeaderVariant {
+    Primary = "primary",
+    Secondary = "secondary"
+}

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

@@ -1,7 +1,9 @@
+import { PanelGroupGap } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
 export declare class PanelGroup extends QuanticElement {
     static meta: ComponentMeta;
+    gap: PanelGroupGap;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }

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

@@ -1,7 +1,19 @@
+import { PanelGroupGap } from './index.constants';
 declare const _default: {
     title: string;
     component: string;
     tags: string[];
+    argTypes: {
+        gap: {
+            control: string;
+            options: PanelGroupGap[];
+            table: {
+                defaultValue: {
+                    summary: PanelGroupGap;
+                };
+            };
+        };
+    };
     parameters: {
         docs: {
             description: {
@@ -11,7 +23,13 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Basic: import("../shared/story").StoryObject<object>;
+interface Args {
+    gap: PanelGroupGap;
+}
+export declare const Basic: 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 SettingsForm: import("../shared/story").StoryObject<object>;
 export declare const MixedVariants: import("../shared/story").StoryObject<object>;
 export declare const ConfigurationExample: import("../shared/story").StoryObject<object>;

package/dist/types/panel/panel-header.component.d.ts

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

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

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

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

@@ -1,4 +1,4 @@
 export { Radio } from './radio.component';
-export { RadioSize } from './index.constants';
+export { RadioSize, RadioGroupGap } from './index.constants';
 export { RadioGroup } from './radio-group.component';
 export { RadioGroupVariant } from './index.context';

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

@@ -1,4 +1,5 @@
 import { QuanticElement } from '../shared/quantic-element';
+import { RadioGroupGap } from './index.constants';
 import { type RadioGroupVariant } from './index.context';
 import type { ComponentMeta } from '../shared/meta.types';
 declare const RadioGroup_base: {
@@ -23,6 +24,7 @@ export declare class RadioGroup extends RadioGroup_base {
     required: boolean;
     invalid: boolean;
     variant: RadioGroupVariant;
+    gap: RadioGroupGap;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;

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

@@ -1,6 +1,7 @@
-import { RadioSize } from './index.constants';
+import { RadioSize, RadioGroupGap } from './index.constants';
 interface Args {
     size?: RadioSize;
+    gap?: RadioGroupGap;
     required?: boolean;
     disabled?: boolean;
 }
@@ -15,6 +16,12 @@ declare const _default: {
             };
             options: string[];
         };
+        gap: {
+            control: {
+                type: string;
+            };
+            options: ("sm" | "md" | "lg")[];
+        };
         required: {
             control: string;
             description: string;

package/dist/types/register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/shared/auto-hide-empty-slots.mixin.d.ts

@@ -1,15 +1,21 @@
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
 /**
- * Mixin that automatically hides empty named slots.
+ * Mixin that automatically hides empty slots.
  *
- * Each named slot is hidden by default and revealed when the host has a light
- * DOM child with a matching `slot` attribute. Two CSS rules cover all browsers:
+ * Each listed slot is hidden by default and revealed when the host has matching
+ * light DOM content. Pass `''` for the default (unnamed) slot.
+ *
+ * Two CSS rules cover all browsers for named slots:
  *
  * - `:host(:has([slot="name"]))` — Safari and Firefox
  * - `@scope { :scope:has([slot="name"]) }` — Chrome (@scope changes the
  *   evaluation context so :has() can see light DOM children)
  *
+ * The default slot uses `:has(> :not([slot]))` (element children without a
+ * `slot` attribute). Text-only default content is covered by the slotchange
+ * JS path below.
+ *
  * The reveal value is `display: revert-layer` rather than `display: block` so
  * that the component's own display value is restored instead of overridden.
  * Component styles are placed in `@layer quantic-component` and the
@@ -27,5 +33,6 @@ import { QuanticElement } from './quantic-element';
  *
  * @example
  * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}
+ * class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', '', 'action']) {}
  */
-export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T, namedSlots?: string[]) => T;
+export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T, slots?: string[]) => T;

package/dist/types/shared/component-meta.decorators.d.ts

@@ -12,6 +12,13 @@ export interface PropDecoratorOptions extends Omit<PropertyDeclaration, 'type'>
  * Combined property + LLM-documentation decorator.
  * Replaces @property — no need to stack both decorators.
  *
+ * Primitive-typed props (string, number, boolean, enums) are reflected to
+ * HTML attributes by default. This is required for Astro SSR + Lit DSD
+ * hydration: @astrojs/lit only re-passes props to the island root element,
+ * so nested components lose their property values during hydration unless
+ * they are persisted as HTML attributes. Override with `reflect: false` for
+ * props that don't need to survive hydration (e.g. internal, transient).
+ *
  * @example
  * @prop({ type: 'ButtonVariant', options: Object.values(ButtonVariant), default: 'primary', description: 'Visual style.' })
  * variant: ButtonVariant = ButtonVariant.Primary;

package/dist/types/shared/respond.decorator.d.ts

@@ -4,4 +4,4 @@ export declare class Breakpoint {
     static above(width: number): string;
     static between(min: number, max: number): string;
 }
-export declare function respond(query: string): (target: ReactiveControllerHost, propertyKey: string) => void;
+export declare function respond(query: string, ssrDefault?: boolean): (target: ReactiveControllerHost, propertyKey: string) => void;

package/dist/types/shared/shared.utils.d.ts

@@ -40,3 +40,18 @@ export declare function emitValueChanged(host: EventTarget, changed: {
  * @returns
  */
 export declare function ensureDefined(tag: string, ctor: CustomElementConstructor): CustomElementConstructor;
+export type HostVarTarget = {
+    style?: {
+        setProperty?(name: string, value: string): void;
+    } | null;
+    getAttribute(qualifiedName: string): string | null;
+    setAttribute(qualifiedName: string, value: string): void;
+};
+/**
+ * Sets a CSS custom property on a host element.
+ *
+ * Uses `style.setProperty` in the browser. Lit SSR's DOM shim has no
+ * `CSSStyleDeclaration`, so it falls back to merging the `style` attribute,
+ * which is serialized onto the host and avoids a hydration size jump.
+ */
+export declare function setHostVar(host: HostVarTarget, name: string, value: string): void;

package/dist/types/shared/slot-utils.d.ts

@@ -31,6 +31,10 @@ import { type CSSResult } from 'lit';
  * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
  * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
  *
+ * Pass `''` for the default (unnamed) slot — matches light DOM children without
+ * a `slot` attribute. Text-only default content still relies on the mixin's
+ * slotchange JS path.
+ *
  * @example
  * whenSlotPresent('action-icon', css`
  *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }

package/dist/types/tabs/button.component.d.ts

@@ -12,6 +12,7 @@ export declare class TabButton extends QuanticElement {
     tabsId: string;
     disabled: boolean;
     index: number;
+    protected willUpdate(): void;
     private buttonRef;
     private _onClick;
     static styles: import("lit").CSSResult;

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

@@ -18,3 +18,5 @@ export type TabsSize = (typeof TabsSize)[keyof typeof TabsSize];
 export declare const tabsTag = "quantic-tabs";
 export declare const buttonTag = "quantic-tab-button";
 export declare const panelTag = "quantic-tab-panel";
+export declare const buttonsSlot = "buttons";
+export declare const panelsSlot = "panels";

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

@@ -40,7 +40,10 @@ export declare const Small: import("../shared/story").StoryObject<Args>;
 export declare const Medium: import("../shared/story").StoryObject<Args>;
 export declare const Large: import("../shared/story").StoryObject<Args>;
 export declare const CustomGap: import("../shared/story").StoryObject<Args>;
+export declare const CustomIndicator: import("../shared/story").StoryObject<Args>;
 export declare const WithDisabled: import("../shared/story").StoryObject<Args>;
 export declare const NavigationOnly: import("../shared/story").StoryObject<Args>;
 export declare const WithIcons: import("../shared/story").StoryObject<Args>;
 export declare const NestedTabs: import("../shared/story").StoryObject<Args>;
+export declare const IndependentlyScrollable: import("../shared/story").StoryObject<Args>;
+export declare const CollapseBelow: import("../shared/story").StoryObject<Args>;

package/dist/types/tabs/index.utils.d.ts

@@ -1,2 +1,4 @@
 export declare const getButtonId: (id: string, index: number) => string;
 export declare const getPanelId: (id: string, index: number) => string;
+/** Named-slot projection in DSD requires `slot` on the child tag at SSR time. */
+export declare function ensureHostSlot(el: HTMLElement, slotName: string): void;

package/dist/types/tabs/panel.component.d.ts

@@ -6,6 +6,7 @@ export declare class TabPanel extends QuanticElement {
     selectedIndex: number;
     tabsId: string;
     index: number;
+    protected willUpdate(): void;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,3 +1,4 @@
+import { type PropertyValues } from 'lit';
 import { QuanticElement } from '../shared/quantic-element';
 import { TabsSize, TabsOrientation } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
@@ -7,11 +8,17 @@ export declare class Tabs extends QuanticElement {
     orientation: TabsOrientation;
     selectedIndex: number;
     id: string;
-    private _panelElements;
+    collapseBelow: string;
+    private resizeObserver;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    private setupResizeObserver;
+    private checkStacked;
+    private checkStackedForSize;
     private _assignSlots;
     private _onTabSelect;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }

package/dist/types/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/types/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/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.68.0",
+  "version": "1.69.0",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/types/register.d.ts",
+      "import": "./dist/register.js"
     },
     "./meta": {
-      "import": "./dist/meta/index.js",
-      "types": "./dist/types/meta/index.d.ts"
+      "types": "./dist/types/meta/index.d.ts",
+      "import": "./dist/meta/index.js"
+    },
+    "./astro": {
+      "types": "./dist/types/astro.d.ts",
+      "import": "./dist/astro.js"
     },
     "./dist/*": "./dist/*"
   },
@@ -33,9 +41,18 @@
     "lit": "^3.3.0",
     "lucide-static": "^0.511.0"
   },
-  "sideEffects": false,
+  "peerDependencies": {
+    "astro": "^7.1.6"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "./dist/register.js"
+  ],
   "devDependencies": {
-    "change-case": "5.4.4",
     "@rollup/plugin-commonjs": "28.0.9",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
@@ -47,6 +64,8 @@
     "@types/node": "22.20.1",
     "@typescript-eslint/eslint-plugin": "8.64.0",
     "@typescript-eslint/parser": "8.64.0",
+    "astro": "^7.1.6",
+    "change-case": "5.4.4",
     "eslint": "9.39.5",
     "eslint-config-prettier": "10.1.8",
     "prettier": "^3.5.3",
@@ -59,10 +78,12 @@
     "prebuild:fonts": "pnpm --filter @ctrliq/quantic-fonts build",
     "prebuild:tokens": "pnpm --filter @ctrliq/quantic-tokens build",
     "prebuild:icons": "node scripts/gen-icons.mjs",
-    "prebuild": "pnpm run prebuild:fonts && pnpm run prebuild:tokens && pnpm run prebuild:icons",
-    "build": "pnpm run prebuild:icons && rollup -c && tsc -p tsconfig.json",
-    "dev": "pnpm run prebuild:icons && rollup -c -w",
-    "typecheck": "pnpm run prebuild:icons && tsc",
+    "prebuild:astro": "node scripts/gen-astro.mjs",
+    "prebuild": "pnpm run prebuild:fonts && pnpm run prebuild:tokens && pnpm run prebuild:icons && pnpm run prebuild:astro",
+    "postbuild:astro": "node scripts/fix-astro-dts.mjs",
+    "build": "pnpm run prebuild:icons && pnpm run prebuild:astro && rollup -c && tsc -p tsconfig.json && pnpm run postbuild:astro",
+    "dev": "pnpm run prebuild:icons && pnpm run prebuild:astro && rollup -c -w",
+    "typecheck": "pnpm run prebuild:icons && pnpm run prebuild:astro && tsc",
     "test": "vitest run",
     "release": "semantic-release"
   }