@ctrliq/quantic-components 1.83.0 → 1.84.1

package/dist/quantic-components.js

@@ -5177,8 +5177,8 @@
       position: relative;
       width: 100%;
 
-      --quantic-component-combobox-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-combobox-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-combobox-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-combobox-padding-block: var(--quantic-spacing-md);
     }
 
     .main {
@@ -5193,8 +5193,8 @@
       border-radius: var(--quantic-component-combobox-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-text-primary);
       background-color: var(--quantic-bg-primary);
-      padding: var(--quantic-component-combobox-padding-block)
-        var(--quantic-component-combobox-padding-inline);
+      padding: var(--quantic-component-combobox-padding-block, var(--quantic-internal-combobox-padding-block))
+        var(--quantic-component-combobox-padding-inline, var(--quantic-internal-combobox-padding-inline));
       transition:
         border-color 0.2s ease-in-out,
         box-shadow 0.2s ease-in-out;
@@ -5214,14 +5214,14 @@
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-combobox-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-combobox-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-combobox-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-combobox-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-combobox-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-combobox-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-combobox-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-combobox-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -5230,8 +5230,8 @@
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-combobox-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-combobox-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-combobox-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-combobox-padding-block: var(--quantic-spacing-3);
     }
 
     .main:focus-within::before {
@@ -5327,59 +5327,59 @@
     }
 
     .listbox.size--xs {
-      --quantic-component-combobox-option-padding-block: var(
+      --quantic-internal-combobox-option-padding-block: var(
         --quantic-spacing-1
       );
-      --quantic-component-combobox-option-padding-inline: var(
+      --quantic-internal-combobox-option-padding-inline: var(
         --quantic-spacing-1-5
       );
-      --quantic-component-combobox-option-font-size: 13px;
-      --quantic-component-combobox-option-line-height: var(
+      --quantic-internal-combobox-option-font-size: 13px;
+      --quantic-internal-combobox-option-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .listbox.size--sm {
-      --quantic-component-combobox-option-padding-block: var(
+      --quantic-internal-combobox-option-padding-block: var(
         --quantic-spacing-1-5
       );
-      --quantic-component-combobox-option-padding-inline: var(
+      --quantic-internal-combobox-option-padding-inline: var(
         --quantic-spacing-2
       );
-      --quantic-component-combobox-option-font-size: var(
+      --quantic-internal-combobox-option-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-combobox-option-line-height: var(
+      --quantic-internal-combobox-option-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .listbox.size--md {
-      --quantic-component-combobox-option-padding-block: var(
+      --quantic-internal-combobox-option-padding-block: var(
         --quantic-spacing-2
       );
-      --quantic-component-combobox-option-padding-inline: var(
+      --quantic-internal-combobox-option-padding-inline: var(
         --quantic-spacing-3
       );
-      --quantic-component-combobox-option-font-size: var(
+      --quantic-internal-combobox-option-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-combobox-option-line-height: var(
+      --quantic-internal-combobox-option-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .listbox.size--lg {
-      --quantic-component-combobox-option-padding-block: var(
+      --quantic-internal-combobox-option-padding-block: var(
         --quantic-spacing-3
       );
-      --quantic-component-combobox-option-padding-inline: var(
+      --quantic-internal-combobox-option-padding-inline: var(
         --quantic-spacing-4
       );
-      --quantic-component-combobox-option-font-size: var(
+      --quantic-internal-combobox-option-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-combobox-option-line-height: var(
+      --quantic-internal-combobox-option-line-height: var(
         --quantic-line-height-body-lg
       );
     }
@@ -5389,20 +5389,20 @@
       align-items: center;
       padding: var(
           --quantic-component-combobox-option-padding-block,
-          var(--quantic-spacing-2)
+          var(--quantic-internal-combobox-option-padding-block, var(--quantic-spacing-2))
         )
         var(
           --quantic-component-combobox-option-padding-inline,
-          var(--quantic-spacing-3)
+          var(--quantic-internal-combobox-option-padding-inline, var(--quantic-spacing-3))
         );
       border-radius: var(--quantic-radius-sm);
       font-size: var(
         --quantic-component-combobox-option-font-size,
-        var(--quantic-font-size-body-md)
+        var(--quantic-internal-combobox-option-font-size, var(--quantic-font-size-body-md))
       );
       line-height: var(
         --quantic-component-combobox-option-line-height,
-        var(--quantic-line-height-body-md)
+        var(--quantic-internal-combobox-option-line-height, var(--quantic-line-height-body-md))
       );
       color: var(--quantic-text-primary);
       cursor: pointer;
@@ -5754,6 +5754,59 @@
         quanticElement('quantic-status-badge')
     ], exports.StatusBadge);
 
+    exports.BadgeGroup = class BadgeGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.ariaLabel = null;
+        }
+        render() {
+            return b `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.BadgeGroup.meta = {
+        tag: 'quantic-badge-group',
+        description: 'A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. ' +
+            'Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. ' +
+            'Use quantic-tag-group for tags.',
+        category: 'display',
+        slots: {
+            '': {
+                description: 'quantic-badge or quantic-status-badge elements.',
+            },
+        },
+        subComponents: ['quantic-badge', 'quantic-status-badge'],
+        relatedTo: ['quantic-badge', 'quantic-tag-group'],
+    };
+    exports.BadgeGroup.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-badge-group-gap,
+        var(--quantic-spacing-1)
+      );
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            attribute: 'aria-label',
+            description: 'Accessible name for the group.',
+        })
+    ], exports.BadgeGroup.prototype, "ariaLabel", void 0);
+    exports.BadgeGroup = __decorate([
+        quanticElement('quantic-badge-group')
+    ], exports.BadgeGroup);
+
     const CapacityBarSize = {
         ExtraSmall: 'xs',
         Small: 'sm',
@@ -5835,77 +5888,77 @@
 
     .label {
       color: var(--quantic-text-secondary);
-      font-size: var(--quantic-component-capacity-bar-label-font-size);
-      line-height: var(--quantic-component-capacity-bar-label-line-height);
+      font-size: var(--quantic-component-capacity-bar-label-font-size, var(--quantic-internal-capacity-bar-label-font-size));
+      line-height: var(--quantic-component-capacity-bar-label-line-height, var(--quantic-internal-capacity-bar-label-line-height));
       white-space: nowrap;
     }
 
     .bar {
       display: flex;
       flex-wrap: nowrap;
-      gap: var(--quantic-component-capacity-bar-gap, 3px);
+      gap: var(--quantic-component-capacity-bar-gap, var(--quantic-internal-capacity-bar-gap, 3px));
     }
 
     .size--xs {
-      --quantic-component-capacity-bar-gap: 2px;
-      --quantic-component-capacity-bar-segment-radius: 2px;
-      --quantic-component-capacity-bar-segment-width: 3px;
-      --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-5);
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-gap: 2px;
+      --quantic-internal-capacity-bar-segment-radius: 2px;
+      --quantic-internal-capacity-bar-segment-width: 3px;
+      --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-5);
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--sm {
-      --quantic-component-capacity-bar-gap: 2px;
-      --quantic-component-capacity-bar-segment-radius: 2px;
-      --quantic-component-capacity-bar-segment-width: var(--quantic-spacing-1);
-      --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-6);
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-gap: 2px;
+      --quantic-internal-capacity-bar-segment-radius: 2px;
+      --quantic-internal-capacity-bar-segment-width: var(--quantic-spacing-1);
+      --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-6);
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--md {
-      --quantic-component-capacity-bar-gap: 2px;
-      --quantic-component-capacity-bar-segment-radius: 3px;
-      --quantic-component-capacity-bar-segment-width: var(
+      --quantic-internal-capacity-bar-gap: 2px;
+      --quantic-internal-capacity-bar-segment-radius: 3px;
+      --quantic-internal-capacity-bar-segment-width: var(
         --quantic-spacing-1-5
       );
-      --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-8);
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-8);
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--lg {
-      --quantic-component-capacity-bar-gap: 3px;
-      --quantic-component-capacity-bar-segment-radius: 4px;
-      --quantic-component-capacity-bar-segment-width: var(--quantic-spacing-2);
-      --quantic-component-capacity-bar-segment-height: var(
+      --quantic-internal-capacity-bar-gap: 3px;
+      --quantic-internal-capacity-bar-segment-radius: 4px;
+      --quantic-internal-capacity-bar-segment-width: var(--quantic-spacing-2);
+      --quantic-internal-capacity-bar-segment-height: var(
         --quantic-spacing-12
       );
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .segment {
-      width: var(--quantic-component-capacity-bar-segment-width, 6px);
-      height: var(--quantic-component-capacity-bar-segment-height, 6px);
-      border-radius: var(--quantic-component-capacity-bar-segment-radius, 4px);
+      width: var(--quantic-component-capacity-bar-segment-width, var(--quantic-internal-capacity-bar-segment-width, 6px));
+      height: var(--quantic-component-capacity-bar-segment-height, var(--quantic-internal-capacity-bar-segment-height, 6px));
+      border-radius: var(--quantic-component-capacity-bar-segment-radius, var(--quantic-internal-capacity-bar-segment-radius, 4px));
     }
 
     .segment--empty {
@@ -5943,6 +5996,60 @@
         quanticElement('quantic-capacity-bar')
     ], exports.CapacityBar);
 
+    exports.ActionGroup = class ActionGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.ariaLabel = null;
+        }
+        render() {
+            return b `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.ActionGroup.meta = {
+        tag: 'quantic-action-group',
+        description: 'A row of related actions sharing one accessible name and a consistent gap. ' +
+            'Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. ' +
+            'Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. ' +
+            'Use quantic-button-bar when the buttons should read as one joined control.',
+        category: 'action',
+        slots: {
+            '': {
+                description: 'quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one.',
+            },
+        },
+        subComponents: ['quantic-button', 'quantic-dropdown-menu', 'quantic-popover'],
+        relatedTo: ['quantic-button', 'quantic-button-bar', 'quantic-dialog-actions'],
+    };
+    exports.ActionGroup.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-action-group-gap,
+        var(--quantic-spacing-3)
+      );
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            attribute: 'aria-label',
+            description: 'Accessible name for the group.',
+        })
+    ], exports.ActionGroup.prototype, "ariaLabel", void 0);
+    exports.ActionGroup = __decorate([
+        quanticElement('quantic-action-group')
+    ], exports.ActionGroup);
+
     /**
      * @license
      * Copyright 2021 Google LLC
@@ -5996,21 +6103,102 @@
 
     const sizeContext$2 = n$1('button-bar.size');
 
+    const KEY_STEPS = {
+        ArrowRight: 1,
+        ArrowDown: 1,
+        ArrowLeft: -1,
+        ArrowUp: -1,
+        Home: 'first',
+        End: 'last',
+    };
+    function resolveFocusStop(items, hasSynced) {
+        if (!items.length)
+            return null;
+        if (hasSynced) {
+            const tabbable = items.findIndex((item) => item.tabbable);
+            if (tabbable !== -1)
+                return tabbable;
+        }
+        const active = items.findIndex((item) => item.active);
+        return active === -1 ? 0 : active;
+    }
+    function nextFocusIndex(key, current, count) {
+        const step = KEY_STEPS[key];
+        if (step === undefined)
+            return null;
+        if (count < 2 || current < 0 || current >= count)
+            return null;
+        if (step === 'first')
+            return 0;
+        if (step === 'last')
+            return count - 1;
+        return (current + step + count) % count;
+    }
+
+    const ITEM_TAGS = 'quantic-button-bar-item, quantic-button-group-item';
     exports.ButtonBar = class ButtonBar extends QuanticElement {
         constructor() {
             super(...arguments);
             this.size = ButtonBarSize.Medium;
             this.ariaLabel = null;
+            this.hasSynced = false;
             this.defaultLabel = 'Button bar';
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.disabledObserver = new MutationObserver(() => this.syncFocusStop());
+            this.disabledObserver.observe(this, {
+                attributeFilter: ['disabled'],
+                subtree: true,
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.disabledObserver?.disconnect();
+            this.disabledObserver = undefined;
+        }
+        get items() {
+            return [...this.querySelectorAll(ITEM_TAGS)].filter((item) => item.parentElement === this && !item.disabled);
+        }
+        setFocusStop(items, index) {
+            items.forEach((item, position) => {
+                item.tabbable = position === index;
+            });
+        }
+        syncFocusStop() {
+            const items = this.items;
+            const stop = resolveFocusStop(items, this.hasSynced);
+            if (stop === null)
+                return;
+            this.hasSynced = true;
+            this.setFocusStop(items, stop);
+        }
+        handleFocusIn(event) {
+            const items = this.items;
+            const focused = items.findIndex((item) => item.contains(event.target));
+            if (focused !== -1)
+                this.setFocusStop(items, focused);
+        }
+        handleKeydown(event) {
+            const items = this.items;
+            const current = items.findIndex((item) => item.contains(event.target));
+            const next = nextFocusIndex(event.key, current, items.length);
+            if (next === null)
+                return;
+            event.preventDefault();
+            this.setFocusStop(items, next);
+            items[next].focus();
+        }
         render() {
             return b `
       <div
         class="container"
         role="toolbar"
-        aria-label=${this.ariaLabel || this.defaultLabel}
+        aria-label=${this.ariaLabel ?? this.defaultLabel}
+        @keydown=${this.handleKeydown}
+        @focusin=${this.handleFocusIn}
       >
-        <slot></slot>
+        <slot @slotchange=${() => this.syncFocusStop()}></slot>
       </div>
     `;
         }
@@ -6020,6 +6208,7 @@
         description: 'Toolbar of related buttons joined into one cohesive control, with shared sizing. ' +
             'Use for switching between views or modes, and for a compact run of icon actions. ' +
             'Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. ' +
+            'Focus follows the toolbar pattern: one tab stop, arrow keys move between items, Home and End jump to the ends. ' +
             'Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.',
         category: 'action',
         slots: { '': { description: 'One or more quantic-button-bar-item elements.' } },
@@ -6075,8 +6264,7 @@
     exports.ButtonGroup.meta = {
         ...exports.ButtonBar.meta,
         tag: 'quantic-button-group',
-        description: 'Deprecated alias of quantic-button-bar. This element never grouped buttons: ' +
-            'it joins borders and gives its items a pressed state. Use quantic-button-bar.',
+        description: 'Deprecated alias of quantic-button-bar. Use quantic-button-bar.',
         deprecated: {
             use: 'quantic-button-bar',
             reason: 'The name describes a row of buttons, which this is not. Use quantic-action-group for that.',
@@ -6091,9 +6279,13 @@
     exports.ButtonBarItem = class ButtonBarItem extends QuanticElement {
         constructor() {
             super(...arguments);
+            this.tabbable = true;
             this.disabled = false;
             this.active = false;
         }
+        focus(options) {
+            this.innerButton?.focus(options);
+        }
         render() {
             const classes = e$3({
                 main: true,
@@ -6104,7 +6296,7 @@
       <button
         type="button"
         class=${classes}
-        tabindex=${this.disabled ? -1 : 0}
+        tabindex=${this.disabled || !this.tabbable ? -1 : 0}
         ?disabled=${this.disabled}
         aria-pressed=${this.active ? 'true' : 'false'}
       >
@@ -6247,6 +6439,12 @@
     __decorate([
         c({ context: sizeContext$2, subscribe: true })
     ], exports.ButtonBarItem.prototype, "size", void 0);
+    __decorate([
+        r$2()
+    ], exports.ButtonBarItem.prototype, "tabbable", void 0);
+    __decorate([
+        e$5('button')
+    ], exports.ButtonBarItem.prototype, "innerButton", void 0);
     __decorate([
         prop({
             type: 'boolean',
@@ -6408,13 +6606,13 @@
         color: var(--quantic-text-secondary);
         position: relative;
 
-        --quantic-component-card-font-size: var(--quantic-font-size-body-md);
-        --quantic-component-card-line-height: var(
+        --quantic-internal-card-font-size: var(--quantic-font-size-body-md);
+        --quantic-internal-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);
+        --quantic-internal-card-radius: var(--quantic-radius-md);
+        --quantic-internal-card-spacing: var(--quantic-spacing-4);
+        --quantic-internal-card-size-padding: var(--quantic-spacing-6);
       }
 
       button.main,
@@ -6435,16 +6633,16 @@
       .main {
         display: flex;
         flex-direction: column;
-        gap: var(--quantic-component-card-spacing);
+        gap: var(--quantic-component-card-spacing, var(--quantic-internal-card-spacing));
         padding: var(
           --quantic-component-card-padding,
-          var(--quantic-component-card-size-padding)
+          var(--quantic-component-card-size-padding, var(--quantic-internal-card-size-padding))
         );
-        border-radius: var(--quantic-component-card-radius);
+        border-radius: var(--quantic-component-card-radius, var(--quantic-internal-card-radius));
         border: 1px solid var(--quantic-border-primary);
         overflow: hidden;
-        font-size: var(--quantic-component-card-font-size);
-        line-height: var(--quantic-component-card-line-height);
+        font-size: var(--quantic-component-card-font-size, var(--quantic-internal-card-font-size));
+        line-height: var(--quantic-component-card-line-height, var(--quantic-internal-card-line-height));
         flex: 1 1 auto;
         box-sizing: border-box;
       }
@@ -6465,60 +6663,60 @@
       }
 
       .size--xs {
-        --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);
-        --quantic-component-card-line-height: var(
+        --quantic-internal-card-size-padding: var(--quantic-spacing-3);
+        --quantic-internal-card-spacing: var(--quantic-spacing-1);
+        --quantic-internal-card-radius: var(--quantic-radius-sm);
+        --quantic-internal-card-font-size: var(--quantic-font-size-body-xs);
+        --quantic-internal-card-line-height: var(
           --quantic-line-height-body-sm
         );
       }
 
       .size--sm {
-        --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);
-        --quantic-component-card-line-height: var(
+        --quantic-internal-card-size-padding: var(--quantic-spacing-4);
+        --quantic-internal-card-spacing: var(--quantic-spacing-1-5);
+        --quantic-internal-card-radius: var(--quantic-radius-sm);
+        --quantic-internal-card-font-size: var(--quantic-font-size-body-sm);
+        --quantic-internal-card-line-height: var(
           --quantic-line-height-body-sm
         );
       }
 
       .size--md {
-        --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);
-        --quantic-component-card-line-height: var(
+        --quantic-internal-card-size-padding: var(--quantic-spacing-5);
+        --quantic-internal-card-spacing: var(--quantic-spacing-2);
+        --quantic-internal-card-radius: var(--quantic-radius-md);
+        --quantic-internal-card-font-size: var(--quantic-font-size-body-md);
+        --quantic-internal-card-line-height: var(
           --quantic-line-height-body-md
         );
       }
 
       .size--lg {
-        --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);
-        --quantic-component-card-line-height: var(
+        --quantic-internal-card-size-padding: var(--quantic-spacing-6);
+        --quantic-internal-card-spacing: var(--quantic-spacing-3);
+        --quantic-internal-card-radius: var(--quantic-radius-lg);
+        --quantic-internal-card-font-size: var(--quantic-font-size-body-lg);
+        --quantic-internal-card-line-height: var(
           --quantic-line-height-body-lg
         );
       }
 
       @container (min-width: 40rem) {
         .size--xs {
-          --quantic-component-card-size-padding: var(--quantic-spacing-3);
+          --quantic-internal-card-size-padding: var(--quantic-spacing-3);
         }
 
         .size--sm {
-          --quantic-component-card-size-padding: var(--quantic-spacing-4);
+          --quantic-internal-card-size-padding: var(--quantic-spacing-4);
         }
 
         .size--md {
-          --quantic-component-card-size-padding: var(--quantic-spacing-6);
+          --quantic-internal-card-size-padding: var(--quantic-spacing-6);
         }
 
         .size--lg {
-          --quantic-component-card-size-padding: var(--quantic-spacing-8);
+          --quantic-internal-card-size-padding: var(--quantic-spacing-8);
         }
       }
 
@@ -6529,11 +6727,11 @@
       }
 
       .header {
-        padding-bottom: var(--quantic-component-card-spacing);
+        padding-bottom: var(--quantic-component-card-spacing, var(--quantic-internal-card-spacing));
       }
 
       .footer {
-        padding-top: var(--quantic-component-card-spacing);
+        padding-top: var(--quantic-component-card-spacing, var(--quantic-internal-card-spacing));
         margin-top: auto;
       }
 
@@ -6542,7 +6740,7 @@
         inset: calc(
           var(
               --quantic-component-card-padding,
-              var(--quantic-component-card-size-padding)
+              var(--quantic-component-card-size-padding, var(--quantic-internal-card-size-padding))
             ) / 2
         );
         left: auto;
@@ -6595,7 +6793,7 @@
           padding-right: calc(
             var(
                 --quantic-component-card-padding,
-                var(--quantic-component-card-size-padding)
+                var(--quantic-component-card-size-padding, var(--quantic-internal-card-size-padding))
               ) * 2
           );
         }
@@ -6688,9 +6886,9 @@
 
     .grid {
       display: grid;
-      gap: var(--quantic-component-grid-gap, var(--quantic-spacing-4));
+      gap: var(--quantic-component-grid-gap, var(--quantic-internal-grid-gap, var(--quantic-spacing-4)));
       grid-template-columns: repeat(
-        var(--quantic-component-grid-columns, 1),
+        var(--quantic-component-grid-columns, var(--quantic-internal-grid-columns, 1)),
         minmax(0, 1fr)
       );
       align-items: stretch;
@@ -6701,109 +6899,109 @@
     }
 
     .density--dense {
-      --quantic-component-grid-columns: 2;
-      --quantic-component-grid-gap: var(--quantic-spacing-2);
+      --quantic-internal-grid-columns: 2;
+      --quantic-internal-grid-gap: var(--quantic-spacing-2);
     }
 
     .density--compact {
-      --quantic-component-grid-columns: 1;
-      --quantic-component-grid-gap: var(--quantic-spacing-2);
+      --quantic-internal-grid-columns: 1;
+      --quantic-internal-grid-gap: var(--quantic-spacing-2);
     }
 
     .density--comfortable {
-      --quantic-component-grid-columns: 1;
-      --quantic-component-grid-gap: var(--quantic-spacing-4);
+      --quantic-internal-grid-columns: 1;
+      --quantic-internal-grid-gap: var(--quantic-spacing-4);
     }
 
     .density--sparse {
-      --quantic-component-grid-columns: 1;
-      --quantic-component-grid-gap: var(--quantic-spacing-4);
+      --quantic-internal-grid-columns: 1;
+      --quantic-internal-grid-gap: var(--quantic-spacing-4);
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Xs)}) {
       .density--dense {
-        --quantic-component-grid-columns: 3;
-        --quantic-component-grid-gap: var(--quantic-spacing-3);
+        --quantic-internal-grid-columns: 3;
+        --quantic-internal-grid-gap: var(--quantic-spacing-3);
       }
 
       .density--compact {
-        --quantic-component-grid-columns: 2;
-        --quantic-component-grid-gap: var(--quantic-spacing-3);
+        --quantic-internal-grid-columns: 2;
+        --quantic-internal-grid-gap: var(--quantic-spacing-3);
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Sm)}) {
       .density--dense {
-        --quantic-component-grid-columns: 4;
+        --quantic-internal-grid-columns: 4;
       }
 
       .density--compact {
-        --quantic-component-grid-columns: 3;
+        --quantic-internal-grid-columns: 3;
       }
 
       .density--comfortable {
-        --quantic-component-grid-columns: 2;
+        --quantic-internal-grid-columns: 2;
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Md)}) {
       .density--dense {
-        --quantic-component-grid-columns: 5;
+        --quantic-internal-grid-columns: 5;
       }
 
       .density--compact {
-        --quantic-component-grid-columns: 3;
+        --quantic-internal-grid-columns: 3;
       }
 
       .density--sparse {
-        --quantic-component-grid-columns: 2;
+        --quantic-internal-grid-columns: 2;
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Lg)}) {
       .density--dense {
-        --quantic-component-grid-columns: 6;
+        --quantic-internal-grid-columns: 6;
       }
 
       .density--compact {
-        --quantic-component-grid-columns: 4;
+        --quantic-internal-grid-columns: 4;
       }
 
       .density--comfortable {
-        --quantic-component-grid-columns: 3;
+        --quantic-internal-grid-columns: 3;
       }
 
       .density--sparse {
-        --quantic-component-grid-gap: var(--quantic-spacing-5);
+        --quantic-internal-grid-gap: var(--quantic-spacing-5);
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Xl)}) {
       .density--dense {
-        --quantic-component-grid-columns: 8;
+        --quantic-internal-grid-columns: 8;
       }
 
       .density--compact {
-        --quantic-component-grid-columns: 5;
+        --quantic-internal-grid-columns: 5;
       }
 
       .density--comfortable {
-        --quantic-component-grid-columns: 3;
-        --quantic-component-grid-gap: var(--quantic-spacing-5);
+        --quantic-internal-grid-columns: 3;
+        --quantic-internal-grid-gap: var(--quantic-spacing-5);
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Xxl)}) {
       .density--dense {
-        --quantic-component-grid-columns: 10;
+        --quantic-internal-grid-columns: 10;
       }
 
       .density--compact {
-        --quantic-component-grid-columns: 6;
+        --quantic-internal-grid-columns: 6;
       }
 
       .density--comfortable {
-        --quantic-component-grid-columns: 4;
+        --quantic-internal-grid-columns: 4;
       }
     }
   `;
@@ -6840,14 +7038,8 @@
     }
 
     quantic-grid {
-      --quantic-component-grid-columns: var(
-        --quantic-component-card-group-columns,
-        var(--quantic-component-grid-columns)
-      );
-      --quantic-component-grid-gap: var(
-        --quantic-component-card-group-gap,
-        var(--quantic-component-grid-gap)
-      );
+      --quantic-component-grid-columns: var(--quantic-component-card-group-columns);
+      --quantic-component-grid-gap: var(--quantic-component-card-group-gap);
     }
   `;
     __decorate([
@@ -7094,8 +7286,8 @@
       container-type: inline-size;
       position: relative;
 
-      --quantic-component-card-carousel-gap: var(--quantic-spacing-4);
-      --quantic-component-card-carousel-slides-to-show: 1;
+      --quantic-internal-card-carousel-gap: var(--quantic-spacing-4);
+      --quantic-internal-card-carousel-slides-to-show: 1;
     }
 
     .carousel {
@@ -7105,7 +7297,7 @@
 
     .carousel-container {
       display: flex;
-      gap: var(--quantic-component-card-carousel-gap);
+      gap: var(--quantic-component-card-carousel-gap, var(--quantic-internal-card-carousel-gap));
       overflow-x: auto;
       overflow-y: clip;
       scroll-snap-type: x mandatory;
@@ -7131,10 +7323,10 @@
       flex: 0 0
         calc(
           (
-              100% - var(--quantic-component-card-carousel-gap) *
-                (var(--quantic-component-card-carousel-slides-to-show) - 1)
+              100% - var(--quantic-component-card-carousel-gap, var(--quantic-internal-card-carousel-gap)) *
+                (var(--quantic-component-card-carousel-slides-to-show, var(--quantic-internal-card-carousel-slides-to-show)) - 1)
             ) /
-            var(--quantic-component-card-carousel-slides-to-show)
+            var(--quantic-component-card-carousel-slides-to-show, var(--quantic-internal-card-carousel-slides-to-show))
         );
       min-width: 0;
       scroll-snap-align: start;
@@ -7142,23 +7334,23 @@
     }
 
     .density--dense {
-      --quantic-component-card-carousel-slides-to-show: 2;
-      --quantic-component-card-carousel-gap: var(--quantic-spacing-2);
+      --quantic-internal-card-carousel-slides-to-show: 2;
+      --quantic-internal-card-carousel-gap: var(--quantic-spacing-2);
     }
 
     .density--compact {
-      --quantic-component-card-carousel-slides-to-show: 1;
-      --quantic-component-card-carousel-gap: var(--quantic-spacing-2);
+      --quantic-internal-card-carousel-slides-to-show: 1;
+      --quantic-internal-card-carousel-gap: var(--quantic-spacing-2);
     }
 
     .density--comfortable {
-      --quantic-component-card-carousel-slides-to-show: 1;
-      --quantic-component-card-carousel-gap: var(--quantic-spacing-4);
+      --quantic-internal-card-carousel-slides-to-show: 1;
+      --quantic-internal-card-carousel-gap: var(--quantic-spacing-4);
     }
 
     .density--sparse {
-      --quantic-component-card-carousel-slides-to-show: 1;
-      --quantic-component-card-carousel-gap: var(--quantic-spacing-4);
+      --quantic-internal-card-carousel-slides-to-show: 1;
+      --quantic-internal-card-carousel-gap: var(--quantic-spacing-4);
     }
 
     .density--custom {
@@ -7167,88 +7359,88 @@
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Xs)}) {
       .density--dense {
-        --quantic-component-card-carousel-slides-to-show: 3;
-        --quantic-component-card-carousel-gap: var(--quantic-spacing-3);
+        --quantic-internal-card-carousel-slides-to-show: 3;
+        --quantic-internal-card-carousel-gap: var(--quantic-spacing-3);
       }
 
       .density--compact {
-        --quantic-component-card-carousel-slides-to-show: 2;
-        --quantic-component-card-carousel-gap: var(--quantic-spacing-3);
+        --quantic-internal-card-carousel-slides-to-show: 2;
+        --quantic-internal-card-carousel-gap: var(--quantic-spacing-3);
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Sm)}) {
       .density--dense {
-        --quantic-component-card-carousel-slides-to-show: 4;
+        --quantic-internal-card-carousel-slides-to-show: 4;
       }
 
       .density--compact {
-        --quantic-component-card-carousel-slides-to-show: 3;
+        --quantic-internal-card-carousel-slides-to-show: 3;
       }
 
       .density--comfortable {
-        --quantic-component-card-carousel-slides-to-show: 2;
+        --quantic-internal-card-carousel-slides-to-show: 2;
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Md)}) {
       .density--dense {
-        --quantic-component-card-carousel-slides-to-show: 5;
+        --quantic-internal-card-carousel-slides-to-show: 5;
       }
 
       .density--compact {
-        --quantic-component-card-carousel-slides-to-show: 3;
+        --quantic-internal-card-carousel-slides-to-show: 3;
       }
 
       .density--sparse {
-        --quantic-component-card-carousel-slides-to-show: 2;
+        --quantic-internal-card-carousel-slides-to-show: 2;
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Lg)}) {
       .density--dense {
-        --quantic-component-card-carousel-slides-to-show: 6;
+        --quantic-internal-card-carousel-slides-to-show: 6;
       }
 
       .density--compact {
-        --quantic-component-card-carousel-slides-to-show: 4;
+        --quantic-internal-card-carousel-slides-to-show: 4;
       }
 
       .density--comfortable {
-        --quantic-component-card-carousel-slides-to-show: 3;
+        --quantic-internal-card-carousel-slides-to-show: 3;
       }
 
       .density--sparse {
-        --quantic-component-card-carousel-gap: var(--quantic-spacing-5);
+        --quantic-internal-card-carousel-gap: var(--quantic-spacing-5);
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Xl)}) {
       .density--dense {
-        --quantic-component-card-carousel-slides-to-show: 8;
+        --quantic-internal-card-carousel-slides-to-show: 8;
       }
 
       .density--compact {
-        --quantic-component-card-carousel-slides-to-show: 5;
+        --quantic-internal-card-carousel-slides-to-show: 5;
       }
 
       .density--comfortable {
-        --quantic-component-card-carousel-slides-to-show: 3;
-        --quantic-component-card-carousel-gap: var(--quantic-spacing-5);
+        --quantic-internal-card-carousel-slides-to-show: 3;
+        --quantic-internal-card-carousel-gap: var(--quantic-spacing-5);
       }
     }
 
     @container (min-width: ${r$6(ContainerSizeBreakpoint.Xxl)}) {
       .density--dense {
-        --quantic-component-card-carousel-slides-to-show: 10;
+        --quantic-internal-card-carousel-slides-to-show: 10;
       }
 
       .density--compact {
-        --quantic-component-card-carousel-slides-to-show: 6;
+        --quantic-internal-card-carousel-slides-to-show: 6;
       }
 
       .density--comfortable {
-        --quantic-component-card-carousel-slides-to-show: 4;
+        --quantic-internal-card-carousel-slides-to-show: 4;
       }
     }
 
@@ -7702,15 +7894,15 @@
     :host {
       display: inline-block;
       width: 100%;
-      --quantic-component-code-input-font-size: var(
+      --quantic-internal-code-input-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-code-input-line-height: var(
+      --quantic-internal-code-input-line-height: var(
         --quantic-line-height-body
       );
-      --quantic-component-code-input-padding-block: var(--quantic-spacing-md);
-      --quantic-component-code-input-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-code-input-line-numbers-width: var(
+      --quantic-internal-code-input-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-code-input-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-code-input-line-numbers-width: var(
         --quantic-spacing-6
       );
       --quantic-component-code-input-border-width: 1px;
@@ -7778,59 +7970,59 @@
     }
 
     .main.size--xs {
-      --quantic-component-code-input-font-size: var(
+      --quantic-internal-code-input-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-code-input-line-height: var(
+      --quantic-internal-code-input-line-height: var(
         --quantic-line-height-body-xs
       );
-      --quantic-component-code-input-line-numbers-width: var(
+      --quantic-internal-code-input-line-numbers-width: var(
         --quantic-spacing-5
       );
-      --quantic-component-code-input-padding-block: var(--quantic-spacing-sm);
-      --quantic-component-code-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-code-input-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-code-input-padding-inline: var(--quantic-spacing-2);
     }
 
     .main.size--sm {
-      --quantic-component-code-input-font-size: var(
+      --quantic-internal-code-input-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-code-input-line-height: var(
+      --quantic-internal-code-input-line-height: var(
         --quantic-line-height-body-sm
       );
-      --quantic-component-code-input-line-numbers-width: var(
+      --quantic-internal-code-input-line-numbers-width: var(
         --quantic-spacing-6
       );
-      --quantic-component-code-input-padding-block: var(--quantic-spacing-sm);
-      --quantic-component-code-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-code-input-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-code-input-padding-inline: var(--quantic-spacing-2);
     }
 
     .main.size--md {
-      --quantic-component-code-input-font-size: var(
+      --quantic-internal-code-input-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-code-input-line-height: var(
+      --quantic-internal-code-input-line-height: var(
         --quantic-line-height-body
       );
-      --quantic-component-code-input-line-numbers-width: var(
+      --quantic-internal-code-input-line-numbers-width: var(
         --quantic-spacing-8
       );
-      --quantic-component-code-input-padding-block: var(--quantic-spacing-md);
-      --quantic-component-code-input-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-code-input-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-code-input-padding-inline: var(--quantic-spacing-3);
     }
 
     .main.size--lg {
-      --quantic-component-code-input-font-size: var(
+      --quantic-internal-code-input-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-code-input-line-height: var(
+      --quantic-internal-code-input-line-height: var(
         --quantic-line-height-body
       );
-      --quantic-component-code-input-line-numbers-width: var(
+      --quantic-internal-code-input-line-numbers-width: var(
         --quantic-spacing-10
       );
-      --quantic-component-code-input-padding-block: var(--quantic-spacing-3);
-      --quantic-component-code-input-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-code-input-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-code-input-padding-inline: var(--quantic-spacing-4);
     }
 
     .line-numbers {
@@ -7838,7 +8030,7 @@
       top: 0;
       left: 0;
       bottom: 0;
-      width: var(--quantic-component-code-input-line-numbers-width, 2.5rem);
+      width: var(--quantic-component-code-input-line-numbers-width, var(--quantic-internal-code-input-line-numbers-width, 2.5rem));
       display: flex;
       flex-direction: column;
       align-items: flex-end;
@@ -7847,8 +8039,8 @@
       background-color: var(--quantic-bg-secondary);
       color: var(--quantic-color-gray-dark-mode-600);
       font-family: var(--quantic-font-family-mono);
-      font-size: var(--quantic-component-code-input-font-size);
-      line-height: var(--quantic-component-code-input-line-height);
+      font-size: var(--quantic-component-code-input-font-size, var(--quantic-internal-code-input-font-size));
+      line-height: var(--quantic-component-code-input-line-height, var(--quantic-internal-code-input-line-height));
       user-select: none;
       border-right: 1px solid var(--quantic-color-gray-dark-mode-800);
     }
@@ -7865,11 +8057,11 @@
       background: transparent;
       outline: none;
       color: var(--quantic-text-primary);
-      padding: var(--quantic-component-code-input-padding-block)
-        var(--quantic-component-code-input-padding-inline);
+      padding: var(--quantic-component-code-input-padding-block, var(--quantic-internal-code-input-padding-block))
+        var(--quantic-component-code-input-padding-inline, var(--quantic-internal-code-input-padding-inline));
       font-family: var(--quantic-font-family-mono);
-      font-size: var(--quantic-component-code-input-font-size);
-      line-height: var(--quantic-component-code-input-line-height);
+      font-size: var(--quantic-component-code-input-font-size, var(--quantic-internal-code-input-font-size));
+      line-height: var(--quantic-component-code-input-line-height, var(--quantic-internal-code-input-line-height));
       resize: none;
       overflow-y: auto;
       overflow-x: auto;
@@ -7880,7 +8072,7 @@
 
     .has-line-numbers .textarea {
       --padding-left: calc(
-        var(--quantic-component-code-input-line-numbers-width) + 2em
+        var(--quantic-component-code-input-line-numbers-width, var(--quantic-internal-code-input-line-numbers-width)) + 2em
       );
       padding: var(--quantic-spacing-md) var(--quantic-spacing-3)
         var(--quantic-spacing-md) var(--padding-left);
@@ -8722,33 +8914,33 @@
         quanticElement('quantic-dialog-title')
     ], exports.DialogTitle);
 
+    exports.ActionGroup.ensureDefined();
     exports.DialogActions = class DialogActions extends QuanticElement {
         render() {
             return u$2 `
-      <div class="main">
+      <quantic-action-group aria-label="">
         <slot></slot>
-      </div>
+      </quantic-action-group>
     `;
         }
     };
     exports.DialogActions.meta = {
         tag: 'quantic-dialog-actions',
-        description: 'Footer actions bar sub-component for quantic-dialog. ' +
-            'Lays out action buttons (confirm/cancel) flush to the right.',
+        description: 'Footer actions bar for quantic-dialog. ' +
+            'Lays action buttons out as a quantic-action-group, flush to the right.',
         category: 'feedback',
         slots: { '': { description: 'Action buttons, typically quantic-button elements.' } },
-        relatedTo: ['quantic-dialog', 'quantic-button'],
+        subComponents: ['quantic-action-group'],
+        relatedTo: ['quantic-dialog', 'quantic-button', 'quantic-action-group'],
     };
     exports.DialogActions.styles = i$7 `
     :host {
       display: block;
     }
 
-    .main {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: var(--quantic-spacing-3);
+    quantic-action-group {
+      width: fit-content;
+      margin-inline-start: auto;
     }
   `;
     exports.DialogActions = __decorate([
@@ -10851,9 +11043,9 @@
       --quantic-component-dialog-bg: var(--quantic-bg-primary);
       --quantic-component-dialog-border-color: var(--quantic-border-secondary);
       --quantic-component-dialog-border-radius: var(--quantic-radius-lg);
-      --quantic-component-dialog-padding-inline: var(--quantic-spacing-6);
-      --quantic-component-dialog-padding-block: var(--quantic-spacing-6);
-      --quantic-component-dialog-gap: var(--quantic-spacing-5);
+      --quantic-internal-dialog-padding-inline: var(--quantic-spacing-6);
+      --quantic-internal-dialog-padding-block: var(--quantic-spacing-6);
+      --quantic-internal-dialog-gap: var(--quantic-spacing-5);
       --quantic-component-dialog-max-width-sm: var(--quantic-width-xs);
       --quantic-component-dialog-max-width-md: var(--quantic-width-md);
       --quantic-component-dialog-max-width-lg: var(--quantic-width-lg);
@@ -10888,7 +11080,7 @@
     .main {
       position: relative;
       display: flex;
-      gap: var(--quantic-component-dialog-gap);
+      gap: var(--quantic-component-dialog-gap, var(--quantic-internal-dialog-gap));
       flex-direction: column;
       container-name: box-container;
       container-type: inline-size;
@@ -10899,7 +11091,7 @@
       border-radius: var(--quantic-component-dialog-border-radius);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07);
       box-sizing: border-box;
-      padding-block: var(--quantic-component-dialog-padding-block);
+      padding-block: var(--quantic-component-dialog-padding-block, var(--quantic-internal-dialog-padding-block));
       transform: scale(0.95);
       transition: transform var(--quantic-transition-duration-normal, 0.2s)
         var(--quantic-transition-timing-ease, ease-in-out);
@@ -10911,30 +11103,30 @@
 
     .size--sm {
       max-width: var(--quantic-component-dialog-max-width-sm);
-      --quantic-component-dialog-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-dialog-padding-block: var(--quantic-spacing-4);
-      --quantic-component-dialog-gap: var(--quantic-spacing-3);
+      --quantic-internal-dialog-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-dialog-padding-block: var(--quantic-spacing-4);
+      --quantic-internal-dialog-gap: var(--quantic-spacing-3);
     }
 
     .size--md {
       max-width: var(--quantic-component-dialog-max-width-md);
-      --quantic-component-dialog-padding-inline: var(--quantic-spacing-6);
-      --quantic-component-dialog-padding-block: var(--quantic-spacing-6);
-      --quantic-component-dialog-gap: var(--quantic-spacing-4);
+      --quantic-internal-dialog-padding-inline: var(--quantic-spacing-6);
+      --quantic-internal-dialog-padding-block: var(--quantic-spacing-6);
+      --quantic-internal-dialog-gap: var(--quantic-spacing-4);
     }
 
     .size--lg {
       max-width: var(--quantic-component-dialog-max-width-lg);
-      --quantic-component-dialog-padding-inline: var(--quantic-spacing-6);
-      --quantic-component-dialog-padding-block: var(--quantic-spacing-6);
-      --quantic-component-dialog-gap: var(--quantic-spacing-5);
+      --quantic-internal-dialog-padding-inline: var(--quantic-spacing-6);
+      --quantic-internal-dialog-padding-block: var(--quantic-spacing-6);
+      --quantic-internal-dialog-gap: var(--quantic-spacing-5);
     }
 
     .size--xl {
       max-width: var(--quantic-component-dialog-max-width-xl);
-      --quantic-component-dialog-padding-inline: var(--quantic-spacing-8);
-      --quantic-component-dialog-padding-block: var(--quantic-spacing-8);
-      --quantic-component-dialog-gap: var(--quantic-spacing-6);
+      --quantic-internal-dialog-padding-inline: var(--quantic-spacing-8);
+      --quantic-internal-dialog-padding-block: var(--quantic-spacing-8);
+      --quantic-internal-dialog-gap: var(--quantic-spacing-6);
     }
 
     .close-button {
@@ -10957,7 +11149,7 @@
     .body,
     .footer {
       display: block;
-      padding-inline: var(--quantic-component-dialog-padding-inline);
+      padding-inline: var(--quantic-component-dialog-padding-inline, var(--quantic-internal-dialog-padding-inline));
     }
 
     .body {
@@ -12123,20 +12315,20 @@
       width: 100%;
       padding: var(
           --quantic-component-dropdown-menu-item-padding-block,
-          var(--quantic-spacing-2)
+          var(--quantic-internal-dropdown-menu-item-padding-block, var(--quantic-spacing-2))
         )
         var(
           --quantic-component-dropdown-menu-item-padding-inline,
-          var(--quantic-spacing-3)
+          var(--quantic-internal-dropdown-menu-item-padding-inline, var(--quantic-spacing-3))
         );
       font-family: var(--quantic-font-family-body);
       font-size: var(
         --quantic-component-dropdown-menu-item-font-size,
-        var(--quantic-font-size-body-sm)
+        var(--quantic-internal-dropdown-menu-item-font-size, var(--quantic-font-size-body-sm))
       );
       line-height: var(
         --quantic-component-dropdown-menu-item-line-height,
-        var(--quantic-line-height-body-sm)
+        var(--quantic-internal-dropdown-menu-item-line-height, var(--quantic-line-height-body-sm))
       );
       color: var(--quantic-text-primary);
       background: none;
@@ -12180,76 +12372,76 @@
 
     /* Size variants */
     .size--xs {
-      --quantic-component-dropdown-menu-item-padding-block: var(
+      --quantic-internal-dropdown-menu-item-padding-block: var(
         --quantic-spacing-1
       );
-      --quantic-component-dropdown-menu-item-padding-inline: var(
+      --quantic-internal-dropdown-menu-item-padding-inline: var(
         --quantic-spacing-1-5
       );
-      --quantic-component-dropdown-menu-item-font-size: var(
+      --quantic-internal-dropdown-menu-item-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-dropdown-menu-item-line-height: var(
+      --quantic-internal-dropdown-menu-item-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--sm {
-      --quantic-component-dropdown-menu-item-padding-block: var(
+      --quantic-internal-dropdown-menu-item-padding-block: var(
         --quantic-spacing-1-5
       );
-      --quantic-component-dropdown-menu-item-padding-inline: var(
+      --quantic-internal-dropdown-menu-item-padding-inline: var(
         --quantic-spacing-2
       );
-      --quantic-component-dropdown-menu-item-font-size: var(
+      --quantic-internal-dropdown-menu-item-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-dropdown-menu-item-line-height: var(
+      --quantic-internal-dropdown-menu-item-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--md {
-      --quantic-component-dropdown-menu-item-padding-block: var(
+      --quantic-internal-dropdown-menu-item-padding-block: var(
         --quantic-spacing-2
       );
-      --quantic-component-dropdown-menu-item-padding-inline: var(
+      --quantic-internal-dropdown-menu-item-padding-inline: var(
         --quantic-spacing-3
       );
-      --quantic-component-dropdown-menu-item-font-size: var(
+      --quantic-internal-dropdown-menu-item-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-dropdown-menu-item-line-height: var(
+      --quantic-internal-dropdown-menu-item-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .size--lg {
-      --quantic-component-dropdown-menu-item-padding-block: var(
+      --quantic-internal-dropdown-menu-item-padding-block: var(
         --quantic-spacing-3
       );
-      --quantic-component-dropdown-menu-item-padding-inline: var(
+      --quantic-internal-dropdown-menu-item-padding-inline: var(
         --quantic-spacing-4
       );
-      --quantic-component-dropdown-menu-item-font-size: var(
+      --quantic-internal-dropdown-menu-item-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-dropdown-menu-item-line-height: var(
+      --quantic-internal-dropdown-menu-item-line-height: var(
         --quantic-line-height-body-lg
       );
     }
 
     .size--xl {
-      --quantic-component-dropdown-menu-item-padding-block: var(
+      --quantic-internal-dropdown-menu-item-padding-block: var(
         --quantic-spacing-3
       );
-      --quantic-component-dropdown-menu-item-padding-inline: var(
+      --quantic-internal-dropdown-menu-item-padding-inline: var(
         --quantic-spacing-5
       );
-      --quantic-component-dropdown-menu-item-font-size: var(
+      --quantic-internal-dropdown-menu-item-font-size: var(
         --quantic-font-size-body-xl
       );
-      --quantic-component-dropdown-menu-item-line-height: var(
+      --quantic-internal-dropdown-menu-item-line-height: var(
         --quantic-line-height-body-xl
       );
     }
@@ -12509,25 +12701,25 @@
         display: block;
         font-family: var(--quantic-font-family-body);
 
-        --quantic-component-field-label-font-size: var(
+        --quantic-internal-field-label-font-size: var(
           --quantic-font-size-body-md
         );
-        --quantic-component-field-label-line-height: var(
+        --quantic-internal-field-label-line-height: var(
           --quantic-line-height-body-md
         );
-        --quantic-component-field-hint-font-size: var(
+        --quantic-internal-field-hint-font-size: var(
           --quantic-font-size-body-sm
         );
-        --quantic-component-field-hint-line-height: var(
+        --quantic-internal-field-hint-line-height: var(
           --quantic-line-height-body-sm
         );
-        --quantic-component-field-gap: var(--quantic-spacing-2);
+        --quantic-internal-field-gap: var(--quantic-spacing-2);
       }
 
       .main {
         display: flex;
         flex-direction: column;
-        gap: var(--quantic-component-field-gap);
+        gap: var(--quantic-component-field-gap, var(--quantic-internal-field-gap));
       }
 
       .required-indicator {
@@ -12536,16 +12728,16 @@
       }
 
       .label {
-        font-size: var(--quantic-component-field-label-font-size);
-        line-height: var(--quantic-component-field-label-line-height);
+        font-size: var(--quantic-component-field-label-font-size, var(--quantic-internal-field-label-font-size));
+        line-height: var(--quantic-component-field-label-line-height, var(--quantic-internal-field-label-line-height));
         font-weight: var(--quantic-font-weight-medium);
         color: var(--quantic-text-primary);
       }
 
       .hint,
       .message {
-        font-size: var(--quantic-component-field-hint-font-size);
-        line-height: var(--quantic-component-field-hint-line-height);
+        font-size: var(--quantic-component-field-hint-font-size, var(--quantic-internal-field-hint-font-size));
+        line-height: var(--quantic-component-field-hint-line-height, var(--quantic-internal-field-hint-line-height));
         color: var(--quantic-text-secondary);
       }
 
@@ -12555,74 +12747,74 @@
       }
 
       .size--xs {
-        --quantic-component-field-label-font-size: var(
+        --quantic-internal-field-label-font-size: var(
           --quantic-font-size-body-xs
         );
-        --quantic-component-field-label-line-height: var(
+        --quantic-internal-field-label-line-height: var(
           --quantic-line-height-body-xs
         );
-        --quantic-component-field-hint-font-size: var(
+        --quantic-internal-field-hint-font-size: var(
           --quantic-font-size-body-xs
         );
-        --quantic-component-field-hint-line-height: var(
+        --quantic-internal-field-hint-line-height: var(
           --quantic-line-height-body-xs
         );
-        --quantic-component-field-gap: var(--quantic-spacing-1-5);
+        --quantic-internal-field-gap: var(--quantic-spacing-1-5);
       }
 
       .size--sm {
-        --quantic-component-field-label-font-size: var(
+        --quantic-internal-field-label-font-size: var(
           --quantic-font-size-body-sm
         );
-        --quantic-component-field-label-line-height: var(
+        --quantic-internal-field-label-line-height: var(
           --quantic-line-height-body-sm
         );
-        --quantic-component-field-hint-font-size: var(
+        --quantic-internal-field-hint-font-size: var(
           --quantic-font-size-body-xs
         );
-        --quantic-component-field-hint-line-height: var(
+        --quantic-internal-field-hint-line-height: var(
           --quantic-line-height-body-xs
         );
-        --quantic-component-field-gap: var(--quantic-spacing-2);
+        --quantic-internal-field-gap: var(--quantic-spacing-2);
       }
 
       .size--md {
-        --quantic-component-field-label-font-size: var(
+        --quantic-internal-field-label-font-size: var(
           --quantic-font-size-body-md
         );
-        --quantic-component-field-label-line-height: var(
+        --quantic-internal-field-label-line-height: var(
           --quantic-line-height-body-md
         );
-        --quantic-component-field-hint-font-size: var(
+        --quantic-internal-field-hint-font-size: var(
           --quantic-font-size-body-sm
         );
-        --quantic-component-field-hint-line-height: var(
+        --quantic-internal-field-hint-line-height: var(
           --quantic-line-height-body-sm
         );
-        --quantic-component-field-gap: var(--quantic-spacing-2);
+        --quantic-internal-field-gap: var(--quantic-spacing-2);
       }
 
       .size--lg {
-        --quantic-component-field-label-font-size: var(
+        --quantic-internal-field-label-font-size: var(
           --quantic-font-size-body-lg
         );
-        --quantic-component-field-label-line-height: var(
+        --quantic-internal-field-label-line-height: var(
           --quantic-line-height-body-lg
         );
-        --quantic-component-field-hint-font-size: var(
+        --quantic-internal-field-hint-font-size: var(
           --quantic-font-size-body-md
         );
-        --quantic-component-field-hint-line-height: var(
+        --quantic-internal-field-hint-line-height: var(
           --quantic-line-height-body-md
         );
-        --quantic-component-field-gap: var(--quantic-spacing-2);
+        --quantic-internal-field-gap: var(--quantic-spacing-2);
       }
 
       .control {
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: var(--quantic-component-field-gap);
+        gap: var(--quantic-component-field-gap, var(--quantic-internal-field-gap));
       }
 
       .message--state-error {
@@ -12727,34 +12919,34 @@
       display: block;
       font-family: var(--quantic-font-family-body);
 
-      --quantic-component-field-group-gap: var(--quantic-spacing-4);
-      --quantic-component-field-group-grid-max-size: 300px;
+      --quantic-internal-field-group-gap: var(--quantic-spacing-4);
+      --quantic-internal-field-group-grid-max-size: 300px;
     }
 
     .field-group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-component-field-group-gap);
+      gap: var(--quantic-component-field-group-gap, var(--quantic-internal-field-group-gap));
     }
 
     .size--xs {
-      --quantic-component-field-group-gap: var(--quantic-spacing-1);
-      --quantic-component-field-group-grid-max-size: 180px;
+      --quantic-internal-field-group-gap: var(--quantic-spacing-1);
+      --quantic-internal-field-group-grid-max-size: 180px;
     }
 
     .size--sm {
-      --quantic-component-field-group-gap: var(--quantic-spacing-2);
-      --quantic-component-field-group-grid-max-size: 240px;
+      --quantic-internal-field-group-gap: var(--quantic-spacing-2);
+      --quantic-internal-field-group-grid-max-size: 240px;
     }
 
     .size--md {
-      --quantic-component-field-group-gap: var(--quantic-spacing-4);
-      --quantic-component-field-group-grid-max-size: 300px;
+      --quantic-internal-field-group-gap: var(--quantic-spacing-4);
+      --quantic-internal-field-group-grid-max-size: 300px;
     }
 
     .size--lg {
-      --quantic-component-field-group-gap: var(--quantic-spacing-6);
-      --quantic-component-field-group-grid-max-size: 360px;
+      --quantic-internal-field-group-gap: var(--quantic-spacing-6);
+      --quantic-internal-field-group-grid-max-size: 360px;
     }
 
     .layout--grid {
@@ -12762,7 +12954,7 @@
       grid-template-columns: repeat(
         var(--quantic-component-field-group-columns, auto-fit),
         minmax(
-          min(var(--quantic-component-field-group-grid-max-size), 100%),
+          min(var(--quantic-component-field-group-grid-max-size, var(--quantic-internal-field-group-grid-max-size)), 100%),
           1fr
         )
       );
@@ -12770,7 +12962,7 @@
 
     .layout--grid.fixed-columns {
       grid-template-columns: repeat(
-        var(--quantic-component-field-group-columns),
+        var(--quantic-component-field-group-columns, 1),
         minmax(0, 1fr)
       );
     }
@@ -13194,8 +13386,8 @@
       display: inline-block;
       width: 100%;
 
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-md);
       --quantic-component-text-input-bg: var(--quantic-bg-primary);
       --quantic-component-text-input-color: var(--quantic-text-primary);
     }
@@ -13212,8 +13404,8 @@
       border-radius: var(--quantic-component-text-input-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-component-text-input-color);
       background-color: var(--quantic-component-text-input-bg);
-      padding: var(--quantic-component-text-input-padding-block)
-        var(--quantic-component-text-input-padding-inline);
+      padding: var(--quantic-component-text-input-padding-block, var(--quantic-internal-text-input-padding-block))
+        var(--quantic-component-text-input-padding-inline, var(--quantic-internal-text-input-padding-inline));
       transition:
         border-color 0.2s ease-in-out,
         box-shadow 0.2s ease-in-out;
@@ -13233,14 +13425,14 @@
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -13249,8 +13441,8 @@
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-3);
     }
 
     .input {
@@ -13575,9 +13767,9 @@
       border-radius: var(--quantic-component-select-border-radius, var(--quantic-radius-sm));
       padding: var(
           --quantic-component-select-padding-block,
-          var(--quantic-spacing-md)
+          var(--quantic-internal-select-padding-block, var(--quantic-spacing-md))
         )
-        var(--quantic-component-select-padding-inline, var(--quantic-spacing-3));
+        var(--quantic-component-select-padding-inline, var(--quantic-internal-select-padding-inline, var(--quantic-spacing-3)));
       font-size: var(
         --quantic-component-select-font-size,
         var(--quantic-font-size-body-md)
@@ -13604,14 +13796,14 @@
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-select-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-select-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-select-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-select-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-select-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-select-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-select-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-select-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -13620,8 +13812,8 @@
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-select-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-select-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-select-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-select-padding-block: var(--quantic-spacing-3);
     }
 
     select {
@@ -14764,78 +14956,78 @@
       display: block;
       font-family: var(--quantic-font-family-body);
 
-      --quantic-component-fieldset-legend-font-size: var(
+      --quantic-internal-fieldset-legend-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-fieldset-legend-line-height: var(
+      --quantic-internal-fieldset-legend-line-height: var(
         --quantic-line-height-body-md
       );
-      --quantic-component-fieldset-padding: var(--quantic-spacing-5);
-      --quantic-component-fieldset-border: 1px solid
+      --quantic-internal-fieldset-padding: var(--quantic-spacing-5);
+      --quantic-internal-fieldset-border: 1px solid
         var(--quantic-border-secondary);
-      --quantic-component-fieldset-gap: var(--quantic-spacing-4);
+      --quantic-internal-fieldset-gap: var(--quantic-spacing-4);
       --quantic-component-fieldset-border-radius: var(--quantic-radius-md);
     }
 
     .fieldset {
-      border: var(--quantic-component-fieldset-border);
+      border: var(--quantic-component-fieldset-border, var(--quantic-internal-fieldset-border));
       border-radius: var(--quantic-component-fieldset-border-radius);
-      padding: var(--quantic-component-fieldset-padding);
+      padding: var(--quantic-component-fieldset-padding, var(--quantic-internal-fieldset-padding));
       padding-bottom: calc(
-        var(--quantic-component-fieldset-padding) +
-          var(--quantic-component-fieldset-gap) / 2
+        var(--quantic-component-fieldset-padding, var(--quantic-internal-fieldset-padding)) +
+          var(--quantic-component-fieldset-gap, var(--quantic-internal-fieldset-gap)) / 2
       );
       margin: 0;
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-component-fieldset-gap);
+      gap: var(--quantic-component-fieldset-gap, var(--quantic-internal-fieldset-gap));
     }
 
     .size--sm {
-      --quantic-component-fieldset-padding: var(--quantic-spacing-3);
-      --quantic-component-fieldset-gap: var(--quantic-spacing-2);
-      --quantic-component-fieldset-legend-font-size: var(
+      --quantic-internal-fieldset-padding: var(--quantic-spacing-3);
+      --quantic-internal-fieldset-gap: var(--quantic-spacing-2);
+      --quantic-internal-fieldset-legend-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-fieldset-legend-line-height: var(
+      --quantic-internal-fieldset-legend-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--md {
-      --quantic-component-fieldset-padding: var(--quantic-spacing-5);
-      --quantic-component-fieldset-gap: var(--quantic-spacing-4);
-      --quantic-component-fieldset-legend-font-size: var(
+      --quantic-internal-fieldset-padding: var(--quantic-spacing-5);
+      --quantic-internal-fieldset-gap: var(--quantic-spacing-4);
+      --quantic-internal-fieldset-legend-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-fieldset-legend-line-height: var(
+      --quantic-internal-fieldset-legend-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .size--lg {
-      --quantic-component-fieldset-padding: var(--quantic-spacing-6);
-      --quantic-component-fieldset-gap: var(--quantic-spacing-5);
-      --quantic-component-fieldset-legend-font-size: var(
+      --quantic-internal-fieldset-padding: var(--quantic-spacing-6);
+      --quantic-internal-fieldset-gap: var(--quantic-spacing-5);
+      --quantic-internal-fieldset-legend-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-fieldset-legend-line-height: var(
+      --quantic-internal-fieldset-legend-line-height: var(
         --quantic-line-height-body-lg
       );
     }
 
     .variant--bare {
-      --quantic-component-fieldset-padding: 0;
-      --quantic-component-fieldset-border: none;
+      --quantic-internal-fieldset-padding: 0;
+      --quantic-internal-fieldset-border: none;
     }
 
     .header {
       display: flex;
       flex-direction: column;
       gap: var(--quantic-spacing-1);
-      font-size: var(--quantic-component-fieldset-legend-font-size);
-      line-height: var(--quantic-component-fieldset-legend-line-height);
-      margin-bottom: var(--quantic-component-fieldset-gap);
+      font-size: var(--quantic-component-fieldset-legend-font-size, var(--quantic-internal-fieldset-legend-font-size));
+      line-height: var(--quantic-component-fieldset-legend-line-height, var(--quantic-internal-fieldset-legend-line-height));
+      margin-bottom: var(--quantic-component-fieldset-gap, var(--quantic-internal-fieldset-gap));
     }
 
     .legend {
@@ -63226,8 +63418,8 @@
       display: inline-block;
       width: 100%;
 
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-number-input-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-number-input-padding-block: var(--quantic-spacing-md);
       --quantic-component-number-input-bg: var(--quantic-bg-primary);
       --quantic-component-number-input-color: var(--quantic-text-primary);
     }
@@ -63244,12 +63436,13 @@
       border-radius: var(--quantic-component-number-input-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-component-number-input-color);
       background-color: var(--quantic-component-number-input-bg);
-      padding-block: var(--quantic-component-number-input-padding-block);
+      padding-block: var(--quantic-component-number-input-padding-block, var(--quantic-internal-number-input-padding-block));
       padding-inline-start: var(
-        --quantic-component-number-input-padding-inline
-        );
+        --quantic-component-number-input-padding-inline,
+        var(--quantic-internal-number-input-padding-inline)
+      );
       padding-inline-end: calc(
-        var(--quantic-component-number-input-padding-inline) + var(--quantic-spacing-6)
+        var(--quantic-component-number-input-padding-inline, var(--quantic-internal-number-input-padding-inline)) + var(--quantic-spacing-6)
       );
       transition:
         border-color 0.2s ease-in-out,
@@ -63270,30 +63463,30 @@
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-number-input-padding-block: var(
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-number-input-padding-block: var(
         --quantic-spacing-xxs
       );
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-3);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-3);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-number-input-padding-block: var(--quantic-spacing-sm);
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-4);
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-number-input-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-4);
     }
 
     .main.size--md {
       font-size: var(--quantic-font-size-body-md);
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-4);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-4);
     }
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-number-input-padding-block: var(--quantic-spacing-3);
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-5);
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-number-input-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-5);
     }
 
     .input {
@@ -63349,7 +63542,7 @@
 
     quantic-icon-lucide-chevron-up,
     quantic-icon-lucide-chevron-down {
-      --icon-size: var(--quantic-component-number-input-icon-size);
+      --icon-size: var(--quantic-component-number-input-icon-size, var(--quantic-internal-number-input-icon-size));
     }
 
     slot[name='prefix'] {
@@ -63779,7 +63972,7 @@
       display: flex;
       height: 100%;
       flex-direction: column;
-      color: var(--quantic-component-log-output-fg);
+      color: var(--quantic-component-log-output-fg, inherit);
       font-family: var(
         --quantic-component-log-output-font-family,
         var(--quantic-font-family-mono)
@@ -64050,6 +64243,7 @@
       font-size: var(--quantic-font-size-body-lg);
       color: var(--quantic-component-navbar-menu-item-color);
       background: none;
+      background-color: var(--quantic-component-navbar-menu-item-bg);
       border: none;
       cursor: pointer;
       border-radius: var(--quantic-radius-md);
@@ -64557,6 +64751,7 @@
       );
       padding-inline: var(--quantic-component-layout-aside-padding-inline);
       padding-block: var(--quantic-component-layout-aside-padding-block);
+      background-color: var(--quantic-component-layout-aside-bg);
       border-right: 1px solid var(--quantic-component-layout-aside-border);
       overflow: visible;
       display: none;
@@ -65188,7 +65383,6 @@
       --quantic-component-tooltip-font-size: var(--quantic-font-size-body-sm);
       --quantic-component-tooltip-line-height: var(--quantic-line-height-body-sm);
       --quantic-component-tooltip-z-index: 9999;
-      --quantic-component-tooltip-offset: 20px;
       --quantic-component-tooltip-arrow-size: var(--quantic-spacing-2);
     }
 
@@ -65329,6 +65523,7 @@
       font-weight: var(--quantic-font-weight-medium);
       color: var(--quantic-component-sidebar-menu-item-color);
       background: none;
+      background-color: var(--quantic-component-sidebar-menu-item-bg);
       border: none;
       text-align: left;
       cursor: pointer;
@@ -65910,13 +66105,13 @@
       font-family: var(--quantic-font-family-body);
       color: var(--quantic-text-secondary);
 
-      --quantic-component-option-card-padding: var(--quantic-spacing-5);
-      --quantic-component-option-card-radius: var(--quantic-radius-md);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-3);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-5);
+      --quantic-internal-option-card-radius: var(--quantic-radius-md);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-3);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-md
       );
     }
@@ -65925,13 +66120,13 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-component-option-card-spacing);
-      padding: var(--quantic-component-option-card-padding);
-      border-radius: var(--quantic-component-option-card-radius);
+      gap: var(--quantic-component-option-card-spacing, var(--quantic-internal-option-card-spacing));
+      padding: var(--quantic-component-option-card-padding, var(--quantic-internal-option-card-padding));
+      border-radius: var(--quantic-component-option-card-radius, var(--quantic-internal-option-card-radius));
       border: 2px solid var(--quantic-border-secondary);
       background-color: transparent;
-      font-size: var(--quantic-component-option-card-font-size);
-      line-height: var(--quantic-component-option-card-line-height);
+      font-size: var(--quantic-component-option-card-font-size, var(--quantic-internal-option-card-font-size));
+      line-height: var(--quantic-component-option-card-line-height, var(--quantic-internal-option-card-line-height));
       cursor: pointer;
       user-select: none;
       transition:
@@ -65949,37 +66144,37 @@
 
     /* Size variants */
     .size--sm {
-      --quantic-component-option-card-padding: var(--quantic-spacing-4);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-2);
-      --quantic-component-option-card-radius: var(--quantic-radius-sm);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-4);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-2);
+      --quantic-internal-option-card-radius: var(--quantic-radius-sm);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--md {
-      --quantic-component-option-card-padding: var(--quantic-spacing-5);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-3);
-      --quantic-component-option-card-radius: var(--quantic-radius-md);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-5);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-3);
+      --quantic-internal-option-card-radius: var(--quantic-radius-md);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .size--lg {
-      --quantic-component-option-card-padding: var(--quantic-spacing-6);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-4);
-      --quantic-component-option-card-radius: var(--quantic-radius-lg);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-6);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-4);
+      --quantic-internal-option-card-radius: var(--quantic-radius-lg);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-lg
       );
     }
@@ -66029,7 +66224,7 @@
       position: absolute;
       inset: 0;
       opacity: 0;
-      border-radius: calc(var(--quantic-component-option-card-radius) + 4px);
+      border-radius: calc(var(--quantic-component-option-card-radius, var(--quantic-internal-option-card-radius)) + 4px);
       border: 2px solid transparent;
       transition: all 0.2s ease-in-out;
       pointer-events: none;
@@ -66053,7 +66248,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      gap: var(--quantic-component-option-card-spacing);
+      gap: var(--quantic-component-option-card-spacing, var(--quantic-internal-option-card-spacing));
     }
 
     .indicator {
@@ -66729,7 +66924,7 @@
       font-family: var(--quantic-font-family-body);
       color: var(--quantic-text-secondary);
 
-      --quantic-component-panel-padding: var(--quantic-spacing-6);
+      --quantic-internal-panel-padding: var(--quantic-spacing-6);
       --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);
@@ -66741,7 +66936,7 @@
       display: flex;
       flex-direction: column;
       gap: var(--quantic-component-panel-spacing);
-      padding: var(--quantic-component-panel-padding);
+      padding: var(--quantic-component-panel-padding, var(--quantic-internal-panel-padding));
       border-radius: var(--quantic-component-panel-radius);
       border: 1px solid var(--quantic-border-primary);
       font-size: var(--quantic-component-panel-font-size);
@@ -66763,7 +66958,7 @@
     .variant--ghost {
       background-color: transparent;
       border: none;
-      --quantic-component-panel-padding: 0;
+      --quantic-internal-panel-padding: 0;
     }
 
     .highlighted {
@@ -66959,31 +67154,34 @@
     .group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-component-panel-group-gap, var(--quantic-spacing-6));
+      gap: var(
+        --quantic-component-panel-group-gap,
+        var(--quantic-internal-panel-group-gap, var(--quantic-spacing-6))
+      );
     }
 
     .gap--none {
-      --quantic-component-panel-group-gap: 0;
+      --quantic-internal-panel-group-gap: 0;
     }
 
     .gap--xs {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-3);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-3);
     }
 
     .gap--sm {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-4);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-4);
     }
 
     .gap--md {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-6);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-6);
     }
 
     .gap--lg {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-8);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-8);
     }
 
     .gap--xl {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-12);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-12);
     }
   `;
     __decorate([
@@ -67083,37 +67281,37 @@
       overflow: hidden;
       border-radius: var(--quantic-radius-full);
       background-color: var(--quantic-color-gray-dark-mode-700);
-      height: var(--quantic-component-progress-height, 4px);
+      height: var(--quantic-component-progress-height, var(--quantic-internal-progress-height, 4px));
     }
 
     .size--xs {
-      --quantic-component-progress-height: 2px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-xs);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 2px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-xs);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--sm {
-      --quantic-component-progress-height: 4px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 4px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--md {
-      --quantic-component-progress-height: 6px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-md);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 6px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-md);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .size--lg {
-      --quantic-component-progress-height: 8px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 8px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-lg);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-lg
       );
     }
@@ -67141,11 +67339,11 @@
       flex-shrink: 0;
       font-size: var(
         --quantic-component-progress-font-size,
-        var(--quantic-font-size-body-sm)
+        var(--quantic-internal-progress-font-size, var(--quantic-font-size-body-sm))
       );
       line-height: var(
         --quantic-component-progress-line-height,
-        var(--quantic-line-height-body-sm)
+        var(--quantic-internal-progress-line-height, var(--quantic-line-height-body-sm))
       );
       font-family: var(--quantic-font-family-body);
       color: var(--quantic-text-secondary);
@@ -67436,7 +67634,11 @@
       width: 24px;
       height: 24px;
       border-radius: 50%;
-      border: 3px solid var(--quantic-component-spinner-color, currentColor);
+      border: 3px solid
+        var(
+          --quantic-component-spinner-color,
+          var(--quantic-internal-spinner-color, currentColor)
+        );
       border-top-color: transparent;
     }
 
@@ -67468,10 +67670,10 @@
       border-width: 0;
     }
 
-    ${r$6(generateColorStyles((color) => `--quantic-component-spinner-color: var(--quantic-utility-${color}-500);`))}
+    ${r$6(generateColorStyles((color) => `--quantic-internal-spinner-color: var(--quantic-utility-${color}-500);`))}
 
     .color--brand {
-      --quantic-component-spinner-color: var(--quantic-fg-brand-primary);
+      --quantic-internal-spinner-color: var(--quantic-fg-brand-primary);
     }
 
     @keyframes spin {
@@ -68253,11 +68455,11 @@
       display: block;
       width: fit-content;
       font-family: var(--quantic-font-family-body);
-      font-size: var(--quantic-component-table-font-size);
+      font-size: var(--quantic-component-table-font-size, var(--quantic-internal-table-font-size));
       overflow-x: auto;
 
-      --quantic-component-table-padding: var(--quantic-spacing-3);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-table-padding: var(--quantic-spacing-3);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-sm);
       --quantic-component-table-color: var(--quantic-text-secondary);
       --quantic-component-table-header-color: var(--quantic-text-secondary);
       --quantic-component-table-border-color: var(--quantic-border-secondary);
@@ -68274,46 +68476,46 @@
 
     /* Size */
     :host([size='xs']) {
-      --quantic-component-table-padding: var(--quantic-spacing-3);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-xs);
+      --quantic-internal-table-padding: var(--quantic-spacing-3);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-xs);
     }
 
     :host([size='sm']) {
-      --quantic-component-table-padding: var(--quantic-spacing-4);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-table-padding: var(--quantic-spacing-4);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-sm);
     }
 
     :host([size='md']) {
-      --quantic-component-table-padding: var(--quantic-spacing-5);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-md);
+      --quantic-internal-table-padding: var(--quantic-spacing-5);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-md);
     }
 
     :host([size='lg']) {
-      --quantic-component-table-padding: var(--quantic-spacing-6);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-md);
+      --quantic-internal-table-padding: var(--quantic-spacing-6);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-md);
     }
 
     /* Dense variants - relative to size */
     :host([dense][size='xs']) {
-      --quantic-component-table-padding: var(--quantic-spacing-1-5);
+      --quantic-internal-table-padding: var(--quantic-spacing-1-5);
     }
 
     :host([dense][size='sm']) {
-      --quantic-component-table-padding: var(--quantic-spacing-2);
+      --quantic-internal-table-padding: var(--quantic-spacing-2);
     }
 
     :host([dense][size='md']) {
-      --quantic-component-table-padding: var(--quantic-spacing-2);
+      --quantic-internal-table-padding: var(--quantic-spacing-2);
     }
 
     :host([dense][size='lg']) {
-      --quantic-component-table-padding: var(--quantic-spacing-3);
+      --quantic-internal-table-padding: var(--quantic-spacing-3);
     }
 
     .toolbar,
     .controls {
       display: block;
-      padding: var(--quantic-component-table-padding);
+      padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
     }
 
     .toolbar {
@@ -68511,7 +68713,7 @@
     exports.TableHead.styles = i$7 `
     :host {
       display: table-cell;
-      padding: var(--quantic-component-table-padding);
+      padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
       font-weight: var(--quantic-font-weight-semibold);
       color: var(--quantic-component-table-header-color);
       border-bottom: 1px solid var(--quantic-component-table-border-color);
@@ -68733,8 +68935,8 @@
     exports.TableCell.styles = i$7 `
     :host {
       display: table-cell;
-      padding: var(--quantic-component-table-padding);
-      font-size: var(--quantic-component-table-font-size);
+      padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
+      font-size: var(--quantic-component-table-font-size, var(--quantic-internal-table-font-size));
       color: var(--quantic-component-table-color);
       vertical-align: middle;
       text-align: var(--cell-align, left);
@@ -69848,6 +70050,59 @@
         quanticElement('quantic-count-tag')
     ], exports.CountTag);
 
+    exports.TagGroup = class TagGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.ariaLabel = null;
+        }
+        render() {
+            return b `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.TagGroup.meta = {
+        tag: 'quantic-tag-group',
+        description: 'A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. ' +
+            'Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. ' +
+            'Use quantic-badge-group for badges.',
+        category: 'display',
+        slots: {
+            '': {
+                description: 'quantic-tag, quantic-status-tag or quantic-count-tag elements.',
+            },
+        },
+        subComponents: ['quantic-tag', 'quantic-status-tag', 'quantic-count-tag'],
+        relatedTo: ['quantic-tag', 'quantic-badge-group'],
+    };
+    exports.TagGroup.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-tag-group-gap,
+        var(--quantic-spacing-1)
+      );
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            attribute: 'aria-label',
+            description: 'Accessible name for the group.',
+        })
+    ], exports.TagGroup.prototype, "ariaLabel", void 0);
+    exports.TagGroup = __decorate([
+        quanticElement('quantic-tag-group')
+    ], exports.TagGroup);
+
     const TextVariant = {
         Body: 'body',
         Display: 'display',
@@ -70035,8 +70290,8 @@
       display: inline-block;
       width: 100%;
 
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-md);
       --quantic-component-textarea-bg: var(--quantic-bg-primary);
       --quantic-component-textarea-color: var(--quantic-text-primary);
     }
@@ -70051,8 +70306,8 @@
       border-radius: var(--quantic-component-textarea-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-component-textarea-color);
       background-color: var(--quantic-component-textarea-bg);
-      padding: var(--quantic-component-textarea-padding-block)
-        var(--quantic-component-textarea-padding-inline);
+      padding: var(--quantic-component-textarea-padding-block, var(--quantic-internal-textarea-padding-block))
+        var(--quantic-component-textarea-padding-inline, var(--quantic-internal-textarea-padding-inline));
       transition:
         border-color 0.2s ease-in-out,
         box-shadow 0.2s ease-in-out;
@@ -70072,14 +70327,14 @@
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -70088,8 +70343,8 @@
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-3);
     }
 
     .input {