@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrLayoutElement_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 NrLayoutElement_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;
 /**
  * # Layout Component
  *
@@ -10,8 +10,6 @@ declare const NrLayoutElement_base: (new (...args: any[]) => import("@nuralyui/c
  *
  * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)
  *
- * @csspart layout - The layout container element
- *
  * @example
  * ```html
  * <nr-layout>
@@ -20,9 +18,12 @@ declare const NrLayoutElement_base: (new (...args: any[]) => import("@nuralyui/c
  *   <nr-footer>Footer</nr-footer>
  * </nr-layout>
  * ```
+ *
+ * @csspart layout - The root div wrapping all slotted layout children
  */
 export declare class NrLayoutElement extends NrLayoutElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Whether the layout contains a Sider component.
      * When true, the layout uses horizontal flex direction.
@@ -35,10 +36,6 @@ export declare class NrLayoutElement extends NrLayoutElement_base {
      * Detects if the layout has a Sider component as a direct child
      */
     private detectSider;
-    /**
-     * Handles slot changes to re-detect sider elements
-     */
-    private handleSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { layoutStyles } from './layout.style.js';
 /**
@@ -18,8 +18,6 @@ import { layoutStyles } from './layout.style.js';
  *
  * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)
  *
- * @csspart layout - The layout container element
- *
  * @example
  * ```html
  * <nr-layout>
@@ -28,6 +26,8 @@ import { layoutStyles } from './layout.style.js';
  *   <nr-footer>Footer</nr-footer>
  * </nr-layout>
  * ```
+ *
+ * @csspart layout - The root div wrapping all slotted layout children
  */
 let NrLayoutElement = class NrLayoutElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -51,37 +51,24 @@ let NrLayoutElement = class NrLayoutElement extends NuralyUIBaseMixin(LitElement
      * Detects if the layout has a Sider component as a direct child
      */
     detectSider() {
-        var _a;
-        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        if (slot) {
-            const assignedElements = slot.assignedElements();
-            const hasSiderElement = assignedElements.some((el) => el.tagName.toLowerCase() === 'nr-sider');
-            if (this.hasSider !== hasSiderElement) {
-                this.hasSider = hasSiderElement;
-            }
+        const hasSiderElement = !!this.renderRoot.querySelector('nr-sider');
+        if (this.hasSider !== hasSiderElement) {
+            this.hasSider = hasSiderElement;
         }
     }
-    /**
-     * Handles slot changes to re-detect sider elements
-     */
-    handleSlotChange() {
-        this.detectSider();
-    }
     render() {
         return html `
-      <div class="nr-layout" part="layout">
-        <slot @slotchange=${this.handleSlotChange}></slot>
+      <div part="layout" class="nr-layout">
+        <slot></slot>
       </div>
     `;
     }
 };
 NrLayoutElement.styles = layoutStyles;
+NrLayoutElement.useShadowDom = true;
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'has-sider' })
 ], NrLayoutElement.prototype, "hasSider", void 0);
-__decorate([
-    queryAssignedElements({ selector: 'nr-sider' })
-], NrLayoutElement.prototype, "connectedCallback", null);
 NrLayoutElement = __decorate([
     customElement('nr-layout')
 ], NrLayoutElement);

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

@@ -5,7 +5,7 @@ export const layoutStyles = css `
     flex: auto;
     flex-direction: column;
     min-height: 0;
-    background: var(--nuraly-layout-background);
+    background: #ffffff;
   }
 
   :host([has-sider]) {

package/dist/src/components/layout/sider.component.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, type PropertyValues } from 'lit';
 import { LayoutBreakpoint, SiderTheme } from './layout.types.js';
-declare const NrSiderElement_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 NrSiderElement_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;
 /**
  * # Sider Component
  *
@@ -17,6 +17,7 @@ declare const NrSiderElement_base: (new (...args: any[]) => import("@nuralyui/co
  *
  * @csspart sider - The sider container element
  * @csspart trigger - The collapse trigger element
+ * @csspart children - The inner content wrapper div
  *
  * @example
  * ```html
