@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,10 +1,26 @@
-import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAssignedElements as o,customElement as a,state as n}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{classMap as s}from"lit/directives/class-map.js";const d=r`
+import{css as t,html as e,LitElement as i}from"lit";import{property as r,customElement as s,state as o}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const l=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,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((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)},a=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 i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const r=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,r):console.error(r.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)}},h=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const r=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,r)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const r=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,r)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}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}},c=new Set,u=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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(),i=t.styles;if(i){const t=g(i);t&&function(t,e,i){var r;if(!u.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),u.set(t,i)}const s=u.get(t),o=`doc:${t}`;if(c.has(o)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],c.add(o)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const o=`shadow:${((null===(r=i.host)||void 0===r?void 0:r.tagName)||"").toLowerCase()}:${t}`;c.has(o)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],c.add(o)),e=i.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},f=t=>a(l(h(p(t))));function g(t){return Array.isArray(t)?t.map(t=>g(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}const v=t`
   :host {
     display: flex;
     flex: auto;
     flex-direction: column;
     min-height: 0;
-    background: var(--nuraly-layout-background);
+    background: #ffffff;
   }
 
   :host([has-sider]) {
@@ -18,11 +34,11 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
     min-height: 0;
     width: 100%;
   }
-`;var u=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let h=class extends(l(t)){constructor(){super(...arguments),this.hasSider=!1}connectedCallback(){super.connectedCallback(),this.detectSider()}updated(r){super.updated(r),this.detectSider()}detectSider(){var r;const t=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector("slot");if(t){const r=t.assignedElements().some(r=>"nr-sider"===r.tagName.toLowerCase());this.hasSider!==r&&(this.hasSider=r)}}handleSlotChange(){this.detectSider()}render(){return e`
-      <div class="nr-layout" part="layout">
-        <slot @slotchange=${this.handleSlotChange}></slot>
+`;var m=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let b=class extends(f(i)){constructor(){super(...arguments),this.hasSider=!1}connectedCallback(){super.connectedCallback(),this.detectSider()}updated(t){super.updated(t),this.detectSider()}detectSider(){const t=!!this.renderRoot.querySelector("nr-sider");this.hasSider!==t&&(this.hasSider=t)}render(){return e`
+      <div part="layout" class="nr-layout">
+        <slot></slot>
       </div>
-    `}};h.styles=d,u([i({type:Boolean,reflect:!0,attribute:"has-sider"})],h.prototype,"hasSider",void 0),u([o({selector:"nr-sider"})],h.prototype,"connectedCallback",null),h=u([a("nr-layout")],h);const g=r`
+    `}};b.styles=v,b.useShadowDom=!0,m([r({type:Boolean,reflect:!0,attribute:"has-sider"})],b.prototype,"hasSider",void 0),b=m([s("nr-layout")],b);const w=t`
   :host {
     display: block;
   }
@@ -30,45 +46,45 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
   .nr-header {
     display: flex;
     align-items: center;
-    padding: var(--nuraly-layout-header-padding);
-    height: var(--nuraly-layout-header-height);
-    line-height: var(--nuraly-layout-header-height);
-    background: var(--nuraly-layout-header-background);
-    color: var(--nuraly-layout-header-text);
-    border-bottom: 1px solid var(--nuraly-layout-header-border);
-    transition: var(--nuraly-layout-transition);
-  }
-`;var c=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let y=class extends(l(t)){constructor(){super(...arguments),this.height="64px"}render(){return e`
-      <header 
-        class="nr-header" 
+    padding: 0 1.5rem;
+    height: 64px;
+    line-height: 64px;
+    background: #ffffff;
+    color: #161616;
+    border-bottom: 1px solid #e0e0e0;
+    transition: all 0.2s;
+  }
+`;var x=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let y=class extends(f(i)){constructor(){super(...arguments),this.height="64px"}render(){return e`
+      <header
         part="header"
