@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/checkbox/checkbox.style.js

@@ -1,303 +1,134 @@
 import { css } from 'lit';
 const checkBoxStyles = css `
-  /* ========================================
-   * CHECKBOX CSS VARIABLES - FALLBACK VALUES
-   * ========================================
-   * These fallback values ensure the component works even without theme files
-   */
-  :host {
-    /* Base checkbox appearance */
-    --nuraly-checkbox-background: var(--nuraly-color-checkbox-background, #ffffff);
-    --nuraly-checkbox-text-color: var(--nuraly-color-checkbox-text, rgba(0, 0, 0, 0.88));
-    --nuraly-checkbox-label-color: var(--nuraly-color-checkbox-label, rgba(0, 0, 0, 0.88));
-
-    /* Checkbox borders and outline */
-    --nuraly-checkbox-border: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border, #d9d9d9);
-    --nuraly-checkbox-border-radius: var(--nuraly-border-radius-checkbox, 2px);
-    --nuraly-checkbox-border-focus: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-focus, #1890ff);
-    --nuraly-checkbox-border-hover: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-hover, #40a9ff);
-
-    /* Checked/active states */
-    --nuraly-checkbox-checked-background: var(--nuraly-color-checkbox-checked-background, #1890ff);
-    --nuraly-checkbox-checked-border: var(--nuraly-color-checkbox-checked-border, #1890ff);
-    --nuraly-checkbox-checkmark-color: var(--nuraly-color-checkbox-checkmark, #ffffff);
-    --nuraly-checkbox-indeterminate-background: var(--nuraly-color-checkbox-indeterminate-background, #1890ff);
-    --nuraly-checkbox-indeterminate-mark-color: var(--nuraly-color-checkbox-indeterminate-mark, #ffffff);
-
-    /* Disabled states */
-    --nuraly-checkbox-disabled-background: var(--nuraly-color-checkbox-disabled-background, #f5f5f5);
-    --nuraly-checkbox-disabled-border: var(--nuraly-color-checkbox-disabled-border, #d9d9d9);
-    --nuraly-checkbox-disabled-text-color: var(--nuraly-color-checkbox-disabled-text, rgba(0, 0, 0, 0.25));
-    --nuraly-checkbox-disabled-checkmark-color: var(--nuraly-color-checkbox-disabled-checkmark, rgba(0, 0, 0, 0.25));
-
-    /* Focus states */
-    --nuraly-checkbox-focus-outline: var(--nuraly-size-checkbox-focus-outline, 2px) solid var(--nuraly-color-checkbox-focus-outline, rgba(24, 144, 255, 0.2));
-
-    /* Typography */
-    --nuraly-checkbox-font-family: var(--nuraly-font-family-checkbox, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);
-    --nuraly-checkbox-font-size: var(--nuraly-font-size-checkbox, 14px);
-    --nuraly-checkbox-font-weight: var(--nuraly-font-weight-checkbox, 400);
-    --nuraly-checkbox-line-height: var(--nuraly-line-height-checkbox, 1.5715);
-
-    /* Sizing */
-    --nuraly-checkbox-size-small: var(--nuraly-size-checkbox-small, 14px);
-    --nuraly-checkbox-size-medium: var(--nuraly-size-checkbox-medium, 16px);
-    --nuraly-checkbox-size-large: var(--nuraly-size-checkbox-large, 18px);
-
-    /* Spacing */
-    --nuraly-checkbox-gap: var(--nuraly-spacing-checkbox-gap, 8px);
-    --nuraly-checkbox-padding: var(--nuraly-spacing-checkbox-padding, 4px);
-
-    /* Animation */
-    --nuraly-checkbox-transition: var(--nuraly-transition-checkbox, all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1));
-
-    /* ========================================
-     * LEGACY COMPATIBILITY VARIABLES
-     * ========================================
-     * Keep old variable names for backward compatibility
-     * These will be deprecated in future versions
-     */
-
-    /* Legacy local variables for backward compatibility */
-    --nuraly-checkbox-local-filled-background-color: var(--nuraly-checkbox-checked-background);
-    --nuraly-checkbox-local-color: var(--nuraly-checkbox-text-color);
-    --nuraly-checkbox-local-empty-background-color: var(--nuraly-checkbox-background);
-    --nuraly-checkbox-local-disabled-background-color: var(--nuraly-checkbox-disabled-background);
-    --nuraly-checkbox-local-disabled-text-color: var(--nuraly-checkbox-disabled-text-color);
-    --nuraly-checkbox-local-empty-border: var(--nuraly-checkbox-border);
-    --nuraly-checkbox-local-symbol-color: var(--nuraly-checkbox-checkmark-color);
-    --nuraly-checkbox-local-focus-border: var(--nuraly-checkbox-border-focus);
-    --nuraly-checkbox-local-focus-outline: var(--nuraly-checkbox-focus-outline);
-    --nuraly-checkbox-local-font-family: var(--nuraly-checkbox-font-family);
-    --nuraly-checkbox-local-border-radius: var(--nuraly-checkbox-border-radius);
-    --nuraly-checkbox-local-gap: var(--nuraly-checkbox-gap);
-
-    /* Legacy size variables */
-    --nuraly-checkbox-local-medium-width: var(--nuraly-checkbox-size-medium);
-    --nuraly-checkbox-local-medium-height: var(--nuraly-checkbox-size-medium);
-    --nuraly-checkbox-local-small-width: var(--nuraly-checkbox-size-small);
-    --nuraly-checkbox-local-small-height: var(--nuraly-checkbox-size-small);
-    --nuraly-checkbox-local-large-width: var(--nuraly-checkbox-size-large);
-    --nuraly-checkbox-local-large-height: var(--nuraly-checkbox-size-large);
-
-    /* Legacy checkmark sizing */
-    --nuraly-checkbox-local-small-indeterminate-size: calc(var(--nuraly-checkbox-size-small) * 0.7);
-    --nuraly-checkbox-local-large-indeterminate-size: calc(var(--nuraly-checkbox-size-large) * 0.7);
-    --nuraly-checkbox-local-medium-indeterminate-size: calc(var(--nuraly-checkbox-size-medium) * 0.7);
-
-    --nuraly-checkbox-local-small-checked-width: calc(var(--nuraly-checkbox-size-small) * 0.14);
-    --nuraly-checkbox-local-small-checked-height: calc(var(--nuraly-checkbox-size-small) * 0.5);
-    --nuraly-checkbox-local-medium-checked-width: calc(var(--nuraly-checkbox-size-medium) * 0.19);
-    --nuraly-checkbox-local-medium-checked-height: calc(var(--nuraly-checkbox-size-medium) * 0.56);
-    --nuraly-checkbox-local-large-checked-width: calc(var(--nuraly-checkbox-size-large) * 0.22);
-    --nuraly-checkbox-local-large-checked-height: calc(var(--nuraly-checkbox-size-large) * 0.56);
-  }
-
-  /* ========================================
-   * CHECKBOX COMPONENT STYLES
-   * ========================================
-   * Modern checkbox component with theme-aware styling
-   * Uses CSS custom properties for consistent theming
-   */
-
   :host {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: var(--nuraly-checkbox-gap);
-    font-family: var(--nuraly-checkbox-font-family);
-    font-size: var(--nuraly-checkbox-font-size);
-    font-weight: var(--nuraly-checkbox-font-weight);
-    line-height: var(--nuraly-checkbox-line-height);
-    color: var(--nuraly-checkbox-text-color);
+    gap: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5715;
+    color: #161616;
     cursor: pointer;
-    transition: var(--nuraly-checkbox-transition);
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
-  /* ========================================
-   * CHECKBOX INPUT ELEMENT STYLES
-   * ======================================== */
-
+  /* Input base */
   input {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;
     position: relative;
-    border-radius: var(--nuraly-checkbox-border-radius);
-    background-color: var(--nuraly-checkbox-background);
-    border: var(--nuraly-checkbox-border);
-    transition: var(--nuraly-checkbox-transition);
+    border-radius: 2px;
+    background-color: #ffffff;
+    border: 1px solid #d9d9d9;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     margin: 0;
     outline: none;
   }
 
-  /* ========================================
-   * SIZE VARIATIONS
-   * ======================================== */
-
-  /* Medium size (default) */
+  /* Sizes */
   input {
-    width: var(--nuraly-checkbox-size-medium);
-    height: var(--nuraly-checkbox-size-medium);
-  }
-
-  :host([size='small']) input {
-    width: var(--nuraly-checkbox-size-small);
-    height: var(--nuraly-checkbox-size-small);
+    width: 16px;
+    height: 16px;
   }
-
-  :host([size='large']) input {
-    width: var(--nuraly-checkbox-size-large);
-    height: var(--nuraly-checkbox-size-large);
+  :host([size="small"]) input {
+    width: 14px;
+    height: 14px;
   }
-
-  /* ========================================
-   * CHECKBOX STATE STYLES
-   * ======================================== */
-
-  /* Empty/unchecked state */
-  :host(:not([checked]):not([indeterminate]):not([disabled])) input {
-    background-color: var(--nuraly-checkbox-background);
-    border: var(--nuraly-checkbox-border);
+  :host([size="large"]) input {
+    width: 18px;
+    height: 18px;
   }
 
-  /* Checked and indeterminate states */
+  /* Checked / indeterminate */
   :host(:not([disabled])[checked]) input,
   :host(:not([disabled])[indeterminate]) input {
-    background-color: var(--nuraly-checkbox-checked-background);
-    border: 1px solid var(--nuraly-checkbox-checked-border);
+    background-color: #7c3aed;
+    border: 1px solid #7c3aed;
   }
 
-  /* Hover states for interactive elements */
-  :host(:not([disabled]):hover) input {
-    border: var(--nuraly-checkbox-border-hover);
+  /* Hover */
+  :host(:not([disabled])):hover input {
+    border-color: #7c3aed;
   }
 
-  :host(:not([disabled]):hover[checked]) input,
-  :host(:not([disabled]):hover[indeterminate]) input {
-    background-color: var(--nuraly-checkbox-checked-background);
-    border: 1px solid var(--nuraly-checkbox-border-hover);
-    filter: brightness(1.1);
-  }
-
-  /* Focus states */
+  /* Focus */
   input:focus,
   input:focus-visible {
-    border: var(--nuraly-checkbox-border-focus);
-    outline: var(--nuraly-checkbox-focus-outline);
+    border-color: #7c3aed;
+    outline: 2px solid rgba(124, 58, 237, 0.2);
     outline-offset: 2px;
   }
 
-  /* ========================================
-   * DISABLED STATE
-   * ======================================== */
-
+  /* Disabled */
   :host([disabled]) {
-    color: var(--nuraly-checkbox-disabled-text-color);
+    color: rgba(0, 0, 0, 0.25);
     cursor: not-allowed;
   }
-
   :host([disabled]) input {
-    background-color: var(--nuraly-checkbox-disabled-background);
-    border: 1px solid var(--nuraly-checkbox-disabled-border);
+    background-color: #f5f5f5;
+    border: 1px solid #d9d9d9;
     cursor: not-allowed;
   }
 
-  /* ========================================
-   * CHECKMARK AND INDETERMINATE SYMBOLS
-   * ======================================== */
-
-  /* Base symbol styling */
+  /* Checkmark base */
   input:after {
-    color: var(--nuraly-checkbox-checkmark-color);
+    color: #ffffff;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -51%);
-    transition: var(--nuraly-checkbox-transition);
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
-  /* Checked state checkmark */
+  /* Checked checkmark */
   :host([checked]) input:after {
-    border: solid var(--nuraly-checkbox-checkmark-color);
+    border: solid #ffffff;
     border-width: 0 2px 2px 0;
     transform: translate(-50%, -51%) rotate(45deg);
     content: '';
-    width: var(--nuraly-checkbox-local-medium-checked-width); /* Default to medium size */
-    height: var(--nuraly-checkbox-local-medium-checked-height); /* Default to medium size */
-  }
-
-  /* Checkmark sizing per size variant */
-  :host([checked][size='small']) input:after {
-    width: var(--nuraly-checkbox-local-small-checked-width);
-    height: var(--nuraly-checkbox-local-small-checked-height);
-  }
-
-  :host([checked][size='medium']) input:after {
-    width: var(--nuraly-checkbox-local-medium-checked-width);
-    height: var(--nuraly-checkbox-local-medium-checked-height);
   }
+  :host([checked]) input:after { width: 3px; height: 9px; }
+  :host([checked][size="small"]) input:after { width: 2px; height: 7px; }
+  :host([checked][size="large"]) input:after { width: 4px; height: 10px; }
 
-  :host([checked][size='large']) input:after {
-    width: var(--nuraly-checkbox-local-large-checked-width);
-    height: var(--nuraly-checkbox-local-large-checked-height);
-  }
-
-  /* Indeterminate state symbol */
+  /* Indeterminate */
   :host([indeterminate]:not([checked])) input:after {
     content: '-';
-    color: var(--nuraly-checkbox-indeterminate-mark-color);
+    color: #ffffff;
     font-weight: bold;
     transform: translate(-50%, -51%);
   }
+  :host([indeterminate][size="small"]) input:after { font-size: 10px; }
+  :host([indeterminate][size="medium"]) input:after { font-size: 11px; }
+  :host([indeterminate][size="large"]) input:after { font-size: 13px; }
 
-  /* Indeterminate symbol sizing per size variant */
-  :host([indeterminate][size='small']) input:after {
-    font-size: var(--nuraly-checkbox-local-small-indeterminate-size);
-  }
-
-  :host([indeterminate][size='medium']) input:after {
-    font-size: var(--nuraly-checkbox-local-medium-indeterminate-size);
-  }
-
-  :host([indeterminate][size='large']) input:after {
-    font-size: var(--nuraly-checkbox-local-large-indeterminate-size);
-  }
-
-  /* Empty state - no symbol */
+  /* Empty state */
   :host(:not([checked]):not([indeterminate])) input:after {
     content: '';
   }
 
-  /* ========================================
-   * DISABLED STATE SYMBOLS
-   * ======================================== */
-
+  /* Disabled checkmark */
   :host([disabled]) input:after {
-    color: var(--nuraly-checkbox-disabled-checkmark-color);
-    border-color: var(--nuraly-checkbox-disabled-checkmark-color);
+    color: rgba(0, 0, 0, 0.25);
+    border-color: rgba(0, 0, 0, 0.25);
   }
 
-  /* ========================================
-   * LABEL TEXT STYLING
-   * ======================================== */
-
+  /* Label */
   .checkbox-label {
     flex: 1;
     cursor: pointer;
     user-select: none;
-    transition: var(--nuraly-checkbox-transition);
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
-
   :host([disabled]) .checkbox-label {
     cursor: not-allowed;
   }
 
-  /* ========================================
-   * ACCESSIBILITY IMPROVEMENTS
-   * ======================================== */
-
+  /* Accessibility */
   @media (prefers-reduced-motion: reduce) {
     :host,
     input,
@@ -307,16 +138,10 @@ const checkBoxStyles = css `
     }
   }
 
