@ctrliq/quantic-components 1.68.0 → 1.68.1

package/dist/option-card/option-card.component.js

@@ -139,12 +139,12 @@ let OptionCard = class OptionCard extends AutoHideEmptySlotsMixin(QuanticElement
         @blur=${this.forwardNative}
         @input=${this.forwardNative}
       />
-      <label for=${inputId} class=${labelClasses}>
+      <label for=${inputId} class=${labelClasses} part="label">
         <div class="content">
           <slot name="icon" class="icon"></slot>
           <!-- main slot -->
           <slot class="body"></slot>
-          <div class="indicator" aria-hidden="true">
+          <div class="indicator" part="indicator" aria-hidden="true">
             ${isRadio
             ? html `<div class="visual-radio"></div>`
             : html `<div class="visual-checkbox">
@@ -319,7 +319,7 @@ OptionCard.styles = css `
       pointer-events: none;
     }
 
-    input:focus + .label::before {
+    input:focus-visible + .label::before {
       inset: -6px;
       opacity: 1;
       border-color: var(--quantic-focus-ring);

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

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

package/dist/panel/index.constants.js

@@ -4,9 +4,23 @@ export var PanelVariant;
     PanelVariant["Outline"] = "outline";
     PanelVariant["Ghost"] = "ghost";
 })(PanelVariant || (PanelVariant = {}));
+export var PanelGroupGap;
+(function (PanelGroupGap) {
+    PanelGroupGap["None"] = "none";
+    PanelGroupGap["ExtraSmall"] = "xs";
+    PanelGroupGap["Small"] = "sm";
+    PanelGroupGap["Medium"] = "md";
+    PanelGroupGap["Large"] = "lg";
+    PanelGroupGap["ExtraLarge"] = "xl";
+})(PanelGroupGap || (PanelGroupGap = {}));
 export var PanelHeaderSize;
 (function (PanelHeaderSize) {
     PanelHeaderSize["Small"] = "sm";
     PanelHeaderSize["Medium"] = "md";
     PanelHeaderSize["Large"] = "lg";
 })(PanelHeaderSize || (PanelHeaderSize = {}));
+export var PanelHeaderVariant;
+(function (PanelHeaderVariant) {
+    PanelHeaderVariant["Primary"] = "primary";
+    PanelHeaderVariant["Secondary"] = "secondary";
+})(PanelHeaderVariant || (PanelHeaderVariant = {}));

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

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

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

@@ -6,11 +6,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css } from 'lit';
 import { html } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { PanelGroupGap } from './index.constants';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
 let PanelGroup = class PanelGroup extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.gap = PanelGroupGap.Medium;
