@nuralyui/radio-group 0.0.6

package/radio-group.style.js

@@ -0,0 +1,196 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* ========================================
+     * CSS CUSTOM PROPERTIES - RADIO GROUP
+     * ======================================== */
+    
+    /* Group Layout */
+    --nuraly-radio-group-gap: 12px;
+    --nuraly-radio-group-horizontal-gap: 16px;
+
+    /* Colors - Error/Warning states */
+    --nuraly-radio-group-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);
+    --nuraly-radio-group-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);
+    --nuraly-radio-group-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);
+    --nuraly-radio-group-warning-text-color: var(--nuraly-color-radio-warning-text, #f59e0b);
+
+    /* Typography */
+    --nuraly-radio-group-font-family: var(--nuraly-font-family-radio, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
+    --nuraly-radio-group-message-font-size: var(--nuraly-font-size-radio-message, 12px);
+
+    /* Button type styling */
+    --nuraly-radio-group-button-border-radius: 4px;
+    --nuraly-radio-group-button-hover-color: var(--nuraly-color-radio-border-hover, #7c3aed);
+
+    /* Slot container styling */
+    --nuraly-radio-group-slot-hover-bg: rgba(124, 58, 237, 0.04);
+    --nuraly-radio-group-slot-selected-bg: rgba(124, 58, 237, 0.08);
+    --nuraly-radio-group-slot-border-radius: 6px;
+
+    /* ========================================
+     * COMPONENT STYLES
+     * ======================================== */
+    
+    width: fit-content;
+    display: block;
+    font-family: var(--nuraly-radio-group-font-family);
+  }
+
+  /* ========================================
+   * RADIO GROUP LAYOUT
+   * ======================================== */
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-radio-group-gap);
+  }
+
+  .radio-group.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--nuraly-radio-group-horizontal-gap);
+  }
+
+  .radio-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  /* ========================================
+   * MESSAGE CONTAINERS (Error/Warning)
+   * ======================================== */
+
+  .radio-wrapper .message-container {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--nuraly-radio-group-message-font-size);
+    padding-left: 28px; /* Align with radio label */
+  }
+
+  nr-icon {
+    display: flex;
+  }
+
+  .radio-wrapper.error nr-icon {
+    --nuraly-icon-color: var(--nuraly-radio-group-error-icon-color);
+  }
+
+  .radio-wrapper.warning nr-icon {
+    --nuraly-icon-color: var(--nuraly-radio-group-warning-icon-color);
+  }
+
+  .radio-wrapper.error .message-container {
+    color: var(--nuraly-radio-group-error-text-color);
+  }
+
+  .radio-wrapper.warning .message-container {
+    color: var(--nuraly-radio-group-warning-text-color);
+  }
+
+  /* ========================================
+   * BUTTON TYPE STYLING
+   * ======================================== */
+
+  .type-button {
+    display: inline-flex;
+    gap: 0px;
+  }
+
+  /* Button border radius for first and last child */
+  .type-button :first-child {
+    --nuraly-button-border-top-left-radius: var(--nuraly-radio-group-button-border-radius);
+    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-group-button-border-radius);
+  }
+
+  .type-button :last-child {
+    --nuraly-button-border-top-right-radius: var(--nuraly-radio-group-button-border-radius);
+    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-group-button-border-radius);
+  }
+
+  .type-button nr-button:not(:last-child) {
+    margin-right: -1px;
+  }
+
+  .type-button nr-button {
+    position: relative;
+    z-index: 1;
+  }
+
+  .type-button nr-button[type="default"]:hover {
+    --nuraly-button-color: var(--nuraly-radio-group-button-hover-color);
+    --nuraly-button-border-color: var(--nuraly-radio-group-button-hover-color);
+    z-index: 2;
+  }
+
+  .type-button nr-button[type="primary"] {
+    z-index: 1;
+    position: relative;
+  }
+
+  /* Disabled button states */
+  .type-button nr-button[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .type-button nr-button[disabled]:hover {
+    z-index: auto;
+    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));
+    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));
+    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));
+  }
+
+  .type-button nr-button[type="primary"][disabled] {
+    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));
+    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));
+    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+  }
+
+  .type-button nr-button[type="primary"][disabled] nr-icon {
+    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+  }
+
+  /* ========================================
+   * SLOT-BASED RADIO STYLING
+   * ======================================== */
+
+  .slot-wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 8px;
+    border-radius: var(--nuraly-radio-group-slot-border-radius);
+  }
+
+  .slot-wrapper:hover {
+    background-color: var(--nuraly-radio-group-slot-hover-bg);
+  }
+
+  .slot-wrapper nr-radio {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .slot-wrapper .slot-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .slot-container.selected .slot-wrapper {
+    background-color: var(--nuraly-radio-group-slot-selected-bg);
+  }
+`;
+//# sourceMappingURL=radio-group.style.js.map

package/radio-group.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.style.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    /* ========================================\n     * CSS CUSTOM PROPERTIES - RADIO GROUP\n     * ======================================== */\n    \n    /* Group Layout */\n    --nuraly-radio-group-gap: 12px;\n    --nuraly-radio-group-horizontal-gap: 16px;\n\n    /* Colors - Error/Warning states */\n    --nuraly-radio-group-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);\n    --nuraly-radio-group-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);\n    --nuraly-radio-group-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);\n    --nuraly-radio-group-warning-text-color: var(--nuraly-color-radio-warning-text, #f59e0b);\n\n    /* Typography */\n    --nuraly-radio-group-font-family: var(--nuraly-font-family-radio, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n    --nuraly-radio-group-message-font-size: var(--nuraly-font-size-radio-message, 12px);\n\n    /* Button type styling */\n    --nuraly-radio-group-button-border-radius: 4px;\n    --nuraly-radio-group-button-hover-color: var(--nuraly-color-radio-border-hover, #7c3aed);\n\n    /* Slot container styling */\n    --nuraly-radio-group-slot-hover-bg: rgba(124, 58, 237, 0.04);\n    --nuraly-radio-group-slot-selected-bg: rgba(124, 58, 237, 0.08);\n    --nuraly-radio-group-slot-border-radius: 6px;\n\n    /* ========================================\n     * COMPONENT STYLES\n     * ======================================== */\n    \n    width: fit-content;\n    display: block;\n    font-family: var(--nuraly-radio-group-font-family);\n  }\n\n  /* ========================================\n   * RADIO GROUP LAYOUT\n   * ======================================== */\n\n  .radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nuraly-radio-group-gap);\n  }\n\n  .radio-group.horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: var(--nuraly-radio-group-horizontal-gap);\n  }\n\n  .radio-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  /* ========================================\n   * MESSAGE CONTAINERS (Error/Warning)\n   * ======================================== */\n\n  .radio-wrapper .message-container {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: var(--nuraly-radio-group-message-font-size);\n    padding-left: 28px; /* Align with radio label */\n  }\n\n  nr-icon {\n    display: flex;\n  }\n\n  .radio-wrapper.error nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-group-error-icon-color);\n  }\n\n  .radio-wrapper.warning nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-group-warning-icon-color);\n  }\n\n  .radio-wrapper.error .message-container {\n    color: var(--nuraly-radio-group-error-text-color);\n  }\n\n  .radio-wrapper.warning .message-container {\n    color: var(--nuraly-radio-group-warning-text-color);\n  }\n\n  /* ========================================\n   * BUTTON TYPE STYLING\n   * ======================================== */\n\n  .type-button {\n    display: inline-flex;\n    gap: 0px;\n  }\n\n  /* Button border radius for first and last child */\n  .type-button :first-child {\n    --nuraly-button-border-top-left-radius: var(--nuraly-radio-group-button-border-radius);\n    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-group-button-border-radius);\n  }\n\n  .type-button :last-child {\n    --nuraly-button-border-top-right-radius: var(--nuraly-radio-group-button-border-radius);\n    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-group-button-border-radius);\n  }\n\n  .type-button nr-button:not(:last-child) {\n    margin-right: -1px;\n  }\n\n  .type-button nr-button {\n    position: relative;\n    z-index: 1;\n  }\n\n  .type-button nr-button[type=\"default\"]:hover {\n    --nuraly-button-color: var(--nuraly-radio-group-button-hover-color);\n    --nuraly-button-border-color: var(--nuraly-radio-group-button-hover-color);\n    z-index: 2;\n  }\n\n  .type-button nr-button[type=\"primary\"] {\n    z-index: 1;\n    position: relative;\n  }\n\n  /* Disabled button states */\n  .type-button nr-button[disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .type-button nr-button[disabled]:hover {\n    z-index: auto;\n    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));\n    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));\n    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] {\n    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));\n    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));\n    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] nr-icon {\n    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  /* ========================================\n   * SLOT-BASED RADIO STYLING\n   * ======================================== */\n\n  .slot-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    padding: 8px;\n    border-radius: var(--nuraly-radio-group-slot-border-radius);\n  }\n\n  .slot-wrapper:hover {\n    background-color: var(--nuraly-radio-group-slot-hover-bg);\n  }\n\n  .slot-wrapper nr-radio {\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .slot-wrapper .slot-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .slot-container.selected .slot-wrapper {\n    background-color: var(--nuraly-radio-group-slot-selected-bg);\n  }\n`;\n"]}

package/radio-group.types.d.ts

@@ -0,0 +1,37 @@
+export declare type RadioButtonOption = {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    state?: RadioButtonState;
+    message?: string;
+    htmlContent?: string;
+    className?: string;
+    style?: string;
+    title?: string;
+    id?: string;
+};
+export declare type RadioButtonState = 'error' | 'warning';
+export declare enum RadioButtonDirection {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export declare enum RadioButtonPosition {
+    Left = "left",
+    Right = "right"
+}
+export declare enum RadioButtonType {
+    Default = "default",
+    Button = "button",
+    Slot = "slot"
+}
+export declare enum RadioButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export declare enum RadioButtonVariant {
+    Default = "default",
+    Solid = "solid"
+}
+//# sourceMappingURL=radio-group.types.d.ts.map

package/radio-group.types.js

@@ -0,0 +1,28 @@
+export var RadioButtonDirection;
+(function (RadioButtonDirection) {
+    RadioButtonDirection["Horizontal"] = "horizontal";
+    RadioButtonDirection["Vertical"] = "vertical";
+})(RadioButtonDirection || (RadioButtonDirection = {}));
+export var RadioButtonPosition;
+(function (RadioButtonPosition) {
+    RadioButtonPosition["Left"] = "left";
+    RadioButtonPosition["Right"] = "right";
+})(RadioButtonPosition || (RadioButtonPosition = {}));
+export var RadioButtonType;
+(function (RadioButtonType) {
+    RadioButtonType["Default"] = "default";
+    RadioButtonType["Button"] = "button";
+    RadioButtonType["Slot"] = "slot";
+})(RadioButtonType || (RadioButtonType = {}));
+export var RadioButtonSize;
+(function (RadioButtonSize) {
+    RadioButtonSize["Small"] = "small";
+    RadioButtonSize["Medium"] = "medium";
+    RadioButtonSize["Large"] = "large";
+})(RadioButtonSize || (RadioButtonSize = {}));
+export var RadioButtonVariant;
+(function (RadioButtonVariant) {
+    RadioButtonVariant["Default"] = "default";
+    RadioButtonVariant["Solid"] = "solid";
+})(RadioButtonVariant || (RadioButtonVariant = {}));
+//# sourceMappingURL=radio-group.types.js.map

package/radio-group.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.types.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.types.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;IAC9B,iDAAyB,CAAA;IACzB,6CAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,oCAAiB,CAAA;IACjB,gCAAa,CAAA;AACf,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;AACjB,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B","sourcesContent":["export type RadioButtonOption = {\n  value: string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  state?: RadioButtonState;\n  message?: string;\n  htmlContent?: string; // Support for HTML content instead of plain label\n  className?: string; // Custom CSS class for the option\n  style?: string; // Inline styles for the option\n  title?: string; // Tooltip text\n  id?: string; // Custom ID for the option\n};\n\nexport type RadioButtonState = 'error' | 'warning';\n\nexport enum RadioButtonDirection {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\nexport enum RadioButtonPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum RadioButtonType {\n  Default = 'default',\n  Button = 'button',\n  Slot = 'slot',\n}\n\nexport enum RadioButtonSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\nexport enum RadioButtonVariant {\n  Default = 'default',\n  Solid = 'solid',\n}\n"]}

package/radio.component.d.ts

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+import { RadioButtonType, RadioButtonOption } from './radio.type.js';
+declare const NrRadioGroupElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * A radio button group component using Reactive Controllers architecture.
+ *
+ * Supports multiple display modes:
+ * - Default: Traditional radio buttons with labels
+ * - Button: Button-style radio group
+ * - Slot: Custom HTML content with radio selection
+ *
+ * Features:
+ * - Theme-aware styling with light/dark mode support
+ * - Keyboard navigation (arrow keys, space, enter)
+ * - Accessibility compliance
+ * - Form validation and integration
+ * - Ripple effects on interaction
+ * - Modular controller-based architecture
+ *
+ * @example
+ * ```html
+ * <nr-radio-group
+ *   .options='[
+ *     { value: "option1", label: "Option 1" },
+ *     { value: "option2", label: "Option 2" }
+ *   ]'
+ *   default-value="option1"
+ *   direction="horizontal">
+ * </nr-radio-group>
+ * ```
+ *
+ * @fires change - Dispatched when the selected option changes
+ */
+export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    options: RadioButtonOption[];
+    defaultValue: string;
+    value: string;
+    name: string;
+    direction: 'horizontal' | 'vertical';
+    type: RadioButtonType;
+    required: boolean;
+    disabled: boolean;
+    private groupController;
+    private keyboardController;
+    private focusController;
+    private validationController;
+    private rippleController;
+    /**
+     * Get the currently selected option - DELEGATES to controller
+     */
+    get selectedOption(): RadioButtonOption | undefined;
+    /**
+     * Check if an option is selected - DELEGATES to controller
+     */
+    isOptionSelected(option: RadioButtonOption): boolean;
+    /**
+     * Check if an option is disabled - DELEGATES to controller
+     */
+    isOptionDisabled(option: RadioButtonOption): boolean;
+    /**
+     * Handle option selection change - DELEGATES to controller
+     */
+    handleSelectionChange(option: RadioButtonOption): void;
+    /**
+     * Set focused option by index - DELEGATES to controller
+     */
+    setFocusedOption(index: number): void;
+    /**
+     * Handle keyboard events - DELEGATES to controller
+     */
+    handleKeyDown(_event: KeyboardEvent): void;
+    /**
+     * Add ripple effect on radio input click - DELEGATES to controller
+     */
+    addRippleEffect(event: Event): void;
+    /**
+     * Validate the radio group - DELEGATES to controller
+     */
+    validate(): boolean;
+    /**
+     * Get validation message - DELEGATES to controller
+     */
+    get validationMessage(): string;
+    /**
+     * Check if the radio group is valid - DELEGATES to controller
+     */
+    get isValid(): boolean;
+    /**
+     * Get form data for form submission - DELEGATES to controller
+     */
+    getFormData(): {
+        [key: string]: string;
+    };
+    /**
+     * Reset the radio group - DELEGATES to controller
+     */
+    reset(): void;
+    /**
+     * FormData integration for native form submission - DELEGATES to controller
+     */
+    get formData(): FormData | null;
+    /**
+     * Check form validity (required for HTML5 form validation)
+     */
+    checkValidity(): boolean;
+    /**
+     * Report form validity (required for HTML5 form validation) - DELEGATES to controller
+     */
+    reportValidity(): boolean;
+    /**
+     * Programmatically focus the radio group - DELEGATES to controller
+     */
+    focus(): void;
+    /**
+     * Programmatically blur the radio group - DELEGATES to controller
+     */
+    blur(): void;
+    /**
+     * Render default radio button style
+     */
+    private renderOptionDefault;
+    /**
+     * Render button style radio group
+     */
+    private renderOptionsWithButtons;
+    /**
+     * Render slot-based radio group (for custom HTML content)
+     */
+    private renderOptionsWithSlots;
+    /**
+     * Render button style with slots
+     */
+    private renderButtonsWithSlots;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=radio.component.d.ts.map