@ctrliq/quantic-components 1.68.0 → 1.69.0

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

@@ -5,3 +5,9 @@ export declare const RadioSize: {
     Large: string;
 };
 export type RadioSize = (typeof RadioSize)[keyof typeof RadioSize];
+export declare const RadioGroupGap: {
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export type RadioGroupGap = (typeof RadioGroupGap)[keyof typeof RadioGroupGap];

package/dist/radio/index.constants.js

@@ -4,3 +4,8 @@ export const RadioSize = {
     Medium: 'md',
     Large: 'lg',
 };
+export const RadioGroupGap = {
+    Small: 'sm',
+    Medium: 'md',
+    Large: 'lg',
+};

package/dist/radio/index.d.ts

@@ -1,4 +1,4 @@
 export { Radio } from './radio.component';
-export { RadioSize } from './index.constants';
+export { RadioSize, RadioGroupGap } from './index.constants';
 export { RadioGroup } from './radio-group.component';
 export { RadioGroupVariant } from './index.context';

package/dist/radio/index.js

@@ -1,4 +1,4 @@
 export { Radio } from './radio.component';
-export { RadioSize } from './index.constants';
+export { RadioSize, RadioGroupGap } from './index.constants';
 export { RadioGroup } from './radio-group.component';
 export { RadioGroupVariant } from './index.context';

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

@@ -1,4 +1,5 @@
 import { QuanticElement } from '../shared/quantic-element';
+import { RadioGroupGap } from './index.constants';
 import { type RadioGroupVariant } from './index.context';
 import type { ComponentMeta } from '../shared/meta.types';
 declare const RadioGroup_base: {
@@ -23,6 +24,7 @@ export declare class RadioGroup extends RadioGroup_base {
     required: boolean;
     invalid: boolean;
     variant: RadioGroupVariant;
+    gap: RadioGroupGap;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;

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

@@ -8,6 +8,7 @@ import { css, html } from 'lit';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { provide } from '@lit/context';
 import { classMap } from 'lit/directives/class-map.js';
+import { RadioGroupGap } from './index.constants';
 import { RadioGroupVariant as RadioGroupVariantEnum, variantContext, } from './index.context';
 import { A11yAttributesMixin } from '../shared/a11y-attributes.mixin';
 import { event, prop } from '../shared/component-meta.decorators';
@@ -20,6 +21,7 @@ let RadioGroup = class RadioGroup extends A11yAttributesMixin(QuanticElement) {
         this.required = false;
         this.invalid = false;
         this.variant = RadioGroupVariantEnum.Default;
+        this.gap = RadioGroupGap.Large;
         this.internals = this.attachInternals();
         this.handleValueChanged = this.handleValueChanged.bind(this);
     }
@@ -38,7 +40,7 @@ let RadioGroup = class RadioGroup extends A11yAttributesMixin(QuanticElement) {
         if (!src || src.tagName.toLowerCase() !== 'quantic-radio') {
             return;
         }
-        e.stopPropagation();
+        e.stopImmediatePropagation();
         if (!customEvent.detail?.checked) {
             return;
         }
@@ -103,11 +105,13 @@ let RadioGroup = class RadioGroup extends A11yAttributesMixin(QuanticElement) {
     }
     render() {
         const a11y = this.getA11yAttributes({ invalid: this.invalid });
+        const segmented = this.variant === RadioGroupVariantEnum.Segmented;
         return html `<div
       class=${classMap({
             group: true,
             'group--inline': this.variant === RadioGroupVariantEnum.Inline,
-            'group--segmented': this.variant === RadioGroupVariantEnum.Segmented,
+            'group--segmented': segmented,
+            [`gap--${this.gap}`]: !segmented,
         })}
       role="radiogroup"
       aria-label=${a11y.label}
@@ -132,16 +136,44 @@ RadioGroup.styles = css `
       display: contents;
     }
 
+    :host([variant='segmented']) {
+      /* Inherited by child radios so segmented padding survives SSR.
+         Child radios are rendered in isolation and never receive Lit context. */
+      --quantic-radio-seg-padding-block: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-inline: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-block-xs: var(--quantic-spacing-1);
+      --quantic-radio-seg-padding-inline-xs: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-block-sm: var(--quantic-spacing-1-5);
+      --quantic-radio-seg-padding-inline-sm: var(--quantic-spacing-2);
+      --quantic-radio-seg-padding-block-lg: var(--quantic-spacing-3);
+      --quantic-radio-seg-padding-inline-lg: var(--quantic-spacing-4);
+      --quantic-radio-seg-border-right: 1px solid var(--quantic-border-primary);
+      --quantic-radio-seg-hover-bg: var(--quantic-bg-secondary-hover);
+      --quantic-radio-seg-checked-bg: var(--quantic-bg-secondary-active);
+      --quantic-radio-seg-label-weight: var(--quantic-font-weight-semibold);
+    }
+
     .group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-spacing-3);
     }
 
     .group--inline {
       flex-direction: row;
     }
 
+    .gap--sm {
+      gap: var(--quantic-spacing-1);
+    }
+
+    .gap--md {
+      gap: var(--quantic-spacing-2);
+    }
+
+    .gap--lg {
+      gap: var(--quantic-spacing-3);
+    }
+
     .group--segmented {
       flex-direction: row;
       gap: 0;
@@ -171,6 +203,15 @@ __decorate([
     provide({ context: variantContext }),
     prop({ type: 'RadioGroupVariant', options: Object.values(RadioGroupVariantEnum), reflect: true, description: 'Visual variant propagated to all child radios via context.' })
 ], RadioGroup.prototype, "variant", void 0);
+__decorate([
+    prop({
+        type: 'RadioGroupGap',
+        options: Object.values(RadioGroupGap),
+        default: RadioGroupGap.Large,
+        reflect: true,
+        description: 'Spacing between radios. Ignored when variant is segmented.',
+    })
+], RadioGroup.prototype, "gap", void 0);
 RadioGroup = __decorate([
     event('value-changed', {
         description: 'Fired whenever the selected radio changes.',

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

@@ -1,6 +1,7 @@
-import { RadioSize } from './index.constants';
+import { RadioSize, RadioGroupGap } from './index.constants';
 interface Args {
     size?: RadioSize;
+    gap?: RadioGroupGap;
     required?: boolean;
     disabled?: boolean;
 }
@@ -15,6 +16,12 @@ declare const _default: {
             };
             options: string[];
         };
+        gap: {
+            control: {
+                type: string;
+            };
+            options: ("sm" | "md" | "lg")[];
+        };
         required: {
             control: string;
             description: string;

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

@@ -1,5 +1,5 @@
 import { ref } from 'lit/directives/ref.js';
-import { RadioSize } from './index.constants';
+import { RadioSize, RadioGroupGap } from './index.constants';
 import { RadioGroupVariant } from './index.context';
 import { story } from '../shared/story';
 export default {
@@ -11,6 +11,10 @@ export default {
             control: { type: 'select' },
             options: [RadioSize.XSmall, RadioSize.Small, RadioSize.Medium, RadioSize.Large],
         },
+        gap: {
+            control: { type: 'select' },
+            options: [RadioGroupGap.Small, RadioGroupGap.Medium, RadioGroupGap.Large],
+        },
         required: { control: 'boolean', description: 'Whether required' },
         disabled: { control: 'boolean', description: 'Whether disabled' },
     },

package/dist/radio/radio.component.js

@@ -125,6 +125,12 @@ Radio.styles = css `
       cursor: pointer;
       user-select: none;
       --radio-size: var(--quantic-spacing-5);
+      padding: var(--quantic-radio-seg-padding-block, 0)
+        var(--quantic-radio-seg-padding-inline, 0);
+      border-right: var(--quantic-radio-seg-border-right, none);
+      transition:
+        background-color 0.2s ease-in-out,
+        color 0.2s ease-in-out;
     }
 
     :host([disabled]) .main {
@@ -135,12 +141,28 @@ Radio.styles = css `
       --radio-size: var(--quantic-spacing-3);
       --label-font-size: var(--quantic-font-size-body-xs);
       --dot-size: var(--quantic-spacing-1-5);
+      padding: var(
+          --quantic-radio-seg-padding-block-xs,
+          var(--quantic-radio-seg-padding-block, 0)
+        )
+        var(
+          --quantic-radio-seg-padding-inline-xs,
+          var(--quantic-radio-seg-padding-inline, 0)
+        );
     }
 
     .main.size--sm {
       --radio-size: var(--quantic-spacing-4);
       --label-font-size: var(--quantic-font-size-body-sm);
       --dot-size: var(--quantic-spacing-2);
+      padding: var(
+          --quantic-radio-seg-padding-block-sm,
+          var(--quantic-radio-seg-padding-block, 0)
+        )
+        var(
+          --quantic-radio-seg-padding-inline-sm,
+          var(--quantic-radio-seg-padding-inline, 0)
+        );
     }
 
     .main.size--md {
@@ -153,6 +175,14 @@ Radio.styles = css `
       --radio-size: var(--quantic-spacing-6);
       --label-font-size: var(--quantic-font-size-body-lg);
       --dot-size: var(--quantic-spacing-3);
+      padding: var(
+          --quantic-radio-seg-padding-block-lg,
+          var(--quantic-radio-seg-padding-block, 0)
+        )
+        var(
+          --quantic-radio-seg-padding-inline-lg,
+          var(--quantic-radio-seg-padding-inline, 0)
+        );
     }
 
     .main.variant--segmented {
@@ -178,7 +208,8 @@ Radio.styles = css `
       padding: var(--quantic-spacing-3) var(--quantic-spacing-4);
     }
 
-    :host(:last-of-type) .main.variant--segmented {
+    :host(:last-of-type) .main.variant--segmented,
+    :host(:last-of-type) .main {
       border-right: none;
     }
 
@@ -194,6 +225,14 @@ Radio.styles = css `
       font-weight: var(--quantic-font-weight-semibold);
     }
 
+    .main:hover {
+      background-color: var(--quantic-radio-seg-hover-bg, transparent);
+    }
+
+    .main.checked {
+      background-color: var(--quantic-radio-seg-checked-bg, transparent);
+    }
+
     input {
       position: absolute;
       opacity: 0;
@@ -241,7 +280,7 @@ Radio.styles = css `
       transition: all 0.2s ease-in-out;
     }
 
-    input:focus + .circle::before {
+    input:focus-visible + .circle::before {
       inset: -4px;
       opacity: 1;
       border-color: var(--quantic-focus-ring);
@@ -260,6 +299,7 @@ Radio.styles = css `
       margin-inline-start: var(--quantic-spacing-2);
       color: var(--quantic-text-primary);
       font-size: var(--label-font-size);
+      font-weight: var(--quantic-radio-seg-label-weight, inherit);
     }
 
     input:disabled ~ .label {

package/dist/register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/register.js

@@ -0,0 +1,9 @@
+import * as all from './index.js';
+const isRegistrable = (value) => {
+    const ctor = value;
+    return typeof ctor === 'function' && !!ctor.tagName && typeof ctor.ensureDefined === 'function';
+};
+for (const Ctor of Object.values(all)) {
+    if (isRegistrable(Ctor))
+        Ctor.ensureDefined();
+}