+        class="nr-header"
         style="height: ${this.height}"
       >
         <slot></slot>
       </header>
-    `}};y.styles=g,c([i({type:String})],y.prototype,"height",void 0),y=c([a("nr-header")],y);const p=r`
+    `}};y.styles=w,y.useShadowDom=!0,x([r({type:String})],y.prototype,"height",void 0),y=x([s("nr-header")],y);const k=t`
   :host {
     display: block;
   }
 
   .nr-footer {
-    padding: var(--nuraly-layout-footer-padding);
-    background: var(--nuraly-layout-footer-background);
-    color: var(--nuraly-layout-footer-text);
-    border-top: 1px solid var(--nuraly-layout-footer-border);
-    font-size: var(--nuraly-layout-font-size);
-    line-height: var(--nuraly-layout-line-height);
-    transition: var(--nuraly-layout-transition);
-  }
-`;var v=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let b=class extends(l(t)){constructor(){super(...arguments),this.padding="24px 50px"}render(){return e`
-      <footer 
-        class="nr-footer" 
+    padding: 1rem 1.5rem;
+    background: #ffffff;
+    color: #161616;
+    border-top: 1px solid #e0e0e0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    transition: all 0.2s;
+  }
+`;var O=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let C=class extends(f(i)){constructor(){super(...arguments),this.padding="24px 50px"}render(){return e`
+      <footer
         part="footer"
+        class="nr-footer"
         style="padding: ${this.padding}"
       >
         <slot></slot>
       </footer>
