@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,302 +1,133 @@
-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
-   */
-
+import{css as e,html as t,LitElement as i}from"lit";import{property as s,customElement as n}from"lit/decorators.js";const o=e`
   :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]) 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='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 */
+  /* 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,
@@ -306,47 +137,57 @@ import{css as e,LitElement as r,html as a}from"lit";import{property as c,customE
     }
   }
 
-  /* 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; }
   }
-`,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})}};
+`,r=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},a=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},l=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(a())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!a())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,s):console.error(s.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},h=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const s=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,s)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const s=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,s)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},d=new Set,c=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const u=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=p(i);e&&function(e,t,i){var s;if(!c.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),c.set(e,i)}const n=c.get(e),o=`doc:${e}`;if(d.has(o)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],d.add(o)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const o=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${e}`;d.has(o)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,n],d.add(o)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function p(e){return Array.isArray(e)?e.map(e=>p(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const f=e=>class extends e{get checkboxElement(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]');if(!t)throw new Error("CheckboxFocusMixin requires a checkbox input element");return t}focus(e={}){const t=this.checkboxElement;t&&t.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}},m=e=>class extends e{handleChange(e){var t;const i=e.target.checked,s=this.name,n=this.value;this.indeterminate&&(this.indeterminate=!1),this.checked=i,null===(t=this.dispatchCustomEvent)||void 0===t||t.call(this,"nr-change",{checked:i,value:n,name:s,indeterminate:!1})}handleFocus(e){var t;null===(t=this.dispatchCustomEvent)||void 0===t||t.call(this,"nr-focus",{originalEvent:e})}handleBlur(e){var t;null===(t=this.dispatchCustomEvent)||void 0===t||t.call(this,"nr-blur",{originalEvent:e})}handleKeydown(e){var t,i,s;if(null===(t=this.isActivationKey)||void 0===t?void 0:t.call(this,e)){e.preventDefault();const t=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector('input[type="checkbox"]'),s=this.disabled;t&&!s&&t.click()}null===(s=this.dispatchCustomEvent)||void 0===s||s.call(this,"nr-keydown",{key:e.key,code:e.code,originalEvent:e})}handleMouseEnter(e){var t;null===(t=this.dispatchCustomEvent)||void 0===t||t.call(this,"nr-mouseenter",{originalEvent:e})}handleMouseLeave(e){var t;null===(t=this.dispatchCustomEvent)||void 0===t||t.call(this,"nr-mouseleave",{originalEvent:e})}};
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 /**
  * @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} 
+var b=function(e,t,i,s){for(var n,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(n=e[a])&&(r=(o<3?n(r):o>3?n(t,i,r):n(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};let v=class extends(m(f((e=>l(r(h(u(e)))))(i)))){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()})}getCommonAttributes(){return{"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,i,s;const n=this.getCommonAttributes();return t`
+      <input
+        part="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:""}
+        value=${null!==(i=this.value)&&void 0!==i?i:""}
         id=${this.id}
         title=${this.title}
         ?required=${this.required}
-        data-theme="${o["data-theme"]}"
-        data-size="${o["data-size"]}"
+        data-size="${n["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} 
+        tabindex=${this.disabled?-1:null!==(s=this.tabIndex)&&void 0!==s?s: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}>
+      <label part="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};
+    `}};v.styles=o,v.useShadowDom=!0,b([s({type:Boolean,reflect:!0})],v.prototype,"checked",void 0),b([s({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),b([s({type:Boolean,reflect:!0})],v.prototype,"indeterminate",void 0),b([s({reflect:!0})],v.prototype,"size",null),b([s({type:String})],v.prototype,"name",void 0),b([s({type:String})],v.prototype,"value",void 0),b([s({type:Boolean})],v.prototype,"autoFocus",void 0),b([s({type:String})],v.prototype,"title",void 0),b([s({type:Number})],v.prototype,"tabIndex",void 0),b([s({type:Boolean})],v.prototype,"required",void 0),b([s({type:String})],v.prototype,"id",void 0),v=b([n("nr-checkbox")],v);export{v as NrCheckboxElement};

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

@@ -5,7 +5,7 @@
  */
 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;
+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) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.
  *
@@ -25,9 +25,13 @@ declare const NrCheckboxElement_base: (new (...args: any[]) => import("./mixins/
  * @fires nr-mouseleave - Dispatched when mouse leaves checkbox
  *
  * @slot default - Checkbox label content
+ *
+ * @csspart input - The native checkbox input element
+ * @csspart label - The label element wrapping the slot content
  */
 export declare class NrCheckboxElement extends NrCheckboxElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Whether the checkbox is checked */
     checked: boolean;
     /** Whether the checkbox is disabled */
@@ -53,7 +57,6 @@ export declare class NrCheckboxElement extends NrCheckboxElement_base {
     /** Checkbox ID */
     id: string;
     connectedCallback(): void;
-    updated(changedProperties: Map<string, any>): void;
     private getCommonAttributes;
     private handleLabelClick;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -33,6 +33,9 @@ import { CheckboxFocusMixin, CheckboxEventMixin } from './mixins/index.js';
  * @fires nr-mouseleave - Dispatched when mouse leaves checkbox
  *
  * @slot default - Checkbox label content
+ *
+ * @csspart input - The native checkbox input element
+ * @csspart label - The label element wrapping the slot content
  */
 let NrCheckboxElement = class NrCheckboxElement extends CheckboxEventMixin(CheckboxFocusMixin(NuralyUIBaseMixin(LitElement))) {
     constructor() {
@@ -82,14 +85,8 @@ let NrCheckboxElement = class NrCheckboxElement extends CheckboxEventMixin(Check
             });
         }
     }
-    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
         };
     }
@@ -109,35 +106,36 @@ let NrCheckboxElement = class NrCheckboxElement extends CheckboxEventMixin(Check
         var _a, _b, _c;
         const commonAttributes = this.getCommonAttributes();
         return html `
-      <input 
-        type="checkbox" 
-        .checked=${this.checked} 
-        .disabled=${this.disabled} 
+      <input
+        part="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} 
+        @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}>
+      <label part="label" class="checkbox-label" for=${this.id} @click=${this.handleLabelClick}>
         <slot></slot>
       </label>
     `;
     }
 };
 NrCheckboxElement.styles = styles;
+NrCheckboxElement.useShadowDom = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrCheckboxElement.prototype, "checked", void 0);