@ctrliq/quantic-components 1.68.0 → 1.68.1

package/dist/quantic-components.js

@@ -34,6 +34,13 @@
         return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
 
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m") throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
         var e = new Error(message);
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -116,6 +123,13 @@
      * 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;
@@ -134,8 +148,9 @@
             // Boolean props use a custom converter so that attribute="false" is treated as false,
             // making them usable from plain HTML strings (e.g. show-navigation="false").
             const litType = inferLitType(type);
+            const shouldReflect = litType !== Array && litType !== Object;
             const converterOption = litType === Boolean ? { converter: booleanConverter } : {};
-            n$5({ type: litType, ...converterOption, ...litOptions })(target, key);
+            n$5({ type: litType, reflect: shouldReflect, ...converterOption, ...litOptions })(target, key);
         };
     }
     function getPropMetas(proto) {
@@ -165,6 +180,11 @@
         };
     }
 
+    /** @astrojs/lit SSRs a class from this symbol, not from `static tagName`. */
+    const ASTRO_LIT_TAG = Symbol.for('tagName');
+    const stampAstroLitTag = (ctor, tagName) => {
+        ctor[ASTRO_LIT_TAG] = tagName;
+    };
     /**
      * Base class for Quantic components.
      */
@@ -173,6 +193,7 @@
             if (!this.tagName) {
                 throw new Error(`${this.name} is missing a tagName. Did you forget to use @quanticElement decorator?`);
             }
+            stampAstroLitTag(this, this.tagName);
             const existing = customElements.get(this.tagName);
             if (!existing) {
                 customElements.define(this.tagName, this);
@@ -191,6 +212,7 @@
                 customElements.define(tagName, target);
             }
             target.tagName = tagName;
+            stampAstroLitTag(target, tagName);
             const meta = target.meta;
             const propMetas = getPropMetas(target.prototype);
             if (meta && Object.keys(propMetas).length) {
@@ -246,6 +268,10 @@
      * - `: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); }
@@ -253,6 +279,10 @@
      */
     function whenSlotPresent(slotName, rules) {
         const r = rules.cssText;
+        if (slotName === '') {
+            return r$6(`:host(:has(> :not([slot]))) { ${r} } ` +
+                `@scope { :scope:has(> :not([slot])) { ${r} } }`);
+        }
         const name = escapeCssString(slotName);
         return r$6(`:host(:has([slot="${name}"])) { ${r} } ` +
             `@scope { :scope:has([slot="${name}"]) { ${r} } }`);
@@ -265,15 +295,21 @@
     }
 
     /**
-     * Mixin that automatically hides empty named slots.
+     * Mixin that automatically hides empty slots.
+     *
+     * Each listed slot is hidden by default and revealed when the host has matching
+     * light DOM content. Pass `''` for the default (unnamed) slot.
      *
-     * 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:
+     * 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
@@ -291,35 +327,46 @@
      *
      * @example
      * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}
+     * class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', '', 'action']) {}
      */
-    const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
-        var _AutoHideEmptySlotsClass_onSlotChange;
-        if (namedSlots.length === 0)
+    const AutoHideEmptySlotsMixin = (superClass, slots = []) => {
+        var _AutoHideEmptySlotsClass_instances, _AutoHideEmptySlotsClass_slotListenerAttached, _AutoHideEmptySlotsClass_isMeaningful, _AutoHideEmptySlotsClass_onSlotChange, _AutoHideEmptySlotsClass_attachSlotListener, _AutoHideEmptySlotsClass_detachSlotListener;
+        if (slots.length === 0)
             return superClass;
         // A component may declare a native CSSStyleSheet, which Lit passes through
         // untouched wherever adoptedStyleSheets is supported.
         const toCssText = (style) => 'cssText' in style
             ? style.cssText
             : Array.from(style.cssRules, (rule) => rule.cssText).join('\n');
-        const slotRulesCSS = namedSlots
+        const slotSelector = (name) => name === '' ? 'slot:not([name])' : `slot[name="${escapeCssString(name)}"]`;
+        const slotRulesCSS = slots
             .map((name) => {
-            const escaped = escapeCssString(name);
+            const sel = slotSelector(name);
             return [
-                `slot[name="${escaped}"] { display: none; }`,
-                whenSlotPresent(name, r$6(`slot[name="${escaped}"] { display: revert-layer; }`)).cssText,
+                `${sel} { display: none; }`,
+                whenSlotPresent(name, r$6(`${sel} { display: revert-layer; }`))
+                    .cssText,
             ].join(' ');
         })
             .join(' ');
         class AutoHideEmptySlotsClass extends superClass {
             constructor() {
                 super(...arguments);
+                _AutoHideEmptySlotsClass_instances.add(this);
                 // slotchange doesn't bubble, but capture intercepts it on the way down
-                // to the slot element — one listener covers all named slots.
+                // to the slot element — one listener covers all listed slots.
+                _AutoHideEmptySlotsClass_slotListenerAttached.set(this, false);
+                // Whitespace-only text nodes come from pretty-printed markup and get
+                // assigned to the default slot, so they must not count as content. This
+                // matches the CSS path, which only looks at element children.
+                _AutoHideEmptySlotsClass_isMeaningful.set(this, (node) => node.nodeType !== Node.TEXT_NODE || node.textContent?.trim() !== '');
                 _AutoHideEmptySlotsClass_onSlotChange.set(this, (e) => {
                     const slot = e.target;
-                    if (!namedSlots.includes(slot.name))
+                    if (!slots.includes(slot.name))
                         return;
-                    const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+                    const hasContent = slot
+                        .assignedNodes({ flatten: true })
+                        .some(__classPrivateFieldGet(this, _AutoHideEmptySlotsClass_isMeaningful, "f"));
                     slot.style.display = hasContent ? 'block' : '';
                 });
             }
@@ -334,28 +381,41 @@
             }
             connectedCallback() {
                 super.connectedCallback();
-                this.renderRoot.addEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
-                    capture: true,
-                });
+                // renderRoot is created on first update, so this is a no-op on first connect
+                // but re-attaches after disconnect/reconnect.
+                __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_instances, "m", _AutoHideEmptySlotsClass_attachSlotListener).call(this);
             }
             disconnectedCallback() {
+                __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_instances, "m", _AutoHideEmptySlotsClass_detachSlotListener).call(this);
                 super.disconnectedCallback();
-                this.renderRoot.removeEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
-                    capture: true,
-                });
             }
             // Sync initial state for slots that already have content on first render
             // (e.g. synchronous React CSR or SSR hydration with light DOM present).
             firstUpdated(changed) {
                 super.firstUpdated?.(changed);
-                for (const name of namedSlots) {
-                    const slot = this.renderRoot.querySelector(`slot[name="${CSS.escape(name)}"]`);
+                __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_instances, "m", _AutoHideEmptySlotsClass_attachSlotListener).call(this);
+                for (const name of slots) {
+                    const slot = this.renderRoot.querySelector(name === '' ? 'slot:not([name])' : `slot[name="${CSS.escape(name)}"]`);
                     if (slot)
                         __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f").call(this, { target: slot });
                 }
             }
         }
-        _AutoHideEmptySlotsClass_onSlotChange = new WeakMap();
+        _AutoHideEmptySlotsClass_slotListenerAttached = new WeakMap(), _AutoHideEmptySlotsClass_isMeaningful = new WeakMap(), _AutoHideEmptySlotsClass_onSlotChange = new WeakMap(), _AutoHideEmptySlotsClass_instances = new WeakSet(), _AutoHideEmptySlotsClass_attachSlotListener = function _AutoHideEmptySlotsClass_attachSlotListener() {
+            if (__classPrivateFieldGet(this, _AutoHideEmptySlotsClass_slotListenerAttached, "f") || !this.renderRoot)
+                return;
+            this.renderRoot.addEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
+                capture: true,
+            });
+            __classPrivateFieldSet(this, _AutoHideEmptySlotsClass_slotListenerAttached, true, "f");
+        }, _AutoHideEmptySlotsClass_detachSlotListener = function _AutoHideEmptySlotsClass_detachSlotListener() {
+            if (!__classPrivateFieldGet(this, _AutoHideEmptySlotsClass_slotListenerAttached, "f") || !this.renderRoot)
+                return;
+            this.renderRoot.removeEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
+                capture: true,
+            });
+            __classPrivateFieldSet(this, _AutoHideEmptySlotsClass_slotListenerAttached, false, "f");
+        };
         return AutoHideEmptySlotsClass;
     };
 
@@ -2424,6 +2484,130 @@
         ...LucideIconName,
     };
 
+    const ComponentColor = {
+        Gray: 'gray',
+        Brand: 'brand',
+        Error: 'error',
+        Warning: 'warning',
+        Success: 'success',
+        GrayBlue: 'gray-blue',
+        BlueLight: 'blue-light',
+        Blue: 'blue',
+        Indigo: 'indigo',
+        Purple: 'purple',
+        Pink: 'pink',
+        Orange: 'orange',
+    };
+    const componentColors = [
+        'gray',
+        'brand',
+        'error',
+        'warning',
+        'success',
+        'gray-blue',
+        'blue-light',
+        'blue',
+        'indigo',
+        'purple',
+        'pink',
+        'orange',
+    ];
+    const ContainerSizeBreakpoint = {
+        Xs: '24rem',
+        Sm: '36rem',
+        Md: '48rem',
+        Lg: '64rem',
+        Xl: '75rem',
+        Xxl: '96rem',
+    };
+
+    function clamp$1(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
+    /**
+     * Generates `.color--{color}` CSS rules for all component colors.
+     * Pass a function that returns the CSS declarations for each color token.
+     */
+    function generateColorStyles(declarations) {
+        return componentColors
+            .map((color) => `.color--${color} {\n  ${declarations(color)}\n}`)
+            .join('\n');
+    }
+    /**
+     * Generates a unique ID with an optional prefix.
+     *
+     * @param prefix Optional prefix for the generated ID
+     * @returns A unique ID string
+     */
+    function randomUUID() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        });
+    }
+    function generateId(prefix) {
+        const id = randomUUID();
+        return prefix ? `${prefix}-${id}` : id;
+    }
+    /**
+     * Removes null, undefined and empty string values from an array.
+     */
+    function compact(items) {
+        return items.filter((item) => item != null && item !== '');
+    }
+    /**
+     * Dispatches the standard `value-changed` event for a form control from its
+     * `updated()` lifecycle, so it fires on real changes — user input *and*
+     * programmatic `el.value = ...` updates — but not on the initial render.
+     *
+     * Lit records the old value as `undefined` for any change made before the first
+     * update, so `changed.get(key) !== undefined` reliably skips initial hydration
+     * even when the value was set imperatively beforehand.
+     *
+     * @example
+     * updated(changed: Map<string, unknown>) {
+     *   if (changed.has('value')) {
+     *     this.internals.setFormValue(this.value);
+     *     this.updateValidity();
+     *   }
+     *   emitValueChanged(this, changed, this.value);
+     * }
+     */
+    function emitValueChanged(host, changed, value, key = 'value') {
+        if (changed.has(key) && changed.get(key) !== undefined) {
+            host.dispatchEvent(new CustomEvent('value-changed', {
+                detail: { value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    function escapeRegExp(value) {
+        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    /**
+     * 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.
+     */
+    function setHostVar(host, name, value) {
+        if (host.style?.setProperty) {
+            host.style.setProperty(name, value);
+            return;
+        }
+        const current = (host.getAttribute('style') ?? '').trim();
+        const assignment = `${name}: ${value}`;
+        const pattern = new RegExp(`${escapeRegExp(name)}\\s*:\\s*[^;]*`);
+        if (pattern.test(current)) {
+            host.setAttribute('style', current.replace(pattern, assignment));
+            return;
+        }
+        const base = current.replace(/;$/, '').trim();
+        host.setAttribute('style', base ? `${base}; ${assignment}` : assignment);
+    }
+
     class IconBase extends QuanticElement {
         constructor() {
             super(...arguments);
@@ -2432,10 +2616,10 @@
         }
         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}`);
             }
         }
     }
