@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,8 +1,19 @@
 import { LitElement } from "lit";
 import { VideoPreload } from "./video.types.js";
-declare const NrVideoElement_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 NrVideoElement_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;
+/**
+ * Video player component with poster, autoplay, loop, and fullscreen preview support.
+ *
+ * @csspart container - The root wrapper div of the video player
+ * @csspart video - The native video element
+ * @csspart preview-button - The button that opens the fullscreen preview modal
+ * @csspart preview-modal - The fullscreen preview overlay
+ * @csspart preview-close - The close button inside the preview modal
+ * @csspart error-message - The error state container shown when the video fails to load
+ */
 export declare class NrVideoElement extends NrVideoElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     src: string;
     poster?: string;
     width: string;

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

@@ -10,6 +10,16 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import styles from "./video.style.js";
+/**
+ * Video player component with poster, autoplay, loop, and fullscreen preview support.
+ *
+ * @csspart container - The root wrapper div of the video player
+ * @csspart video - The native video element
+ * @csspart preview-button - The button that opens the fullscreen preview modal
+ * @csspart preview-modal - The fullscreen preview overlay
+ * @csspart preview-close - The close button inside the preview modal
+ * @csspart error-message - The error state container shown when the video fails to load
+ */
 let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
@@ -84,8 +94,8 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
         };
         if (this.hasError) {
             return html `
-        <div class=${classMap(containerClasses)}>
-          <div class="error-message">
+        <div part="container" class=${classMap(containerClasses)}>
+          <div part="error-message" class="error-message">
             <img class="error-icon" src=${this.defaultFallback} alt="Video error" />
             <p>Unable to load video</p>
           </div>
@@ -93,8 +103,9 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
       `;
         }
         return html `
-      <div class=${classMap(containerClasses)}>
+      <div part="container" class=${classMap(containerClasses)}>
         <video
+          part="video"
           style=${styleMap(videoStyles)}
           ?autoplay=${this.autoplay}
           ?loop=${this.loop}
@@ -111,7 +122,7 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
           Your browser does not support the video tag.
         </video>
         ${this.previewable ? html `
-          <button class="preview-button" @click=${this.showPreviewModal}>
+          <button part="preview-button" class="preview-button" @click=${this.showPreviewModal}>
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z"/>
               <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z"/>
@@ -120,8 +131,8 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
           </button>
         ` : ''}
         ${this.showPreview ? html `
-          <div class="preview-modal" @click=${this.closePreviewModal}>
-            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+          <div part="preview-modal" class="preview-modal" @click=${this.closePreviewModal}>
+            <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             <video
               ?autoplay=${true}
               ?loop=${this.loop}
@@ -138,6 +149,7 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
     }
 };
 NrVideoElement.styles = styles;
+NrVideoElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrVideoElement.prototype, "src", void 0);

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

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 export default css `
   :host {
     display: inline-block;
@@ -13,14 +13,14 @@ export default css `
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: var(--nuraly-video-bg, #000);
+    background-color: #000;
   }
 
   video {
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: var(--nuraly-video-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .video--error {
@@ -28,8 +28,8 @@ export default css `
     align-items: center;
     justify-content: center;
     min-height: 200px;
-    background-color: var(--nuraly-video-error-bg, #f5f5f5);
-    color: var(--nuraly-video-error-color, #999);
+    background-color: var(--nr-bg-hover, #f4f4f4);
+    color: var(--nr-text-secondary, #525252);
   }
 
   .error-message {
@@ -44,7 +44,6 @@ export default css `
     opacity: 0.5;
   }
 
-  /* Preview/Fullscreen Modal */
   .preview-modal {
     position: fixed;
     top: 0;
@@ -54,15 +53,15 @@ export default css `
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));
-    z-index: var(--nuraly-video-preview-zindex, 1000);
-    animation: fadeIn 0.3s ease;
+    background-color: rgba(0, 0, 0, 0.95);
+    z-index: 1000;
+    animation: nr-video-fadeIn 0.3s ease;
   }
 
   .preview-modal video {
     max-width: 90%;
     max-height: 90%;
-    border-radius: var(--nuraly-video-preview-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .preview-close {
@@ -71,10 +70,10 @@ export default css `
     right: 20px;
     width: 40px;
     height: 40px;
-    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
+    background: rgba(255, 255, 255, 0.2);
     border: none;
     border-radius: 50%;
-    color: var(--nuraly-video-preview-close-color, white);
+    color: white;
     font-size: 24px;
     line-height: 1;
     cursor: pointer;
@@ -86,19 +85,19 @@ export default css `
   }
 
   .preview-close:hover {
-    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
+    background: rgba(255, 255, 255, 0.3);
   }
 
   .preview-button {
     position: absolute;
     top: 10px;
     right: 10px;
-    background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));
+    background-color: rgba(0, 0, 0, 0.5);
     border: none;
     border-radius: 4px;
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--nuraly-video-fullscreen-btn-color, white);
+    color: white;
     font-size: 12px;
     display: flex;
     align-items: center;
@@ -108,17 +107,12 @@ export default css `
   }
 
   .preview-button:hover {
-    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
+    background-color: rgba(0, 0, 0, 0.7);
   }
 
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+  @keyframes nr-video-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 `;
 //# sourceMappingURL=video.style.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A comprehensive collection of enterprise-class web components built with Lit and TypeScript",
   "type": "module",
   "main": "dist/nuralyui.bundle.js",
@@ -134,7 +134,6 @@
   "author": "Laabidi Aymen",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "@nuralyui/common": "0.1.4",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
@@ -144,27 +143,41 @@
     "@lit/localize": "^0.12.2",
     "@lit/reactive-element": "^2.1.1",
     "@nanostores/persistent": "^1.2.0",
+    "@nuralyui/common": "0.1.4",
+    "codejar": "^4.3.0",
     "dayjs": "^2.0.0-alpha.4",
+    "highlight.js": "^11.11.1",
     "lit": "^3.0.0",
-    "lucide": "^0.552.0",
     "nanostores": "^0.11.4",
+    "mermaid": "^11.0.0",
     "vanilla-colorful": "^0.7.2"
   },
   "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
     "monaco-editor": "^0.55.0",
     "monacopilot": "^1.2.0",
-    "mermaid": "^11.0.0",
-    "socket.io-client": "^4.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "@types/react": "^18.0.0 || ^19.0.0"
+    "socket.io-client": "^4.0.0"
   },
   "peerDependenciesMeta": {
-    "monaco-editor": { "optional": true },
-    "monacopilot": { "optional": true },
-    "mermaid": { "optional": true },
-    "socket.io-client": { "optional": true },
-    "react": { "optional": true },
-    "@types/react": { "optional": true }
+    "monaco-editor": {
+      "optional": true
+    },
+    "monacopilot": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
+    },
+    "socket.io-client": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",

package/packages/common/dist/VERSIONS.md

@@ -1,4 +1,4 @@
 # @nuralyui/common
 
-Version: 0.1.4
-Build Date: 2026-03-18
+Version: 0.1.5
+Build Date: 2026-03-31

package/packages/common/dist/shared/base-mixin.d.ts

@@ -8,35 +8,37 @@ import { ThemeAware } from './theme-mixin.js';
 import { DependencyAware } from './dependency-mixin.js';
 import { EventHandlerCapable } from './event-handler-mixin.js';
 /**
- * Base interface combining theme awareness, dependency validation, and event handling
+ * Interface for Light DOM content projection (replacement for Shadow DOM <slot>)
  */
-export interface NuralyUIBaseElement extends ThemeAware, DependencyAware, EventHandlerCapable {
+export interface LightDomContent {
+    /** Default-slot children (nodes without a `slot` attribute) */
+    readonly lightChildren: Node[];
+    /** Named-slot children (elements with `slot="name"`) */
+    lightChildrenNamed(name: string): Element[];
+}
+/**
+ * Base interface combining theme awareness, dependency validation, event handling, and Light DOM content
+ */
+export interface NuralyUIBaseElement extends ThemeAware, DependencyAware, EventHandlerCapable, LightDomContent {
 }
 type Constructor<T = {}> = new (...args: any[]) => T;
 /**
- * Global base mixin that combines ThemeAwareMixin and DependencyValidationMixin
- * This mixin provides a single entry point for all common functionality needed
- * by Nuraly UI components, reducing boilerplate code in individual components.
+ * Global base mixin that combines Light DOM, style injection, ThemeAwareMixin,
+ * DependencyValidationMixin, and EventHandlerMixin.
  *
- * @param superClass - The base class to extend (typically LitElement)
- * @returns Enhanced class with both theme management and dependency validation capabilities
+ * Uses **Light DOM** rendering so external CSS can reach component internals.
+ * Component styles are injected once per tag into `document.adoptedStyleSheets`.
  *
- * @example
- * ```typescript
- * @customElement('my-component')
- * export class MyComponent extends NuralyUIBaseMixin(LitElement) {
- *   requiredComponents = ['nr-icon'];
+ * Instead of `<slot>`, use:
+ * - `this.lightChildren` for default slot content
+ * - `this.lightChildrenNamed('name')` for named slot content
  *
- *   render() {
- *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
- *   }
- * }
- * ```
+ * @param superClass - The base class to extend (typically LitElement)
  */
-export declare const NuralyUIBaseMixin: <T extends Constructor<LitElement>>(superClass: T) => (new (...args: any[]) => DependencyAware) & (new (...args: any[]) => ThemeAware) & (new (...args: any[]) => EventHandlerCapable) & T;
+export declare const NuralyUIBaseMixin: <T extends Constructor<LitElement>>(superClass: T) => (new (...args: any[]) => DependencyAware) & (new (...args: any[]) => ThemeAware) & (new (...args: any[]) => EventHandlerCapable) & Constructor<LightDomContent> & T;
 /**
  * Alternative shorter name for convenience
  */
-export declare const BaseMixin: <T extends Constructor<LitElement>>(superClass: T) => (new (...args: any[]) => DependencyAware) & (new (...args: any[]) => ThemeAware) & (new (...args: any[]) => EventHandlerCapable) & T;
+export declare const BaseMixin: <T extends Constructor<LitElement>>(superClass: T) => (new (...args: any[]) => DependencyAware) & (new (...args: any[]) => ThemeAware) & (new (...args: any[]) => EventHandlerCapable) & Constructor<LightDomContent> & T;
 export {};
 //# sourceMappingURL=base-mixin.d.ts.map

package/packages/common/dist/shared/base-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/base-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAmB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAA6B,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,UAAU,EAAE,eAAe,EAAE,mBAAmB;CAAG;AAEhG,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,yIAIjF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GATY,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,yIASxC,CAAC"}
+{"version":3,"file":"base-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/base-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACjD,OAAO,EAAmB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAA6B,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGlF;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,+DAA+D;IAC/D,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,UAAU,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe;CAAG;AAEjH,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAwFrD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,wKAEjF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAPY,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,wKAOxC,CAAC"}

package/packages/common/dist/shared/base-mixin.js

@@ -6,33 +6,117 @@
 import { ThemeAwareMixin } from './theme-mixin.js';
 import { DependencyValidationMixin } from './dependency-mixin.js';
 import { EventHandlerMixin } from './event-handler-mixin.js';
+import { injectStyles } from './style-injector.js';
 /**
- * Global base mixin that combines ThemeAwareMixin and DependencyValidationMixin
- * This mixin provides a single entry point for all common functionality needed
- * by Nuraly UI components, reducing boilerplate code in individual components.
+ * Mixin that switches components to Light DOM rendering, injects styles into
+ * document.adoptedStyleSheets, and provides Light DOM content projection
+ * (replacement for Shadow DOM <slot>).
  *
- * @param superClass - The base class to extend (typically LitElement)
- * @returns Enhanced class with both theme management and dependency validation capabilities
+ * Components that need Shadow DOM (canvas, modal, dropdown, etc.) declare
+ * `static useShadowDom = true` — the mixin skips the Light DOM override
+ * and leaves Lit's default Shadow DOM behavior intact.
+ */
+const LightDomMixin = (superClass) => {
+    class LightDomClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Original children saved before Lit's first render.
+             * Use `lightChildren` / `lightChildrenNamed(name)` in templates
+             * instead of `<slot>` / `<slot name="...">`.
+             */
+            this.__lightDomChildren = null;
+        }
+        createRenderRoot() {
+            if (this.constructor.useShadowDom) {
+                return super.createRenderRoot();
+            }
+            return this;
+        }
+        connectedCallback() {
+            const isShadow = this.constructor.useShadowDom;
+            // Save and remove original children BEFORE super triggers first render.
+            // Only needed for Light DOM — Shadow DOM uses <slot> natively.
+            if (!isShadow && this.__lightDomChildren === null) {
+                this.__lightDomChildren = [];
+                while (this.firstChild) {
+                    this.__lightDomChildren.push(this.removeChild(this.firstChild));
+                }
+            }
+            super.connectedCallback();
+            // Inject component styles into document.adoptedStyleSheets once per tag.
+            // Only needed for Light DOM — Shadow DOM scopes styles automatically.
+            if (!isShadow) {
+                const ctor = this.constructor;
+                const tag = this.tagName.toLowerCase();
+                const componentStyles = ctor.styles;
+                if (componentStyles) {
+                    const cssText = flattenStyles(componentStyles);
+                    if (cssText) {
+                        injectStyles(tag, cssText, this);
+                    }
+                }
+            }
+        }
+        /**
+         * Get default-slot children (nodes without a `slot` attribute).
+         * Use in templates: `html\`<span>\${this.lightChildren}</span>\``
+         */
+        get lightChildren() {
+            if (!this.__lightDomChildren)
+                return [];
+            return this.__lightDomChildren.filter(n => !(n instanceof Element && n.hasAttribute('slot')));
+        }
+        /**
+         * Get named-slot children (elements with `slot="name"`).
+         * Use in templates: `html\`<span>\${this.lightChildrenNamed('icon')}</span>\``
+         */
+        lightChildrenNamed(name) {
+            if (!this.__lightDomChildren)
+                return [];
+            return this.__lightDomChildren.filter((n) => n instanceof Element && n.getAttribute('slot') === name);
+        }
+    }
+    /**
+     * Set to `true` in subclasses to keep Shadow DOM rendering.
+     * Shadow DOM components use `<slot>` and `::part()` as usual.
+     */
+    LightDomClass.useShadowDom = false;
+    return LightDomClass;
+};
+/**
+ * Global base mixin that combines Light DOM, style injection, ThemeAwareMixin,
+ * DependencyValidationMixin, and EventHandlerMixin.
  *
- * @example
- * ```typescript
- * @customElement('my-component')
- * export class MyComponent extends NuralyUIBaseMixin(LitElement) {
- *   requiredComponents = ['nr-icon'];
+ * Uses **Light DOM** rendering so external CSS can reach component internals.
+ * Component styles are injected once per tag into `document.adoptedStyleSheets`.
  *
- *   render() {
- *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
- *   }
- * }
- * ```
+ * Instead of `<slot>`, use:
+ * - `this.lightChildren` for default slot content
+ * - `this.lightChildrenNamed('name')` for named slot content
+ *
+ * @param superClass - The base class to extend (typically LitElement)
  */
 export const NuralyUIBaseMixin = (superClass) => {
-    // Apply all base mixins in the correct order:
-    // EventHandlerMixin first, then DependencyValidationMixin, then ThemeAwareMixin
-    return DependencyValidationMixin(ThemeAwareMixin(EventHandlerMixin(superClass)));
+    return DependencyValidationMixin(ThemeAwareMixin(EventHandlerMixin(LightDomMixin(superClass))));
 };
 /**
  * Alternative shorter name for convenience
  */
 export const BaseMixin = NuralyUIBaseMixin;