@@ -30,6 +31,7 @@ declare const NrSiderElement_base: (new (...args: any[]) => import("@nuralyui/co
  */
 export declare class NrSiderElement extends NrSiderElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Breakpoint for responsive collapsing
      */

package/dist/src/components/layout/sider.component.js

@@ -26,6 +26,7 @@ import { BREAKPOINT_VALUES, } from './layout.types.js';
  *
  * @csspart sider - The sider container element
  * @csspart trigger - The collapse trigger element
+ * @csspart children - The inner content wrapper div
  *
  * @example
  * ```html
@@ -224,7 +225,7 @@ let NrSiderElement = class NrSiderElement extends NuralyUIBaseMixin(LitElement)
         part="sider"
         style="width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};"
       >
-        <div class="nr-sider-children">
+        <div class="nr-sider-children" part="children">
           <slot></slot>
         </div>
         ${this.renderTrigger()}
@@ -233,6 +234,7 @@ let NrSiderElement = class NrSiderElement extends NuralyUIBaseMixin(LitElement)
     }
 };
 NrSiderElement.styles = siderStyles;
+NrSiderElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrSiderElement.prototype, "breakpoint", void 0);

package/dist/src/components/layout/sider.style.js

@@ -10,16 +10,16 @@ export const siderStyles = css `
     display: flex;
     flex-direction: column;
     min-width: 0;
-    background: var(--nuraly-layout-sider-background);
-    color: var(--nuraly-layout-sider-text);
-    border-right: 1px solid var(--nuraly-layout-sider-border);
-    transition: var(--nuraly-layout-sider-transition);
+    background: #161616;
+    color: #ffffff;
+    border-right: 1px solid #e0e0e0;
+    transition: all 0.2s;
   }
 
   :host([theme='light']) .nr-sider {
-    background: var(--nuraly-layout-sider-light-background);
-    color: var(--nuraly-layout-sider-light-text);
-    border-right: 1px solid var(--nuraly-layout-sider-light-border);
+    background: #ffffff;
+    color: #161616;
+    border-right: 1px solid #e0e0e0;
   }
 
   .nr-sider-children {
@@ -33,57 +33,57 @@ export const siderStyles = css `
     bottom: 0;
     left: 0;
     right: 0;
-    height: var(--nuraly-layout-trigger-height);
+    height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--nuraly-layout-trigger-background);
-    color: var(--nuraly-layout-trigger-text);
+    background: #1f1f1f;
+    color: #ffffff;
     cursor: pointer;
-    transition: var(--nuraly-layout-transition);
-    border-top: 1px solid var(--nuraly-layout-trigger-border);
-    border-radius: var(--nuraly-layout-trigger-border-radius);
+    transition: all 0.2s;
+    border-top: 1px solid #e0e0e0;
+    border-radius: 0;
   }
 
   :host([theme='light']) .nr-sider-trigger {
-    background: var(--nuraly-layout-trigger-light-background);
-    color: var(--nuraly-layout-trigger-light-text);
-    border-top: 1px solid var(--nuraly-layout-trigger-light-border);
+    background: #f4f4f4;
+    color: #161616;
+    border-top: 1px solid #e0e0e0;
   }
 
   .nr-sider-trigger:hover {
-    background: var(--nuraly-layout-trigger-background-hover);
+    background: #333333;
   }
 
   :host([theme='light']) .nr-sider-trigger:hover {
-    background: var(--nuraly-layout-trigger-light-background-hover);
+    background: #e8e8e8;
   }
 
   .nr-sider-zero-width-trigger {
     position: absolute;
     top: 64px;
-    right: calc(-1 * var(--nuraly-layout-zero-trigger-width));
-    width: var(--nuraly-layout-zero-trigger-width);
-    height: var(--nuraly-layout-zero-trigger-height);
+    right: calc(-1 * 36px);
+    width: 36px;
+    height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--nuraly-layout-zero-trigger-background);
-    color: var(--nuraly-layout-zero-trigger-text);
+    background: #1f1f1f;
+    color: #ffffff;
     cursor: pointer;
-    transition: var(--nuraly-layout-transition);
-    border-radius: var(--nuraly-layout-zero-trigger-border-radius);
-    box-shadow: var(--nuraly-layout-zero-trigger-shadow);
+    transition: all 0.2s;
+    border-radius: 0 6px 6px 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
     z-index: 1;
   }
 
   :host([theme='light']) .nr-sider-zero-width-trigger {
-    background: var(--nuraly-layout-zero-trigger-background);
-    color: var(--nuraly-layout-zero-trigger-text);
+    background: #1f1f1f;
+    color: #ffffff;
   }
 
   .nr-sider-zero-width-trigger:hover {
-    background: var(--nuraly-layout-zero-trigger-background-hover);
+    background: #333333;
   }
 
   .trigger-icon {