@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -8,7 +8,7 @@ import { PanelMode, PanelSize, PanelPosition, MaximizePosition } from './panel.t
 import '../icon/index.js';
 import '../label/index.js';
 import { PanelDragHost, PanelResizeHost } from './controllers/index.js';
-declare const NrPanelElement_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 NrPanelElement_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;
 /**
  * Versatile panel component that can transform between panel and window modes.
  *
@@ -57,6 +57,7 @@ declare const NrPanelElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @slot footer - Custom footer content
  */
 export declare class NrPanelElement extends NrPanelElement_base implements PanelDragHost, PanelResizeHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     /** Panel mode (panel, window, minimized) */

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

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

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

@@ -11,26 +11,26 @@ export const styles = css `
      * ======================================== */
     
     /* Colors */
-    --nuraly-panel-background: var(--nuraly-color-surface, #ffffff);
-    --nuraly-panel-border-color: var(--nuraly-color-border, #e0e0e0);
+    --nuraly-panel-background: #ffffff;
+    --nuraly-panel-border-color: #e0e0e0;
     --nuraly-panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    --nuraly-panel-header-background: var(--nuraly-color-surface-variant, #f5f5f5);
-    --nuraly-panel-header-text-color: var(--nuraly-color-text-primary, #1a1a1a);
-    --nuraly-panel-header-border-color: var(--nuraly-color-border, #e0e0e0);
+    --nuraly-panel-header-background: #f5f5f5;
+    --nuraly-panel-header-text-color: #1a1a1a;
+    --nuraly-panel-header-border-color: #e0e0e0;
     --nuraly-panel-header-border-width: 1px;
     --nuraly-panel-header-border-style: solid;
     
     /* Spacing */
-    --nuraly-panel-padding: var(--nuraly-spacing-04, 1rem);
-    --nuraly-panel-header-padding: var(--nuraly-spacing-03, 0.75rem) var(--nuraly-spacing-04, 1rem);
+    --nuraly-panel-padding: 1rem;
+    --nuraly-panel-header-padding: 0.75rem 1rem;
     
     /* Border Radius */
-    --nuraly-panel-border-radius: var(--nuraly-border-radius-medium, 8px);
+    --nuraly-panel-border-radius: 6px;
     
     /* Typography */
-    --nuraly-panel-font-family: var(--nuraly-font-family, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
-    --nuraly-panel-header-font-size: var(--nuraly-font-size-lg, 1.125rem);
-    --nuraly-panel-header-font-weight: var(--nuraly-font-weight-semibold, 400);
+    --nuraly-panel-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --nuraly-panel-header-font-size: 1.125rem;
+    --nuraly-panel-header-font-weight: 600;
     
     /* Transitions */
     --nuraly-panel-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -48,7 +48,7 @@ export const styles = css `
     --nuraly-panel-window-z-index: 200;
     
     display: block;