+/**
+ * Flatten Lit CSSResult / CSSResult[] into a single CSS string.
+ */
+function flattenStyles(styles) {
+    if (Array.isArray(styles)) {
+        return styles.map(s => flattenStyles(s)).filter(Boolean).join('\n');
+    }
+    if (styles && typeof styles.cssText === 'string') {
+        return styles.cssText;
+    }
+    if (typeof styles === 'string') {
+        return styles;
+    }
+    return '';
+}
 //# sourceMappingURL=base-mixin.js.map

package/packages/common/dist/shared/base-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-mixin.js","sourceRoot":"","sources":["../../src/shared/base-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,eAAe,EAAc,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,yBAAyB,EAAmB,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAuB,MAAM,0BAA0B,CAAC;AASlF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAoC,UAAa,EAAE,EAAE;IACpF,8CAA8C;IAC9C,gFAAgF;IAChF,OAAO,yBAAyB,CAAC,eAAe,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;AACnF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"base-mixin.js","sourceRoot":"","sources":["../../src/shared/base-mixin.ts"],"names":[],"mappings":"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"}

package/packages/common/dist/shared/index.d.ts

@@ -7,6 +7,7 @@ export { NuralyUIBaseMixin, BaseMixin, type NuralyUIBaseElement } from './base-m
 export { ThemeAwareMixin, type ThemeAware } from './theme-mixin.js';
 export { DependencyValidationMixin, type DependencyAware } from './dependency-mixin.js';
 export { EventHandlerMixin, type EventHandlerCapable } from './event-handler-mixin.js';
