@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/file-upload/demo/file-upload-demo.js

@@ -0,0 +1,156 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import "../file-upload.component";
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.float = 'left';
+        this.uploadProcesses = new Map();
+    }
+    firstUpdated() {
+        var _a;
+        // Get reference to the file upload component
+        const fileUpload = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-file-upload');
+        if (fileUpload) {
+            // Add event listeners to the component
+            fileUpload.addEventListener('file-select', this._handleFileSelect.bind(this));
+            fileUpload.addEventListener('file-remove', this._handleFileRemove.bind(this));
+            fileUpload.addEventListener('file-exceed', this._handleFileExceed.bind(this));
+        }
+    }
+    _handleFileSelect(event) {
+        var _a;
+        const { files } = event.detail;
+        const fileUpload = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-file-upload');
+        if (!fileUpload)
+            return;
+        files.forEach((file) => {
+            // Update status to 'uploading'
+            fileUpload.updateFileStatus(file.uid, 'uploading', 0);
+            // Simulate upload process with interval
+            const intervalId = window.setInterval(() => {
+                const currentPercentage = file.percentage || 0;
+                const percentage = Math.min(100, currentPercentage + 10);
+                fileUpload.updateFileStatus(file.uid, 'uploading', percentage);
+                if (percentage === 100) {
+                    window.clearInterval(intervalId);
+                    // Set file as successfully uploaded after a small delay
+                    setTimeout(() => {
+                        fileUpload.updateFileStatus(file.uid, 'success');
+                    }, 300);
+                    // Remove from tracking
+                    this.uploadProcesses.delete(file.uid);
+                }
+            }, 500);
+            // Store the interval ID for potential cancellation
+            this.uploadProcesses.set(file.uid, intervalId);
+        });
+    }
+    _handleFileRemove(event) {
+        const { file } = event.detail;
+        console.log(`File removed: ${file.name}`);
+        // Cancel upload process if it's still running
+        if (this.uploadProcesses.has(file.uid)) {
+            window.clearInterval(this.uploadProcesses.get(file.uid));
+            this.uploadProcesses.delete(file.uid);
+        }
+    }
+    _handleFileExceed(event) {
+        const { files } = event.detail;
+        console.warn(`Upload limit exceeded. Tried to upload ${files.length} additional files.`);
+        // Could show a notification or alert here
+    }
+    render() {
+        return html `
+      <div class="demo-container">
+        <h2>File Upload Demo</h2>
+        <nr-file-upload
+          accept="image/*"
+          multiple
+          drag
+          limit="5"
+          tip="JPG/PNG files up to 500kb">
+        </nr-file-upload>
+        
+        <div class="usage-info">
+          <h3>Usage:</h3>
+          <ul>
+            <li>Drag & drop files here</li>
+            <li>Or click to select files</li>
+            <li>Files will automatically start uploading</li>
+            <li>Use the X button to remove files</li>
+            <li>Click on eye icon to preview images</li>
+          </ul>
+        </div>
+      </div>
+    `;
+    }
+};
+ElMeenuElement.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: sans-serif;
+      }
+      
+      .demo-container {
+        width: 100%;
+        max-width: 700px;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        background-color: #fff;
+      }
+      
+      h2 {
+        color: #333;
+        margin-top: 0;
+      }
+      
+      .usage-info {
+        margin-top: 30px;
+        padding: 15px;
+        background-color: #f5f5f5;
+        border-radius: 6px;
+      }
+      
+      .usage-info h3 {
+        margin-top: 0;
+        color: #555;
+      }
+      
+      ul {
+        padding-left: 20px;
+      }
+      
+      li {
+        margin-bottom: 8px;
+        color: #666;
+      }
+    `,
+];
+__decorate([
+    state()
+], ElMeenuElement.prototype, "float", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "uploadProcesses", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-file-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=file-upload-demo.js.map

package/dist/src/components/file-upload/file-upload.component.d.ts

@@ -1,7 +1,8 @@
 import { LitElement, type PropertyValues } from 'lit';
 import { UploadFile } from './types.js';
-declare const FileUpload_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 FileUpload_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;
 export declare class FileUpload extends FileUpload_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     /** Explicit theme from data-theme attribute (provided by ThemeAwareMixin) */
     explicitTheme: string | null;

package/dist/src/components/file-upload/file-upload.component.js

@@ -351,6 +351,7 @@ let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
     `;
     }
 };