@@ -2643,6 +2827,7 @@
     exports.LucideIconX.ensureDefined();
     exports.Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement, [
         'title',
+        '',
         'action',
     ]) {
         constructor() {
@@ -2893,7 +3078,7 @@
       bottom: 'top',
       top: 'bottom'
     };
-    function clamp$1(start, value, end) {
+    function clamp(start, value, end) {
       return max(start, min(value, end));
     }
     function evaluate(value, param) {
@@ -3277,7 +3462,7 @@
         // point is outside the floating element's bounds.
         const max = clientSize - arrowDimensions[length] - maxPadding;
         const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-        const offset = clamp$1(minPadding, center, max);
+        const offset = clamp(minPadding, center, max);
 
         // If the reference is small enough that the arrow's padding causes it to
         // to point to nothing for an aligned placement, adjust the offset of the
@@ -3562,7 +3747,7 @@
           const mainAxis = getOppositeAxis(crossAxis);
           let mainAxisCoord = coords[mainAxis];
           let crossAxisCoord = coords[crossAxis];
-          const clampCoord = (axis, coord) => clamp$1(coord + overflow[axis === 'y' ? 'top' : 'left'], coord, coord - overflow[axis === 'y' ? 'bottom' : 'right']);
+          const clampCoord = (axis, coord) => clamp(coord + overflow[axis === 'y' ? 'top' : 'left'], coord, coord - overflow[axis === 'y' ? 'bottom' : 'right']);
           if (checkMainAxis) {
             mainAxisCoord = clampCoord(mainAxis, mainAxisCoord);
           }
@@ -4555,105 +4740,6 @@
         return A11yAttributesMixinClass;
     }
 
-    const ComponentColor = {
-        Gray: 'gray',
-        Brand: 'brand',
-        Error: 'error',
-        Warning: 'warning',
-        Success: 'success',
-        GrayBlue: 'gray-blue',
-        BlueLight: 'blue-light',
-        Blue: 'blue',
-        Indigo: 'indigo',
-        Purple: 'purple',
-        Pink: 'pink',
-        Orange: 'orange',
-    };
-    const componentColors = [
-        'gray',
-        'brand',
-        'error',
-        'warning',
-        'success',
-        'gray-blue',
-        'blue-light',
-        'blue',
-        'indigo',
-        'purple',
-        'pink',
-        'orange',
-    ];
-    const ContainerSizeBreakpoint = {
-        Xs: '24rem',
-        Sm: '36rem',
-        Md: '48rem',
-        Lg: '64rem',
-        Xl: '75rem',
-        Xxl: '96rem',
-    };
-
-    function clamp(value, min, max) {
-        return Math.min(Math.max(value, min), max);
-    }
-    /**
-     * Generates `.color--{color}` CSS rules for all component colors.
-     * Pass a function that returns the CSS declarations for each color token.
-     */
-    function generateColorStyles(declarations) {
-        return componentColors
-            .map((color) => `.color--${color} {\n  ${declarations(color)}\n}`)
-            .join('\n');
-    }
-    /**
-     * Generates a unique ID with an optional prefix.
-     *
-     * @param prefix Optional prefix for the generated ID
-     * @returns A unique ID string
-     */
-    function randomUUID() {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-            const r = (Math.random() * 16) | 0;
-            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-        });
-    }
-    function generateId(prefix) {
-        const id = randomUUID();
-        return prefix ? `${prefix}-${id}` : id;
-    }
-    /**
-     * Removes null, undefined and empty string values from an array.
-     */
-    function compact(items) {
-        return items.filter((item) => item != null && item !== '');
-    }
-    /**
-     * Dispatches the standard `value-changed` event for a form control from its
-     * `updated()` lifecycle, so it fires on real changes — user input *and*
-     * programmatic `el.value = ...` updates — but not on the initial render.
-     *
-     * Lit records the old value as `undefined` for any change made before the first
-     * update, so `changed.get(key) !== undefined` reliably skips initial hydration
-     * even when the value was set imperatively beforehand.
-     *
-     * @example
-     * updated(changed: Map<string, unknown>) {
-     *   if (changed.has('value')) {
-     *     this.internals.setFormValue(this.value);
-     *     this.updateValidity();
-     *   }
-     *   emitValueChanged(this, changed, this.value);
-     * }
-     */
-    function emitValueChanged(host, changed, value, key = 'value') {
-        if (changed.has(key) && changed.get(key) !== undefined) {
-            host.dispatchEvent(new CustomEvent('value-changed', {
-                detail: { value },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-
     const ComboboxSize = {
         ExtraSmall: 'xs',
         Small: 'sm',
@@ -5688,12 +5774,12 @@
         }
         get safeTotal() {
             return Number.isFinite(this.total)
-                ? clamp(Math.trunc(this.total), 0, MAX_SEGMENTS)
+                ? clamp$1(Math.trunc(this.total), 0, MAX_SEGMENTS)
                 : 0;
         }
         get clamped() {
             return Number.isFinite(this.used)
-                ? clamp(Math.trunc(this.used), 0, this.safeTotal)
+                ? clamp$1(Math.trunc(this.used), 0, this.safeTotal)
                 : 0;
         }
         render() {
@@ -6165,6 +6251,11 @@
         CardSize["Medium"] = "md";
         CardSize["Large"] = "lg";
     })(exports.CardSize || (exports.CardSize = {}));
+    var CardTitleVariant;
+    (function (CardTitleVariant) {
+        CardTitleVariant["Primary"] = "primary";
+        CardTitleVariant["Secondary"] = "secondary";
+    })(CardTitleVariant || (CardTitleVariant = {}));
     /**
      * @deprecated Use GridDensity instead.
      */
@@ -6260,13 +6351,13 @@
         color: var(--quantic-text-secondary);
         position: relative;
 
-        --quantic-component-card-padding: var(--quantic-spacing-6);
         --quantic-component-card-font-size: var(--quantic-font-size-body-md);
         --quantic-component-card-line-height: var(
           --quantic-line-height-body-md
         );
         --quantic-component-card-radius: var(--quantic-radius-md);
         --quantic-component-card-spacing: var(--quantic-spacing-4);
+        --quantic-component-card-size-padding: var(--quantic-spacing-6);
       }
 
       button.main,
@@ -6288,7 +6379,10 @@
         display: flex;
         flex-direction: column;
         gap: var(--quantic-component-card-spacing);
-        padding: var(--quantic-component-card-padding);
+        padding: var(
+          --quantic-component-card-padding,
+          var(--quantic-component-card-size-padding)
+        );
         border-radius: var(--quantic-component-card-radius);
         border: 1px solid var(--quantic-border-primary);
         overflow: hidden;
@@ -6314,7 +6408,7 @@
       }
 
       .size--xs {
-        --quantic-component-card-padding: var(--quantic-spacing-3);
+        --quantic-component-card-size-padding: var(--quantic-spacing-3);
         --quantic-component-card-spacing: var(--quantic-spacing-1);
         --quantic-component-card-radius: var(--quantic-radius-sm);
         --quantic-component-card-font-size: var(--quantic-font-size-body-xs);
@@ -6324,7 +6418,7 @@
       }
 
       .size--sm {
-        --quantic-component-card-padding: var(--quantic-spacing-4);
+        --quantic-component-card-size-padding: var(--quantic-spacing-4);
         --quantic-component-card-spacing: var(--quantic-spacing-1-5);
         --quantic-component-card-radius: var(--quantic-radius-sm);
         --quantic-component-card-font-size: var(--quantic-font-size-body-sm);
@@ -6334,7 +6428,7 @@
       }
 
       .size--md {
-        --quantic-component-card-padding: var(--quantic-spacing-5);
+        --quantic-component-card-size-padding: var(--quantic-spacing-5);
         --quantic-component-card-spacing: var(--quantic-spacing-2);
         --quantic-component-card-radius: var(--quantic-radius-md);
         --quantic-component-card-font-size: var(--quantic-font-size-body-md);
@@ -6344,7 +6438,7 @@
       }
 
       .size--lg {
-        --quantic-component-card-padding: var(--quantic-spacing-6);
+        --quantic-component-card-size-padding: var(--quantic-spacing-6);
         --quantic-component-card-spacing: var(--quantic-spacing-3);
         --quantic-component-card-radius: var(--quantic-radius-lg);
         --quantic-component-card-font-size: var(--quantic-font-size-body-lg);
@@ -6355,19 +6449,19 @@
 
       @container (min-width: 40rem) {
         .size--xs {
-          --quantic-component-card-padding: var(--quantic-spacing-3);
+          --quantic-component-card-size-padding: var(--quantic-spacing-3);
         }
 
         .size--sm {
-          --quantic-component-card-padding: var(--quantic-spacing-4);
+          --quantic-component-card-size-padding: var(--quantic-spacing-4);
         }
 
         .size--md {
-          --quantic-component-card-padding: var(--quantic-spacing-6);
+          --quantic-component-card-size-padding: var(--quantic-spacing-6);
         }
 
         .size--lg {
-          --quantic-component-card-padding: var(--quantic-spacing-8);
+          --quantic-component-card-size-padding: var(--quantic-spacing-8);
         }
       }
 
@@ -6377,6 +6471,10 @@
         display: block;
       }
 
+      .header {
+        padding-bottom: var(--quantic-component-card-spacing);
+      }
+
       .footer {
         padding-top: var(--quantic-component-card-spacing);
         margin-top: auto;
@@ -6384,7 +6482,12 @@
 
       .action-icon {
         position: absolute;
-        inset: calc(var(--quantic-component-card-padding) / 2);
+        inset: calc(
+          var(
+              --quantic-component-card-padding,
+              var(--quantic-component-card-size-padding)
+            ) / 2
+        );
         left: auto;
         display: flex;
         align-items: center;
@@ -6432,7 +6535,12 @@
     `,
         whenSlotPresent('action-icon', i$7 `
         .main {
-          padding-right: calc(var(--quantic-component-card-padding) * 2);
+          padding-right: calc(
+            var(
+                --quantic-component-card-padding,
+                var(--quantic-component-card-size-padding)
+              ) * 2
+          );
         }
       `),
     ];
@@ -6457,7 +6565,7 @@
             type: 'CardSize',
             options: Object.values(exports.CardSize),
             default: exports.CardSize.Medium,
-            description: 'Internal padding scale.',
+            description: 'Internal padding scale. Override with `--quantic-component-card-padding`.',
         })
     ], exports.Card.prototype, "size", void 0);
     __decorate([
@@ -6519,23 +6627,20 @@
       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 {
@@ -7296,6 +7401,10 @@
         'pretitle',
         'subtitle',
     ]) {
+        constructor() {
+            super(...arguments);
+            this.variant = CardTitleVariant.Primary;
+        }
         render() {
             return u$2 `
       <hgroup>
@@ -7327,9 +7436,9 @@
         0.875em,
         var(--quantic-font-size-body-xs)
       );
-      --quantic-component-card-title-font-size: 1.2em;
+      --quantic-component-card-title-font-size: 1.125em;
       --quantic-component-card-title-font-weight: var(
-        --quantic-font-weight-medium
+        --quantic-font-weight-semibold
       );
     }
 
@@ -7353,6 +7462,11 @@
       font-weight: var(--quantic-component-card-title-font-weight);
     }
 
+    :host([variant='secondary']) .title {
+      color: var(--quantic-text-secondary);
+      font-weight: var(--quantic-font-weight-medium);
+    }
+
     .pretitle::slotted(*),
     .title::slotted(*),
     .subtitle::slotted(*) {
@@ -7363,6 +7477,14 @@
       display: none;
     }
   `;
+    __decorate([
+        prop({
+            type: 'CardTitleVariant',
+            options: Object.values(CardTitleVariant),
+            default: CardTitleVariant.Primary,
+            description: 'Visual variant of the title.',
+        })
+    ], exports.CardTitle.prototype, "variant", void 0);
     exports.CardTitle = __decorate([
         quanticElement('quantic-card-title')
     ], exports.CardTitle);
@@ -7777,6 +7899,138 @@
         Medium: 'md',
         Large: 'lg',
     };
+    const CheckboxGroupGap = {
+        Small: 'sm',
+        Medium: 'md',
+        Large: 'lg',
+    };
+
+    const CheckboxGroupVariant = {
+        Default: 'default',
+        Inline: 'inline',
+    };
+
+    exports.CheckboxGroup = class CheckboxGroup extends A11yAttributesMixin(QuanticElement) {
+        constructor() {
+            super(...arguments);
+            this.disabled = false;
+            this.required = false;
+            this.invalid = false;
+            this.variant = CheckboxGroupVariant.Default;
+            this.gap = CheckboxGroupGap.Large;
+        }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('disabled') || changedProperties.has('required')) {
+                this.syncCheckboxProperties();
+            }
+        }
+        syncCheckboxProperties() {
+            this.querySelectorAll('quantic-checkbox').forEach((checkbox) => {
+                checkbox.disabled = this.disabled;
+                checkbox.required = this.required;
+            });
+        }
+        firstUpdated() {
+            this.syncCheckboxProperties();
+        }
+        render() {
+            const a11y = this.getA11yAttributes({ invalid: this.invalid });
+            return b `<div
+      class=${e$3({
+            group: true,
+            'group--inline': this.variant === CheckboxGroupVariant.Inline,
+            [`gap--${this.gap}`]: true,
+        })}
+      role="group"
+      aria-label=${a11y.label}
+      aria-description=${a11y.description}
+      aria-invalid=${a11y.invalid}
+    >
+      <slot></slot>
+    </div>`;
+        }
+    };
+    exports.CheckboxGroup.meta = {
+        tag: 'quantic-checkbox-group',
+        description: 'Layout container for related quantic-checkbox elements. ' +
+            'Optionally propagates disabled/required to children; each checkbox owns its own checked and name state.',
+        category: 'form',
+        slots: { '': { description: 'One or more quantic-checkbox elements.' } },
+        subComponents: ['quantic-checkbox'],
+        relatedTo: ['quantic-checkbox', 'quantic-field'],
+    };
+    exports.CheckboxGroup.styles = i$7 `
+    :host {
+      display: contents;
+    }
+
+    .group {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .group--inline {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .gap--sm {
+      gap: var(--quantic-spacing-2);
+    }
+
+    .gap--md {
+      gap: var(--quantic-spacing-3);
+    }
+
+    .gap--lg {
+      gap: var(--quantic-spacing-4);
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Prevents interaction. Propagated to all child checkboxes.',
+        })
+    ], exports.CheckboxGroup.prototype, "disabled", void 0);
+    __decorate([
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Marks child checkboxes as required. Propagated to all children.',
+        })
+    ], exports.CheckboxGroup.prototype, "required", void 0);
+    __decorate([
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Applies error styling to the group. Set alongside an error message in the parent quantic-field.',
+        })
+    ], exports.CheckboxGroup.prototype, "invalid", void 0);
+    __decorate([
+        prop({
+            type: 'CheckboxGroupVariant',
+            options: Object.values(CheckboxGroupVariant),
+            reflect: true,
+            description: 'Layout variant for the group.',
+        })
+    ], exports.CheckboxGroup.prototype, "variant", void 0);
+    __decorate([
+        prop({
+            type: 'CheckboxGroupGap',
+            options: Object.values(CheckboxGroupGap),
+            default: CheckboxGroupGap.Large,
+            reflect: true,
+            description: 'Spacing between checkboxes.',
+        })
+    ], exports.CheckboxGroup.prototype, "gap", void 0);
+    exports.CheckboxGroup = __decorate([
+        quanticElement('quantic-checkbox-group')
+    ], exports.CheckboxGroup);
 
     exports.Checkbox = class Checkbox extends A11yAttributesMixin(QuanticElement) {
         constructor() {
@@ -8089,6 +8343,155 @@
         quanticElement('quantic-checkbox')
     ], exports.Checkbox);
 
