@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,9 +1,9 @@
-import{css as t,LitElement as i,html as s}from"lit";import{property as e,state as n,customElement as r}from"lit/decorators.js";import{NuralyUIBaseMixin as o}from"@nuralyui/common/mixins";
+import{css as t,html as i,LitElement as e}from"lit";import{property as s,state as n,customElement as r}from"lit/decorators.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const a=t`
+ */const o=t`
   :host {
     display: block;
     width: 100%;
@@ -18,7 +18,7 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-form-gap, 16px);
+    gap: 16px;
   }
 
   .form-wrapper[disabled] {
@@ -60,7 +60,7 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
   /* Responsive design */
   @media (max-width: 768px) {
     .form-wrapper {
-      gap: var(--nuraly-form-gap-mobile, 12px);
+      gap: 12px;
     }
   }
 `
@@ -68,23 +68,35 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var d,l;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Submitted="submitted"}(d||(d={})),function(t){t.Idle="idle",t.Submitting="submitting",t.Success="success",t.Error="error"}(l||(l={}));const h={VALIDATION_CHANGED:"nr-form-validation-changed",FIELD_CHANGED:"nr-form-field-changed",SUBMIT_ATTEMPT:"nr-form-submit-attempt",SUBMIT_SUCCESS:"nr-form-submit-success",SUBMIT_ERROR:"nr-form-submit-error",RESET:"nr-form-reset"};
+ */;var a,d;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Submitted="submitted"}(a||(a={})),function(t){t.Idle="idle",t.Submitting="submitting",t.Success="success",t.Error="error"}(d||(d={}));const h={VALIDATION_CHANGED:"nr-form-validation-changed",FIELD_CHANGED:"nr-form-field-changed",SUBMIT_ATTEMPT:"nr-form-submit-attempt",SUBMIT_SUCCESS:"nr-form-submit-success",SUBMIT_ERROR:"nr-form-submit-error",RESET:"nr-form-reset"},l=t=>class extends t{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 t,i,e;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(i=this.designSystemObserver)||void 0===i||i.disconnect(),null===(e=this.mediaQuery)||void 0===e||e.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,i;const e=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return e||((null===(i=window.matchMedia)||void 0===i?void 0:i.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const i=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===i?i:"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))}},c=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},u=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!c())return!0;let i=!0;for(const e of this.requiredComponents)if(!this.isComponentAvailable(e)){i=!1;const s=new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(e,s):console.error(s.message)}return i}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const i=this.requiredComponents.indexOf(t);i>-1&&this.requiredComponents.splice(i,1)}},v=t=>class extends t{dispatchCustomEvent(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,i){var e;const s=Object.assign(Object.assign({},i),{timestamp:Date.now(),componentName:(null===(e=this.tagName)||void 0===e?void 0:e.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,originalEvent:i.originalEvent},i);this.dispatchCustomEvent(t,e)}dispatchFocusEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,focused:i.focused,cursorPosition:i.cursorPosition,selectedText:i.selectedText},i);this.dispatchCustomEvent(t,e)}dispatchValidationEvent(t,i){var e;const s=Object.assign({target:i.target||this,value:i.value,isValid:null!==(e=i.isValid)&&void 0!==e&&e,error:i.error},i);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,i){const e=Object.assign({target:i.target||this,action:i.action,previousValue:i.previousValue,newValue:i.newValue},i);this.dispatchCustomEvent(t,e)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},m=new Set,f=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var u=function(t,i,s,e){return new(s||(s=Promise))(function(n,r){function o(t){try{d(e.next(t))}catch(t){r(t)}}function a(t){try{d(e.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof s?i:new s(function(t){t(i)})).then(o,a)}d((e=e.apply(t,i||[])).next())})};class c{constructor(t){this.host=t,this.fields=new Map,this.validationState=d.Pristine,this.validationPromise=null}registerField(t){var i;const s=t.name||t.getAttribute("name")||`field-${Date.now()}`,e={element:t,name:s,value:t.value,isValid:t.getValidationStatus().isValid,validationMessage:t.validationMessage||"",required:null!==(i=t.required)&&void 0!==i&&i,touched:!1,dirty:!1};this.fields.set(s,e),this.addFieldListeners(t,s)}unregisterField(t){const i=this.fields.get(t);i&&(this.removeFieldListeners(i.element),this.fields.delete(t))}addFieldListeners(t,i){t.addEventListener("nr-validation",t=>this.handleFieldValidation(i,t))}removeFieldListeners(t){}handleFieldValidation(t,i){const s=this.fields.get(t);if(s){if(i&&i.detail)s.isValid=i.detail.isValid||!1,s.validationMessage=i.detail.validationMessage||"";else{const t=s.element.getValidationStatus();s.isValid=t.isValid,s.validationMessage=s.element.validationMessage||""}this.updateFormValidationState()}}updateFormValidationState(){const t=this.getInvalidFields(),i=0===t.length;this.validationState=i?d.Valid:d.Invalid;const s={isValid:i,invalidFields:t,validationErrors:this.buildValidationErrors(),summary:i?"Form is valid":`${t.length} field(s) have errors`};this.dispatchValidationEvent(s)}buildValidationErrors(){const t={};for(const[i,s]of this.fields)!s.isValid&&s.validationMessage&&(t[i]=s.validationMessage);return t}validateForm(){return null!==this.validationPromise||(this.validationState=d.Pending,this.validationPromise=this.performValidation()),this.validationPromise}performValidation(){return u(this,void 0,void 0,function*(){const t=[],i={};for(const[s,e]of this.fields){const n=e.element.getValidationStatus().isValid;e.isValid=n,e.validationMessage=e.element.validationMessage||"",n||(t.push(e),i[s]=e.validationMessage)}const s=0===t.length;this.validationState=s?d.Valid:d.Invalid;const e={isValid:s,invalidFields:t,validationErrors:i,summary:s?"Form is valid":`${t.length} field(s) have errors`};return this.dispatchValidationEvent(e),this.validationPromise=null,e})}getValidationState(){return this.validationState}getFields(){return Array.from(this.fields.values())}getInvalidFields(){return Array.from(this.fields.values()).filter(t=>!t.isValid)}isValid(){return this.validationState===d.Valid&&Array.from(this.fields.values()).every(t=>t.isValid)}focusFirstInvalidField(){const t=Array.from(this.fields.values()).find(t=>!t.isValid);return!(!t||"function"!=typeof t.element.focus)&&(t.element.focus(),!0)}reset(){for(const t of this.fields.values())"clearValidation"in t.element&&"function"==typeof t.element.clearValidation&&t.element.clearValidation(),"value"in t.element&&(t.element.value=""),t.touched=!1,t.dirty=!1,t.isValid=!0,t.validationMessage="";this.validationState=d.Pristine,this.dispatchResetEvent()}dispatchValidationEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.VALIDATION_CHANGED,{validationResult:t})}dispatchResetEvent(){var t,i;null===(i=(t=this.host).dispatchCustomEvent)||void 0===i||i.call(t,h.RESET,{})}}
+ */
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var v=function(t,i,s,e){return new(s||(s=Promise))(function(n,r){function o(t){try{d(e.next(t))}catch(t){r(t)}}function a(t){try{d(e.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof s?i:new s(function(t){t(i)})).then(o,a)}d((e=e.apply(t,i||[])).next())})};class m{constructor(t){this.host=t,this.submissionState=l.Idle,this.lastSubmissionData=null}getSubmissionState(){return this.submissionState}isSubmitting(){return this.submissionState===l.Submitting}collectFormData(){const t=new FormData,i={},s={};return this.getFormFields().forEach(e=>{const n=e.name||e.getAttribute("name");if(!n)return;const r=e.value;null!=r&&t.append(n,String(r)),i[n]=r,s[n]={element:e,value:r,name:n,type:e.tagName.toLowerCase(),required:e.required||!1,disabled:e.disabled||!1}}),{formData:t,jsonData:i,fields:s}}submitForm(t){return v(this,void 0,void 0,function*(){if(this.isSubmitting())throw new Error("Form is already submitting");try{this.setSubmissionState(l.Submitting);const i=this.host.validationController;if(i){const t=yield i.validateForm();if(!t.isValid)throw i.focusFirstInvalidField(),this.dispatchSubmitAttemptEvent(t),new Error(`Form validation failed: ${t.summary}`)}const s=this.collectFormData();return t&&(Object.assign(s.jsonData,t),Object.entries(t).forEach(([t,i])=>{s.formData.append(t,String(i))})),this.lastSubmissionData=s,this.dispatchSubmitSuccessEvent(s),this.setSubmissionState(l.Success),s}catch(t){throw this.setSubmissionState(l.Error),this.dispatchSubmitErrorEvent(t),t}})}resetSubmission(){this.submissionState=l.Idle,this.lastSubmissionData=null}getLastSubmissionData(){return this.lastSubmissionData}getFormFields(){var t;const i=this.host,s=[],e=["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker","input","select","textarea"];e.forEach(t=>{i.querySelectorAll(t).forEach(t=>{(t.name||t.getAttribute("name"))&&s.push(t)})});return((null===(t=i.shadowRoot)||void 0===t?void 0:t.querySelectorAll("slot"))||[]).forEach(t=>{t.assignedElements({flatten:!0}).forEach(t=>{e.forEach(i=>{if(t.matches&&t.matches(i)){const i=t;(i.name||i.getAttribute("name"))&&s.push(i)}t.querySelectorAll(i).forEach(t=>{const i=t;(i.name||i.getAttribute("name"))&&s.push(i)})})})}),s}setSubmissionState(t){var i,s;this.submissionState=t,null===(s=(i=this.host).requestUpdate)||void 0===s||s.call(i)}dispatchSubmitAttemptEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.SUBMIT_ATTEMPT,{validationResult:t})}dispatchSubmitSuccessEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.SUBMIT_SUCCESS,{formData:t})}dispatchSubmitErrorEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.SUBMIT_ERROR,{error:t})}}
+ */
+const p=t=>{class i extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,i=this.tagName.toLowerCase(),e=t.styles;if(e){const t=b(e);t&&function(t,i,e){var s;if(!f.has(t)){const e=new CSSStyleSheet;e.replaceSync(i),f.set(t,e)}const n=f.get(t),r=`doc:${t}`;if(m.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],m.add(r)),e){let i=e;for(;i;){const e=i.getRootNode();if(!(e instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=e.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;m.has(r)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,n],m.add(r)),i=e.host}}}}(i,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(i=>i instanceof Element&&i.getAttribute("slot")===t):[]}}return i.useShadowDom=!1,i};function b(t){return Array.isArray(t)?t.map(t=>b(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var f=function(t,i,s,e){for(var n,r=arguments.length,o=r<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(i,s,o):n(i,s))||o);return r>3&&o&&Object.defineProperty(i,s,o),o},p=function(t,i,s,e){return new(s||(s=Promise))(function(n,r){function o(t){try{d(e.next(t))}catch(t){r(t)}}function a(t){try{d(e.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof s?i:new s(function(t){t(i)})).then(o,a)}d((e=e.apply(t,i||[])).next())})};let b=class extends(o(i)){constructor(){super(...arguments),this.config={validateOnChange:!1,validateOnBlur:!0,showErrorsImmediately:!1,preventInvalidSubmission:!0,resetOnSuccess:!1,validationDelay:300},this.validateOnChange=!1,this.validateOnBlur=!0,this.preventInvalidSubmission=!0,this.resetOnSuccess=!1,this.method="POST",this.enctype="multipart/form-data",this.disabled=!1,this._validationState=d.Pristine,this._submissionState=l.Idle,this.validationController=new c(this),this.submissionController=new m(this),this.handleValidationChanged=t=>{const i=t.detail.validationResult;i&&(this._validationState=i.isValid?d.Valid:d.Invalid)}}get validationState(){return this._validationState}get submissionState(){return this._submissionState}connectedCallback(){super.connectedCallback(),this.setupFormObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFormObserver()}willUpdate(t){super.willUpdate(t),(t.has("validateOnChange")||t.has("validateOnBlur")||t.has("preventInvalidSubmission")||t.has("resetOnSuccess"))&&(this.config=Object.assign(Object.assign({},this.config),{validateOnChange:this.validateOnChange,validateOnBlur:this.validateOnBlur,preventInvalidSubmission:this.preventInvalidSubmission,resetOnSuccess:this.resetOnSuccess}))}firstUpdated(){this.registerExistingFields(),this.setupFormEvents()}setupFormObserver(){const t=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&this.registerFieldsInElement(t)})})});t.observe(this,{childList:!0,subtree:!0}),this._formObserver=t}cleanupFormObserver(){const t=this._formObserver;t&&t.disconnect()}registerExistingFields(){this.registerFieldsInElement(this)}registerFieldsInElement(t){["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker"].forEach(i=>{t.querySelectorAll(i).forEach(t=>{t.getAttribute("name")&&this.validationController.registerField(t)})})}setupFormEvents(){this.addEventListener("submit",this.handleFormSubmit),this.addEventListener("reset",this.handleFormReset),this.addEventListener(h.VALIDATION_CHANGED,this.handleValidationChanged)}handleFormSubmit(t){return p(this,void 0,void 0,function*(){if(t.preventDefault(),!this.disabled)try{const t=yield this.submissionController.submitForm();this.resetOnSuccess&&this.reset(),this.action&&this.performNativeSubmission(t.formData)}catch(t){console.error("Form submission failed:",t)}})}handleFormReset(t){t.preventDefault(),this.reset()}performNativeSubmission(t){const i=document.createElement("form");i.action=this.action,i.method=this.method,i.enctype=this.enctype,this.target&&(i.target=this.target);for(const[s,e]of t.entries()){const t=document.createElement("input");t.type="hidden",t.name=s,t.value=e,i.appendChild(t)}document.body.appendChild(i),i.submit(),document.body.removeChild(i)}validate(){return p(this,void 0,void 0,function*(){return(yield this.validationController.validateForm()).isValid})}submit(t){return p(this,void 0,void 0,function*(){yield this.submissionController.submitForm(t)})}reset(){this.validationController.reset(),this.submissionController.resetSubmission(),this._validationState=d.Pristine,this._submissionState=l.Idle}get isValid(){return this.validationController.isValid()}get isSubmitting(){return this.submissionController.isSubmitting()}getFormData(){return this.submissionController.collectFormData()}getInvalidFields(){return this.validationController.getInvalidFields()}getFieldsValue(t){const i=this.getFormData().jsonData;if(t&&t.length>0){const s={};return t.forEach(t=>{t in i&&(s[t]=i[t])}),s}return i}getFieldValue(t){return this.getFieldsValue()[t]}setFieldsValue(t){Object.entries(t).forEach(([t,i])=>{this.setFieldValue(t,i)})}setFieldValue(t,i){const s=this.validationController.getFields().find(i=>i.name===t);s&&s.element&&(s.element.value=i,s.value=i,s.element.dispatchEvent(new Event("change",{bubbles:!0})))}validateFields(t){return p(this,void 0,void 0,function*(){const i=yield this.validationController.validateForm();if(t&&t.length>0){const s={};if(t.forEach(t=>{i.validationErrors[t]&&(s[t]=i.validationErrors[t])}),Object.keys(s).length>0)throw new Error(JSON.stringify(s));return this.getFieldsValue(t)}if(!i.isValid)throw new Error(JSON.stringify(i.validationErrors));return this.getFieldsValue()})}resetFields(t){if(!t||0===t.length)return void this.reset();const i=this.validationController.getFields();t.forEach(t=>{const s=i.find(i=>i.name===t);s&&s.element&&(s.element.value="",s.value="",s.touched=!1,s.dirty=!1,s.isValid=!0,s.validationMessage="",s.element.dispatchEvent(new Event("change",{bubbles:!0})))})}getFieldError(t){const i=this.validationController.getFields().find(i=>i.name===t);return i&&!i.isValid?i.validationMessage:null}getFieldsError(t){const i=this.validationController.getFields(),s={};return(t?i.filter(i=>t.includes(i.name)):i).forEach(t=>{s[t.name]=t.isValid?null:t.validationMessage}),s}isFieldTouched(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.touched}isFieldsTouched(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.touched)}isFieldDirty(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.dirty}isFieldsDirty(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.dirty)}getFieldInstance(t){const i=this.validationController.getFields().find(i=>i.name===t);return i?i.element:null}scrollToField(t){if(t){const i=this.getFieldInstance(t);return!!i&&(i.scrollIntoView({behavior:"smooth",block:"center"}),"function"==typeof i.focus&&i.focus(),!0)}return this.validationController.focusFirstInvalidField()}finish(){return p(this,void 0,void 0,function*(){try{const t=yield this.validateFields();return yield this.submit(),t}catch(t){throw this.scrollToField(),t}})}getFieldsWithErrors(){return this.validationController.getFields().filter(t=>!t.isValid).map(t=>t.name)}hasErrors(){return this.getFieldsWithErrors().length>0}getFormState(){const t=this.validationController.getFields();return{isValid:this.isValid,isSubmitting:this.isSubmitting,hasErrors:this.hasErrors(),errorCount:this.getFieldsWithErrors().length,fieldCount:t.length,touchedFields:t.filter(t=>t.touched).map(t=>t.name),dirtyFields:t.filter(t=>t.dirty).map(t=>t.name),invalidFields:this.getFieldsWithErrors()}}setLoading(t){this.disabled=t,this.requestUpdate()}render(){return s`
-      <form 
+ */var g=function(t,i,e,s){return new(e||(e=Promise))(function(n,r){function o(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}d((s=s.apply(t,i||[])).next())})};class y{constructor(t){this.host=t,this.fields=new Map,this.validationState=a.Pristine,this.validationPromise=null}registerField(t){var i;const e=t.name||t.getAttribute("name")||`field-${Date.now()}`,s={element:t,name:e,value:t.value,isValid:t.getValidationStatus().isValid,validationMessage:t.validationMessage||"",required:null!==(i=t.required)&&void 0!==i&&i,touched:!1,dirty:!1};this.fields.set(e,s),this.addFieldListeners(t,e)}unregisterField(t){const i=this.fields.get(t);i&&(this.removeFieldListeners(i.element),this.fields.delete(t))}addFieldListeners(t,i){t.addEventListener("nr-validation",t=>this.handleFieldValidation(i,t))}removeFieldListeners(t){}handleFieldValidation(t,i){const e=this.fields.get(t);if(e){if(i&&i.detail)e.isValid=i.detail.isValid||!1,e.validationMessage=i.detail.validationMessage||"";else{const t=e.element.getValidationStatus();e.isValid=t.isValid,e.validationMessage=e.element.validationMessage||""}this.updateFormValidationState()}}updateFormValidationState(){const t=this.getInvalidFields(),i=0===t.length;this.validationState=i?a.Valid:a.Invalid;const e={isValid:i,invalidFields:t,validationErrors:this.buildValidationErrors(),summary:i?"Form is valid":`${t.length} field(s) have errors`};this.dispatchValidationEvent(e)}buildValidationErrors(){const t={};for(const[i,e]of this.fields)!e.isValid&&e.validationMessage&&(t[i]=e.validationMessage);return t}validateForm(){return null!==this.validationPromise||(this.validationState=a.Pending,this.validationPromise=this.performValidation()),this.validationPromise}performValidation(){return g(this,void 0,void 0,function*(){const t=[],i={};for(const[e,s]of this.fields){const n=s.element.getValidationStatus().isValid;s.isValid=n,s.validationMessage=s.element.validationMessage||"",n||(t.push(s),i[e]=s.validationMessage)}const e=0===t.length;this.validationState=e?a.Valid:a.Invalid;const s={isValid:e,invalidFields:t,validationErrors:i,summary:e?"Form is valid":`${t.length} field(s) have errors`};return this.dispatchValidationEvent(s),this.validationPromise=null,s})}getValidationState(){return this.validationState}getFields(){return Array.from(this.fields.values())}getInvalidFields(){return Array.from(this.fields.values()).filter(t=>!t.isValid)}isValid(){return this.validationState===a.Valid&&Array.from(this.fields.values()).every(t=>t.isValid)}focusFirstInvalidField(){const t=Array.from(this.fields.values()).find(t=>!t.isValid);return!(!t||"function"!=typeof t.element.focus)&&(t.element.focus(),!0)}reset(){for(const t of this.fields.values())"clearValidation"in t.element&&"function"==typeof t.element.clearValidation&&t.element.clearValidation(),"value"in t.element&&(t.element.value=""),t.touched=!1,t.dirty=!1,t.isValid=!0,t.validationMessage="";this.validationState=a.Pristine,this.dispatchResetEvent()}dispatchValidationEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.VALIDATION_CHANGED,{validationResult:t})}dispatchResetEvent(){var t,i;null===(i=(t=this.host).dispatchCustomEvent)||void 0===i||i.call(t,h.RESET,{})}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var w=function(t,i,e,s){return new(e||(e=Promise))(function(n,r){function o(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}d((s=s.apply(t,i||[])).next())})};class F{constructor(t){this.host=t,this.submissionState=d.Idle,this.lastSubmissionData=null}getSubmissionState(){return this.submissionState}isSubmitting(){return this.submissionState===d.Submitting}collectFormData(){const t=new FormData,i={},e={};return this.getFormFields().forEach(s=>{const n=s.name||s.getAttribute("name");if(!n)return;const r=s.value;null!=r&&t.append(n,String(r)),i[n]=r,e[n]={element:s,value:r,name:n,type:s.tagName.toLowerCase(),required:s.required||!1,disabled:s.disabled||!1}}),{formData:t,jsonData:i,fields:e}}submitForm(t){return w(this,void 0,void 0,function*(){if(this.isSubmitting())throw new Error("Form is already submitting");try{this.setSubmissionState(d.Submitting);const i=this.host.validationController;if(i){const t=yield i.validateForm();if(!t.isValid)throw i.focusFirstInvalidField(),this.dispatchSubmitAttemptEvent(t),new Error(`Form validation failed: ${t.summary}`)}const e=this.collectFormData();return t&&(Object.assign(e.jsonData,t),Object.entries(t).forEach(([t,i])=>{e.formData.append(t,String(i))})),this.lastSubmissionData=e,this.dispatchSubmitSuccessEvent(e),this.setSubmissionState(d.Success),e}catch(t){throw this.setSubmissionState(d.Error),this.dispatchSubmitErrorEvent(t),t}})}resetSubmission(){this.submissionState=d.Idle,this.lastSubmissionData=null}getLastSubmissionData(){return this.lastSubmissionData}getFormFields(){var t;const i=this.host,e=[],s=["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker","input","select","textarea"];s.forEach(t=>{i.querySelectorAll(t).forEach(t=>{(t.name||t.getAttribute("name"))&&e.push(t)})});return((null===(t=i.shadowRoot)||void 0===t?void 0:t.querySelectorAll("slot"))||[]).forEach(t=>{t.assignedElements({flatten:!0}).forEach(t=>{s.forEach(i=>{if(t.matches&&t.matches(i)){const i=t;(i.name||i.getAttribute("name"))&&e.push(i)}t.querySelectorAll(i).forEach(t=>{const i=t;(i.name||i.getAttribute("name"))&&e.push(i)})})})}),e}setSubmissionState(t){var i,e;this.submissionState=t,null===(e=(i=this.host).requestUpdate)||void 0===e||e.call(i)}dispatchSubmitAttemptEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.SUBMIT_ATTEMPT,{validationResult:t})}dispatchSubmitSuccessEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.SUBMIT_SUCCESS,{formData:t})}dispatchSubmitErrorEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.SUBMIT_ERROR,{error:t})}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var S=function(t,i,e,s){for(var n,r=arguments.length,o=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(i,e,o):n(i,e))||o);return r>3&&o&&Object.defineProperty(i,e,o),o},E=function(t,i,e,s){return new(e||(e=Promise))(function(n,r){function o(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}d((s=s.apply(t,i||[])).next())})};let O=class extends((t=>u(l(v(p(t)))))(e)){constructor(){super(...arguments),this.config={validateOnChange:!1,validateOnBlur:!0,showErrorsImmediately:!1,preventInvalidSubmission:!0,resetOnSuccess:!1,validationDelay:300},this.validateOnChange=!1,this.validateOnBlur=!0,this.preventInvalidSubmission=!0,this.resetOnSuccess=!1,this.method="POST",this.enctype="multipart/form-data",this.disabled=!1,this._validationState=a.Pristine,this._submissionState=d.Idle,this.validationController=new y(this),this.submissionController=new F(this),this.handleValidationChanged=t=>{const i=t.detail.validationResult;i&&(this._validationState=i.isValid?a.Valid:a.Invalid)}}get validationState(){return this._validationState}get submissionState(){return this._submissionState}connectedCallback(){super.connectedCallback(),this.setupFormObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFormObserver()}willUpdate(t){super.willUpdate(t),(t.has("validateOnChange")||t.has("validateOnBlur")||t.has("preventInvalidSubmission")||t.has("resetOnSuccess"))&&(this.config=Object.assign(Object.assign({},this.config),{validateOnChange:this.validateOnChange,validateOnBlur:this.validateOnBlur,preventInvalidSubmission:this.preventInvalidSubmission,resetOnSuccess:this.resetOnSuccess}))}firstUpdated(){this.registerExistingFields(),this.setupFormEvents()}setupFormObserver(){const t=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&this.registerFieldsInElement(t)})})});t.observe(this,{childList:!0,subtree:!0}),this._formObserver=t}cleanupFormObserver(){const t=this._formObserver;t&&t.disconnect()}registerExistingFields(){this.registerFieldsInElement(this)}registerFieldsInElement(t){["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker"].forEach(i=>{t.querySelectorAll(i).forEach(t=>{t.getAttribute("name")&&this.validationController.registerField(t)})})}setupFormEvents(){this.addEventListener("submit",this.handleFormSubmit),this.addEventListener("reset",this.handleFormReset),this.addEventListener(h.VALIDATION_CHANGED,this.handleValidationChanged)}handleFormSubmit(t){return E(this,void 0,void 0,function*(){if(t.preventDefault(),!this.disabled)try{const t=yield this.submissionController.submitForm();this.resetOnSuccess&&this.reset(),this.action&&this.performNativeSubmission(t.formData)}catch(t){console.error("Form submission failed:",t)}})}handleFormReset(t){t.preventDefault(),this.reset()}performNativeSubmission(t){const i=document.createElement("form");i.action=this.action,i.method=this.method,i.enctype=this.enctype,this.target&&(i.target=this.target);for(const[e,s]of t.entries()){const t=document.createElement("input");t.type="hidden",t.name=e,t.value=s,i.appendChild(t)}document.body.appendChild(i),i.submit(),document.body.removeChild(i)}validate(){return E(this,void 0,void 0,function*(){return(yield this.validationController.validateForm()).isValid})}submit(t){return E(this,void 0,void 0,function*(){yield this.submissionController.submitForm(t)})}reset(){this.validationController.reset(),this.submissionController.resetSubmission(),this._validationState=a.Pristine,this._submissionState=d.Idle}get isValid(){return this.validationController.isValid()}get isSubmitting(){return this.submissionController.isSubmitting()}getFormData(){return this.submissionController.collectFormData()}getInvalidFields(){return this.validationController.getInvalidFields()}getFieldsValue(t){const i=this.getFormData().jsonData;if(t&&t.length>0){const e={};return t.forEach(t=>{t in i&&(e[t]=i[t])}),e}return i}getFieldValue(t){return this.getFieldsValue()[t]}setFieldsValue(t){Object.entries(t).forEach(([t,i])=>{this.setFieldValue(t,i)})}setFieldValue(t,i){const e=this.validationController.getFields().find(i=>i.name===t);e&&e.element&&(e.element.value=i,e.value=i,e.element.dispatchEvent(new Event("change",{bubbles:!0})))}validateFields(t){return E(this,void 0,void 0,function*(){const i=yield this.validationController.validateForm();if(t&&t.length>0){const e={};if(t.forEach(t=>{i.validationErrors[t]&&(e[t]=i.validationErrors[t])}),Object.keys(e).length>0)throw new Error(JSON.stringify(e));return this.getFieldsValue(t)}if(!i.isValid)throw new Error(JSON.stringify(i.validationErrors));return this.getFieldsValue()})}resetFields(t){if(!t||0===t.length)return void this.reset();const i=this.validationController.getFields();t.forEach(t=>{const e=i.find(i=>i.name===t);e&&e.element&&(e.element.value="",e.value="",e.touched=!1,e.dirty=!1,e.isValid=!0,e.validationMessage="",e.element.dispatchEvent(new Event("change",{bubbles:!0})))})}getFieldError(t){const i=this.validationController.getFields().find(i=>i.name===t);return i&&!i.isValid?i.validationMessage:null}getFieldsError(t){const i=this.validationController.getFields(),e={};return(t?i.filter(i=>t.includes(i.name)):i).forEach(t=>{e[t.name]=t.isValid?null:t.validationMessage}),e}isFieldTouched(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.touched}isFieldsTouched(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.touched)}isFieldDirty(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.dirty}isFieldsDirty(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.dirty)}getFieldInstance(t){const i=this.validationController.getFields().find(i=>i.name===t);return i?i.element:null}scrollToField(t){if(t){const i=this.getFieldInstance(t);return!!i&&(i.scrollIntoView({behavior:"smooth",block:"center"}),"function"==typeof i.focus&&i.focus(),!0)}return this.validationController.focusFirstInvalidField()}finish(){return E(this,void 0,void 0,function*(){try{const t=yield this.validateFields();return yield this.submit(),t}catch(t){throw this.scrollToField(),t}})}getFieldsWithErrors(){return this.validationController.getFields().filter(t=>!t.isValid).map(t=>t.name)}hasErrors(){return this.getFieldsWithErrors().length>0}getFormState(){const t=this.validationController.getFields();return{isValid:this.isValid,isSubmitting:this.isSubmitting,hasErrors:this.hasErrors(),errorCount:this.getFieldsWithErrors().length,fieldCount:t.length,touchedFields:t.filter(t=>t.touched).map(t=>t.name),dirtyFields:t.filter(t=>t.dirty).map(t=>t.name),invalidFields:this.getFieldsWithErrors()}}setLoading(t){this.disabled=t,this.requestUpdate()}render(){return i`
+      <form
+        part="form"
         action="${this.action||""}"
         method="${this.method.toLowerCase()}"
         enctype="${this.enctype}"
@@ -95,4 +107,4 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
       >
         <slot></slot>
       </form>
-    `}};b.styles=a,f([e({type:Object})],b.prototype,"config",void 0),f([e({type:Boolean,attribute:"validate-on-change"})],b.prototype,"validateOnChange",void 0),f([e({type:Boolean,attribute:"validate-on-blur"})],b.prototype,"validateOnBlur",void 0),f([e({type:Boolean,attribute:"prevent-invalid-submission"})],b.prototype,"preventInvalidSubmission",void 0),f([e({type:Boolean,attribute:"reset-on-success"})],b.prototype,"resetOnSuccess",void 0),f([e({type:String})],b.prototype,"action",void 0),f([e({type:String})],b.prototype,"method",void 0),f([e({type:String,attribute:"enctype"})],b.prototype,"enctype",void 0),f([e({type:String})],b.prototype,"target",void 0),f([e({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),f([n()],b.prototype,"_validationState",void 0),f([n()],b.prototype,"_submissionState",void 0),b=f([r("nr-form")],b);export{h as FORM_EVENTS,m as FormSubmissionController,l as FormSubmissionState,c as FormValidationController,d as FormValidationState,b as NrFormElement};
+    `}};O.useShadowDom=!0,O.styles=o,S([s({type:Object})],O.prototype,"config",void 0),S([s({type:Boolean,attribute:"validate-on-change"})],O.prototype,"validateOnChange",void 0),S([s({type:Boolean,attribute:"validate-on-blur"})],O.prototype,"validateOnBlur",void 0),S([s({type:Boolean,attribute:"prevent-invalid-submission"})],O.prototype,"preventInvalidSubmission",void 0),S([s({type:Boolean,attribute:"reset-on-success"})],O.prototype,"resetOnSuccess",void 0),S([s({type:String})],O.prototype,"action",void 0),S([s({type:String})],O.prototype,"method",void 0),S([s({type:String,attribute:"enctype"})],O.prototype,"enctype",void 0),S([s({type:String})],O.prototype,"target",void 0),S([s({type:Boolean,reflect:!0})],O.prototype,"disabled",void 0),S([n()],O.prototype,"_validationState",void 0),S([n()],O.prototype,"_submissionState",void 0),O=S([r("nr-form")],O);export{h as FORM_EVENTS,F as FormSubmissionController,d as FormSubmissionState,y as FormValidationController,a as FormValidationState,O as NrFormElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement, type PropertyValues } from 'lit';
 import { FormConfig, FormValidationState, FormSubmissionState } from './form.types.js';
