@ctrliq/quantic-components 1.83.0 → 1.84.1

package/dist/dialog/dialog-actions.js

@@ -6,34 +6,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css } from 'lit';
 import { html } from 'lit/static-html.js';
+import { ActionGroup } from '../action-group/action-group.component';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
+ActionGroup.ensureDefined();
 let DialogActions = class DialogActions extends QuanticElement {
     render() {
         return html `
-      <div class="main">
+      <quantic-action-group aria-label="">
         <slot></slot>
-      </div>
+      </quantic-action-group>
     `;
     }
 };
 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'],
 };
 DialogActions.styles = css `
     :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;
     }
   `;
 DialogActions = __decorate([

package/dist/dialog/dialog.js

@@ -312,9 +312,9 @@ Dialog.styles = css `
       --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);
@@ -349,7 +349,7 @@ Dialog.styles = css `
     .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;
@@ -360,7 +360,7 @@ Dialog.styles = css `
       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);
@@ -372,30 +372,30 @@ Dialog.styles = css `
 
     .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 {
@@ -418,7 +418,7 @@ Dialog.styles = css `
     .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 {

package/dist/dropdown-menu/item.component.js

@@ -108,20 +108,20 @@ DropdownMenuItem.styles = css `
       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;
@@ -165,76 +165,76 @@ DropdownMenuItem.styles = css `
 
     /* 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
       );
     }

package/dist/field/field-group.component.js

@@ -55,34 +55,34 @@ FieldGroup.styles = css `
       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 {
@@ -90,7 +90,7 @@ FieldGroup.styles = css `
       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
         )
       );
@@ -98,7 +98,7 @@ FieldGroup.styles = css `
 
     .layout--grid.fixed-columns {
       grid-template-columns: repeat(
-        var(--quantic-component-field-group-columns),
+        var(--quantic-component-field-group-columns, 1),
         minmax(0, 1fr)
       );
     }

package/dist/field/field.component.js

@@ -90,25 +90,25 @@ Field.styles = [
         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 {
@@ -117,16 +117,16 @@ Field.styles = [
       }
 
       .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);
       }
 
@@ -136,74 +136,74 @@ Field.styles = [
       }
 
       .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 {

package/dist/fieldset/fieldset.component.js

@@ -60,78 +60,78 @@ Fieldset.styles = css `
       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 {