+    exports.ClusterAxis = void 0;
+    (function (ClusterAxis) {
+        ClusterAxis["Horizontal"] = "horizontal";
+        ClusterAxis["Vertical"] = "vertical";
+    })(exports.ClusterAxis || (exports.ClusterAxis = {}));
+    exports.ClusterGap = void 0;
+    (function (ClusterGap) {
+        ClusterGap["None"] = "none";
+        ClusterGap["ExtraSmall"] = "xs";
+        ClusterGap["Small"] = "sm";
+        ClusterGap["Medium"] = "md";
+        ClusterGap["Large"] = "lg";
+        ClusterGap["ExtraLarge"] = "xl";
+    })(exports.ClusterGap || (exports.ClusterGap = {}));
+    exports.ClusterAlign = void 0;
+    (function (ClusterAlign) {
+        ClusterAlign["Start"] = "start";
+        ClusterAlign["Center"] = "center";
+        ClusterAlign["End"] = "end";
+        ClusterAlign["Stretch"] = "stretch";
+    })(exports.ClusterAlign || (exports.ClusterAlign = {}));
+
+    exports.Cluster = class Cluster extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.axis = exports.ClusterAxis.Horizontal;
+            this.gap = exports.ClusterGap.Medium;
+            this.align = exports.ClusterAlign.Start;
+            this.wrap = true;
+        }
+        render() {
+            const classes = e$3({
+                cluster: true,
+                [`axis--${this.axis}`]: true,
+                [`gap--${this.gap}`]: true,
+                [`align--${this.align}`]: true,
+                nowrap: !this.wrap && this.axis === exports.ClusterAxis.Horizontal,
+            });
+            return u$2 `
+      <div class=${classes}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.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'],
+    };
+    exports.Cluster.styles = i$7 `
+    :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(exports.ClusterAxis),
+            default: exports.ClusterAxis.Horizontal,
+            description: 'Layout direction.',
+        })
+    ], exports.Cluster.prototype, "axis", void 0);
+    __decorate([
+        prop({
+            type: 'ClusterGap',
+            options: Object.values(exports.ClusterGap),
+            default: exports.ClusterGap.Medium,
+            description: 'Spacing between items.',
+        })
+    ], exports.Cluster.prototype, "gap", void 0);
+    __decorate([
+        prop({
+            type: 'ClusterAlign',
+            options: Object.values(exports.ClusterAlign),
+            default: exports.ClusterAlign.Start,
+            description: 'Cross-axis alignment.',
+        })
+    ], exports.Cluster.prototype, "align", void 0);
+    __decorate([
+        prop({
+            type: 'boolean',
+            default: 'true',
+            description: 'Whether items wrap to the next line (horizontal axis only).',
+        })
+    ], exports.Cluster.prototype, "wrap", void 0);
+    exports.Cluster = __decorate([
+        quanticElement('quantic-cluster')
+    ], exports.Cluster);
+
     const DialogSize = {
         Small: 'sm',
         Medium: 'md',
@@ -10922,7 +11325,7 @@
         var(--quantic-width-xs)
       );
       max-height: var(--quantic-component-popover-max-height, 400px);