-    font-family: var(--nuraly-panel-font-family);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   /* ========================================
@@ -57,10 +57,10 @@ export const styles = css `
 
   .panel {
     position: relative;
-    background: var(--nuraly-panel-background);
-    border: 1px solid var(--nuraly-panel-border-color);
-    border-radius: var(--nuraly-panel-border-radius);
-    box-shadow: var(--nuraly-panel-shadow);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -90,7 +90,7 @@ export const styles = css `
   /* Panel Mode - Docked to edges */
   .panel--mode-panel {
     position: fixed;
-    z-index: var(--nuraly-panel-z-index);
+    z-index: 100;
   }
 
   .panel--mode-panel.panel--position-left {
@@ -98,7 +98,7 @@ export const styles = css `
     top: 0;
     bottom: 0;
     height: 100vh;
-    border-radius: 0 var(--nuraly-panel-border-radius) var(--nuraly-panel-border-radius) 0;
+    border-radius: 0 6px 6px 0;
   }
 
   .panel--mode-panel.panel--position-right {
@@ -106,7 +106,7 @@ export const styles = css `
     top: 0;
     bottom: 0;
     height: 100vh;
-    border-radius: var(--nuraly-panel-border-radius) 0 0 var(--nuraly-panel-border-radius);
+    border-radius: 6px 0 0 6px;
   }
 
   .panel--mode-panel.panel--position-top {
@@ -114,7 +114,7 @@ export const styles = css `
     right: 0;
     top: 0;
     width: 100%;
-    border-radius: 0 0 var(--nuraly-panel-border-radius) var(--nuraly-panel-border-radius);
+    border-radius: 0 0 6px 6px;
   }
 
   .panel--mode-panel.panel--position-bottom {
@@ -122,13 +122,13 @@ export const styles = css `
     right: 0;
     bottom: 0;
     width: 100%;
-    border-radius: var(--nuraly-panel-border-radius) var(--nuraly-panel-border-radius) 0 0;
+    border-radius: 6px 6px 0 0;
   }
 
   /* Window Mode - Floating, draggable */
   .panel--mode-window {
     position: fixed;
-    z-index: var(--nuraly-panel-window-z-index);
+    z-index: 200;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -146,7 +146,7 @@ export const styles = css `
     right: 20px;
     width: 280px;
     height: 56px;
-    z-index: var(--nuraly-panel-window-z-index);
+    z-index: 200;
     cursor: pointer;
     top: auto !important;
     left: auto !important;
@@ -188,24 +188,24 @@ export const styles = css `
    * ======================================== */
 
   .panel--size-small {
-    width: var(--nuraly-panel-small-width);
-    height: var(--nuraly-panel-small-height);
+    width: 320px;
+    height: 400px;
     
-    --nuraly-panel-border-radius: var(--nuraly-border-radius-small, 4px);
+    --nuraly-panel-border-radius: 4px;
   }
 
   .panel--size-medium {
-    width: var(--nuraly-panel-medium-width);
-    height: var(--nuraly-panel-medium-height);
+    width: 480px;
+    height: 600px;
     
-    --nuraly-panel-action-button-border-radius: var(--nuraly-border-radius-medium, 4px);
+    --nuraly-panel-action-button-border-radius: 6px;
   }
 
   .panel--size-large {
-    width: var(--nuraly-panel-large-width);
-    height: var(--nuraly-panel-large-height);
+    width: 640px;
+    height: 800px;
     
-    --nuraly-panel-action-button-border-radius: var(--nuraly-border-radius-large, 6px);
+    --nuraly-panel-action-button-border-radius: 8px;
   }
 
   /* ========================================
@@ -213,13 +213,13 @@ export const styles = css `
    * ======================================== */
 
   .panel-header {
-    padding: var(--nuraly-panel-header-padding);
-    background: var(--nuraly-panel-header-background);
-    border-bottom: var(--nuraly-panel-header-border-width) var(--nuraly-panel-header-border-style) var(--nuraly-panel-header-border-color);
+    padding: 0.75rem 1rem;
+    background: #f5f5f5;
+    border-bottom: 1px solid #e0e0e0;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--nuraly-spacing-03, 0.75rem);
+    gap: 0.75rem;
     flex-shrink: 0;
   }
 
@@ -231,7 +231,7 @@ export const styles = css `
   .panel-header-content {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-02, 0.5rem);
+    gap: 0.5rem;
     flex: 1;
     min-width: 0;
   }
@@ -242,9 +242,9 @@ export const styles = css `
   }
 
   .panel-title {
-    font-size: var(--nuraly-panel-header-font-size);
-    font-weight: var(--nuraly-panel-header-font-weight);
-    color: var(--nuraly-panel-header-text-color);
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #1a1a1a;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
@@ -291,28 +291,28 @@ export const styles = css `
   .panel-actions {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-02, 0.5rem);
+    gap: 0.5rem;
   }
 
   .panel-action-button {
     background: transparent;
     border: none;
-    padding: var(--nuraly-spacing-01, 0.25rem);
+    padding: 0.25rem;
     cursor: pointer;
-    border-radius: var(--nuraly-panel-action-button-border-radius);
+    border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.2s ease;
-    color: var(--nuraly-color-text-secondary, #666);
+    color: #525252;
   }
 
   .panel-action-button:hover {
-    background: var(--nuraly-color-surface-hover, rgba(0, 0, 0, 0.05));
+    background: #f4f4f4;
   }
 
   .panel-action-button:active {
-    background: var(--nuraly-color-surface-active, rgba(0, 0, 0, 0.1));
+    background: rgba(0, 0, 0, 0.1);
   }
 
   .panel-action-button nr-icon {
@@ -324,7 +324,7 @@ export const styles = css `
    * ======================================== */
 
   .panel-body {
-    padding: var(--nuraly-panel-padding);
+    padding: 1rem;
     flex: 1;
     min-height: 0;
     overflow: auto;
@@ -332,27 +332,27 @@ export const styles = css `
 
   /* Size-specific body and header padding */
   .panel--size-small .panel-header {
-    padding: var(--nuraly-panel-header-padding-small, 0.5rem 0.75rem);
+    padding: 0.5rem 0.75rem;
   }
 
   .panel--size-small .panel-body {
-    padding: var(--nuraly-panel-body-padding-small, 0.75rem);
+    padding: 0.75rem;
   }
 
   .panel--size-medium .panel-header {
-    padding: var(--nuraly-panel-header-padding-medium, 0.625rem 1rem);
+    padding: 0.625rem 1rem;
   }
 
   .panel--size-medium .panel-body {
-    padding: var(--nuraly-panel-body-padding-medium, 1rem);
+    padding: 1rem;
   }
 
   .panel--size-large .panel-header {
-    padding: var(--nuraly-panel-header-padding-large, 0.875rem 1.25rem);
+    padding: 0.875rem 1.25rem;
   }
 
   .panel--size-large .panel-body {
-    padding: var(--nuraly-panel-body-padding-large, 1.5rem);
+    padding: 1.5rem;
   }
 
   /* ========================================
@@ -360,9 +360,9 @@ export const styles = css `
    * ======================================== */
 
   .panel-footer {
-    padding: var(--nuraly-panel-footer-padding, var(--nuraly-panel-padding));
-    border-top: var(--nuraly-panel-footer-border-width, 1px) var(--nuraly-panel-footer-border-style, solid) var(--nuraly-panel-footer-border-color, var(--nuraly-panel-border-color));
-    background: var(--nuraly-panel-footer-background, var(--nuraly-panel-header-background));
+    padding: 1rem;
+    border-top: 1px solid #e0e0e0;
+    background: #f5f5f5;
     flex-shrink: 0;
   }
 
@@ -451,12 +451,12 @@ export const styles = css `
     background: linear-gradient(
       -45deg,
       transparent 40%,
-      var(--nuraly-panel-border-color) 40%,
-      var(--nuraly-panel-border-color) 50%,
+      #e0e0e0 40%,
+      #e0e0e0 50%,
       transparent 50%,
       transparent 60%,
-      var(--nuraly-panel-border-color) 60%,
-      var(--nuraly-panel-border-color) 70%,
+      #e0e0e0 60%,
+      #e0e0e0 70%,
       transparent 70%
     );
   }
@@ -479,12 +479,12 @@ export const styles = css `
    * ======================================== */
 
   :host([data-theme="dark"]) {
-    --nuraly-panel-background: var(--nuraly-color-surface-dark, #1a1a1a);
-    --nuraly-panel-border-color: var(--nuraly-color-border-dark, #333);
+    --nuraly-panel-background: #1a1a1a;
+    --nuraly-panel-border-color: #333;
     --nuraly-panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-    --nuraly-panel-header-background: var(--nuraly-color-surface-variant-dark, #252525);
-    --nuraly-panel-header-text-color: var(--nuraly-color-text-primary-dark, #e0e0e0);
-    --nuraly-panel-header-border-color: var(--nuraly-color-border-dark, #333);
+    --nuraly-panel-header-background: #252525;
+    --nuraly-panel-header-text-color: #e0e0e0;
+    --nuraly-panel-header-border-color: #333;
   }
 
   /* ========================================