@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,352 @@
+import{css as e,LitElement as r,html as a}from"lit";import{property as c,customElement as o}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const t=e`
+  /* ========================================
+   * 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);
+    cursor: pointer;
+    transition: var(--nuraly-checkbox-transition);
+  }
+
+  /* ========================================
+   * CHECKBOX INPUT ELEMENT STYLES
+   * ======================================== */
+
+  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);
+    margin: 0;
+    outline: none;
+  }
+
+  /* ========================================
+   * SIZE VARIATIONS
+   * ======================================== */
+
+  /* Medium size (default) */
+  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);
+  }
+
+  :host([size='large']) input {
+    width: var(--nuraly-checkbox-size-large);
+    height: var(--nuraly-checkbox-size-large);
+  }
+
+  /* ========================================
+   * 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);
+  }
+
+  /* Checked and indeterminate states */
+  :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);
+  }
+
+  /* Hover states for interactive elements */
+  :host(:not([disabled]):hover) input {
+    border: var(--nuraly-checkbox-border-hover);
+  }
+
+  :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 */
+  input:focus,
+  input:focus-visible {
+    border: var(--nuraly-checkbox-border-focus);
+    outline: var(--nuraly-checkbox-focus-outline);
+    outline-offset: 2px;
+  }
+
+  /* ========================================
+   * DISABLED STATE
+   * ======================================== */
+
+  :host([disabled]) {
+    color: var(--nuraly-checkbox-disabled-text-color);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) input {
+    background-color: var(--nuraly-checkbox-disabled-background);
+    border: 1px solid var(--nuraly-checkbox-disabled-border);
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * CHECKMARK AND INDETERMINATE SYMBOLS
+   * ======================================== */
+
+  /* Base symbol styling */
+  input:after {
+    color: var(--nuraly-checkbox-checkmark-color);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -51%);
+    transition: var(--nuraly-checkbox-transition);
+  }
+
+  /* Checked state checkmark */
+  :host([checked]) input:after {
+    border: solid var(--nuraly-checkbox-checkmark-color);
+    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][size='large']) input:after {
+    width: var(--nuraly-checkbox-local-large-checked-width);
+    height: var(--nuraly-checkbox-local-large-checked-height);
+  }
+
+  /* Indeterminate state symbol */
+  :host([indeterminate]:not([checked])) input:after {
+    content: '-';
+    color: var(--nuraly-checkbox-indeterminate-mark-color);
+    font-weight: bold;
+    transform: translate(-50%, -51%);
+  }
+
+  /* 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 */
+  :host(:not([checked]):not([indeterminate])) input:after {
+    content: '';
+  }
+
+  /* ========================================
+   * DISABLED STATE SYMBOLS
+   * ======================================== */
+
+  :host([disabled]) input:after {
+    color: var(--nuraly-checkbox-disabled-checkmark-color);
+    border-color: var(--nuraly-checkbox-disabled-checkmark-color);
+  }
+
+  /* ========================================
+   * LABEL TEXT STYLING
+   * ======================================== */
+
+  .checkbox-label {
+    flex: 1;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--nuraly-checkbox-transition);
+  }
+
+  :host([disabled]) .checkbox-label {
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * ACCESSIBILITY IMPROVEMENTS
+   * ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    :host,
+    input,
+    input:after,
+    .checkbox-label {
+      transition: none;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    input {
+      border-width: 2px;
+    }
+    
+    :host([checked]) input:after,
+    :host([indeterminate]) input:after {
+      font-weight: 900;
+    }
+  }
+`,i=e=>class extends e{get checkboxElement(){var e;const r=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]');if(!r)throw new Error("CheckboxFocusMixin requires a checkbox input element");return r}focus(e={}){const r=this.checkboxElement;r&&r.focus({preventScroll:e.preventScroll})}blur(){const e=this.checkboxElement;e&&e.blur()}isFocused(){const e=this.checkboxElement;return!!e&&document.activeElement===e}get nativeElement(){var e;return(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]'))||null}},n=e=>class extends e{handleChange(e){var r;const a=e.target.checked,c=this.name,o=this.value;this.indeterminate&&(this.indeterminate=!1),this.checked=a,null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-change",{checked:a,value:o,name:c,indeterminate:!1})}handleFocus(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-focus",{originalEvent:e})}handleBlur(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-blur",{originalEvent:e})}handleKeydown(e){var r,a,c;if(null===(r=this.isActivationKey)||void 0===r?void 0:r.call(this,e)){e.preventDefault();const r=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector('input[type="checkbox"]'),c=this.disabled;r&&!c&&r.click()}null===(c=this.dispatchCustomEvent)||void 0===c||c.call(this,"nr-keydown",{key:e.key,code:e.code,originalEvent:e})}handleMouseEnter(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-mouseenter",{originalEvent:e})}handleMouseLeave(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-mouseleave",{originalEvent:e})}};
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var h=function(e,r,a,c){for(var o,l=arguments.length,t=l<3?r:null===c?c=Object.getOwnPropertyDescriptor(r,a):c,i=e.length-1;i>=0;i--)(o=e[i])&&(t=(l<3?o(t):l>3?o(r,a,t):o(r,a))||t);return l>3&&t&&Object.defineProperty(r,a,t),t};let s=class extends(n(i(l(r)))){constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.indeterminate=!1,this._size="medium",this.autoFocus=!1,this.title="",this.tabIndex=0,this.required=!1,this.id=""}get size(){return this._size}set size(e){["small","medium","large"].includes(e)?this._size=e:(console.warn(`Invalid size value: ${e}. Using default size: medium`),this._size="medium")}connectedCallback(){super.connectedCallback(),this.validateDependencies(),this.autoFocus&&requestAnimationFrame(()=>{this.focus()})}updated(e){super.updated(e),this.setAttribute("data-theme",this.currentTheme)}getCommonAttributes(){return{"data-theme":this.currentTheme,"data-size":this.size}}handleLabelClick(e){this.disabled||(e.preventDefault(),this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-change",{detail:{checked:this.checked,value:this.value},bubbles:!0})))}render(){var e,r,c;const o=this.getCommonAttributes();return a`
+      <input 
+        type="checkbox" 
+        .checked=${this.checked} 
+        .disabled=${this.disabled} 
+        .indeterminate=${this.indeterminate}
+        name=${null!==(e=this.name)&&void 0!==e?e:""}
+        value=${null!==(r=this.value)&&void 0!==r?r:""}
+        id=${this.id}
+        title=${this.title}
+        ?required=${this.required}
+        data-theme="${o["data-theme"]}"
+        data-size="${o["data-size"]}"
+        aria-checked=${this.indeterminate?"mixed":this.checked?"true":"false"}
+        aria-disabled=${this.disabled?"true":"false"}
+        tabindex=${this.disabled?-1:null!==(c=this.tabIndex)&&void 0!==c?c:0}
+        @change=${this.handleChange} 
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @keydown=${this.handleKeydown}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      />
+      <label class="checkbox-label" for=${this.id} @click=${this.handleLabelClick}>
+        <slot></slot>
+      </label>
+    `}};s.styles=t,h([c({type:Boolean,reflect:!0})],s.prototype,"checked",void 0),h([c({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),h([c({type:Boolean,reflect:!0})],s.prototype,"indeterminate",void 0),h([c({reflect:!0})],s.prototype,"size",null),h([c({type:String})],s.prototype,"name",void 0),h([c({type:String})],s.prototype,"value",void 0),h([c({type:Boolean})],s.prototype,"autoFocus",void 0),h([c({type:String})],s.prototype,"title",void 0),h([c({type:Number})],s.prototype,"tabIndex",void 0),h([c({type:Boolean})],s.prototype,"required",void 0),h([c({type:String})],s.prototype,"id",void 0),s=h([o("nr-checkbox")],s);export{s as NrCheckboxElement};

package/dist/src/components/checkbox/checkbox.component.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { CheckboxSize } from './checkbox.types.js';
+declare const NrCheckboxElement_base: (new (...args: any[]) => import("./mixins/checkbox-event-mixin.js").CheckboxEventCapable) & (new (...args: any[]) => import("./mixins/checkbox-focus-mixin.js").CheckboxFocusCapable) & (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.
+ *
+ * @example
+ * ```html
+ * <nr-checkbox>Check me</nr-checkbox>
+ * <nr-checkbox checked>Already checked</nr-checkbox>
+ * <nr-checkbox indeterminate>Indeterminate state</nr-checkbox>
+ * <nr-checkbox size="large" disabled>Large disabled</nr-checkbox>
+ * ```
+ *
+ * @fires nr-change - Dispatched when checkbox state changes
+ * @fires nr-focus - Dispatched when checkbox receives focus
+ * @fires nr-blur - Dispatched when checkbox loses focus
+ * @fires nr-keydown - Dispatched on keydown events
+ * @fires nr-mouseenter - Dispatched when mouse enters checkbox
+ * @fires nr-mouseleave - Dispatched when mouse leaves checkbox
+ *
+ * @slot default - Checkbox label content
+ */
+export declare class NrCheckboxElement extends NrCheckboxElement_base {
+    static styles: import("lit").CSSResult;
+    /** Whether the checkbox is checked */
+    checked: boolean;
+    /** Whether the checkbox is disabled */
+    disabled: boolean;
+    /** Whether the checkbox is in indeterminate state */
+    indeterminate: boolean;
+    /** Checkbox size (small, medium, large) */
+    get size(): CheckboxSize;
+    set size(value: CheckboxSize);
+    private _size;
+    /** Form field name */
+    name?: string;
+    /** Form field value */
+    value?: string;
+    /** Whether the checkbox should be focused when mounted */
+    autoFocus: boolean;
+    /** Checkbox title attribute */
+    title: string;
+    /** Tab index */
+    tabIndex: number;
+    /** Whether the checkbox is required */
+    required: boolean;
+    /** Checkbox ID */
+    id: string;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private getCommonAttributes;
+    private handleLabelClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=checkbox.component.d.ts.map

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

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './checkbox.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { CheckboxFocusMixin, CheckboxEventMixin } from './mixins/index.js';
+/**
+ * Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.
+ *
+ * @example
+ * ```html
+ * <nr-checkbox>Check me</nr-checkbox>
+ * <nr-checkbox checked>Already checked</nr-checkbox>
+ * <nr-checkbox indeterminate>Indeterminate state</nr-checkbox>
+ * <nr-checkbox size="large" disabled>Large disabled</nr-checkbox>
+ * ```
+ *
+ * @fires nr-change - Dispatched when checkbox state changes
+ * @fires nr-focus - Dispatched when checkbox receives focus
+ * @fires nr-blur - Dispatched when checkbox loses focus
+ * @fires nr-keydown - Dispatched on keydown events
+ * @fires nr-mouseenter - Dispatched when mouse enters checkbox
+ * @fires nr-mouseleave - Dispatched when mouse leaves checkbox
+ *
+ * @slot default - Checkbox label content
+ */
+let NrCheckboxElement = class NrCheckboxElement extends CheckboxEventMixin(CheckboxFocusMixin(NuralyUIBaseMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /** Whether the checkbox is checked */
+        this.checked = false;
+        /** Whether the checkbox is disabled */
+        this.disabled = false;
+        /** Whether the checkbox is in indeterminate state */
+        this.indeterminate = false;
+        this._size = "medium" /* CheckboxSize.Medium */;
+        /** Whether the checkbox should be focused when mounted */
+        this.autoFocus = false;
+        /** Checkbox title attribute */
+        this.title = '';
+        /** Tab index */
+        this.tabIndex = 0;
+        /** Whether the checkbox is required */
+        this.required = false;
+        /** Checkbox ID */
+        this.id = '';
+        // Event handling methods are now provided by CheckboxEventMixin
+    }
+    /** Checkbox size (small, medium, large) */
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        const validSizes = ["small" /* CheckboxSize.Small */, "medium" /* CheckboxSize.Medium */, "large" /* CheckboxSize.Large */];
+        if (validSizes.includes(value)) {
+            this._size = value;
+        }
+        else {
+            console.warn(`Invalid size value: ${value}. Using default size: ${"medium" /* CheckboxSize.Medium */}`);
+            this._size = "medium" /* CheckboxSize.Medium */;
+        }
+    }
+    // Focus/blur methods and nativeElement are now provided by CheckboxFocusMixin
+    connectedCallback() {
+        super.connectedCallback();
+        this.validateDependencies();
+        // Handle autoFocus
+        if (this.autoFocus) {
+            // Use requestAnimationFrame to ensure the element is fully rendered
+            requestAnimationFrame(() => {
+                this.focus();
+            });
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Update data-theme attribute on host for CSS theming
+        this.setAttribute('data-theme', this.currentTheme);
+    }
+    getCommonAttributes() {
+        return {
+            'data-theme': this.currentTheme,
+            'data-size': this.size
+        };
+    }
+    handleLabelClick(event) {
+        // Prevent double-firing when clicking the label
+        if (!this.disabled) {
+            event.preventDefault();
+            this.checked = !this.checked;
+            // Fire change event manually since we prevented the default
+            this.dispatchEvent(new CustomEvent('nr-change', {
+                detail: { checked: this.checked, value: this.value },
+                bubbles: true
+            }));
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        const commonAttributes = this.getCommonAttributes();
+        return html `
+      <input 
+        type="checkbox" 
+        .checked=${this.checked} 
+        .disabled=${this.disabled} 
+        .indeterminate=${this.indeterminate}
+        name=${(_a = this.name) !== null && _a !== void 0 ? _a : ''}
+        value=${(_b = this.value) !== null && _b !== void 0 ? _b : ''}
+        id=${this.id}
+        title=${this.title}
+        ?required=${this.required}
+        data-theme="${commonAttributes['data-theme']}"
+        data-size="${commonAttributes['data-size']}"
+        aria-checked=${this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false')}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? -1 : ((_c = this.tabIndex) !== null && _c !== void 0 ? _c : 0)}
+        @change=${this.handleChange} 
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @keydown=${this.handleKeydown}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      />
+      <label class="checkbox-label" for=${this.id} @click=${this.handleLabelClick}>
+        <slot></slot>
+      </label>
+    `;
+    }
+};
+NrCheckboxElement.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrCheckboxElement.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrCheckboxElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrCheckboxElement.prototype, "indeterminate", void 0);
+__decorate([
+    property({ reflect: true })
+], NrCheckboxElement.prototype, "size", null);
+__decorate([
+    property({ type: String })
+], NrCheckboxElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NrCheckboxElement.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrCheckboxElement.prototype, "autoFocus", void 0);
+__decorate([
+    property({ type: String })
+], NrCheckboxElement.prototype, "title", void 0);
+__decorate([
+    property({ type: Number })
+], NrCheckboxElement.prototype, "tabIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrCheckboxElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], NrCheckboxElement.prototype, "id", void 0);
+NrCheckboxElement = __decorate([
+    customElement('nr-checkbox')
+], NrCheckboxElement);
+export { NrCheckboxElement };
+//# sourceMappingURL=checkbox.component.js.map

package/dist/src/components/checkbox/checkbox.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=checkbox.style.d.ts.map