@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/colorpicker/default-color-sets.style.js

@@ -11,22 +11,22 @@ const defaultColorSetsStyle = css `
   }
   
   .default-color-sets-container * {
-    margin: var(--nuraly-spacing-1, 0.25rem);
+    margin: 0.25rem;
   }
   
   .color-set-container {
     cursor: pointer;
     position: relative;
-    transition: all var(--nuraly-transition-base, 0.2s) ease-in-out;
+    transition: all 0.2s ease-in-out;
   }
   
   .color-set-container:hover {
-    box-shadow: 0 0 0 2px var(--nuraly-color-focus, rgba(15, 98, 254, 0.5));
-    opacity: var(--nuraly-opacity-hover, 0.9);
+    box-shadow: 0 0 0 2px #7c3aed;
+    opacity: 0.9;
   }
   
   .color-set-container:active {
-    box-shadow: 0 0 0 2px var(--nuraly-color-focus-active, rgba(15, 98, 254, 0.8));
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.8);
     opacity: 1;
   }
 `;

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

@@ -1,4 +1,4 @@
-import{css as t,LitElement as i,html as n}from"lit";import{property as a,customElement as e}from"lit/decorators.js";import{NuralyUIBaseMixin as r}from"@nuralyui/common/mixins";const s=t`
+import{css as t,html as e,LitElement as i}from"lit";import{property as n,customElement as s}from"lit/decorators.js";const r=t`
   :host {
     display: block;
     box-sizing: border-box;
@@ -10,8 +10,8 @@ import{css as t,LitElement as i,html as n}from"lit";import{property as a,customE
     min-height: inherit;
 
     /* Theme-aware */
-    color: var(--nuraly-color-text);
-    background: var(--nuraly-container-background, transparent);
+    color: #161616;
+    background: transparent;
   }
 
   /* Direction */
@@ -47,19 +47,19 @@ import{css as t,LitElement as i,html as n}from"lit";import{property as a,customE
 
   /* Boxed/Fixed sizes */
   .nr-container[data-size="sm"] {
-    max-width: var(--nuraly-container-sm, 640px);
+    max-width: 640px;
   }
 
   .nr-container[data-size="md"] {
-    max-width: var(--nuraly-container-md, 768px);
+    max-width: 768px;
   }
 
   .nr-container[data-size="lg"] {
-    max-width: var(--nuraly-container-lg, 1024px);
+    max-width: 1024px;
   }
 
   .nr-container[data-size="xl"] {
-    max-width: var(--nuraly-container-xl, 1280px);
+    max-width: 1280px;
   }
 
   .nr-container[data-size="full"] {
@@ -72,15 +72,15 @@ import{css as t,LitElement as i,html as n}from"lit";import{property as a,customE
   }
 
   .nr-container[data-padding="sm"] {
-    padding: var(--nuraly-spacing-2, 8px);
+    padding: 8px;
   }
 
   .nr-container[data-padding="md"] {
-    padding: var(--nuraly-spacing-3, 16px);
+    padding: 16px;
   }
 
   .nr-container[data-padding="lg"] {
-    padding: var(--nuraly-spacing-4, 24px);
+    padding: 24px;
   }
 
   /* Wrap */
@@ -142,10 +142,21 @@ import{css as t,LitElement as i,html as n}from"lit";import{property as a,customE
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var o=function(t,i,n,a){for(var e,r=arguments.length,s=r<3?i:null===a?a=Object.getOwnPropertyDescriptor(i,n):a,o=t.length-1;o>=0;o--)(e=t[o])&&(s=(r<3?e(s):r>3?e(i,n,s):e(i,n))||s);return r>3&&s&&Object.defineProperty(i,n,s),s};let d=class extends(r(i)){constructor(){super(...arguments),this.layout="fluid",this.direction="column",this.size="lg",this.padding="",this.justify="",this.align="",this.gap=0,this.wrap=!1,this.width="",this.height="",this.minHeight="",this.innerClass=""}getGapValue(t){if("number"==typeof t)return`${t}px`;if("string"==typeof t)switch(t){case"small":return"var(--nuraly-spacing-2, 8px)";case"medium":return"var(--nuraly-spacing-3, 16px)";case"large":return"var(--nuraly-spacing-4, 24px)";default:return t}return"0"}getGapStyles(){const t={};if(Array.isArray(this.gap)){const[i,n]=this.gap;t["column-gap"]=this.getGapValue(i),t["row-gap"]=this.getGapValue(n)}else this.gap&&(t.gap=this.getGapValue(this.gap));return t}getContainerStyles(){const t=Object.assign({},this.getGapStyles());return this.height&&(t.height=this.height),this.minHeight&&(t["min-height"]=this.minHeight),Object.entries(t).map(([t,i])=>`${t}: ${i}`).join("; ")}updated(t){super.updated(t),"boxed"===this.layout?(this.width?(this.style.maxWidth=this.width,this.style.width=""):this.style.maxWidth="",this.style.marginInline="auto"):this.width?(this.style.width=this.width,this.style.maxWidth=this.width,this.style.marginInline=""):"fluid"===this.layout?(this.style.width="100%",this.style.maxWidth="",this.style.marginInline=""):"row"===this.direction&&"fixed"===this.layout?(this.style.width="fit-content",this.style.maxWidth="",this.style.marginInline=""):(this.style.width="100%",this.style.maxWidth="",this.style.marginInline="")}render(){const t=this.getContainerStyles(),i=this.innerClass?`nr-container ${this.innerClass}`:"nr-container";return n`
+ */,a=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))}},o=()=>{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)},d=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(o())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(!o())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const n=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,n):console.error(n.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)}},c=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const n=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,n)}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 n=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,n)}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}},h=new Set,l=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const u=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=p(i);t&&function(t,e,i){var n;if(!l.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),l.set(t,i)}const s=l.get(t),r=`doc:${t}`;if(h.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],h.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(n=i.host)||void 0===n?void 0:n.tagName)||"").toLowerCase()}:${t}`;h.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],h.add(r)),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};function p(t){return Array.isArray(t)?t.map(t=>p(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var f=function(t,e,i,n){for(var s,r=arguments.length,a=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n,o=t.length-1;o>=0;o--)(s=t[o])&&(a=(r<3?s(a):r>3?s(e,i,a):s(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let g=class extends((t=>d(a(c(u(t)))))(i)){constructor(){super(...arguments),this.layout="fluid",this.direction="column",this.size="lg",this.padding="",this.justify="",this.align="",this.gap=0,this.wrap=!1,this.width="",this.height="",this.minHeight="",this.innerClass=""}getGapValue(t){if("number"==typeof t)return`${t}px`;if("string"==typeof t)switch(t){case"small":return"8px";case"medium":return"16px";case"large":return"24px";default:return t}return"0"}getGapStyles(){const t={};if(Array.isArray(this.gap)){const[e,i]=this.gap;t["column-gap"]=this.getGapValue(e),t["row-gap"]=this.getGapValue(i)}else this.gap&&(t.gap=this.getGapValue(this.gap));return t}getContainerStyles(){const t=Object.assign({},this.getGapStyles());return this.height&&(t.height=this.height),this.minHeight&&(t["min-height"]=this.minHeight),Object.entries(t).map(([t,e])=>`${t}: ${e}`).join("; ")}updated(t){super.updated(t),"boxed"===this.layout?(this.width?(this.style.maxWidth=this.width,this.style.width=""):this.style.maxWidth="",this.style.marginInline="auto"):this.width?(this.style.width=this.width,this.style.maxWidth=this.width,this.style.marginInline=""):"fluid"===this.layout?(this.style.width="100%",this.style.maxWidth="",this.style.marginInline=""):"row"===this.direction&&"fixed"===this.layout?(this.style.width="fit-content",this.style.maxWidth="",this.style.marginInline=""):(this.style.width="100%",this.style.maxWidth="",this.style.marginInline="")}render(){const t=this.getContainerStyles(),i=this.innerClass?`nr-container ${this.innerClass}`:"nr-container";return e`
       <div
-        class="${i}"
         part="container"
+        class="${i}"
         data-layout="${this.layout}"
         data-direction="${this.direction}"
         data-size="${"fluid"!==this.layout?this.size:""}"
@@ -153,9 +164,8 @@ import{css as t,LitElement as i,html as n}from"lit";import{property as a,customE
         data-justify="${this.justify}"
         data-align="${this.align}"
         data-wrap="${this.wrap}"
-        data-theme="${this.currentTheme}"
         style="${t}"
       >
         <slot></slot>
       </div>
-    `}};d.styles=s,o([a({type:String})],d.prototype,"layout",void 0),o([a({type:String})],d.prototype,"direction",void 0),o([a({type:String})],d.prototype,"size",void 0),o([a({type:String})],d.prototype,"padding",void 0),o([a({type:String})],d.prototype,"justify",void 0),o([a({type:String})],d.prototype,"align",void 0),o([a({type:Object})],d.prototype,"gap",void 0),o([a({type:Boolean})],d.prototype,"wrap",void 0),o([a({type:String})],d.prototype,"width",void 0),o([a({type:String})],d.prototype,"height",void 0),o([a({type:String,attribute:"min-height"})],d.prototype,"minHeight",void 0),o([a({type:String,attribute:"inner-class"})],d.prototype,"innerClass",void 0),d=o([e("nr-container")],d);const c="";export{c as EMPTY_STRING,d as NrContainerElement};
+    `}};g.styles=r,g.useShadowDom=!0,f([n({type:String})],g.prototype,"layout",void 0),f([n({type:String})],g.prototype,"direction",void 0),f([n({type:String})],g.prototype,"size",void 0),f([n({type:String})],g.prototype,"padding",void 0),f([n({type:String})],g.prototype,"justify",void 0),f([n({type:String})],g.prototype,"align",void 0),f([n({type:Object})],g.prototype,"gap",void 0),f([n({type:Boolean})],g.prototype,"wrap",void 0),f([n({type:String})],g.prototype,"width",void 0),f([n({type:String})],g.prototype,"height",void 0),f([n({type:String,attribute:"min-height"})],g.prototype,"minHeight",void 0),f([n({type:String,attribute:"inner-class"})],g.prototype,"innerClass",void 0),g=f([s("nr-container")],g);const m="";export{m as EMPTY_STRING,g as NrContainerElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import type { Gap } from './container.types.js';
-declare const NrContainerElement_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 NrContainerElement_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;
 /**
  * Container layout component for wrapping content with configurable layout options
  *
@@ -34,9 +34,12 @@ declare const NrContainerElement_base: (new (...args: any[]) => import("@nuralyu
  * ```
  *
  * @slot default - Container content
+ *
+ * @csspart container - The inner div that applies layout, padding, direction, and gap styles
  */
 export declare class NrContainerElement extends NrContainerElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Layout type: fluid (full width), boxed (centered with max-width), or fixed */
     layout: 'fluid' | 'boxed' | 'fixed';
     /** Flex direction: row or column */

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

@@ -41,6 +41,8 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  * ```
  *
  * @slot default - Container content
+ *
+ * @csspart container - The inner div that applies layout, padding, direction, and gap styles
  */
 let NrContainerElement = class NrContainerElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -80,11 +82,11 @@ let NrContainerElement = class NrContainerElement extends NuralyUIBaseMixin(LitE
         if (typeof value === 'string') {
             switch (value) {
                 case 'small':
-                    return 'var(--nuraly-spacing-2, 8px)';
+                    return '8px';
                 case 'medium':
-                    return 'var(--nuraly-spacing-3, 16px)';
+                    return '16px';
                 case 'large':
-                    return 'var(--nuraly-spacing-4, 24px)';
+                    return '24px';
                 default:
                     return value;
             }
@@ -162,8 +164,8 @@ let NrContainerElement = class NrContainerElement extends NuralyUIBaseMixin(LitE
         const classes = this.innerClass ? `nr-container ${this.innerClass}` : 'nr-container';
         return html `
       <div
-        class="${classes}"
         part="container"
+        class="${classes}"
         data-layout="${this.layout}"
         data-direction="${this.direction}"
         data-size="${this.layout !== 'fluid' ? this.size : ''}"
@@ -171,7 +173,6 @@ let NrContainerElement = class NrContainerElement extends NuralyUIBaseMixin(LitE
         data-justify="${this.justify}"
         data-align="${this.align}"
         data-wrap="${this.wrap}"
-        data-theme="${this.currentTheme}"
         style="${containerStyles}"
       >
         <slot></slot>
@@ -180,6 +181,7 @@ let NrContainerElement = class NrContainerElement extends NuralyUIBaseMixin(LitE
     }
 };
 NrContainerElement.styles = styles;
+NrContainerElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrContainerElement.prototype, "layout", void 0);

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

@@ -15,8 +15,8 @@ export const styles = css `
     min-height: inherit;
 
     /* Theme-aware */
-    color: var(--nuraly-color-text);
-    background: var(--nuraly-container-background, transparent);
+    color: #161616;
+    background: transparent;
   }
 
   /* Direction */
@@ -52,19 +52,19 @@ export const styles = css `
 
   /* Boxed/Fixed sizes */
   .nr-container[data-size="sm"] {
-    max-width: var(--nuraly-container-sm, 640px);
+    max-width: 640px;
   }
 
   .nr-container[data-size="md"] {
-    max-width: var(--nuraly-container-md, 768px);
+    max-width: 768px;
   }
 
   .nr-container[data-size="lg"] {
-    max-width: var(--nuraly-container-lg, 1024px);
+    max-width: 1024px;
   }
 
   .nr-container[data-size="xl"] {
-    max-width: var(--nuraly-container-xl, 1280px);
+    max-width: 1280px;
   }
 
   .nr-container[data-size="full"] {
@@ -77,15 +77,15 @@ export const styles = css `
   }
 
   .nr-container[data-padding="sm"] {
-    padding: var(--nuraly-spacing-2, 8px);
+    padding: 8px;
   }
 
   .nr-container[data-padding="md"] {
-    padding: var(--nuraly-spacing-3, 16px);
+    padding: 16px;
   }
 
   .nr-container[data-padding="lg"] {
-    padding: var(--nuraly-spacing-4, 24px);
+    padding: 24px;
   }
 
   /* Wrap */