@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -1,70 +1,62 @@
-import { css } from "lit";
-import { styleVariables } from './label.style.variables.js';
+import { css } from 'lit';
 export default css `
-  ${styleVariables}
-
   :host {
     display: inline-block;
     width: fit-content;
   }
 
   label {
-    font-family: var(--nuraly-label-font-family);
-    font-size: var(--nuraly-label-font-size);
-    font-weight: var(--nuraly-label-font-weight);
-    line-height: var(--nuraly-label-line-height);
-    color: var(--nuraly-label-text-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 300;
+    line-height: normal;
+    color: var(--nr-text, #161616);
     margin: 0;
-    margin-bottom: var(--nuraly-label-margin-bottom);
+    margin-bottom: 4px;
     display: block;
     user-select: none;
     cursor: pointer;
-    transition: color var(--nuraly-label-transition-duration) var(--nuraly-label-transition-timing);
+    transition: color 150ms ease;
   }
 
   /* Size variants */
   :host([size="small"]) label {
-    font-size: var(--nuraly-label-small-font-size);
+    font-size: 0.75rem;
   }
 
   :host([size="large"]) label {
-    font-size: var(--nuraly-label-large-font-size);
+    font-size: 1rem;
   }
 
   /* Variant colors */
   :host([variant="secondary"]) label {
-    color: var(--nuraly-label-secondary-color);
+    color: var(--nr-text-secondary, #525252);
   }
 
   :host([variant="error"]) label {
-    color: var(--nuraly-label-error-color);
+    color: #da1e28;
   }
 
   :host([variant="warning"]) label {
-    color: var(--nuraly-label-warning-color);
+    color: #f1c21b;
   }
 
   :host([variant="success"]) label {
-    color: var(--nuraly-label-success-color);
+    color: #198038;
   }
 
   /* Disabled state */
   :host([disabled]) label {
-    color: var(--nuraly-label-disabled-color);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
     opacity: 0.6;
   }
 
   /* Required asterisk */
   .required-asterisk {
-    color: var(--nuraly-label-required-color);
-    margin-left: var(--nuraly-label-required-margin);
+    color: #da1e28;
+    margin-left: 2px;
     font-weight: normal;
   }
-
-  /* Focus-within for accessibility when label is associated with form elements */
-  :host(:focus-within) label:not([disabled]) {
-    opacity: 0.8;
-  }
 `;
 //# sourceMappingURL=label.style.js.map

package/dist/src/components/label/label.style.variables.js

@@ -2,34 +2,34 @@ import { css } from 'lit';
 export const styleVariables = css `
   :host {
     /* Typography */
-    --nuraly-label-font-family: var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
-    --nuraly-label-font-weight: var(--nuraly-font-weight-medium, 300);
-    --nuraly-label-line-height: var(--nuraly-line-height-base, auto);
+    --nuraly-label-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    --nuraly-label-font-weight: 300;
+    --nuraly-label-line-height: auto;
 
     /* Size variants */
-    --nuraly-label-small-font-size: var(--nuraly-font-size-xs, 12px);
-    --nuraly-label-medium-font-size: var(--nuraly-font-size-sm, 14px);
-    --nuraly-label-large-font-size: var(--nuraly-font-size-base, 16px);
+    --nuraly-label-small-font-size: 12px;
+    --nuraly-label-medium-font-size: 14px;
+    --nuraly-label-large-font-size: 16px;
 
     /* Default font size */
-    --nuraly-label-font-size: var(--nuraly-label-medium-font-size);
+    --nuraly-label-font-size: 14px;
 
     /* Colors */
-    --nuraly-label-text-color: var(--nuraly-color-text-primary, #000000);
-    --nuraly-label-secondary-color: var(--nuraly-color-text-secondary, #666666);
-    --nuraly-label-error-color: var(--nuraly-color-error-500, #ff4d4f);
-    --nuraly-label-warning-color: var(--nuraly-color-warning-500, #faad14);
-    --nuraly-label-success-color: var(--nuraly-color-success-500, #52c41a);
-    --nuraly-label-required-color: var(--nuraly-color-error-500, #ff4d4f);
-    --nuraly-label-disabled-color: var(--nuraly-color-text-disabled, #bfbfbf);
+    --nuraly-label-text-color: #000000;
+    --nuraly-label-secondary-color: #666666;
+    --nuraly-label-error-color: #ff4d4f;
+    --nuraly-label-warning-color: #faad14;
+    --nuraly-label-success-color: #52c41a;
+    --nuraly-label-required-color: #ff4d4f;
+    --nuraly-label-disabled-color: #bfbfbf;
 
     /* Spacing */
-    --nuraly-label-margin-bottom: var(--nuraly-spacing-xs, 4px);
-    --nuraly-label-required-margin: var(--nuraly-spacing-2xs, 2px);
+    --nuraly-label-margin-bottom: 4px;
+    --nuraly-label-required-margin: 2px;
 
     /* Transitions */
-    --nuraly-label-transition-duration: var(--nuraly-transition-duration-base, 150ms);
-    --nuraly-label-transition-timing: var(--nuraly-transition-timing-ease, ease);
+    --nuraly-label-transition-duration: 150ms;
+    --nuraly-label-transition-timing: ease;
   }
 `;
 //# sourceMappingURL=label.style.variables.js.map

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