+export { injectStyles, hasInjectedStyles } from './style-injector.js';
 export { throttle, debounce, rafThrottle } from './utils.js';
 export * from './controllers/index.js';
 export * from './validation.types.js';

package/packages/common/dist/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGvF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG7D,cAAc,wBAAwB,CAAC;AAGvC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGtE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG7D,cAAc,wBAAwB,CAAC;AAGvC,cAAc,uBAAuB,CAAC"}

package/packages/common/dist/shared/index.js

@@ -8,6 +8,8 @@ export { NuralyUIBaseMixin, BaseMixin } from './base-mixin.js';
 export { ThemeAwareMixin } from './theme-mixin.js';
 export { DependencyValidationMixin } from './dependency-mixin.js';
 export { EventHandlerMixin } from './event-handler-mixin.js';
+// Export style injection
+export { injectStyles, hasInjectedStyles } from './style-injector.js';
 // Export utility functions
 export { throttle, debounce, rafThrottle } from './utils.js';
 // Export shared controllers

package/packages/common/dist/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,yCAAyC;AACzC,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA4B,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,eAAe,EAAmB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAwB,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAA4B,MAAM,0BAA0B,CAAC;AAEvF,2BAA2B;AAC3B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7D,4BAA4B;AAC5B,cAAc,wBAAwB,CAAC;AAEvC,iCAAiC;AACjC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,yCAAyC;AACzC,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA4B,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,eAAe,EAAmB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAwB,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAA4B,MAAM,0BAA0B,CAAC;AAEvF,yBAAyB;AACzB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEtE,2BAA2B;AAC3B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7D,4BAA4B;AAC5B,cAAc,wBAAwB,CAAC;AAEvC,iCAAiC;AACjC,cAAc,uBAAuB,CAAC"}