-      width: max-content;
+      width: var(--quantic-component-popover-width, max-content);
       box-shadow: var(
         --quantic-component-popover-shadow,
         0 10px 15px -3px rgb(0 0 0 / 0.1),
@@ -11232,7 +11635,7 @@
             >
               <quantic-icon-lucide-x size="sm"></quantic-icon-lucide-x>
             </quantic-button>`
-            : ''}
+            : A}
         <slot name="header"></slot>
         <slot></slot>
         <slot name="footer"></slot>
@@ -11261,6 +11664,7 @@
       --quantic-component-popover-border-color: var(--quantic-border-secondary);
       --quantic-component-popover-border-radius: var(--quantic-radius-md);
       --quantic-component-popover-padding: var(--quantic-spacing-4);
+      --quantic-component-popover-width: max-content;
       --quantic-component-popover-max-width: var(--quantic-width-xs);
       --quantic-component-popover-max-height: var(--quantic-spacing-96);
       --quantic-component-popover-z-index: 9999;
@@ -11355,7 +11759,7 @@
             const items = this.getMenuItems();
             if (items.length === 0)
                 return;
-            this.focusedIndex = clamp(index, 0, items.length - 1);
+            this.focusedIndex = clamp$1(index, 0, items.length - 1);
             items[this.focusedIndex].focus();
         }
         handleKeyDown(e) {
@@ -12226,14 +12630,24 @@
             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 = e$3({
                 'field-group': true,
                 [`size--${this.size}`]: true,
                 [`layout--${this.layout}`]: true,
+                'fixed-columns': pinnedColumns !== undefined,
             });
             return b `
-      <div class=${classes}>
+      <div
+        class=${classes}
+        style=${pinnedColumns
+            ? `--quantic-component-field-group-columns: ${pinnedColumns}`
+            : A}
+      >
         <slot></slot>
       </div>
     `;
@@ -12243,6 +12657,7 @@
         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: {
@@ -12288,13 +12703,24 @@
     .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({
@@ -12312,6 +12738,13 @@
             description: 'Layout mode. "grid" arranges fields in responsive columns.',
         })
     ], exports.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.',
+        })
+    ], exports.FieldGroup.prototype, "columns", void 0);
     exports.FieldGroup = __decorate([
         quanticElement('quantic-field-group')
     ], exports.FieldGroup);
@@ -13266,6 +13699,11 @@
         Medium: 'md',
         Large: 'lg',
     };
+    const RadioGroupGap = {
+        Small: 'sm',
+        Medium: 'md',
+        Large: 'lg',
+    };
 
     const RadioGroupVariant = {
         Default: 'default',
@@ -13388,6 +13826,12 @@
       cursor: pointer;
       user-select: none;
       --radio-size: var(--quantic-spacing-5);
+      padding: var(--quantic-radio-seg-padding-block, 0)
+        var(--quantic-radio-seg-padding-inline, 0);
+      border-right: var(--quantic-radio-seg-border-right, none);
+      transition:
+        background-color 0.2s ease-in-out,
+        color 0.2s ease-in-out;
     }
 
     :host([disabled]) .main {
@@ -13398,12 +13842,28 @@
       --radio-size: var(--quantic-spacing-3);
       --label-font-size: var(--quantic-font-size-body-xs);
       --dot-size: var(--quantic-spacing-1-5);
+      padding: var(
+          --quantic-radio-seg-padding-block-xs,
+          var(--quantic-radio-seg-padding-block, 0)
+        )
+        var(
+          --quantic-radio-seg-padding-inline-xs,
+          var(--quantic-radio-seg-padding-inline, 0)
+        );
     }
 
     .main.size--sm {
       --radio-size: var(--quantic-spacing-4);
       --label-font-size: var(--quantic-font-size-body-sm);
       --dot-size: var(--quantic-spacing-2);
+      padding: var(
+          --quantic-radio-seg-padding-block-sm,
+          var(--quantic-radio-seg-padding-block, 0)
+        )
+        var(
+          --quantic-radio-seg-padding-inline-sm,
+          var(--quantic-radio-seg-padding-inline, 0)
+        );
     }
 
     .main.size--md {
@@ -13416,6 +13876,14 @@
       --radio-size: var(--quantic-spacing-6);
       --label-font-size: var(--quantic-font-size-body-lg);
       --dot-size: var(--quantic-spacing-3);
+      padding: var(
+          --quantic-radio-seg-padding-block-lg,
+          var(--quantic-radio-seg-padding-block, 0)
+        )
+        var(
+          --quantic-radio-seg-padding-inline-lg,
+          var(--quantic-radio-seg-padding-inline, 0)
+        );
     }
 
     .main.variant--segmented {
@@ -13441,7 +13909,8 @@
       padding: var(--quantic-spacing-3) var(--quantic-spacing-4);
     }
 
-    :host(:last-of-type) .main.variant--segmented {
+    :host(:last-of-type) .main.variant--segmented,
+    :host(:last-of-type) .main {
       border-right: none;
     }
 
@@ -13457,6 +13926,14 @@
       font-weight: var(--quantic-font-weight-semibold);
     }
 
+    .main:hover {
+      background-color: var(--quantic-radio-seg-hover-bg, transparent);
+    }
+
+    .main.checked {
+      background-color: var(--quantic-radio-seg-checked-bg, transparent);
+    }
+
     input {
       position: absolute;
       opacity: 0;
@@ -13504,7 +13981,7 @@
       transition: all 0.2s ease-in-out;
     }
 
-    input:focus + .circle::before {
+    input:focus-visible + .circle::before {
       inset: -4px;
       opacity: 1;
       border-color: var(--quantic-focus-ring);
@@ -13523,6 +14000,7 @@
       margin-inline-start: var(--quantic-spacing-2);
       color: var(--quantic-text-primary);
       font-size: var(--label-font-size);
+      font-weight: var(--quantic-radio-seg-label-weight, inherit);
     }
 
     input:disabled ~ .label {
@@ -13624,6 +14102,7 @@
             this.required = false;
             this.invalid = false;
             this.variant = RadioGroupVariant.Default;
+            this.gap = RadioGroupGap.Large;
             this.internals = this.attachInternals();
             this.handleValueChanged = this.handleValueChanged.bind(this);
         }
@@ -13642,7 +14121,7 @@
             if (!src || src.tagName.toLowerCase() !== 'quantic-radio') {
                 return;
             }
-            e.stopPropagation();
+            e.stopImmediatePropagation();
             if (!customEvent.detail?.checked) {
                 return;
             }
@@ -13707,11 +14186,13 @@
         }
         render() {
             const a11y = this.getA11yAttributes({ invalid: this.invalid });
+            const segmented = this.variant === RadioGroupVariant.Segmented;
             return b `<div
       class=${e$3({
             group: true,
             'group--inline': this.variant === RadioGroupVariant.Inline,
-            'group--segmented': this.variant === RadioGroupVariant.Segmented,
+            'group--segmented': segmented,
+            [`gap--${this.gap}`]: !segmented,
         })}
       role="radiogroup"
       aria-label=${a11y.label}
@@ -13736,16 +14217,44 @@
       display: contents;
     }
 