+    }
     render() {
+        const classes = classMap({
+            group: true,
+            [`gap--${this.gap}`]: true,
+        });
         return html `
-      <div class="group">
+      <div class=${classes}>
         <slot></slot>
       </div>
     `;
@@ -18,7 +29,8 @@ let PanelGroup = class PanelGroup extends QuanticElement {
 };
 PanelGroup.meta = {
     tag: 'quantic-panel-group',
-    description: 'Layout container for stacking multiple quantic-panels in a vertical flex arrangement.',
+    description: 'Layout container for stacking multiple quantic-panels in a vertical flex arrangement. ' +
+        'Use gap for named spacing between panels. Override further with --quantic-component-panel-group-gap.',
     category: 'layout',
     slots: {
         '': { description: 'Place quantic-panel elements here.' },
@@ -34,9 +46,41 @@ PanelGroup.styles = css `
     .group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-spacing-6);
+      gap: var(--quantic-component-panel-group-gap, var(--quantic-spacing-6));
+    }
+
+    .gap--none {
+      --quantic-component-panel-group-gap: 0;
+    }
+
+    .gap--xs {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-3);
+    }
+
+    .gap--sm {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-4);
+    }
+
+    .gap--md {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-6);
+    }
+
+    .gap--lg {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-8);
+    }
+
+    .gap--xl {
+      --quantic-component-panel-group-gap: var(--quantic-spacing-12);
     }
   `;
+__decorate([
+    prop({
+        type: 'PanelGroupGap',
+        options: Object.values(PanelGroupGap),
+        default: PanelGroupGap.Medium,
+        description: 'Spacing between stacked panels.',
+    })
+], PanelGroup.prototype, "gap", void 0);
 PanelGroup = __decorate([
     quanticElement('quantic-panel-group')
 ], PanelGroup);

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

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

package/dist/panel/panel-group.stories.js

@@ -1,18 +1,28 @@
 import { story } from '../shared/story';
+import { PanelGroupGap } from './index.constants';
 export default {
     title: 'Components/Layout/Panel/PanelGroup',
     component: 'quantic-panel-group',
     tags: ['autodocs'],
+    argTypes: {
+        gap: {
+            control: 'select',
+            options: Object.values(PanelGroupGap),
+            table: { defaultValue: { summary: PanelGroupGap.Medium } },
+        },
+    },
     parameters: {
         docs: {
             description: {
-                component: `PanelGroup is a simple container that arranges panels vertically with consistent spacing between them. Use it to group related panels in forms, settings pages, or configuration interfaces.`,
+                component: `PanelGroup stacks panels vertically. Use the gap prop for named spacing — prefer this over Cluster when the children are panels.`,
             },
         },
     },
 };
-export const Basic = story().render(() => `
-    <quantic-panel-group style="max-width: 600px">
+const base = story({
+    args: { gap: PanelGroupGap.Medium },
+}).render(({ gap }) => `
+    <quantic-panel-group gap="${gap}" style="max-width: 600px">
       <quantic-panel>
         <quantic-panel-header slot="header">
           General Settings
@@ -39,6 +49,16 @@ export const Basic = story().render(() => `
       </quantic-panel>
     </quantic-panel-group>
   `);
+export const Basic = base;
+export const Small = base.override({
+    gap: PanelGroupGap.Small,
+});
+export const Large = base.override({
+    gap: PanelGroupGap.Large,
+});
+export const ExtraLarge = base.override({
+    gap: PanelGroupGap.ExtraLarge,
+});
 export const SettingsForm = story().render(() => `
     <quantic-panel-group style="max-width: 600px">
       <quantic-panel variant="solid">

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

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

package/dist/panel/panel-header.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css } from 'lit';
 import { html } from 'lit/static-html.js';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
-import { PanelHeaderSize } from './index.constants';
+import { PanelHeaderSize, PanelHeaderVariant } from './index.constants';
 import { classMap } from 'lit/directives/class-map.js';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
@@ -19,11 +19,13 @@ let PanelHeader = class PanelHeader extends AutoHideEmptySlotsMixin(QuanticEleme
     constructor() {
         super(...arguments);
         this.size = PanelHeaderSize.Medium;
+        this.variant = PanelHeaderVariant.Primary;
     }
     render() {
         const classes = classMap({
             main: true,
             [`size--${this.size}`]: true,
+            [`variant--${this.variant}`]: true,
         });
         return html `
       <div class=${classes}>
@@ -83,6 +85,11 @@ PanelHeader.styles = css `
       font-weight: var(--quantic-font-weight-semibold);
     }
 
+    .variant--secondary .title {
+      color: var(--quantic-text-tertiary);
+      font-weight: var(--quantic-font-weight-regular);
+    }
+
     .size--sm .title {
       font-size: var(--quantic-font-size-body-md);
     }
@@ -115,6 +122,14 @@ __decorate([
         description: 'Controls the title font size.',
     })
 ], PanelHeader.prototype, "size", void 0);
+__decorate([
+    prop({
+        type: 'PanelHeaderVariant',
+        options: Object.values(PanelHeaderVariant),
+        default: PanelHeaderVariant.Primary,
+        description: 'Visual variant of the header.',
+    })
+], PanelHeader.prototype, "variant", void 0);
 PanelHeader = __decorate([
     quanticElement('quantic-panel-header')
 ], PanelHeader);

package/dist/panel/panel.component.js

@@ -63,7 +63,7 @@ Panel.styles = css `
       --quantic-component-panel-font-size: var(--quantic-font-size-body-md);
       --quantic-component-panel-line-height: var(--quantic-line-height-body-md);
       --quantic-component-panel-radius: var(--quantic-radius-md);
-      --quantic-component-panel-spacing: var(--quantic-spacing-6);
+      --quantic-component-panel-spacing: var(--quantic-spacing-4);
     }
 
     .main {

package/dist/popover/popover-popup.js

@@ -98,7 +98,7 @@ PopoverPopup.styles = css `
         var(--quantic-width-xs)
       );
       max-height: var(--quantic-component-popover-max-height, 400px);
-      width: max-content;
+      width: var(--quantic-component-popover-width, max-content);
       box-shadow: var(
         --quantic-component-popover-shadow,
         0 10px 15px -3px rgb(0 0 0 / 0.1),

package/dist/popover/popover.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { query } from 'lit/decorators.js';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { computePosition, flip, shift, offset, autoUpdate, } from '@floating-ui/dom';
@@ -280,7 +280,7 @@ let Popover = class Popover extends QuanticElement {
             >
               <quantic-icon-lucide-x size="sm"></quantic-icon-lucide-x>
             </quantic-button>`
-            : ''}
+            : nothing}
         <slot name="header"></slot>
         <slot></slot>
         <slot name="footer"></slot>
@@ -309,6 +309,7 @@ Popover.styles = css `
       --quantic-component-popover-border-color: var(--quantic-border-secondary);
       --quantic-component-popover-border-radius: var(--quantic-radius-md);
       --quantic-component-popover-padding: var(--quantic-spacing-4);
+      --quantic-component-popover-width: max-content;
       --quantic-component-popover-max-width: var(--quantic-width-xs);
       --quantic-component-popover-max-height: var(--quantic-spacing-96);
       --quantic-component-popover-z-index: 9999;