-  /* High contrast mode support */
   @media (prefers-contrast: high) {
-    input {
-      border-width: 2px;
-    }
-    
+    input { border-width: 2px; }
     :host([checked]) input:after,
-    :host([indeterminate]) input:after {
-      font-weight: 900;
-    }
+    :host([indeterminate]) input:after { font-weight: 900; }
   }
 `;
 export const styles = checkBoxStyles;

package/dist/src/components/checkbox/mixins/checkbox-event-mixin.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for checkbox change event detail
+ */
+export interface CheckboxChangeEventDetail {
+    checked: boolean;
+    value?: string;
+    name?: string;
+    indeterminate?: boolean;
+}
+/**
+ * Interface for checkbox focus/blur event detail
+ */
+export interface CheckboxFocusEventDetail {
+    originalEvent: FocusEvent;
+}
+/**
+ * Interface for checkbox keyboard event detail
+ */
+export interface CheckboxKeyboardEventDetail {
+    key: string;
+    code: string;
+    originalEvent: KeyboardEvent;
+}
+/**
+ * Interface for checkbox mouse event detail
+ */
+export interface CheckboxMouseEventDetail {
+    originalEvent: MouseEvent;
+}
+/**
+ * Interface for components that support checkbox event handling
+ */
+export interface CheckboxEventCapable {
+    /**
+     * Handle checkbox change events
+     * @param event - The change event
+     */
+    handleChange(event: Event): void;
+    /**
+     * Handle checkbox focus events
+     * @param event - The focus event
+     */
+    handleFocus(event: FocusEvent): void;
+    /**
+     * Handle checkbox blur events
+     * @param event - The blur event
+     */
+    handleBlur(event: FocusEvent): void;
+    /**
+     * Handle checkbox keydown events
+     * @param event - The keyboard event
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Handle checkbox mouse enter events
+     * @param event - The mouse event
+     */
+    handleMouseEnter(event: MouseEvent): void;
+    /**
+     * Handle checkbox mouse leave events
+     * @param event - The mouse event
+     */
+    handleMouseLeave(event: MouseEvent): void;
+}
+/**
+ * Mixin that provides event handling capabilities to checkbox components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with checkbox event capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyCheckbox extends CheckboxEventMixin(LitElement) {
+ *   // Event handling is automatically provided
+ * }
+ * ```
+ */
+export declare const CheckboxEventMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CheckboxEventCapable> & T;
+export {};
+//# sourceMappingURL=checkbox-event-mixin.d.ts.map