-declare const NrFormElement_base: (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 NrFormElement_base: (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;
 /**
  * Comprehensive form component with field management and validation API
  *
@@ -56,8 +56,11 @@ declare const NrFormElement_base: (new (...args: any[]) => import("@nuralyui/com
  * @fires nr-form-reset - Form was reset
  *
  * @slot default - Form content (inputs, buttons, etc.)
+ *
+ * @csspart form - The inner native form element
  */
 export declare class NrFormElement extends NrFormElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     /** Form configuration */
     config: FormConfig;

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

@@ -75,6 +75,8 @@ import { FormSubmissionController } from './controllers/submission.controller.js
  * @fires nr-form-reset - Form was reset
  *
  * @slot default - Form content (inputs, buttons, etc.)
+ *
+ * @csspart form - The inner native form element
  */
 let NrFormElement = class NrFormElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -586,7 +588,8 @@ let NrFormElement = class NrFormElement extends NuralyUIBaseMixin(LitElement) {
     }
     render() {
         return html `
-      <form 
+      <form
+        part="form"
         action="${this.action || ''}"
         method="${this.method.toLowerCase()}"
         enctype="${this.enctype}"
@@ -600,6 +603,7 @@ let NrFormElement = class NrFormElement extends NuralyUIBaseMixin(LitElement) {
     `;
     }
 };
+NrFormElement.useShadowDom = true;
 NrFormElement.styles = styles;
 __decorate([
     property({ type: Object })

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

@@ -19,7 +19,7 @@ export const styles = css `
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-form-gap, 16px);
+    gap: 16px;
   }
 
   .form-wrapper[disabled] {
@@ -61,7 +61,7 @@ export const styles = css `
   /* Responsive design */
   @media (max-width: 768px) {
     .form-wrapper {
-      gap: var(--nuraly-form-gap-mobile, 12px);
+      gap: 12px;
     }
   }
 `;

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

@@ -1,4 +1,4 @@
-import{css as t,LitElement as a,html as s}from"lit";import{property as e,state as o,customElement as r}from"lit/decorators.js";import{NuralyUIBaseMixin as i}from"@nuralyui/common/mixins";const d=t`
+import{css as t,html as e,LitElement as s}from"lit";import{property as a,state as o,customElement as i}from"lit/decorators.js";const r=t`
   :host {
     display: block;
     width: 100%;
@@ -8,9 +8,9 @@ import{css as t,LitElement as a,html as s}from"lit";import{property as e,state a
     display: flex;
     flex-flow: row wrap;
     min-width: 0;
-    
+
     /* Theme-aware */
-    color: var(--nuraly-color-text);
+    color: #161616;
   }
 
   /* Wrap control */
@@ -59,25 +59,36 @@ import{css as t,LitElement as a,html as s}from"lit";import{property as e,state a
   .nr-row[data-align="stretch"] {
     align-items: stretch;
   }
-`,h="",n={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1600};
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,n=t=>class extends t{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 t,e,s;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(s=this.mediaQuery)||void 0===s||s.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const s=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return s||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"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))}},d=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(d())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!d())return!0;let e=!0;for(const s of this.requiredComponents)if(!this.isComponentAvailable(s)){e=!1;const a=new Error(`Required component "${s}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(s,a):console.error(a.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},l=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var s;const a=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(s=this.tagName)||void 0===s?void 0:s.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,a)}dispatchInputEvent(t,e){const s=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,s)}dispatchFocusEvent(t,e){const s=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,s)}dispatchValidationEvent(t,e){var s;const a=Object.assign({target:e.target||this,value:e.value,isValid:null!==(s=e.isValid)&&void 0!==s&&s,error:e.error},e);this.dispatchCustomEvent(t,a)}dispatchActionEvent(t,e){const s=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,s)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},u=new Set,f=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let f=class extends(i(a)){constructor(){super(...arguments),this.align="",this.justify="",this.gutter=0,this.wrap=!0,this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsiveGutter()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsiveGutter(){"object"!=typeof this.gutter||Array.isArray(this.gutter)||(this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement))}updateBreakpoint(){const t=window.innerWidth;this.currentBreakpoint=t>=n.xxl?"xxl":t>=n.xl?"xl":t>=n.lg?"lg":t>=n.md?"md":t>=n.sm?"sm":"xs"}getGutterValues(){if("number"==typeof this.gutter)return[this.gutter,this.gutter];if(Array.isArray(this.gutter))return this.gutter;const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const a of t){const t=this.gutter[a];if(void 0!==t)return"number"==typeof t?[t,t]:t}return[0,0]}getRowStyle(){const[t,a]=this.getGutterValues(),s={};return t>0&&(s["margin-left"]=`-${t/2}px`,s["margin-right"]=`-${t/2}px`),a>0&&(s["row-gap"]=`${a}px`),s}getGutterContext(){const[t]=this.getGutterValues();return t}render(){const t=this.getRowStyle(),a=this.getGutterContext();return s`
+const p=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),s=t.styles;if(s){const t=m(s);t&&function(t,e,s){var a;if(!f.has(t)){const s=new CSSStyleSheet;s.replaceSync(e),f.set(t,s)}const o=f.get(t),i=`doc:${t}`;if(u.has(i)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],u.add(i)),s){let e=s;for(;e;){const s=e.getRootNode();if(!(s instanceof ShadowRoot))break;{const i=`shadow:${((null===(a=s.host)||void 0===a?void 0:a.tagName)||"").toLowerCase()}:${t}`;u.has(i)||(s.adoptedStyleSheets=[...s.adoptedStyleSheets,o],u.add(i)),e=s.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e},c=t=>h(n(l(p(t))));function m(t){return Array.isArray(t)?t.map(t=>m(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}const g="",x={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1600};
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var v=function(t,e,s,a){for(var o,i=arguments.length,r=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,s):a,n=t.length-1;n>=0;n--)(o=t[n])&&(r=(i<3?o(r):i>3?o(e,s,r):o(e,s))||r);return i>3&&r&&Object.defineProperty(e,s,r),r};let w=class extends(c(s)){constructor(){super(...arguments),this.align="",this.justify="",this.gutter=0,this.wrap=!0,this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsiveGutter()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsiveGutter(){"object"!=typeof this.gutter||Array.isArray(this.gutter)||(this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement))}updateBreakpoint(){const t=window.innerWidth;this.currentBreakpoint=t>=x.xxl?"xxl":t>=x.xl?"xl":t>=x.lg?"lg":t>=x.md?"md":t>=x.sm?"sm":"xs"}getGutterValues(){if("number"==typeof this.gutter)return[this.gutter,this.gutter];if(Array.isArray(this.gutter))return this.gutter;const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const e of t){const t=this.gutter[e];if(void 0!==t)return"number"==typeof t?[t,t]:t}return[0,0]}getRowStyle(){const[t,e]=this.getGutterValues(),s={};return t>0&&(s["margin-left"]=`-${t/2}px`,s["margin-right"]=`-${t/2}px`),e>0&&(s["row-gap"]=`${e}px`),s}getGutterContext(){const[t]=this.getGutterValues();return t}render(){const t=this.getRowStyle(),s=this.getGutterContext();return e`
       <div
+        part="row"
         class="nr-row"
         data-align="${this.align}"
         data-justify="${this.justify}"
         data-wrap="${this.wrap}"
-        data-theme="${this.currentTheme}"
-        style="${Object.entries(t).map(([t,a])=>`${t}: ${a}`).join("; ")}"
-        data-gutter="${a}"
+        style="${Object.entries(t).map(([t,e])=>`${t}: ${e}`).join("; ")}"
+        data-gutter="${s}"
       >
         <slot></slot>
       </div>
-    `}};f.styles=d,l([e({type:String})],f.prototype,"align",void 0),l([e({type:String})],f.prototype,"justify",void 0),l([e({type:Object})],f.prototype,"gutter",void 0),l([e({type:Boolean})],f.prototype,"wrap",void 0),l([o()],f.prototype,"currentBreakpoint",void 0),f=l([r("nr-row")],f);const p=t`
+    `}};w.styles=r,w.useShadowDom=!0,v([a({type:String})],w.prototype,"align",void 0),v([a({type:String})],w.prototype,"justify",void 0),v([a({type:Object})],w.prototype,"gutter",void 0),v([a({type:Boolean})],w.prototype,"wrap",void 0),v([o()],w.prototype,"currentBreakpoint",void 0),w=v([i("nr-row")],w);const y=t`
   :host {
     display: block;
     box-sizing: border-box;
@@ -89,9 +100,9 @@ var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.g
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    
+
     /* Theme-aware */
-    color: var(--nuraly-color-text);
+    color: #161616;
   }
 
   /* Column spans (1-24) - Apply flex to :host */
@@ -192,11 +203,12 @@ var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.g
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var u=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let m=class extends(i(a)){constructor(){super(...arguments),this.offset=0,this.pull=0,this.push=0,this.flex="",this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsive()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsive(){this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement)}updateBreakpoint(){const t=window.innerWidth;let a;a=t>=n.xxl?"xxl":t>=n.xl?"xl":t>=n.lg?"lg":t>=n.md?"md":t>=n.sm?"sm":"xs",a!==this.currentBreakpoint&&(this.currentBreakpoint=a)}getResponsiveConfig(){const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const a of t){const t=this[a];if(void 0!==t)return"number"==typeof t?{span:t}:t}return{}}getColProperties(){var t,a,s,e,o;const r=this.getResponsiveConfig();return{span:null!==(t=r.span)&&void 0!==t?t:this.span,offset:null!==(a=r.offset)&&void 0!==a?a:this.offset,order:null!==(s=r.order)&&void 0!==s?s:this.order,pull:null!==(e=r.pull)&&void 0!==e?e:this.pull,push:null!==(o=r.push)&&void 0!==o?o:this.push}}getGutterFromParent(){const t=this.closest("nr-row");if(t){const a=t.getAttribute("data-gutter");return a?Number.parseInt(a,10):0}return 0}getColStyle(){const t={},a=this.getGutterFromParent();return a>0&&(t["padding-left"]=a/2+"px",t["padding-right"]=a/2+"px"),this.flex&&("auto"===this.flex?t.flex="1 1 auto":"none"===this.flex?t.flex="0 0 auto":"number"==typeof this.flex?t.flex=`${this.flex} ${this.flex} auto`:t.flex=this.flex),t}render(){var t;const a=this.getColStyle(),e=this.getColProperties();return this.setAttribute("data-span",(null===(t=e.span)||void 0===t?void 0:t.toString())||""),this.setAttribute("data-offset",e.offset.toString()),void 0!==e.order?this.setAttribute("data-order",e.order.toString()):this.removeAttribute("data-order"),this.setAttribute("data-pull",e.pull.toString()),this.setAttribute("data-push",e.push.toString()),this.setAttribute("data-theme",this.currentTheme),s`
+ */;var b=function(t,e,s,a){for(var o,i=arguments.length,r=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,s):a,n=t.length-1;n>=0;n--)(o=t[n])&&(r=(i<3?o(r):i>3?o(e,s,r):o(e,s))||r);return i>3&&r&&Object.defineProperty(e,s,r),r};let j=class extends(c(s)){constructor(){super(...arguments),this.offset=0,this.pull=0,this.push=0,this.flex="",this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsive()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsive(){this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement)}updateBreakpoint(){const t=window.innerWidth;let e;e=t>=x.xxl?"xxl":t>=x.xl?"xl":t>=x.lg?"lg":t>=x.md?"md":t>=x.sm?"sm":"xs",e!==this.currentBreakpoint&&(this.currentBreakpoint=e)}getResponsiveConfig(){const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const e of t){const t=this[e];if(void 0!==t)return"number"==typeof t?{span:t}:t}return{}}getColProperties(){var t,e,s,a,o;const i=this.getResponsiveConfig();return{span:null!==(t=i.span)&&void 0!==t?t:this.span,offset:null!==(e=i.offset)&&void 0!==e?e:this.offset,order:null!==(s=i.order)&&void 0!==s?s:this.order,pull:null!==(a=i.pull)&&void 0!==a?a:this.pull,push:null!==(o=i.push)&&void 0!==o?o:this.push}}getGutterFromParent(){const t=this.closest("nr-row");if(t){const e=t.getAttribute("data-gutter");return e?Number.parseInt(e,10):0}return 0}getColStyle(){const t={},e=this.getGutterFromParent();return e>0&&(t["padding-left"]=e/2+"px",t["padding-right"]=e/2+"px"),this.flex&&("auto"===this.flex?t.flex="1 1 auto":"none"===this.flex?t.flex="0 0 auto":"number"==typeof this.flex?t.flex=`${this.flex} ${this.flex} auto`:t.flex=this.flex),t}render(){var t;const s=this.getColStyle(),a=this.getColProperties();return this.setAttribute("data-span",(null===(t=a.span)||void 0===t?void 0:t.toString())||""),this.setAttribute("data-offset",a.offset.toString()),void 0!==a.order?this.setAttribute("data-order",a.order.toString()):this.removeAttribute("data-order"),this.setAttribute("data-pull",a.pull.toString()),this.setAttribute("data-push",a.push.toString()),e`
       <div
+        part="col"
         class="nr-col"
-        style="${Object.entries(a).map(([t,a])=>`${t}: ${a}`).join("; ")}"
+        style="${Object.entries(s).map(([t,e])=>`${t}: ${e}`).join("; ")}"
       >
         <slot></slot>
       </div>
-    `}};m.styles=p,u([e({type:Number})],m.prototype,"span",void 0),u([e({type:Number})],m.prototype,"offset",void 0),u([e({type:Number})],m.prototype,"order",void 0),u([e({type:Number})],m.prototype,"pull",void 0),u([e({type:Number})],m.prototype,"push",void 0),u([e({type:String})],m.prototype,"flex",void 0),u([e({type:Object})],m.prototype,"xs",void 0),u([e({type:Object})],m.prototype,"sm",void 0),u([e({type:Object})],m.prototype,"md",void 0),u([e({type:Object})],m.prototype,"lg",void 0),u([e({type:Object})],m.prototype,"xl",void 0),u([e({type:Object})],m.prototype,"xxl",void 0),u([o()],m.prototype,"currentBreakpoint",void 0),m=u([r("nr-col")],m);export{n as BREAKPOINTS,h as EMPTY_STRING,m as NrColElement,f as NrRowElement};
+    `}};j.styles=y,j.useShadowDom=!0,b([a({type:Number})],j.prototype,"span",void 0),b([a({type:Number})],j.prototype,"offset",void 0),b([a({type:Number})],j.prototype,"order",void 0),b([a({type:Number})],j.prototype,"pull",void 0),b([a({type:Number})],j.prototype,"push",void 0),b([a({type:String})],j.prototype,"flex",void 0),b([a({type:Object})],j.prototype,"xs",void 0),b([a({type:Object})],j.prototype,"sm",void 0),b([a({type:Object})],j.prototype,"md",void 0),b([a({type:Object})],j.prototype,"lg",void 0),b([a({type:Object})],j.prototype,"xl",void 0),b([a({type:Object})],j.prototype,"xxl",void 0),b([o()],j.prototype,"currentBreakpoint",void 0),j=b([i("nr-col")],j);export{x as BREAKPOINTS,g as EMPTY_STRING,j as NrColElement,w as NrRowElement};

