@ctrliq/quantic-components 1.84.0 → 1.85.0

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;
@@ -5761,7 +5761,7 @@
         }
         render() {
             return b `
-      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
+      <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
         <slot></slot>
       </div>
     `;
@@ -5771,6 +5771,7 @@
         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. ' +
+            'Layout: ::part(group), for a column or a different alignment. ' +
             'Use quantic-tag-group for tags.',
         category: 'display',
         slots: {
@@ -5888,77 +5889,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 {
@@ -6003,7 +6004,7 @@
         }
         render() {
             return b `
-      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
+      <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
         <slot></slot>
       </div>
     `;
@@ -6014,6 +6015,7 @@
         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. ' +
+            'Layout: ::part(group), for a column or a different alignment. ' +
             'Use quantic-button-bar when the buttons should read as one joined control.',
         category: 'action',
         slots: {
@@ -6606,13 +6608,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,
@@ -6633,16 +6635,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;
       }
@@ -6663,60 +6665,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);
         }
       }
 
@@ -6727,11 +6729,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;
       }
 
@@ -6740,7 +6742,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;
@@ -6793,7 +6795,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
           );
         }
@@ -6886,9 +6888,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;
@@ -6899,109 +6901,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;
       }
     }
   `;
@@ -7038,14 +7040,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([
@@ -7292,8 +7288,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 {
@@ -7303,7 +7299,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;
@@ -7329,10 +7325,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;
@@ -7340,23 +7336,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 {
@@ -7365,88 +7361,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;
       }
     }
 
@@ -7900,15 +7896,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;
@@ -7976,59 +7972,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 {
@@ -8036,7 +8032,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;
@@ -8045,8 +8041,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);
     }
@@ -8063,11 +8059,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;
@@ -8078,7 +8074,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);
@@ -11049,9 +11045,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);
@@ -11086,7 +11082,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;
@@ -11097,7 +11093,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);
@@ -11109,30 +11105,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 {
@@ -11155,7 +11151,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 {
@@ -12321,20 +12317,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;
@@ -12378,76 +12374,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
       );
     }
@@ -12707,25 +12703,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 {
@@ -12734,16 +12730,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);
       }
 
@@ -12753,74 +12749,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 {
@@ -12925,34 +12921,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 {
@@ -12960,7 +12956,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
         )
       );
@@ -12968,7 +12964,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)
       );
     }
@@ -13392,8 +13388,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);
     }
@@ -13410,8 +13406,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;
@@ -13431,14 +13427,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 {
@@ -13447,8 +13443,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 {
@@ -13773,9 +13769,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)
@@ -13802,14 +13798,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 {
@@ -13818,8 +13814,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 {
@@ -14962,78 +14958,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 {
@@ -63424,8 +63420,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);
     }
@@ -63442,12 +63438,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,
@@ -63468,30 +63465,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 {
@@ -63547,7 +63544,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'] {
@@ -63977,7 +63974,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)
@@ -64248,6 +64245,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);
@@ -64755,6 +64753,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;
@@ -65386,7 +65385,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);
     }
 
@@ -65527,6 +65525,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;
@@ -66108,13 +66107,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
       );
     }
@@ -66123,13 +66122,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:
@@ -66147,37 +66146,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
       );
     }
@@ -66227,7 +66226,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;
@@ -66251,7 +66250,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 {
@@ -66927,7 +66926,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);
@@ -66939,7 +66938,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);
@@ -66961,7 +66960,7 @@
     .variant--ghost {
       background-color: transparent;
       border: none;
-      --quantic-component-panel-padding: 0;
+      --quantic-internal-panel-padding: 0;
     }
 
     .highlighted {
@@ -67157,31 +67156,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([
@@ -67281,37 +67283,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
       );
     }
@@ -67339,11 +67341,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);
@@ -67634,7 +67636,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;
     }
 
@@ -67666,10 +67672,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 {
@@ -68451,11 +68457,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);
@@ -68472,46 +68478,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 {
@@ -68709,7 +68715,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);
@@ -68931,8 +68937,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);
@@ -70053,7 +70059,7 @@
         }
         render() {
             return b `
-      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
+      <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
         <slot></slot>
       </div>
     `;
@@ -70063,6 +70069,7 @@
         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. ' +
+            'Layout: ::part(group), for a column or a different alignment. ' +
             'Use quantic-badge-group for badges.',
         category: 'display',
         slots: {
@@ -70286,8 +70293,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);
     }
@@ -70302,8 +70309,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;
@@ -70323,14 +70330,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 {
@@ -70339,8 +70346,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 {