+    :host([variant='segmented']) {
+      /* Inherited by child radios so segmented padding survives SSR.
+         Child radios are rendered in isolation and never receive Lit context. */
+      --quantic-radio-seg-padding-block: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-inline: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-block-xs: var(--quantic-spacing-1);
+      --quantic-radio-seg-padding-inline-xs: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-block-sm: var(--quantic-spacing-1-5);
+      --quantic-radio-seg-padding-inline-sm: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-block-lg: var(--quantic-spacing-3);
+      --quantic-radio-seg-padding-inline-lg: var(--quantic-spacing-4);
+      --quantic-radio-seg-border-right: 1px solid var(--quantic-border-primary);
+      --quantic-radio-seg-hover-bg: var(--quantic-bg-secondary-hover);
+      --quantic-radio-seg-checked-bg: var(--quantic-bg-secondary-active);
+      --quantic-radio-seg-label-weight: var(--quantic-font-weight-semibold);
+    }
+
     .group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-spacing-3);
     }
 
     .group--inline {
       flex-direction: row;
     }
 
+    .gap--sm {
+      gap: var(--quantic-spacing-1);
+    }
+
+    .gap--md {
+      gap: var(--quantic-spacing-2);
+    }
+
+    .gap--lg {
+      gap: var(--quantic-spacing-3);
+    }
+
     .group--segmented {
       flex-direction: row;
       gap: 0;
@@ -13775,6 +14284,15 @@
         e({ context: variantContext }),
         prop({ type: 'RadioGroupVariant', options: Object.values(RadioGroupVariant), reflect: true, description: 'Visual variant propagated to all child radios via context.' })
     ], exports.RadioGroup.prototype, "variant", void 0);
