@nuralyui/checkbox 0.0.6 → 0.0.8

package/checkbox.component.js

@@ -12,15 +12,51 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './checkbox.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
-let NrCheckboxElement = class NrCheckboxElement extends NuralyUIBaseMixin(LitElement) {
+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;
     }
@@ -34,55 +70,72 @@ let NrCheckboxElement = class NrCheckboxElement extends NuralyUIBaseMixin(LitEle
             this._size = "medium" /* CheckboxSize.Medium */;
         }
     }
+    // Focus/blur methods and nativeElement are now provided by CheckboxFocusMixin
     connectedCallback() {
         super.connectedCallback();
-        this.updateThemeFromParent();
+        this.validateDependencies();
+        // Handle autoFocus
+        if (this.autoFocus) {
+            // Use requestAnimationFrame to ensure the element is fully rendered
+            requestAnimationFrame(() => {
+                this.focus();
+            });
+        }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        this.updateThemeFromParent();
+        // Update data-theme attribute on host for CSS theming
+        this.setAttribute('data-theme', this.currentTheme);
     }
-    updateThemeFromParent() {
-        var _a;
-        // Check for parent container theme first
-        const parentTheme = (_a = this.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme');
-        const effectiveTheme = parentTheme || this.currentTheme;
-        this.setAttribute('data-theme', effectiveTheme);
+    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;
-        // Check for parent container theme first
-        const parentTheme = (_a = this.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme');
-        const effectiveTheme = parentTheme || this.currentTheme;
+        const commonAttributes = this.getCommonAttributes();
         return html `
       <input 
         type="checkbox" 
         .checked=${this.checked} 
         .disabled=${this.disabled} 
         .indeterminate=${this.indeterminate}
-        name=${(_b = this.name) !== null && _b !== void 0 ? _b : ''}
-        value=${(_c = this.value) !== null && _c !== void 0 ? _c : ''}
-        data-theme="${effectiveTheme}"
+        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')}
-        @change=${this.onChange} 
+        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}
       />
-      <slot></slot>
+      <label class="checkbox-label" for=${this.id} @click=${this.handleLabelClick}>
+        <slot></slot>
+      </label>
     `;
     }
-    onChange(event) {
-        const target = event.target;
-        if (this.indeterminate) {
-            this.indeterminate = false;
-        }
-        this.checked = target.checked;
-        this.dispatchEvent(new CustomEvent('nr-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: this.checked,
-            },
-        }));
-    }
 };
 NrCheckboxElement.styles = styles;
 __decorate([
@@ -103,6 +156,21 @@ __decorate([
 __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);

package/checkbox.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './checkbox.style.js';\nimport { CheckboxSize } from './checkbox.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\n\n@customElement('nr-checkbox')\nexport class NrCheckboxElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n  @property({type: Boolean, reflect: true})\n  checked = false;\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  indeterminate = false;\n\n  @property({reflect: true})\n  get size(): CheckboxSize {\n    return this._size;\n  }\n  set size(value: CheckboxSize) {\n    const validSizes = [CheckboxSize.Small, CheckboxSize.Medium, CheckboxSize.Large];\n    if (validSizes.includes(value)) {\n      this._size = value;\n    } else {\n      console.warn(`Invalid size value: ${value}. Using default size: ${CheckboxSize.Medium}`);\n      this._size = CheckboxSize.Medium;\n    }\n  }\n  private _size: CheckboxSize = CheckboxSize.Medium;\n\n  @property({type: String})\n  name?: string;\n\n  @property({type: String})\n  value?: string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.updateThemeFromParent();\n  }\n\n  override updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    this.updateThemeFromParent();\n  }\n\n  private updateThemeFromParent() {\n    // Check for parent container theme first\n    const parentTheme = this.closest('[data-theme]')?.getAttribute('data-theme');\n    const effectiveTheme = parentTheme || this.currentTheme;\n    this.setAttribute('data-theme', effectiveTheme);\n  }\n\n  override render() {\n    // Check for parent container theme first\n    const parentTheme = this.closest('[data-theme]')?.getAttribute('data-theme');\n    const effectiveTheme = parentTheme || this.currentTheme;\n    \n    return html`\n      <input \n        type=\"checkbox\" \n        .checked=${this.checked} \n        .disabled=${this.disabled} \n        .indeterminate=${this.indeterminate}\n        name=${this.name ?? ''}\n        value=${this.value ?? ''}\n        data-theme=\"${effectiveTheme}\"\n        aria-checked=${this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false')}\n        @change=${this.onChange} \n      />\n      <slot></slot>\n    `;\n  }\n\n  onChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = target.checked;\n    this.dispatchEvent(\n      new CustomEvent('nr-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value: this.checked,\n        },\n      })\n    );\n  }\n}\n"]}
+{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './checkbox.style.js';\nimport { CheckboxSize } from './checkbox.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { CheckboxFocusMixin, CheckboxEventMixin } from './mixins/index.js';\n\n/**\n * Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.\n * \n * @example\n * ```html\n * <nr-checkbox>Check me</nr-checkbox>\n * <nr-checkbox checked>Already checked</nr-checkbox>\n * <nr-checkbox indeterminate>Indeterminate state</nr-checkbox>\n * <nr-checkbox size=\"large\" disabled>Large disabled</nr-checkbox>\n * ```\n * \n * @fires nr-change - Dispatched when checkbox state changes\n * @fires nr-focus - Dispatched when checkbox receives focus\n * @fires nr-blur - Dispatched when checkbox loses focus\n * @fires nr-keydown - Dispatched on keydown events\n * @fires nr-mouseenter - Dispatched when mouse enters checkbox\n * @fires nr-mouseleave - Dispatched when mouse leaves checkbox\n * \n * @slot default - Checkbox label content\n */\n\n@customElement('nr-checkbox')\nexport class NrCheckboxElement extends CheckboxEventMixin(\n  CheckboxFocusMixin(\n    NuralyUIBaseMixin(LitElement)\n  )\n) {\n  static override styles = styles;\n  \n  /** Whether the checkbox is checked */\n  @property({type: Boolean, reflect: true})\n  checked = false;\n\n  /** Whether the checkbox is disabled */\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  /** Whether the checkbox is in indeterminate state */\n  @property({type: Boolean, reflect: true})\n  indeterminate = false;\n\n  /** Checkbox size (small, medium, large) */\n  @property({reflect: true})\n  get size(): CheckboxSize {\n    return this._size;\n  }\n  set size(value: CheckboxSize) {\n    const validSizes = [CheckboxSize.Small, CheckboxSize.Medium, CheckboxSize.Large];\n    if (validSizes.includes(value)) {\n      this._size = value;\n    } else {\n      console.warn(`Invalid size value: ${value}. Using default size: ${CheckboxSize.Medium}`);\n      this._size = CheckboxSize.Medium;\n    }\n  }\n  private _size: CheckboxSize = CheckboxSize.Medium;\n\n  /** Form field name */\n  @property({type: String})\n  name?: string;\n\n  /** Form field value */\n  @property({type: String})\n  value?: string;\n\n  /** Whether the checkbox should be focused when mounted */\n  @property({type: Boolean})\n  autoFocus = false;\n\n  /** Checkbox title attribute */\n  @property({type: String})\n  override title = '';\n\n  /** Tab index */\n  @property({type: Number})\n  override tabIndex = 0;\n\n  /** Whether the checkbox is required */\n  @property({type: Boolean})\n  required = false;\n\n  /** Checkbox ID */\n  @property({type: String})\n  override id = '';\n\n  // Focus/blur methods and nativeElement are now provided by CheckboxFocusMixin\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n    \n    // Handle autoFocus\n    if (this.autoFocus) {\n      // Use requestAnimationFrame to ensure the element is fully rendered\n      requestAnimationFrame(() => {\n        this.focus();\n      });\n    }\n  }\n\n  override updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    // Update data-theme attribute on host for CSS theming\n    this.setAttribute('data-theme', this.currentTheme);\n  }\n\n  private getCommonAttributes() {\n    return {\n      'data-theme': this.currentTheme,\n      'data-size': this.size\n    };\n  }\n\n  private handleLabelClick(event: Event) {\n    // Prevent double-firing when clicking the label\n    if (!this.disabled) {\n      event.preventDefault();\n      this.checked = !this.checked;\n      // Fire change event manually since we prevented the default\n      this.dispatchEvent(new CustomEvent('nr-change', {\n        detail: { checked: this.checked, value: this.value },\n        bubbles: true\n      }));\n    }\n  }\n\n  override render() {\n    const commonAttributes = this.getCommonAttributes();\n    \n    return html`\n      <input \n        type=\"checkbox\" \n        .checked=${this.checked} \n        .disabled=${this.disabled} \n        .indeterminate=${this.indeterminate}\n        name=${this.name ?? ''}\n        value=${this.value ?? ''}\n        id=${this.id}\n        title=${this.title}\n        ?required=${this.required}\n        data-theme=\"${commonAttributes['data-theme']}\"\n        data-size=\"${commonAttributes['data-size']}\"\n        aria-checked=${this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? -1 : (this.tabIndex ?? 0)}\n        @change=${this.handleChange} \n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @keydown=${this.handleKeydown}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      />\n      <label class=\"checkbox-label\" for=${this.id} @click=${this.handleLabelClick}>\n        <slot></slot>\n      </label>\n    `;\n  }\n\n  // Event handling methods are now provided by CheckboxEventMixin\n}\n"]}

