@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/form/controllers/validation.controller.js

@@ -0,0 +1,236 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { FormValidationState, FORM_EVENTS } from '../form.types.js';
+/**
+ * Controller that coordinates validation across all form fields
+ * This does NOT perform validation - it coordinates existing component validations
+ */
+export class FormValidationController {
+    constructor(host) {
+        this.host = host;
+        this.fields = new Map();
+        this.validationState = FormValidationState.Pristine;
+        this.validationPromise = null;
+    }
+    /**
+     * Register a form field for validation coordination
+     */
+    registerField(element) {
+        var _a;
+        const name = element.name || element.getAttribute('name') || `field-${Date.now()}`;
+        const field = {
+            element,
+            name,
+            value: element.value,
+            isValid: element.getValidationStatus().isValid,
+            validationMessage: element.validationMessage || '',
+            required: (_a = element.required) !== null && _a !== void 0 ? _a : false,
+            touched: false,
+            dirty: false
+        };
+        this.fields.set(name, field);
+        // Listen for field changes
+        this.addFieldListeners(element, name);
+    }
+    /**
+     * Unregister a form field
+     */
+    unregisterField(name) {
+        const field = this.fields.get(name);
+        if (field) {
+            this.removeFieldListeners(field.element);
+            this.fields.delete(name);
+        }
+    }
+    /**
+     * Add event listeners to a form field
+     */
+    addFieldListeners(element, fieldName) {
+        element.addEventListener('nr-validation', (event) => this.handleFieldValidation(fieldName, event));
+    }
+    /**
+     * Remove event listeners from a form field
+     */
+    removeFieldListeners(_element) {
+        // Remove all event listeners (implementation depends on your needs)
+        // You might want to store listener references for proper cleanup
+    }
+    /**
+     * Handle field validation event
+     */
+    handleFieldValidation(fieldName, event) {
+        const field = this.fields.get(fieldName);
+        if (!field)
+            return;
+        if (event && event.detail) {
+            // Use the detailed validation information from the nr-validation event
+            field.isValid = event.detail.isValid || false;
+            field.validationMessage = event.detail.validationMessage || '';
+        }
+        else {
+            // Fallback to ValidatableComponent validation
+            const status = field.element.getValidationStatus();
+            field.isValid = status.isValid;
+            field.validationMessage = field.element.validationMessage || '';
+        }
+        // Update form validation state based on all fields
+        this.updateFormValidationState();
+    }
+    /**
+     * Update form validation state based on current field states
+     */
+    updateFormValidationState() {
+        const invalidFields = this.getInvalidFields();
+        const isFormValid = invalidFields.length === 0;
+        this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;
+        const result = {
+            isValid: isFormValid,
+            invalidFields,
+            validationErrors: this.buildValidationErrors(),
+            summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`
+        };
+        this.dispatchValidationEvent(result);
+    }
+    /**
+     * Build validation errors object from current field states
+     */
+    buildValidationErrors() {
+        const errors = {};
+        for (const [name, field] of this.fields) {
+            if (!field.isValid && field.validationMessage) {
+                errors[name] = field.validationMessage;
+            }
+        }
+        return errors;
+    }
+    /**
+     * Validate all form fields (coordinates existing validations)
+     */
+    validateForm() {
+        // Return existing promise if validation is in progress
+        if (this.validationPromise !== null) {
+            return this.validationPromise;
+        }
+        this.validationState = FormValidationState.Pending;
+        this.validationPromise = this.performValidation();
+        return this.validationPromise;
+    }
+    /**
+     * Perform the actual validation coordination
+     */
+    performValidation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const invalidFields = [];
+            const validationErrors = {};
+            // Check each field's validation state
+            for (const [name, field] of this.fields) {
+                // Trigger validation on the field component itself
+                const status = field.element.getValidationStatus();
+                const isValid = status.isValid;
+                field.isValid = isValid;
+                field.validationMessage = field.element.validationMessage || '';
+                if (!isValid) {
+                    invalidFields.push(field);
+                    validationErrors[name] = field.validationMessage;
+                }
+            }
+            const isFormValid = invalidFields.length === 0;
+            this.validationState = isFormValid ? FormValidationState.Valid : FormValidationState.Invalid;
+            const result = {
+                isValid: isFormValid,
+                invalidFields,
+                validationErrors,
+                summary: isFormValid ? 'Form is valid' : `${invalidFields.length} field(s) have errors`
+            };
+            this.dispatchValidationEvent(result);
+            this.validationPromise = null;
+            return result;
+        });
+    }
+    /**
+     * Get current validation state
+     */
+    getValidationState() {
+        return this.validationState;
+    }
+    /**
+     * Get all registered fields
+     */
+    getFields() {
+        return Array.from(this.fields.values());
+    }
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields() {
+        return Array.from(this.fields.values()).filter(field => !field.isValid);
+    }
+    /**
+     * Check if form is valid
+     */
+    isValid() {
+        return this.validationState === FormValidationState.Valid &&
+            Array.from(this.fields.values()).every(field => field.isValid);
+    }
+    /**
+     * Focus first invalid field
+     */
+    focusFirstInvalidField() {
+        const invalidField = Array.from(this.fields.values()).find(field => !field.isValid);
+        if (invalidField && typeof invalidField.element.focus === 'function') {
+            invalidField.element.focus();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Reset all fields
+     */
+    reset() {
+        for (const field of this.fields.values()) {
+            // Reset using ValidatableComponent interface if available
+            if ('clearValidation' in field.element && typeof field.element.clearValidation === 'function') {
+                field.element.clearValidation();
+            }
+            // Reset value if component supports it
+            if ('value' in field.element) {
+                field.element.value = '';
+            }
+            field.touched = false;
+            field.dirty = false;
+            field.isValid = true;
+            field.validationMessage = '';
+        }
+        this.validationState = FormValidationState.Pristine;
+        this.dispatchResetEvent();
+    }
+    /**
+     * Dispatch validation event
+     */
+    dispatchValidationEvent(result) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.VALIDATION_CHANGED, {
+            validationResult: result
+        });
+    }
+    /**
+     * Dispatch reset event
+     */
+    dispatchResetEvent() {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.RESET, {});
+    }
+}
+//# sourceMappingURL=validation.controller.js.map

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/form/interfaces/validation.interface.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Standard interface that all form-compatible components should implement
+ * This ensures consistent validation API across all form field components
+ */
+export interface FormFieldValidation {
+    /** Component name for form submission */
+    name?: string;
+    /** Current field value */
+    value: any;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Current validation message */
+    validationMessage?: string;
+    /**
+     * Validate the field and return true if valid
+     */
+    validate?(): boolean;
+    /**
+     * Check if the field satisfies HTML5 constraints
+     */
+    checkValidity?(): boolean;
+    /**
+     * Report validation state (shows validation UI)
+     */
+    reportValidity?(): boolean;
+    /**
+     * Set custom validation message
+     */
+    setCustomValidity?(message: string): void;
+    /**
+     * Reset field to initial state
+     */
+    reset?(): void;
+    /**
+     * Focus the field
+     */
+    focus?(): void;
+}
+/**
+ * Enhanced validation interface for components with advanced validation features
+ */
+export interface AdvancedFormFieldValidation extends FormFieldValidation {
+    /** Validation state details */
+    isValid?: boolean;
+    isTouched?: boolean;
+    isDirty?: boolean;
+    /** Validation rules */
+    validationRules?: ValidationRule[];
+    /** Custom validators */
+    customValidators?: CustomValidator[];
+    /**
+     * Get detailed validation result
+     */
+    getValidationResult?(): {
+        isValid: boolean;
+        errors: string[];
+        warnings: string[];
+    };
+    /**
+     * Add custom validation rule
+     */
+    addValidationRule?(rule: ValidationRule): void;
+    /**
+     * Remove validation rule
+     */
+    removeValidationRule?(ruleId: string): void;
+}
+/**
+ * Validation rule definition
+ */
+export interface ValidationRule {
+    id: string;
+    message: string;
+    validator: (value: any) => boolean;
+    severity?: 'error' | 'warning';
+}
+/**
+ * Custom validator function
+ */
+export interface CustomValidator {
+    id: string;
+    validate: (value: any, element: any) => {
+        isValid: boolean;
+        message: string;
+    };
+}
+/**
+ * Validation event details
+ */
+export interface ValidationEventDetail {
+    isValid: boolean;
+    value: any;
+    message: string;
+    errors: string[];
+    warnings?: string[];
+    field?: string;
+    timestamp: number;
+}
+/**
+ * Form field registration info
+ */
+export interface FormFieldRegistration {
+    element: HTMLElement & FormFieldValidation;
+    name: string;
+    type: string;
+    initialValue: any;
+    registrationTime: number;
+}
+//# sourceMappingURL=validation.interface.d.ts.map

package/dist/src/components/form/interfaces/validation.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=validation.interface.js.map

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 */