+FileUpload.useShadowDom = true;
 FileUpload.styles = styles;
 __decorate([
     property({ type: String })

package/dist/src/components/file-upload/styles.js

@@ -2,15 +2,15 @@ import { css } from 'lit';
 export const styles = css `
 :host {
   display: block;
-  font-family: var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 .upload {
   width: 100%;
 }
 .upload-dragger {
-  background-color: var(--nuraly-color-surface, #f8f9fa);
-  border: 1px dashed var(--nuraly-color-border, #d9d9d9);
-  border-radius: var(--nuraly-border-radius-md, 6px);
+  background-color: #f8f9fa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
   box-sizing: border-box;
   width: 100%;
   height: 180px;
@@ -18,48 +18,48 @@ export const styles = css `
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: border-color var(--nuraly-transition-normal, 0.3s);
+  transition: border-color 0.3s;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .upload-dragger:hover {
-  border-color: var(--nuraly-color-primary, #409eff);
+  border-color: #409eff;
 }
 .upload-dragger.is-dragover {
-  background-color: var(--nuraly-color-background-hover, rgba(64, 158, 255, 0.06));
-  border-color: var(--nuraly-color-primary, #409eff);
+  background-color: rgba(64, 158, 255, 0.06);
+  border-color: #409eff;
 }
 .upload-icon {
   font-size: 28px;
-  color: var(--nuraly-color-text-tertiary, #c0c4cc);
+  color: #c0c4cc;
   margin-bottom: 8px;
 }
 .upload-text {
-  color: var(--nuraly-color-text-secondary, #606266);
-  font-size: var(--nuraly-font-size-02, 14px);
+  color: #606266;
+  font-size: 14px;
   text-align: center;
   padding: 0 12px;
 }
 .upload-tip {
-  font-size: var(--nuraly-font-size-01, 12px);
-  color: var(--nuraly-color-text-tertiary, #909399);
+  font-size: 12px;
+  color: #909399;
   margin-top: 7px;
   padding: 0 12px;
 }
 .upload-button {
   padding: 8px 16px;
-  background-color: var(--nuraly-color-primary, #409eff);
-  color: var(--nuraly-color-text-on-color, white);
+  background-color: #409eff;
+  color: white;
   border: none;
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  border-radius: 4px;
   cursor: pointer;
-  font-size: var(--nuraly-font-size-02, 14px);
-  transition: background-color var(--nuraly-transition-normal, 0.3s);
+  font-size: 14px;
+  transition: background-color 0.3s;
 }
 .upload-button:hover {
-  background-color: var(--nuraly-color-primary-hover, #66b1ff);
+  background-color: #66b1ff;
 }
 .file-list {
   margin-top: 10px;
@@ -69,9 +69,9 @@ export const styles = css `
   display: flex;
   align-items: center;
   margin-bottom: 8px;
-  transition: all var(--nuraly-transition-normal, 0.3s);
+  transition: all 0.3s;
   padding: 8px;
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  border-radius: 4px;
   gap: 8px;
   width: 100%;
   box-sizing: border-box;
@@ -81,22 +81,22 @@ export const styles = css `
   max-width: 100%;
 }
 .file-item:hover {
-  background-color: var(--nuraly-color-surface-hover, #f8f9fa);
+  background-color: #f8f9fa;
 }
 .file-name {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--nuraly-color-text-secondary, #606266);
+  color: #606266;
   min-width: 0;
   max-width: 100%;
   word-break: break-all;
   width: 0;
 }
 .file-size {
-  color: var(--nuraly-color-text-tertiary, #909399);
-  font-size: var(--nuraly-font-size-01, 12px);
+  color: #909399;
+  font-size: 12px;
   flex-shrink: 0;
   margin-left: 8px;
   white-space: nowrap;
@@ -116,10 +116,10 @@ export const styles = css `
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: var(--nuraly-color-text-tertiary, #909399);
+  color: #909399;
 }
 .file-actions button:hover {
-  color: var(--nuraly-color-primary, #409eff);
+  color: #409eff;
 }
 
 /* Dark theme support - using data-theme attribute */
@@ -128,80 +128,80 @@ export const styles = css `
 /* Upload dragger - dark theme */
 :host-context([data-theme*="dark"]) .upload-dragger,
 :host([data-theme*="dark"]) .upload-dragger {
-  background-color: var(--nuraly-color-layer-01, #262626);
-  border-color: var(--nuraly-color-border-subtle, #525252);
+  background-color: #262626;
+  border-color: #525252;
 }
 :host-context([data-theme*="dark"]) .upload-dragger:hover,
 :host([data-theme*="dark"]) .upload-dragger:hover {
-  border-color: var(--nuraly-color-button-primary, #78a9ff);
+  border-color: #78a9ff;
 }
 :host-context([data-theme*="dark"]) .upload-dragger.is-dragover,
 :host([data-theme*="dark"]) .upload-dragger.is-dragover {
   background-color: rgba(120, 169, 255, 0.1);
-  border-color: var(--nuraly-color-button-primary, #78a9ff);
+  border-color: #78a9ff;
 }
 
 /* Upload icon - dark theme */
 :host-context([data-theme*="dark"]) .upload-icon,
 :host([data-theme*="dark"]) .upload-icon {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* Upload text - dark theme */
 :host-context([data-theme*="dark"]) .upload-text,
 :host([data-theme*="dark"]) .upload-text {
-  color: var(--nuraly-color-text-primary, #f4f4f4);
+  color: #f4f4f4;
 }
 
 /* Upload tip - dark theme */
 :host-context([data-theme*="dark"]) .upload-tip,
 :host([data-theme*="dark"]) .upload-tip {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* File item - dark theme */
 :host-context([data-theme*="dark"]) .file-item,
 :host([data-theme*="dark"]) .file-item {
-  background-color: var(--nuraly-color-layer-01, #262626);
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  background-color: #262626;
+  border-radius: 4px;
 }
 :host-context([data-theme*="dark"]) .file-item:hover,
 :host([data-theme*="dark"]) .file-item:hover {
-  background-color: var(--nuraly-color-layer-hover-01, #393939);
+  background-color: #393939;
 }
 
 /* File name - dark theme */
 :host-context([data-theme*="dark"]) .file-name,
 :host([data-theme*="dark"]) .file-name {
-  color: var(--nuraly-color-text-primary, #f4f4f4);
+  color: #f4f4f4;
 }
 
 /* File size - dark theme */
 :host-context([data-theme*="dark"]) .file-size,
 :host([data-theme*="dark"]) .file-size {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* File actions - dark theme */
 :host-context([data-theme*="dark"]) .file-actions button,
 :host([data-theme*="dark"]) .file-actions button {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 :host-context([data-theme*="dark"]) .file-actions button:hover,
 :host([data-theme*="dark"]) .file-actions button:hover {
-  color: var(--nuraly-color-button-primary, #78a9ff);
+  color: #78a9ff;
 }
 
 /* File item SVG icons - dark theme */
 :host-context([data-theme*="dark"]) .file-item > svg,
 :host([data-theme*="dark"]) .file-item > svg {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* Progress bar - dark theme */
 :host-context([data-theme*="dark"]) .progress-bar,
 :host([data-theme*="dark"]) .progress-bar {
-  background-color: var(--nuraly-color-border-subtle, #525252);
+  background-color: #525252;
 }
 
 /* Preview modal - dark theme */
@@ -214,7 +214,7 @@ export const styles = css `
 .progress-bar {
   height: 2px;
   width: 100%;
-  background-color: var(--nuraly-color-border, #e6e6e6);
+  background-color: #e6e6e6;
   margin-top: 4px;
   position: relative;
   border-radius: 2px;
@@ -222,7 +222,7 @@ export const styles = css `
 }
 .progress-inner {
   height: 100%;
-  background-color: var(--nuraly-color-primary, #409eff);
+  background-color: #409eff;
   position: absolute;
   left: 0;
   top: 0;
@@ -234,21 +234,21 @@ export const styles = css `
   position: absolute;
   right: 0;
   top: -18px;
-  font-size: var(--nuraly-font-size-01, 12px);
-  color: var(--nuraly-color-primary, #409eff);
+  font-size: 12px;
+  color: #409eff;
 }
 
 .hidden {
   display: none;
 }
 .success {
-  color: var(--nuraly-color-success, #67c23a);
+  color: #67c23a;
 }
 .error {
-  color: var(--nuraly-color-danger, #f56c6c);
+  color: #f56c6c;
 }
 .icon-delete {
-  color: var(--nuraly-color-danger, #f56c6c);
+  color: #f56c6c;
 }
 .file-preview {
   width: 100%;
@@ -258,7 +258,7 @@ export const styles = css `
   display: block;
   max-width: 100%;
   max-height: 200px;
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  border-radius: 4px;
   object-fit: contain;
   cursor: zoom-in;
 }
@@ -268,11 +268,11 @@ export const styles = css `
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nuraly-color-background-overlay, rgba(0, 0, 0, 0.7));
+  background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: var(--nuraly-z-modal, 1000);
+  z-index: 1000;
 }
 .preview-modal img {
   max-width: 90%;
@@ -283,7 +283,7 @@ export const styles = css `
   position: absolute;
   top: 20px;
   right: 20px;
-  color: var(--nuraly-color-text-inverse, white);
+  color: white;
   font-size: 30px;
   background: none;
   border: none;
@@ -291,7 +291,7 @@ export const styles = css `
 }
 .preview-icon {
   padding: 4px;
-  color: var(--nuraly-color-primary, #409eff);
+  color: #409eff;
   cursor: zoom-in;
 }
 
@@ -306,14 +306,14 @@ export const styles = css `
 @media (max-width: 600px) {
   .upload-dragger {
     height: 140px;
-    padding: var(--nuraly-spacing-04, 12px);
+    padding: 12px;
   }
   .upload-icon {
     font-size: 24px;
   }
   .upload-text,
   .upload-tip {
-    font-size: var(--nuraly-font-size-01, 13px);
+    font-size: 13px;
   }
   .file-item {
     display: grid;
@@ -325,7 +325,7 @@ export const styles = css `
       "actions actions";
     gap: 4px 8px;
     align-items: center;
-    padding: var(--nuraly-spacing-03, 8px);
+    padding: 8px;
     width: 100%;
     box-sizing: border-box;
     overflow: hidden; /* Hide content that overflows */
@@ -366,7 +366,7 @@ export const styles = css `
   }
   .upload-button {
     width: 100%;
-    font-size: var(--nuraly-font-size-03, 16px);
+    font-size: 16px;
   }
 }
 `;

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

@@ -1,4 +1,4 @@
-import{css as e,LitElement as t,html as r}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=e`
+import{css as e,html as t,LitElement as i}from"lit";import{property as n,customElement as s}from"lit/decorators.js";const r=e`
   :host {
     display: block;
     box-sizing: border-box;
@@ -7,9 +7,9 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as n,customE
   .nr-flex {
     display: flex;
     box-sizing: border-box;
-    
+
     /* Theme-aware */
-    color: var(--nuraly-color-text);
+    color: #161616;
   }
 
   /* Inline flex */
@@ -92,23 +92,33 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as n,customE
   .nr-flex[data-align="stretch"] {
     align-items: stretch;
   }
-`,s="";
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,o=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},a=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},l=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(a())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!a())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const n=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,n):console.error(n.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},d=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const n=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,n)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const n=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,n)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},c=new Set,h=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var o=function(e,t,r,n){for(var i,a=arguments.length,l=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n,s=e.length-1;s>=0;s--)(i=e[s])&&(l=(a<3?i(l):a>3?i(t,r,l):i(t,r))||l);return a>3&&l&&Object.defineProperty(t,r,l),l};let f=class extends(a(t)){constructor(){super(...arguments),this.direction="row",this.vertical=!1,this.wrap="nowrap",this.justify="",this.align="",this.gap=0,this.inline=!1,this.flex=""}getFlexDirection(){return this.vertical?"column":this.direction}getGapValue(e){if("number"==typeof e)return`${e}px`;if("string"==typeof e)switch(e){case"small":return"var(--nuraly-spacing-2, 8px)";case"medium":return"var(--nuraly-spacing-3, 16px)";case"large":return"var(--nuraly-spacing-4, 24px)";default:return e}return"0"}getGapStyles(){const e={};if(Array.isArray(this.gap)){const[t,r]=this.gap;e["column-gap"]=this.getGapValue(t),e["row-gap"]=this.getGapValue(r)}else this.gap&&(e.gap=this.getGapValue(this.gap));return e}getFlexStyles(){const e=Object.assign({},this.getGapStyles());return this.flex&&(e.flex=this.flex),Object.entries(e).map(([e,t])=>`${e}: ${t}`).join("; ")}render(){const e=this.getFlexDirection(),t=this.getFlexStyles();return r`
+const u=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=f(i);e&&function(e,t,i){var n;if(!h.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),h.set(e,i)}const s=h.get(e),r=`doc:${e}`;if(c.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],c.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(n=i.host)||void 0===n?void 0:n.tagName)||"").toLowerCase()}:${e}`;c.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],c.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function f(e){return Array.isArray(e)?e.map(e=>f(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}const p="";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var m=function(e,t,i,n){for(var s,r=arguments.length,o=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n,a=e.length-1;a>=0;a--)(s=e[a])&&(o=(r<3?s(o):r>3?s(t,i,o):s(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};let v=class extends((e=>l(o(d(u(e)))))(i)){constructor(){super(...arguments),this.direction="row",this.vertical=!1,this.wrap="nowrap",this.justify="",this.align="",this.gap=0,this.inline=!1,this.flex=""}getFlexDirection(){return this.vertical?"column":this.direction}getGapValue(e){if("number"==typeof e)return`${e}px`;if("string"==typeof e)switch(e){case"small":return"8px";case"medium":return"16px";case"large":return"24px";default:return e}return"0"}getGapStyles(){const e={};if(Array.isArray(this.gap)){const[t,i]=this.gap;e["column-gap"]=this.getGapValue(t),e["row-gap"]=this.getGapValue(i)}else this.gap&&(e.gap=this.getGapValue(this.gap));return e}getFlexStyles(){const e=Object.assign({},this.getGapStyles());return this.flex&&(e.flex=this.flex),Object.entries(e).map(([e,t])=>`${e}: ${t}`).join("; ")}render(){const e=this.getFlexDirection(),i=this.getFlexStyles();return t`
       <div
+        part="flex"
         class="nr-flex"
         data-direction="${e}"
         data-wrap="${this.wrap}"
         data-justify="${this.justify}"
         data-align="${this.align}"
         data-inline="${this.inline}"
-        data-theme="${this.currentTheme}"
-        style="${t}"
+        style="${i}"
       >
         <slot></slot>
       </div>
-    `}};f.styles=l,o([n({type:String})],f.prototype,"direction",void 0),o([n({type:Boolean})],f.prototype,"vertical",void 0),o([n({type:String})],f.prototype,"wrap",void 0),o([n({type:String})],f.prototype,"justify",void 0),o([n({type:String})],f.prototype,"align",void 0),o([n({type:Object})],f.prototype,"gap",void 0),o([n({type:Boolean})],f.prototype,"inline",void 0),o([n({type:String})],f.prototype,"flex",void 0),f=o([i("nr-flex")],f);export{s as EMPTY_STRING,f as NrFlexElement};
+    `}};v.styles=r,v.useShadowDom=!0,m([n({type:String})],v.prototype,"direction",void 0),m([n({type:Boolean})],v.prototype,"vertical",void 0),m([n({type:String})],v.prototype,"wrap",void 0),m([n({type:String})],v.prototype,"justify",void 0),m([n({type:String})],v.prototype,"align",void 0),m([n({type:Object})],v.prototype,"gap",void 0),m([n({type:Boolean})],v.prototype,"inline",void 0),m([n({type:String})],v.prototype,"flex",void 0),v=m([s("nr-flex")],v);export{p as EMPTY_STRING,v as NrFlexElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { FlexDirection, FlexWrap, FlexJustify, FlexAlign, Gap } from './flex.types.js';
-declare const NrFlexElement_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 NrFlexElement_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;
 /**
  * Flex layout component for flexible box layouts
  *
@@ -43,9 +43,12 @@ declare const NrFlexElement_base: (new (...args: any[]) => import("@nuralyui/com
  * ```
  *
  * @slot default - Flex items
+ *
+ * @csspart flex - The inner div that applies flexbox direction, wrap, justify, align, and gap
  */
 export declare class NrFlexElement extends NrFlexElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Flex direction (shorthand: use vertical prop for column) */
     direction: FlexDirection;
     /** Shorthand for flex-direction: column */

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

@@ -51,6 +51,8 @@ import { EMPTY_STRING } from './flex.types.js';
  * ```
  *
  * @slot default - Flex items
+ *
+ * @csspart flex - The inner div that applies flexbox direction, wrap, justify, align, and gap
  */
 let NrFlexElement = class NrFlexElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -89,11 +91,11 @@ let NrFlexElement = class NrFlexElement extends NuralyUIBaseMixin(LitElement) {
             // Check if it's a preset
             switch (value) {
                 case "small" /* FlexGap.Small */:
-                    return 'var(--nuraly-spacing-2, 8px)';
+                    return '8px';
                 case "medium" /* FlexGap.Medium */:
-                    return 'var(--nuraly-spacing-3, 16px)';
+                    return '16px';
                 case "large" /* FlexGap.Large */:
-                    return 'var(--nuraly-spacing-4, 24px)';
+                    return '24px';
                 default:
                     return value; // Use as-is (could be CSS variable or custom value)
             }
@@ -132,13 +134,13 @@ let NrFlexElement = class NrFlexElement extends NuralyUIBaseMixin(LitElement) {
         const flexStyles = this.getFlexStyles();
         return html `
       <div
+        part="flex"
         class="nr-flex"
         data-direction="${flexDirection}"
         data-wrap="${this.wrap}"
         data-justify="${this.justify}"
         data-align="${this.align}"
         data-inline="${this.inline}"
-        data-theme="${this.currentTheme}"
         style="${flexStyles}"
       >
         <slot></slot>
@@ -147,6 +149,7 @@ let NrFlexElement = class NrFlexElement extends NuralyUIBaseMixin(LitElement) {
     }
 };
 NrFlexElement.styles = styles;
+NrFlexElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrFlexElement.prototype, "direction", void 0);