+    __decorate([
+        prop({
+            type: 'RadioGroupGap',
+            options: Object.values(RadioGroupGap),
+            default: RadioGroupGap.Large,
+            reflect: true,
+            description: 'Spacing between radios. Ignored when variant is segmented.',
+        })
+    ], exports.RadioGroup.prototype, "gap", void 0);
     exports.RadioGroup = __decorate([
         event('value-changed', {
             description: 'Fired whenever the selected radio changes.',
@@ -14032,7 +14550,7 @@
       opacity: 0;
     }
 
-    input:focus + .track::before {
+    input:focus-visible + .track::before {
       inset: -4px;
       opacity: 1;
       border: 2px solid var(--quantic-focus-ring);
@@ -14268,6 +14786,10 @@
       font-weight: var(--quantic-font-weight-medium);
       margin: 0;
       padding: 0;
+      display: block;
+      float: none;
+      width: 100%;
+      text-align: start;
     }
 
     .description {
@@ -63524,27 +64046,37 @@
     ], exports.NavbarMenuItem);
 
     class MatchMediaController {
-        constructor(host, query) {
+        constructor(host, query, ssrDefault = false) {
             this.host = host;
+            this.query = query;
+            this.ssrDefault = ssrDefault;
             this.matchesValue = false;
             this.handleChange = (e) => {
                 this.matchesValue = e.matches;
                 this.host.requestUpdate();
             };
-            if (typeof window !== 'undefined' && window.matchMedia) {
+            const hasWindow = typeof window !== 'undefined' && !!window.matchMedia;
+            if (hasWindow) {
                 this.mediaQuery = window.matchMedia(query);
                 this.matchesValue = this.mediaQuery.matches;
             }
             this.host.addController(this);
         }
         hostConnected() {
+            if (!this.mediaQuery && typeof window !== 'undefined' && window.matchMedia) {
+                // Controller was created in SSR context (no window.matchMedia). Re-initialise
+                // now that we're running in the browser so the value is correct.
+                this.mediaQuery = window.matchMedia(this.query);
+                this.matchesValue = this.mediaQuery.matches;
+                this.host.requestUpdate();
+            }
             this.mediaQuery?.addEventListener('change', this.handleChange);
         }
         hostDisconnected() {
             this.mediaQuery?.removeEventListener('change', this.handleChange);
         }
         get matches() {
-            return this.mediaQuery ? this.matchesValue : false;
+            return this.mediaQuery ? this.matchesValue : this.ssrDefault;
         }
     }
     class Breakpoint {
@@ -63558,13 +64090,13 @@
             return `(min-width: ${min}px) and (max-width: ${max - 1}px)`;
         }
     }
-    function respond(query) {
+    function respond(query, ssrDefault = false) {
         return function (target, propertyKey) {
             const controllerKey = Symbol(propertyKey);
             Object.defineProperty(target, propertyKey, {
                 get() {
                     if (!this[controllerKey]) {
-                        this[controllerKey] = new MatchMediaController(this, query);
+                        this[controllerKey] = new MatchMediaController(this, query, ssrDefault);
                     }
                     return this[controllerKey].matches;
                 },
@@ -63582,9 +64114,12 @@
         constructor() {
             super(...arguments);
             this.variant = LayoutVariant.Default;
+            this._initializedInBrowser = false;
+            this._asideStateInitialized = false;
+            this.ssrHasSidebar = false;
             this.hasSidebarSlot = false;
             this.hasTitlebarSlot = false;
-            this._isAsideExpanded = true;
+            this._isAsideExpanded = false;
             this.handleAsideExpand = (event) => {
                 this.isAsideExpanded = event.detail.expanded;
             };
@@ -63663,14 +64198,31 @@
             this.deactivateFocusTrap();
         }
         willUpdate(_props) {
-            if (this.previousIsSmallViewport === undefined) {
-                this._isAsideExpanded = !this.isSmallViewport;
+            const isFirstEver = this.previousIsSmallViewport === undefined;
+            const isFirstBrowser = !this._initializedInBrowser && typeof window !== 'undefined';
+            if (isFirstEver) {
                 this.previousIsSmallViewport = this.isSmallViewport;
             }
+            if (isFirstBrowser) {
+                // Do NOT set _isAsideExpanded here — see updated() for the reason.
+                this._initializedInBrowser = true;
+            }
         }
         updated(props) {
             super.updated(props);
-            if (this.previousIsSmallViewport !== this.isSmallViewport) {
+            // Set initial aside state after the first browser render, not in willUpdate.
+            //
+            // Reason: Lit DSD hydration uses the first render output as the diff baseline.
+            // If _isAsideExpanded is set to true in willUpdate, cycle 1 renders true,
+            // cycle 2 also renders true — the diff sees no change and never writes the
+            // class to the DOM. Setting it here means cycle 1 renders false (matching the
+            // SSR DOM), then the setter triggers cycle 2 which diffs false→true and
+            // actually commits the class.
+            if (this._initializedInBrowser && !this._asideStateInitialized) {
+                this._asideStateInitialized = true;
+                this.isAsideExpanded = !this.isSmallViewport;
+            }
+            else if (this._initializedInBrowser && this.previousIsSmallViewport !== this.isSmallViewport) {
                 this.isAsideExpanded = !this.isSmallViewport;
             }
             this.previousIsSmallViewport = this.isSmallViewport;
@@ -63681,7 +64233,7 @@
                 ...base,
                 r$6(`@layer quantic-header-visibility {
         .header { display: none; }
-        .header.collapsible { display: revert-layer; }
+        @media (max-width: 1023px) { .has-sidebar .header { display: revert-layer; } }
       }`),
                 whenSlotPresent('navbar', i$7 `
         @layer quantic-header-visibility {
@@ -63708,11 +64260,11 @@
             display: grid;
             grid-template-areas: 'aside header' 'aside toolbar' 'aside main';
             grid-template-rows: auto auto 1fr;
-            grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
-          }
-          .is-aside-expanded.wrapper {
             grid-template-columns: var(--quantic-component-layout-aside-width) 1fr;
           }
+          .wrapper.hydrated:not(.is-aside-expanded) {
+            grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
+          }
           .aside {
             grid-area: aside;
             position: sticky;
@@ -63722,12 +64274,12 @@
             opacity: 1;
             pointer-events: auto;
           }
-          .is-aside-expanded.wrapper .aside,
-          .is-aside-expanded.wrapper .logo {
+          .wrapper .aside,
+          .wrapper .logo {
             width: var(--quantic-component-layout-aside-width);
           }
-          .wrapper:not(.is-aside-expanded) .aside,
-          .wrapper:not(.is-aside-expanded) .logo {
+          .wrapper.hydrated:not(.is-aside-expanded) .aside,
+          .wrapper.hydrated:not(.is-aside-expanded) .logo {
             width: var(--quantic-component-layout-aside-width-collapsed);
             padding-inline: 0;
           }
@@ -63737,14 +64289,8 @@
       `),
             ];
         }
-        get isAsideCollapsible() {
-            return this.isSmallViewport && this.hasSidebar;
-        }
         get hasSidebar() {
-            return this.hasSidebarSlot;
-        }
-        get hasTitlebar() {
-            return this.hasTitlebarSlot;
+            return this.hasSidebarSlot || this.ssrHasSidebar;
         }
         render() {
             const toggleButton = u$2 `<quantic-button
@@ -63767,28 +64313,35 @@
       name="titlebar"
       @slotchange=${onSlotChange((has) => (this.hasTitlebarSlot = has))}
     ></slot> `;
+            // `hydrated` gates collapsed-width CSS so it only applies after the
+            // browser has determined the viewport and set the initial aside state.
+            // Uses a wrapper class (not :host attribute) because whenSlotPresent()
+            // wraps rules in :host(:has(...)) / @scope — nesting :host([attr])
+            // inside those wrappers produces invalid CSS selectors. Tied to
+            // _asideStateInitialized (set in updated()) so the class change
+            // produces a real diff after DSD hydration.
+            const wrapperClasses = {
+                wrapper: true,
+                hydrated: this._asideStateInitialized,
+                'has-sidebar': this.hasSidebar,
+                'is-aside-expanded': this.isAsideExpanded,
+                [`variant--${this.variant}`]: true,
+            };
             return u$2 `
       <div
-        class=${e$3({
-            wrapper: true,
-            'has-sidebar': this.hasSidebar,
-            'is-aside-expanded': this.isAsideExpanded,
-            [`variant--${this.variant}`]: true,
-        })}
+        class=${e$3(wrapperClasses)}
         @expanded-changed=${this.handleAsideExpand}
       >
-        <header class=${e$3({ header: true, collapsible: this.isAsideCollapsible })}>
+        <header class="header">
           ${!this.hasSidebar ? logo : null}
-          ${this.isAsideCollapsible ? toggleButton : null}
-          ${this.isSmallViewport ? null : titlebar}
+          ${toggleButton}
+          ${titlebar}
           <slot
             class="navbar"
             name="navbar"
           ></slot>
         </header>
 
-        ${this.isSmallViewport && this.hasTitlebar ? titlebar : null}
-
         <slot
           name="toolbar"
           class="toolbar"
@@ -63894,6 +64447,13 @@
 
     .toggle-button {
       flex-shrink: 0;
+      display: none;
+    }
+
+    @media (max-width: 1023px) {
+      .has-sidebar .toggle-button {
+        display: revert-layer;
+      }
     }
 
     .header {
@@ -64000,12 +64560,12 @@
           'aside main';
         grid-template-rows: auto auto 1fr;
         grid-template-columns:
-          var(--quantic-component-layout-aside-width-collapsed)
+          var(--quantic-component-layout-aside-width)
           1fr;
       }
 
-      .is-aside-expanded.wrapper.has-sidebar {
-        grid-template-columns: var(--quantic-component-layout-aside-width) 1fr;
+      .wrapper.hydrated.has-sidebar:not(.is-aside-expanded) {
+        grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
       }
 
       .header {
@@ -64040,8 +64600,8 @@
         display: none;
       }
 
-      .has-sidebar:not(.is-aside-expanded) .aside,
-      .has-sidebar:not(.is-aside-expanded) .logo {
+      .has-sidebar.hydrated:not(.is-aside-expanded) .aside,
+      .has-sidebar.hydrated:not(.is-aside-expanded) .logo {
         width: var(--quantic-component-layout-aside-width-collapsed);
         padding-inline: 0;
       }
@@ -64093,6 +64653,9 @@
     __decorate([
         respond(Breakpoint.below(1024))
     ], exports.Layout.prototype, "isSmallViewport", void 0);
+    __decorate([
+        n$5({ type: Boolean, attribute: 'ssr-has-sidebar' })
+    ], exports.Layout.prototype, "ssrHasSidebar", void 0);
     __decorate([
         r$2()
     ], exports.Layout.prototype, "hasSidebarSlot", void 0);
@@ -64113,10 +64676,15 @@
     ], exports.Layout);
 
     exports.LayoutLogo = class LayoutLogo extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.expanded = true;
+        }
         render() {
-            return this.expanded === true
-                ? b `<slot name="expanded"></slot>`
-                : b `<slot name="collapsed"></slot>`;
+            return b `
+      <slot name="expanded" ?hidden=${this.expanded !== true}></slot>
+      <slot name="collapsed" ?hidden=${this.expanded === true}></slot>
+    `;
         }
     };
     exports.LayoutLogo.meta = {
@@ -64133,6 +64701,9 @@
     :host {
       display: contents;
     }
+    [hidden] {
+      display: none;
+    }
   `;
     __decorate([
         c({ context: asideExpandedContext, subscribe: true })
@@ -64166,31 +64737,34 @@
     exports.Page.styles = i$7 `
     :host {
       --quantic-component-page-padding: var(--quantic-spacing-4);
+      --quantic-component-page-padding-block-end: var(--quantic-spacing-10);
       --quantic-component-page-max-width: 80rem;
       --quantic-component-page-contained-padding-inline: calc(2 * var(--quantic-component-page-padding));
       display: block;
       width: 100%;
-      height: 100%;
-      min-height: 0;
     }
 
     :host([fill]) {
+      height: 100%;
+      min-height: 0;
       overflow: hidden;
     }
 
     :host([bleeds]) {
       --quantic-component-page-padding: 0;
+      --quantic-component-page-padding-block-end: 0;
     }
 
     .main {
       width: 100%;
-      height: 100%;
-      min-height: 0;
       box-sizing: border-box;
       padding: var(--quantic-component-page-padding);
+      padding-block-end: var(--quantic-component-page-padding-block-end);
     }
 
     :host([fill]) .main {
+      height: 100%;
+      min-height: 0;
       overflow: hidden;
     }
 
@@ -64789,7 +65363,7 @@
         c({ context: asideExpandedContext, subscribe: true })
     ], exports.SidebarMenuItem.prototype, "isAsideExpanded", void 0);
     __decorate([
-        respond(Breakpoint.above(1024))
+        respond(Breakpoint.above(1024), true)
     ], exports.SidebarMenuItem.prototype, "isDesktopViewport", void 0);
     __decorate([
         prop({ type: 'boolean', default: 'false', reflect: true, description: 'Highlights the item as the currently active route.' })
@@ -64826,6 +65400,18 @@
                 }));
             };
         }
+        connectedCallback() {
+            super.connectedCallback();
+            // @astrojs/lit stamps defer-hydration on all nested Lit components in SSR
+            // output but only removes it from island root elements. Slotted children of
+            // this sidebar are never unblocked by astro-island, so their connectedCallback
+            // is permanently suppressed and they never receive context. Remove it here so
+            // they hydrate immediately after the sidebar connects (by which point
+            // quantic-layout is already providing context).
+            for (const child of this.querySelectorAll('[defer-hydration]')) {
+                child.removeAttribute('defer-hydration');
+            }
+        }
         render() {
             return u$2 `
       <nav
@@ -64855,15 +65441,16 @@
                     label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
                     variant=${SidebarMenuItemVariant.Secondary}
                   >
-                    ${this.isAsideExpanded
-                ? u$2 `<quantic-icon-lucide-panel-left-close
-                          slot="icon"
-                          size="sm"
-                        ></quantic-icon-lucide-panel-left-close>`
-                : u$2 `<quantic-icon-lucide-panel-left
-                          slot="icon"
-                          size="sm"
-                        ></quantic-icon-lucide-panel-left>`}
+                    <quantic-icon-lucide-panel-left-close
+                      slot="icon"
+                      size="sm"
+                      ?hidden=${!this.isAsideExpanded}
+                    ></quantic-icon-lucide-panel-left-close>
+                    <quantic-icon-lucide-panel-left
+                      slot="icon"
+                      size="sm"
+                      ?hidden=${this.isAsideExpanded}
+                    ></quantic-icon-lucide-panel-left>
                   </quantic-sidebar-menu-item>
                 </div>`
             : null}
@@ -64992,11 +65579,12 @@
             type: 'boolean',
             default: 'false',
             attribute: 'collapsible',
+            reflect: true,
             description: 'When true, shows a toggle button at the bottom of the sidebar on desktop viewports.',
         })
     ], exports.Sidebar.prototype, "collapsible", void 0);
     __decorate([
-        respond(Breakpoint.above(1024))
+        respond(Breakpoint.above(1024), true)
     ], exports.Sidebar.prototype, "isDesktopViewport", void 0);
     exports.Sidebar = __decorate([
         quanticElement('quantic-sidebar')
@@ -65207,12 +65795,12 @@
         @blur=${this.forwardNative}
         @input=${this.forwardNative}
       />
-      <label for=${inputId} class=${labelClasses}>
+      <label for=${inputId} class=${labelClasses} part="label">
         <div class="content">
           <slot name="icon" class="icon"></slot>
           <!-- main slot -->
           <slot class="body"></slot>
-          <div class="indicator" aria-hidden="true">
+          <div class="indicator" part="indicator" aria-hidden="true">
             ${isRadio
             ? b `<div class="visual-radio"></div>`
             : b `<div class="visual-checkbox">
@@ -65387,7 +65975,7 @@
       pointer-events: none;
     }
 
-    input:focus + .label::before {
+    input:focus-visible + .label::before {
       inset: -6px;
       opacity: 1;
       border-color: var(--quantic-focus-ring);
@@ -66012,12 +66600,26 @@
         PanelVariant["Outline"] = "outline";
         PanelVariant["Ghost"] = "ghost";
     })(exports.PanelVariant || (exports.PanelVariant = {}));
+    exports.PanelGroupGap = void 0;
+    (function (PanelGroupGap) {
+        PanelGroupGap["None"] = "none";
+        PanelGroupGap["ExtraSmall"] = "xs";
+        PanelGroupGap["Small"] = "sm";
+        PanelGroupGap["Medium"] = "md";
+        PanelGroupGap["Large"] = "lg";
+        PanelGroupGap["ExtraLarge"] = "xl";
+    })(exports.PanelGroupGap || (exports.PanelGroupGap = {}));
     exports.PanelHeaderSize = void 0;
     (function (PanelHeaderSize) {
         PanelHeaderSize["Small"] = "sm";
         PanelHeaderSize["Medium"] = "md";
         PanelHeaderSize["Large"] = "lg";
     })(exports.PanelHeaderSize || (exports.PanelHeaderSize = {}));
+    exports.PanelHeaderVariant = void 0;
+    (function (PanelHeaderVariant) {
+        PanelHeaderVariant["Primary"] = "primary";
+        PanelHeaderVariant["Secondary"] = "secondary";
+    })(exports.PanelHeaderVariant || (exports.PanelHeaderVariant = {}));
 
     exports.Panel = class Panel extends AutoHideEmptySlotsMixin(QuanticElement, [
         'header',
@@ -66071,7 +66673,7 @@
       --quantic-component-panel-font-size: var(--quantic-font-size-body-md);
       --quantic-component-panel-line-height: var(--quantic-line-height-body-md);
       --quantic-component-panel-radius: var(--quantic-radius-md);
-      --quantic-component-panel-spacing: var(--quantic-spacing-6);
+      --quantic-component-panel-spacing: var(--quantic-spacing-4);
     }
 
     .main {
@@ -66146,11 +66748,13 @@
         constructor() {
             super(...arguments);
             this.size = exports.PanelHeaderSize.Medium;
+            this.variant = exports.PanelHeaderVariant.Primary;
         }
         render() {
             const classes = e$3({
                 main: true,
                 [`size--${this.size}`]: true,
+                [`variant--${this.variant}`]: true,
             });
             return u$2 `
       <div class=${classes}>
@@ -66210,6 +66814,11 @@
       font-weight: var(--quantic-font-weight-semibold);
     }
 
+    .variant--secondary .title {
+      color: var(--quantic-text-tertiary);
+      font-weight: var(--quantic-font-weight-regular);
+    }
+
     .size--sm .title {
       font-size: var(--quantic-font-size-body-md);
     }
@@ -66242,14 +66851,30 @@
             description: 'Controls the title font size.',
         })
     ], exports.PanelHeader.prototype, "size", void 0);
+    __decorate([
+        prop({
+            type: 'PanelHeaderVariant',
+            options: Object.values(exports.PanelHeaderVariant),
+            default: exports.PanelHeaderVariant.Primary,
+            description: 'Visual variant of the header.',
+        })
+    ], exports.PanelHeader.prototype, "variant", void 0);
     exports.PanelHeader = __decorate([
         quanticElement('quantic-panel-header')
     ], exports.PanelHeader);
 
     exports.PanelGroup = class PanelGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.gap = exports.PanelGroupGap.Medium;
+        }
         render() {
+            const classes = e$3({
+                group: true,
+                [`gap--${this.gap}`]: true,
+            });
             return u$2 `
-      <div class="group">
+      <div class=${classes}>
         <slot></slot>
       </div>
     `;
@@ -66257,7 +66882,8 @@
     };
     exports.PanelGroup.meta = {
         tag: 'quantic-panel-group',
-        description: 'Layout container for stacking multiple quantic-panels in a vertical flex arrangement.',
+        description: 'Layout container for stacking multiple quantic-panels in a vertical flex arrangement. ' +
+            'Use gap for named spacing between panels. Override further with --quantic-component-panel-group-gap.',
         category: 'layout',
         slots: {
             '': { description: 'Place quantic-panel elements here.' },
@@ -66273,9 +66899,41 @@
     .group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-spacing-6);
+      gap: var(--quantic-component-panel-group-gap, var(--quantic-spacing-6));
+    }
+
+    .gap--none {
+      --quantic-component-panel-group-gap: 0;
+    }
+
+    .gap--xs {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-3);
+    }
+
+    .gap--sm {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-4);
+    }
+
+    .gap--md {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-6);
+    }
+
+    .gap--lg {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-8);
+    }
+
+    .gap--xl {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-12);
     }
   `;
+    __decorate([
+        prop({
+            type: 'PanelGroupGap',
+            options: Object.values(exports.PanelGroupGap),
+            default: exports.PanelGroupGap.Medium,
+            description: 'Spacing between stacked panels.',
+        })
+    ], exports.PanelGroup.prototype, "gap", void 0);
     exports.PanelGroup = __decorate([
         quanticElement('quantic-panel-group')
     ], exports.PanelGroup);
@@ -66302,7 +66960,7 @@
         get clamped() {
             if (this.indeterminate)
                 return undefined;
-            return clamp(this.value, 0, 100);
+            return clamp$1(this.value, 0, 100);
         }
         updated(changed) {
             super.updated(changed);
@@ -66826,8 +67484,8 @@
     function paneBounds(pane) {
         const minSize = Number.isFinite(pane.minSize) ? pane.minSize : 0;
         const maxSize = Number.isFinite(pane.maxSize) ? pane.maxSize : 100;
-        const lo = clamp(minSize, 0, 100);
-        const hi = clamp(maxSize, 0, 100);
+        const lo = clamp$1(minSize, 0, 100);
+        const hi = clamp$1(maxSize, 0, 100);
         return { min: Math.min(lo, hi), max: Math.max(lo, hi) };
     }
     function keyToDelta(key, isVertical) {
@@ -66852,7 +67510,7 @@
         const { a: boundsA, b: boundsB, total } = bounds;
         const minA = Math.max(boundsA.min, total - boundsB.max);
         const maxA = Math.min(boundsA.max, total - boundsB.min);
-        const newA = clamp(currentA + delta, Math.min(minA, maxA), Math.max(minA, maxA));
+        const newA = clamp$1(currentA + delta, Math.min(minA, maxA), Math.max(minA, maxA));
         return [newA, total - newA];
     }
     function layoutToSize(layoutPercent, sizesSum) {
@@ -67997,6 +68655,8 @@
     const tabsTag = 'quantic-tabs';
     const buttonTag = 'quantic-tab-button';
     const panelTag = 'quantic-tab-panel';
+    const buttonsSlot = 'buttons';
+    const panelsSlot = 'panels';
 
     const idContext = n$1('tabs.id');
     const sizeContext = n$1('tabs.size');
@@ -68010,6 +68670,19 @@
             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();
@@ -68018,26 +68691,53 @@
                 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)
@@ -68050,14 +68750,12 @@
                 main: true,
                 [`orientation--${this.orientation}`]: true,
             });
-            const panelsClasses = e$3({
-                panels: true,
-                'panels--hidden': this._panelElements.length === 0,
-            });
             return b `
       <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>
     `;
         }
@@ -68065,7 +68763,7 @@
     exports.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: {
@@ -68075,73 +68773,93 @@
         },
         subComponents: ['quantic-tab-button', 'quantic-tab-panel'],
     };
-    exports.Tabs.styles = i$7 `
-    :host {
-      display: block;
-      --quantic-component-tabs-gap: var(--quantic-spacing-8);
-    }
+    exports.Tabs.styles = [
+        i$7 `
+      :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, i$7 `
+        .panels {
+          display: block;
+        }
+      `),
+    ];
     __decorate([
         e({ context: sizeContext }),
         prop({
@@ -68177,8 +68895,13 @@
         })
     ], exports.Tabs.prototype, "id", void 0);
     __decorate([
-        o$5({ slot: 'panels' })
-    ], exports.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".',
+        })
+    ], exports.Tabs.prototype, "collapseBelow", void 0);
     exports.Tabs = __decorate([
         event('tab-selected', {
             description: 'Fired when a tab is selected, providing the index of the selected tab.',
@@ -68189,6 +68912,12 @@
 
     const getButtonId = (id, index) => `tabbutton-${id}-${index}`;
     const getPanelId = (id, index) => `tabpanel-${id}-${index}`;
+    /** Named-slot projection in DSD requires `slot` on the child tag at SSR time. */
+    function ensureHostSlot(el, slotName) {
+        if (!el.hasAttribute('slot')) {
+            el.setAttribute('slot', slotName);
+        }
+    }
 
     exports.TabButton = class TabButton extends QuanticElement {
         constructor() {
@@ -68203,6 +68932,11 @@
             this.disabled = false;
             this.buttonRef = e$2();
         }
+        willUpdate() {
+            // DSD projects named slots from the light-DOM `slot` attr at parse/SSR time.
+            ensureHostSlot(this, buttonsSlot);
+            this.toggleAttribute('selected', this.selectedIndex === this.index);
+        }
         _onClick() {
             if (this.disabled)
                 return;
@@ -68231,6 +68965,7 @@
       <button
         ${n$2(this.buttonRef)}
         class=${classes}
+        part="button"
         id=${getButtonId(this.tabsId, this.index)}
         role="tab"
         aria-selected=${isActive}
@@ -68242,6 +68977,7 @@
       >
         <slot name="icon"></slot>
         <slot></slot>
+        <span class="indicator" part="indicator" aria-hidden="true"></span>
       </button>
     `;
         }
@@ -68250,13 +68986,17 @@
         tag: 'quantic-tab-button',
         description: 'Individual tab trigger button within quantic-tabs. ' +
             'Set index to match the corresponding quantic-tab-panel. ' +
-            'Size and orientation are inherited via context from the parent quantic-tabs.',
+            'Size and orientation are inherited via context from the parent quantic-tabs. ' +
+            'Reflects a selected attribute while active. Restyle the mark with ::part(indicator) ' +
+            'or --quantic-component-tab-indicator-* / --quantic-component-tab-active-bg.',
         category: 'navigation',
         slots: {
             icon: {
                 description: 'Icon element, displayed before the label and scaled to the tab size.',
             },
-            '': { description: 'Tab label text.' },
+            '': {
+                description: 'Tab label text or custom content.',
+            },
         },
         relatedTo: ['quantic-tabs', 'quantic-tab-panel'],
     };
@@ -68271,7 +69011,12 @@
       color: var(--quantic-text-quaternary);
       font-family: var(--quantic-font-family-body);
       border: none;
-      background: none;
+      background-color: var(--quantic-component-tab-bg, transparent);
+      border-radius: var(
+        --quantic-component-tab-radius,
+        var(--quantic-radius-sm)
+      );
+      box-sizing: border-box;
       position: relative;
       padding: var(--quantic-spacing-2) var(--quantic-spacing-3);
       font-weight: var(--quantic-font-weight-semibold);
@@ -68280,6 +69025,7 @@
       display: inline-flex;
       align-items: center;
       gap: var(--quantic-spacing-2);
+      transition: background-color 0.15s ease-in-out;
     }
 
     ::slotted([slot='icon']) {
@@ -68306,6 +69052,16 @@
 
     .orientation--vertical {
       text-align: left;
+      width: 100%;
+      --indicator-inset: 0 auto 0 0;
+      --indicator-width: var(
+        --quantic-component-tab-indicator-thickness,
+        var(--quantic-spacing-0-5)
+      );
+      --indicator-height: auto;
+      --indicator-hidden: scaleY(0);
+      --indicator-shown: scaleY(1);
+      --indicator-origin: top;
     }
 
     .size--xs {
@@ -68335,6 +69091,11 @@
 
     .is-active {
       color: var(--quantic-text-primary);
+      background-color: var(--quantic-component-tab-active-bg, transparent);
+    }
+
+    .main:hover:not(.is-active):not(.is-disabled) {
+      background-color: var(--quantic-component-tab-hover-bg, transparent);
     }
 
     /* focus ring */
@@ -68344,7 +69105,10 @@
       display: block;
       position: absolute;
       inset: 0;
-      border-radius: var(--quantic-radius-sm);
+      border-radius: var(
+        --quantic-component-tab-radius,
+        var(--quantic-radius-sm)
+      );
       border: 2px solid var(--quantic-focus-ring);
       transition: all 0.2s ease-in-out;
       opacity: 0;
@@ -68356,42 +69120,50 @@
       border: 2px solid var(--quantic-focus-ring);
     }
 
-    /* active indicator */
-    .main::after {
-      content: '';
+    .orientation--horizontal {
+      --indicator-inset: auto 0 -1px 0;
+      --indicator-width: auto;
+      --indicator-height: var(
+        --quantic-component-tab-indicator-thickness,
+        3px
+      );
+      --indicator-hidden: scaleX(0);
+      --indicator-shown: scaleX(1);
+      --indicator-origin: left;
+    }
+
+    .indicator {
       display: block;
+      pointer-events: none;
       position: absolute;
-      background-color: var(--quantic-fg-brand-primary);
+      inset: var(--quantic-component-tab-indicator-inset, var(--indicator-inset));
+      width: var(--quantic-component-tab-indicator-width, var(--indicator-width));
+      height: var(
+        --quantic-component-tab-indicator-height,
+        var(--indicator-height)
+      );
+      background-color: var(
+        --quantic-component-tab-indicator-color,
+        var(--quantic-fg-brand-primary)
+      );
+      border-radius: var(--quantic-component-tab-indicator-radius, 0);
+      transform: var(
+        --quantic-component-tab-indicator-transform,
+        var(--indicator-hidden)
+      );
+      transform-origin: var(
+        --quantic-component-tab-indicator-origin,
+        var(--indicator-origin)
+      );
       transition: transform 0.2s ease-in-out;
-      opacity: 1;
-    }
-
-    .orientation--horizontal::after {
-      bottom: -1px;
-      left: 0;
-      right: 0;
-      height: 3px;
-      transform: scaleX(0);
-      transform-origin: left;
-    }
-
-    .orientation--horizontal:hover::after,
-    .orientation--horizontal.is-active::after {
-      transform: scaleX(1);
-    }
-
-    .orientation--vertical::after {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: var(--quantic-spacing-0-5);
-      transform: scaleY(0);
-      transform-origin: top;
     }
 
-    .orientation--vertical:hover::after,
-    .orientation--vertical.is-active::after {
-      transform: scaleY(1);
+    .main:hover .indicator,
+    .is-active .indicator {
+      transform: var(
+        --quantic-component-tab-indicator-transform,
+        var(--indicator-shown)
+      );
     }
 
     .is-disabled {
@@ -68401,7 +69173,7 @@
       opacity: 0.5;
     }
 
-    .is-disabled::after {
+    .is-disabled .indicator {
       display: none;
     }
   `;
@@ -68470,6 +69242,10 @@
             this.selectedIndex = this.defaultSelectedIndex;
             this.tabsId = '';
         }
+        willUpdate() {
+            // DSD projects named slots from the light-DOM `slot` attr at parse/SSR time.
+            ensureHostSlot(this, panelsSlot);
+        }
         render() {
             const active = this.selectedIndex === this.index;
             const classes = e$3({
@@ -69312,6 +70088,7 @@
     exports.LucideIconX.ensureDefined();
     exports.Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, [
         'title',
+        '',
         'action',
     ]) {
         constructor() {
@@ -69456,7 +70233,7 @@
 
     .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);
@@ -69504,7 +70281,6 @@
     .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);
     }
 
@@ -69694,6 +70470,8 @@
     exports.CapacityBarColor = CapacityBarColor;
     exports.CapacityBarSize = CapacityBarSize;
     exports.CardGroupDensity = CardGroupDensity;
+    exports.CheckboxGroupGap = CheckboxGroupGap;
+    exports.CheckboxGroupVariant = CheckboxGroupVariant;
     exports.CheckboxSize = CheckboxSize;
     exports.CodeInputSize = CodeInputSize;
     exports.ComboboxSize = ComboboxSize;
@@ -69721,6 +70499,7 @@
     exports.ProgressColor = ProgressColor;
     exports.ProgressSize = ProgressSize;
     exports.QuanticElement = QuanticElement;
+    exports.RadioGroupGap = RadioGroupGap;
     exports.RadioGroupVariant = RadioGroupVariant;
     exports.RadioSize = RadioSize;
     exports.SelectSize = SelectSize;