-    `}};b.styles=p,v([i({type:String})],b.prototype,"padding",void 0),b=v([a("nr-footer")],b);const f=r`
+    `}};C.styles=k,C.useShadowDom=!0,O([r({type:String})],C.prototype,"padding",void 0),C=O([s("nr-footer")],C);const E=t`
   :host {
     display: block;
     position: relative;
@@ -79,16 +95,16 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
     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 {
@@ -102,57 +118,57 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
     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 {
@@ -169,7 +185,7 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
     min-width: 0 !important;
     flex: 0 0 0 !important;
   }
-`,x={xs:480,sm:576,md:768,lg:992,xl:1200,xxl:1600};var m=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let k=class extends(l(t)){constructor(){super(...arguments),this.collapsed=!1,this.collapsedWidth=80,this.collapsible=!1,this.defaultCollapsed=!1,this.reverseArrow=!1,this.theme="dark",this.trigger="default",this.width=200,this.zeroWidthTriggerStyle="",this.belowBreakpoint=!1}connectedCallback(){super.connectedCallback(),this.defaultCollapsed&&!this.hasAttribute("collapsed")&&(this.collapsed=!0),this.breakpoint&&this.setupResizeObserver()}disconnectedCallback(){var r;super.disconnectedCallback(),null===(r=this.resizeObserver)||void 0===r||r.disconnect()}updated(r){var t;super.updated(r),r.has("breakpoint")&&(null===(t=this.resizeObserver)||void 0===t||t.disconnect(),this.breakpoint&&this.setupResizeObserver())}setupResizeObserver(){if(!this.breakpoint)return;const r=x[this.breakpoint];this.resizeObserver=new ResizeObserver(t=>{for(const e of t){const t=e.contentRect.width<r;t!==this.belowBreakpoint&&(this.belowBreakpoint=t,this.collapsible&&t!==this.collapsed&&(this.collapsed=t,this.dispatchCollapseEvent("responsive")),this.dispatchBreakpointEvent(t))}});const t=this.closest("nr-layout")||document.body;this.resizeObserver.observe(t)}toggleCollapse(){this.collapsed=!this.collapsed,this.dispatchCollapseEvent("clickTrigger")}dispatchCollapseEvent(r){this.dispatchEvent(new CustomEvent("collapse",{detail:{collapsed:this.collapsed,type:r},bubbles:!0,composed:!0}))}dispatchBreakpointEvent(r){this.dispatchEvent(new CustomEvent("breakpoint",{detail:{broken:r},bubbles:!0,composed:!0}))}getCurrentWidth(){return this.collapsed?`${this.collapsedWidth}px`:"number"==typeof this.width?`${this.width}px`:this.width.toString()}renderTrigger(){if(null===this.trigger||!this.collapsible)return null;return this.querySelector('[slot="trigger"]')?e`<slot name="trigger"></slot>`:0===this.collapsedWidth&&this.collapsed?e`
+`,$={xs:480,sm:576,md:768,lg:992,xl:1200,xxl:1600};var j=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let S=class extends(f(i)){constructor(){super(...arguments),this.collapsed=!1,this.collapsedWidth=80,this.collapsible=!1,this.defaultCollapsed=!1,this.reverseArrow=!1,this.theme="dark",this.trigger="default",this.width=200,this.zeroWidthTriggerStyle="",this.belowBreakpoint=!1}connectedCallback(){super.connectedCallback(),this.defaultCollapsed&&!this.hasAttribute("collapsed")&&(this.collapsed=!0),this.breakpoint&&this.setupResizeObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}updated(t){var e;super.updated(t),t.has("breakpoint")&&(null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.breakpoint&&this.setupResizeObserver())}setupResizeObserver(){if(!this.breakpoint)return;const t=$[this.breakpoint];this.resizeObserver=new ResizeObserver(e=>{for(const i of e){const e=i.contentRect.width<t;e!==this.belowBreakpoint&&(this.belowBreakpoint=e,this.collapsible&&e!==this.collapsed&&(this.collapsed=e,this.dispatchCollapseEvent("responsive")),this.dispatchBreakpointEvent(e))}});const e=this.closest("nr-layout")||document.body;this.resizeObserver.observe(e)}toggleCollapse(){this.collapsed=!this.collapsed,this.dispatchCollapseEvent("clickTrigger")}dispatchCollapseEvent(t){this.dispatchEvent(new CustomEvent("collapse",{detail:{collapsed:this.collapsed,type:t},bubbles:!0,composed:!0}))}dispatchBreakpointEvent(t){this.dispatchEvent(new CustomEvent("breakpoint",{detail:{broken:t},bubbles:!0,composed:!0}))}getCurrentWidth(){return this.collapsed?`${this.collapsedWidth}px`:"number"==typeof this.width?`${this.width}px`:this.width.toString()}renderTrigger(){if(null===this.trigger||!this.collapsible)return null;return this.querySelector('[slot="trigger"]')?e`<slot name="trigger"></slot>`:0===this.collapsedWidth&&this.collapsed?e`
         <div
           class="nr-sider-zero-width-trigger"
           part="trigger"
@@ -188,18 +204,18 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
           ${this.collapsed?this.reverseArrow?"◀":"▶":this.reverseArrow?"▶":"◀"}
         </span>
       </div>
-    `}render(){const r={"nr-sider":!0,"nr-sider-collapsed":this.collapsed,"nr-sider-has-trigger":this.collapsible&&null!==this.trigger,"nr-sider-below-breakpoint":this.belowBreakpoint,"nr-sider-zero-width":this.collapsed&&0===this.collapsedWidth};return e`
+    `}render(){const t={"nr-sider":!0,"nr-sider-collapsed":this.collapsed,"nr-sider-has-trigger":this.collapsible&&null!==this.trigger,"nr-sider-below-breakpoint":this.belowBreakpoint,"nr-sider-zero-width":this.collapsed&&0===this.collapsedWidth};return e`
       <aside
-        class=${s(r)}
+        class=${n(t)}
         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()}
       </aside>
-    `}};k.styles=f,m([i({type:String})],k.prototype,"breakpoint",void 0),m([i({type:Boolean,reflect:!0})],k.prototype,"collapsed",void 0),m([i({type:Number,attribute:"collapsed-width"})],k.prototype,"collapsedWidth",void 0),m([i({type:Boolean})],k.prototype,"collapsible",void 0),m([i({type:Boolean,attribute:"default-collapsed"})],k.prototype,"defaultCollapsed",void 0),m([i({type:Boolean,attribute:"reverse-arrow"})],k.prototype,"reverseArrow",void 0),m([i({type:String,reflect:!0})],k.prototype,"theme",void 0),m([i({type:String})],k.prototype,"trigger",void 0),m([i({type:String})],k.prototype,"width",void 0),m([i({type:String,attribute:"zero-width-trigger-style"})],k.prototype,"zeroWidthTriggerStyle",void 0),m([n()],k.prototype,"belowBreakpoint",void 0),k=m([a("nr-sider")],k);const w=r`
+    `}};S.styles=E,S.useShadowDom=!0,j([r({type:String})],S.prototype,"breakpoint",void 0),j([r({type:Boolean,reflect:!0})],S.prototype,"collapsed",void 0),j([r({type:Number,attribute:"collapsed-width"})],S.prototype,"collapsedWidth",void 0),j([r({type:Boolean})],S.prototype,"collapsible",void 0),j([r({type:Boolean,attribute:"default-collapsed"})],S.prototype,"defaultCollapsed",void 0),j([r({type:Boolean,attribute:"reverse-arrow"})],S.prototype,"reverseArrow",void 0),j([r({type:String,reflect:!0})],S.prototype,"theme",void 0),j([r({type:String})],S.prototype,"trigger",void 0),j([r({type:String})],S.prototype,"width",void 0),j([r({type:String,attribute:"zero-width-trigger-style"})],S.prototype,"zeroWidthTriggerStyle",void 0),j([o()],S.prototype,"belowBreakpoint",void 0),S=j([s("nr-sider")],S);const z=t`
   :host {
     display: block;
     flex: auto;
@@ -209,12 +225,12 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
   .nr-content {
     flex: auto;
     min-height: 0;
-    background: var(--nuraly-layout-content-background);
-    color: var(--nuraly-layout-content-text);
-    transition: var(--nuraly-layout-transition);
+    background: #f4f4f4;
+    color: #161616;
+    transition: all 0.2s;
   }
-`;var z=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let j=class extends(l(t)){render(){return e`
-      <main class="nr-content" part="content">
+`;var A=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let R=class extends(f(i)){render(){return e`
+      <main part="content" class="nr-content">
         <slot></slot>
       </main>
-    `}};j.styles=w,j=z([a("nr-content")],j);export{x as BREAKPOINT_VALUES,j as NrContentElement,b as NrFooterElement,y as NrHeaderElement,h as NrLayoutElement,k as NrSiderElement};
+    `}};R.styles=z,R.useShadowDom=!0,R=A([s("nr-content")],R);export{$ as BREAKPOINT_VALUES,R as NrContentElement,C as NrFooterElement,y as NrHeaderElement,b as NrLayoutElement,S as NrSiderElement};

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrContentElement_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 NrContentElement_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;
 /**
  * # Content Component
  *
@@ -24,6 +24,7 @@ declare const NrContentElement_base: (new (...args: any[]) => import("@nuralyui/
  */
 export declare class NrContentElement extends NrContentElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -33,13 +33,14 @@ import { contentStyles } from './content.style.js';
 let NrContentElement = class NrContentElement extends NuralyUIBaseMixin(LitElement) {
     render() {
         return html `
-      <main class="nr-content" part="content">
+      <main part="content" class="nr-content">
         <slot></slot>
       </main>
     `;
     }
 };
 NrContentElement.styles = contentStyles;