package/packages/common/dist/shared/style-injector.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare function injectStyles(tag: string, cssText: string, element?: HTMLElement): void;
+/**
+ * Check if styles have already been injected for a given tag.
+ */
+export declare function hasInjectedStyles(tag: string): boolean;
+//# sourceMappingURL=style-injector.d.ts.map

package/packages/common/dist/shared/style-injector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-injector.d.ts","sourceRoot":"","sources":["../../src/shared/style-injector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,QAiC/E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEtD"}

package/packages/common/dist/shared/style-injector.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Light DOM style injector — injects component CSS into the document
+ * and any ancestor shadow roots, once per tag per root.
+ * Uses adoptedStyleSheets for efficient, non-duplicating style injection.
+ */
+const injected = new Set();
+const sheetCache = new Map();
+export function injectStyles(tag, cssText, element) {
+    var _a;
+    // Ensure we have a cached stylesheet for this tag
+    if (!sheetCache.has(tag)) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(cssText);
+        sheetCache.set(tag, sheet);
+    }
+    const sheet = sheetCache.get(tag);
+    // Always inject into document (light DOM)
+    const docKey = `doc:${tag}`;
+    if (!injected.has(docKey)) {
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        injected.add(docKey);
+    }
+    // Also inject into any ancestor shadow root (so it works inside shadow DOM)
+    if (element) {
+        let node = element;
+        while (node) {
+            const root = node.getRootNode();
+            if (root instanceof ShadowRoot) {
+                const shadowKey = `shadow:${(((_a = root.host) === null || _a === void 0 ? void 0 : _a.tagName) || '').toLowerCase()}:${tag}`;
+                if (!injected.has(shadowKey)) {
+                    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+                    injected.add(shadowKey);
+                }
+                node = root.host;
+            }
+            else {
+                break;
+            }
+        }
+    }
+}
+/**
+ * Check if styles have already been injected for a given tag.
+ */
+export function hasInjectedStyles(tag) {
+    return injected.has(tag);
+}
+//# sourceMappingURL=style-injector.js.map