package/dist/src/components/checkbox/mixins/checkbox-event-mixin.js

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides event handling capabilities to checkbox components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with checkbox event capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyCheckbox extends CheckboxEventMixin(LitElement) {
+ *   // Event handling is automatically provided
+ * }
+ * ```
+ */
+export const CheckboxEventMixin = (superClass) => {
+    class CheckboxEventMixinClass extends superClass {
+        handleChange(event) {
+            var _a, _b;
+            const target = event.target;
+            const checked = target.checked;
+            // Get component properties - these should be defined in the component
+            const name = this.name;
+            const value = this.value;
+            const indeterminate = this.indeterminate;
+            // Clear indeterminate state when user interacts
+            if (indeterminate) {
+                this.indeterminate = false;
+            }
+            // Update checked state
+            this.checked = checked;
+            // Dispatch standardized change event
+            (_b = (_a = this).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, 'nr-change', {
+                checked,
+                value,
+                name,
+                indeterminate: false
+            });
+        }
+        handleFocus(event) {
+            var _a, _b;
+            // Dispatch focus event for external listeners
+            (_b = (_a = this).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, 'nr-focus', {
+                originalEvent: event
+            });
+        }
+        handleBlur(event) {
+            var _a, _b;
+            // Dispatch blur event for external listeners
+            (_b = (_a = this).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, 'nr-blur', {
+                originalEvent: event
+            });
+        }
+        handleKeydown(event) {
+            var _a, _b, _c, _d, _e;
+            // Handle keyboard navigation and activation
+            const isActivationKey = (_b = (_a = this).isActivationKey) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            if (isActivationKey) {
+                // Space and Enter keys activate the checkbox
+                event.preventDefault();
+                const input = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input[type="checkbox"]');
+                const disabled = this.disabled;
+                if (input && !disabled) {
+                    input.click();
+                }
+            }
+            // Dispatch keydown event for external listeners
+            (_e = (_d = this).dispatchCustomEvent) === null || _e === void 0 ? void 0 : _e.call(_d, 'nr-keydown', {
+                key: event.key,
+                code: event.code,
+                originalEvent: event
+            });
+        }
+        handleMouseEnter(event) {
+            var _a, _b;
+            // Dispatch mouse enter event for external listeners
+            (_b = (_a = this).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, 'nr-mouseenter', {
+                originalEvent: event
+            });
+        }
+        handleMouseLeave(event) {
+            var _a, _b;
+            // Dispatch mouse leave event for external listeners
+            (_b = (_a = this).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, 'nr-mouseleave', {
+                originalEvent: event
+            });
+        }
+    }
+    return CheckboxEventMixinClass;
+};
+//# sourceMappingURL=checkbox-event-mixin.js.map

package/dist/src/components/checkbox/mixins/checkbox-focus-mixin.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Options for checkbox focus behavior
+ */
+export interface CheckboxFocusOptions {
+    preventScroll?: boolean;
+}
+/**
+ * Interface for components that support checkbox focus operations
+ */
+export interface CheckboxFocusCapable {
+    /**
+     * Focus the checkbox input element
+     * @param options - Focus options
+     */
+    focus(options?: CheckboxFocusOptions): void;
+    /**
+     * Blur the checkbox input element
+     */
+    blur(): void;
+    /**
+     * Check if the checkbox is currently focused
+     * @returns True if focused
+     */
+    isFocused(): boolean;
+    /**
+     * Get the native checkbox input element
+     * @returns The checkbox input element or null
+     */
+    get nativeElement(): HTMLInputElement | null;
+}
+/**
+ * Mixin that provides focus management capabilities to checkbox components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with checkbox focus capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyCheckbox extends CheckboxFocusMixin(LitElement) {
+ *   handleClick() {
+ *     this.focus();
+ *   }
+ * }
+ * ```
+ */
+export declare const CheckboxFocusMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CheckboxFocusCapable> & T;
+export {};
+//# sourceMappingURL=checkbox-focus-mixin.d.ts.map