package/checkbox.style.d.ts

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

package/checkbox.style.js

@@ -1,95 +1,323 @@
 import { css } from 'lit';
-import { styleVariables } from './checkbox.style.variables.js';
 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(--hybrid-checkbox-gap);
-    font-family: var(--hybrid-checkbox-font-family);
-    color: var(--hybrid-checkbox-color);
+    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(--hybrid-checkbox-empty-background-color);
-    border: var(--hybrid-checkbox-empty-border);
+    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(--hybrid-checkbox-filled-background-color);
+    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(--hybrid-checkbox-disabled-text-color);
+    color: var(--nuraly-checkbox-disabled-text-color);
+    cursor: not-allowed;
   }
+
   :host([disabled]) input {
-    background-color: var(--hybrid-checkbox-disabled-background-color);
+    background-color: var(--nuraly-checkbox-disabled-background);
+    border: 1px solid var(--nuraly-checkbox-disabled-border);
     cursor: not-allowed;
   }
-  input {
-    appearance: none;
-    width: var(--hybrid-checkbox-medium-width);
-    height: var(--hybrid-checkbox-medium-height);
-    cursor: pointer;
-    position: relative;
-    border-radius: var(--hybrid-checkbox-border-radius);
-  }
+
+  /* ========================================
+   * CHECKMARK AND INDETERMINATE SYMBOLS
+   * ======================================== */
+
+  /* Base symbol styling */
   input:after {
-    color: var(--hybrid-checkbox-symbol-color);
+    color: var(--nuraly-checkbox-checkmark-color);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -51%);
+    transition: var(--nuraly-checkbox-transition);
   }