package/packages/common/dist/shared/style-injector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-injector.js","sourceRoot":"","sources":["../../src/shared/style-injector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU,CAAC;AACnC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAyB,CAAC;AAEpD,MAAM,UAAU,YAAY,CAAC,GAAW,EAAE,OAAe,EAAE,OAAqB;;IAC9E,kDAAkD;IAClD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC3B,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC7B,CAAC;IACD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC;IAEnC,0CAA0C;IAC1C,MAAM,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;IAC5B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;QAC1B,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACtE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IAED,4EAA4E;IAC5E,IAAI,OAAO,EAAE,CAAC;QACZ,IAAI,IAAI,GAAgB,OAAO,CAAC;QAChC,OAAO,IAAI,EAAE,CAAC;YACZ,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAChC,IAAI,IAAI,YAAY,UAAU,EAAE,CAAC;gBAC/B,MAAM,SAAS,GAAG,UAAU,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,KAAI,EAAE,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,EAAE,CAAC;gBAC9E,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;oBAC7B,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;oBAC9D,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC1B,CAAC;gBACD,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;iBAAM,CAAC;gBACN,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAW;IAC3C,OAAO,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC"}

package/packages/common/dist/shared/theme-mixin.d.ts

@@ -48,30 +48,8 @@ export declare function detectTheme(element: Element): 'light' | 'dark';
  */
 export declare function detectDesignSystem(element: Element): 'carbon' | 'default';
 /**
- * CSS template literal helper for theme-aware styles
- * Generates CSS with both data-theme selectors and system fallback
- *
- * @param lightThemeVars - CSS custom properties for light theme
- * @param darkThemeVars - CSS custom properties for dark theme
- * @returns CSS template literal
- *
- * @example
- * ```typescript
- * import { css } from 'lit';
- * import { createThemeStyles } from '../shared/theme-mixin.js';
- *
- * const styles = css`
- *   ${createThemeStyles(
- *     css`--color: black; --bg: white;`,
- *     css`--color: white; --bg: black;`
- *   )}
- *
- *   .content {
- *     color: var(--color);
- *     background: var(--bg);
- *   }
- * `;
- * ```
+ * @deprecated Use CSS @layer with minimal tokens instead of createThemeStyles.
+ * Light DOM components use document-level tokens.css for dark/light switching.
  */
 export declare function createThemeStyles(lightThemeVars: any, darkThemeVars: any): string;
 export {};

package/packages/common/dist/shared/theme-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/theme-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC3C;AAED,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,KAmGpD,WAAW,CAAC,UAAU,CAAC,GAAG,CACrD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAe9D;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAUzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,iBAAiB,CAAC,cAAc,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,UAmBxE"}
+{"version":3,"file":"theme-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/theme-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC3C;AAED,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,KAmGpD,WAAW,CAAC,UAAU,CAAC,GAAG,CACrD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAe9D;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAUzE;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,cAAc,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,UAQxE"}