package/dist/src/components/checkbox/mixins/checkbox-focus-mixin.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides focus management capabilities to checkbox components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with checkbox focus capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyCheckbox extends CheckboxFocusMixin(LitElement) {
+ *   handleClick() {
+ *     this.focus();
+ *   }
+ * }
+ * ```
+ */
+export const CheckboxFocusMixin = (superClass) => {
+    class CheckboxFocusMixinClass extends superClass {
+        /**
+         * Get the checkbox input element
+         */
+        get checkboxElement() {
+            var _a;
+            const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="checkbox"]');
+            if (!input) {
+                throw new Error('CheckboxFocusMixin requires a checkbox input element');
+            }
+            return input;
+        }
+        focus(options = {}) {
+            const input = this.checkboxElement;
+            if (input) {
+                input.focus({ preventScroll: options.preventScroll });
+            }
+        }
+        blur() {
+            const input = this.checkboxElement;
+            if (input) {
+                input.blur();
+            }
+        }
+        isFocused() {
+            const input = this.checkboxElement;
+            return input ? document.activeElement === input : false;
+        }
+        get nativeElement() {
+            var _a;
+            return ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="checkbox"]')) || null;
+        }
+    }
+    return CheckboxFocusMixinClass;
+};
+//# sourceMappingURL=checkbox-focus-mixin.js.map

package/dist/src/components/checkbox/mixins/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { CheckboxFocusMixin, } from './checkbox-focus-mixin.js';
+export { CheckboxEventMixin, } from './checkbox-event-mixin.js';
+export type { CheckboxFocusCapable, CheckboxFocusOptions } from './checkbox-focus-mixin.js';
+export type { CheckboxEventCapable, CheckboxChangeEventDetail, CheckboxFocusEventDetail, CheckboxKeyboardEventDetail, CheckboxMouseEventDetail } from './checkbox-event-mixin.js';
+//# sourceMappingURL=index.d.ts.map