package/dist/src/components/grid/col.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { ColSize, FlexType } from './grid.types.js';
-declare const NrColElement_base: (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 NrColElement_base: (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;
 /**
  * Column component for grid layout system
  *
@@ -36,9 +36,12 @@ declare const NrColElement_base: (new (...args: any[]) => import("@nuralyui/comm
  * ```
  *
  * @slot default - Column content
+ *
+ * @csspart col - The inner div applying column width, offset, and gutter padding
  */
 export declare class NrColElement extends NrColElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Number of columns to span (out of 24) */
     span?: number;
     /** Number of columns to offset */

package/dist/src/components/grid/col.component.js

@@ -44,6 +44,8 @@ import { BREAKPOINTS, EMPTY_STRING } from './grid.types.js';
  * ```
  *
  * @slot default - Column content
+ *
+ * @csspart col - The inner div applying column width, offset, and gutter padding
  */
 let NrColElement = class NrColElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -195,9 +197,9 @@ let NrColElement = class NrColElement extends NuralyUIBaseMixin(LitElement) {
         }
         this.setAttribute('data-pull', props.pull.toString());
         this.setAttribute('data-push', props.push.toString());
-        this.setAttribute('data-theme', this.currentTheme);
         return html `
       <div
+        part="col"
         class="nr-col"
         style="${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}"
       >
@@ -207,6 +209,7 @@ let NrColElement = class NrColElement extends NuralyUIBaseMixin(LitElement) {
     }
 };
 NrColElement.styles = styles;
+NrColElement.useShadowDom = true;
 __decorate([
     property({ type: Number })
 ], NrColElement.prototype, "span", void 0);

package/dist/src/components/grid/col.style.js

@@ -15,9 +15,9 @@ export const styles = css `
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    
+
     /* Theme-aware */
-    color: var(--nuraly-color-text);
+    color: #161616;
   }
 
   /* Column spans (1-24) - Apply flex to :host */

package/dist/src/components/grid/row.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { RowAlign, RowJustify, Gutter } from './grid.types.js';
-declare const NrRowElement_base: (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 NrRowElement_base: (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;
 /**
  * Row component for grid layout system
  *
@@ -36,9 +36,12 @@ declare const NrRowElement_base: (new (...args: any[]) => import("@nuralyui/comm
  * ```
  *
  * @slot default - Column elements
+ *
+ * @csspart row - The inner div applying the grid row styles, gutter margins, and alignment
  */
 export declare class NrRowElement extends NrRowElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Vertical alignment of columns */
     align: RowAlign | '';
     /** Horizontal alignment of columns */

package/dist/src/components/grid/row.component.js

@@ -44,6 +44,8 @@ import { EMPTY_STRING, BREAKPOINTS } from './grid.types.js';
  * ```
  *
  * @slot default - Column elements
+ *
+ * @csspart row - The inner div applying the grid row styles, gutter margins, and alignment
  */
 let NrRowElement = class NrRowElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -161,11 +163,11 @@ let NrRowElement = class NrRowElement extends NuralyUIBaseMixin(LitElement) {
         const gutter = this.getGutterContext();
         return html `
       <div
+        part="row"
         class="nr-row"
         data-align="${this.align}"
         data-justify="${this.justify}"
         data-wrap="${this.wrap}"
-        data-theme="${this.currentTheme}"
         style="${Object.entries(rowStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}"
         data-gutter="${gutter}"
       >
@@ -175,6 +177,7 @@ let NrRowElement = class NrRowElement extends NuralyUIBaseMixin(LitElement) {
     }
 };
 NrRowElement.styles = styles;
+NrRowElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrRowElement.prototype, "align", void 0);

package/dist/src/components/grid/row.style.js

@@ -13,9 +13,9 @@ export const styles = css `
     display: flex;
     flex-flow: row wrap;
     min-width: 0;
-    
+
     /* Theme-aware */
-    color: var(--nuraly-color-text);
+    color: #161616;
   }
 
   /* Wrap control */