+NrContentElement.useShadowDom = true;
 NrContentElement = __decorate([
     customElement('nr-content')
 ], NrContentElement);

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

@@ -9,9 +9,9 @@ export const contentStyles = css `
   .nr-content {
     flex: auto;
     min-height: 0;
-    background: var(--nuraly-layout-content-background);
-    color: var(--nuraly-layout-content-text);
-    transition: var(--nuraly-layout-transition);
+    background: #f4f4f4;
+    color: #161616;
+    transition: all 0.2s;
   }
 `;
 //# sourceMappingURL=content.style.js.map

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrFooterElement_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 NrFooterElement_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;
 /**
  * # Footer Component
  *
@@ -23,6 +23,7 @@ declare const NrFooterElement_base: (new (...args: any[]) => import("@nuralyui/c
  */
 export declare class NrFooterElement extends NrFooterElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Padding of the footer. Default is "24px 50px".
      */

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

@@ -39,9 +39,9 @@ let NrFooterElement = class NrFooterElement extends NuralyUIBaseMixin(LitElement
     }
     render() {
         return html `
-      <footer 
-        class="nr-footer" 
+      <footer
         part="footer"
+        class="nr-footer"
         style="padding: ${this.padding}"
       >
         <slot></slot>
@@ -50,6 +50,7 @@ let NrFooterElement = class NrFooterElement extends NuralyUIBaseMixin(LitElement
     }
 };
 NrFooterElement.styles = footerStyles;
+NrFooterElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrFooterElement.prototype, "padding", void 0);

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

@@ -5,13 +5,13 @@ export const footerStyles = css `
   }
 
   .nr-footer {
-    padding: var(--nuraly-layout-footer-padding);
-    background: var(--nuraly-layout-footer-background);
-    color: var(--nuraly-layout-footer-text);
-    border-top: 1px solid var(--nuraly-layout-footer-border);
-    font-size: var(--nuraly-layout-font-size);
-    line-height: var(--nuraly-layout-line-height);
-    transition: var(--nuraly-layout-transition);
+    padding: 1rem 1.5rem;
+    background: #ffffff;
+    color: #161616;
+    border-top: 1px solid #e0e0e0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    transition: all 0.2s;
   }
 `;
 //# sourceMappingURL=footer.style.js.map

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrHeaderElement_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 NrHeaderElement_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;
 /**
  * # Header Component
  *
@@ -24,6 +24,7 @@ declare const NrHeaderElement_base: (new (...args: any[]) => import("@nuralyui/c
  */
 export declare class NrHeaderElement extends NrHeaderElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Height of the header. Default is 64px.
      */

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

@@ -40,9 +40,9 @@ let NrHeaderElement = class NrHeaderElement extends NuralyUIBaseMixin(LitElement
     }
     render() {
         return html `
-      <header 
-        class="nr-header" 
+      <header
         part="header"
+        class="nr-header"
         style="height: ${this.height}"
       >
         <slot></slot>
@@ -51,6 +51,7 @@ let NrHeaderElement = class NrHeaderElement extends NuralyUIBaseMixin(LitElement
     }
 };
 NrHeaderElement.styles = headerStyles;
+NrHeaderElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrHeaderElement.prototype, "height", void 0);

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

@@ -7,13 +7,13 @@ export const headerStyles = css `
   .nr-header {
     display: flex;
     align-items: center;
-    padding: var(--nuraly-layout-header-padding);
-    height: var(--nuraly-layout-header-height);
-    line-height: var(--nuraly-layout-header-height);
-    background: var(--nuraly-layout-header-background);
-    color: var(--nuraly-layout-header-text);
-    border-bottom: 1px solid var(--nuraly-layout-header-border);
-    transition: var(--nuraly-layout-transition);
+    padding: 0 1.5rem;
+    height: 64px;
+    line-height: 64px;
+    background: #ffffff;
+    color: #161616;
+    border-bottom: 1px solid #e0e0e0;
+    transition: all 0.2s;
   }
 `;
 //# sourceMappingURL=header.style.js.map

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);