-  input:focus {
-    border: var(--hybrid-checkbox-focus-border);
-    outline: var(--hybrid-checkbox-focus-outline);
+
+  /* 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 */
   }
-  :host([size='large']) input {
-    width: var(--hybrid-checkbox-large-width);
-    height: var(--hybrid-checkbox-large-height);
+
+  /* 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([size='small']) input {
-    width: var(--hybrid-checkbox-small-width);
-    height: var(--hybrid-checkbox-small-height);
+
+  :host([checked][size='medium']) input:after {
+    width: var(--nuraly-checkbox-local-medium-checked-width);
+    height: var(--nuraly-checkbox-local-medium-checked-height);
   }
 
-  :host([indeterminate][size='medium']) input:after {
-    font-size: var(--hybrid-checkbox-medium-indeterminate-size);
+  :host([checked][size='large']) input:after {
+    width: var(--nuraly-checkbox-local-large-checked-width);
+    height: var(--nuraly-checkbox-local-large-checked-height);
   }
-  :host([indeterminate][size='large']) input:after {
-    font-size: var(--hybrid-checkbox-large-indeterminate-size);
+
+  /* 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(--hybrid-checkbox-small-indeterminate-size);
+    font-size: var(--nuraly-checkbox-local-small-indeterminate-size);
   }
 
-  :host([checked]) input:after {
-    border: solid;
-    border-width: 0 2px 2px 0;
-    transform: translate(-50%, -51%) rotate(45deg);
+  :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: '';
   }
-  :host([checked][size='small']) input:after {
-    width: var(--hybrid-checkbox-small-checked-width);
-    height: var(--hybrid-checkbox-small-checked-height);
+
+  /* ========================================
+   * DISABLED STATE SYMBOLS
+   * ======================================== */
+
+  :host([disabled]) input:after {
+    color: var(--nuraly-checkbox-disabled-checkmark-color);
+    border-color: var(--nuraly-checkbox-disabled-checkmark-color);
   }
-  :host([checked][size='large']) input:after {
-    width: var(--hybrid-checkbox-large-checked-width);
-    height: var(--hybrid-checkbox-large-checked-height);
+
+  /* ========================================
+   * LABEL TEXT STYLING
+   * ======================================== */
+
+  .checkbox-label {
+    flex: 1;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--nuraly-checkbox-transition);
   }
-  :host([checked][size='medium']) input:after {
-    width: var(--hybrid-checkbox-medium-checked-width);
-    height: var(--hybrid-checkbox-medium-checked-height);
+
+  :host([disabled]) .checkbox-label {
+    cursor: not-allowed;
   }
 
-  :host([indeterminate]:not([checked])) input:after {
-    content: '-';
+  /* ========================================
+   * ACCESSIBILITY IMPROVEMENTS
+   * ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    :host,
+    input,
+    input:after,
+    .checkbox-label {
+      transition: none;
+    }
   }
-  :host(:not([checked]):not([indeterminate])) input:after {
-    content: '';
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    input {
+      border-width: 2px;
+    }
+    
+    :host([checked]) input:after,
+    :host([indeterminate]) input:after {
+      font-weight: 900;
+    }
   }
 `;
-export const styles = [checkBoxStyles, styleVariables];
+export const styles = checkBoxStyles;
 //# sourceMappingURL=checkbox.style.js.map

package/checkbox.style.js.map

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