@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -15,43 +15,43 @@ export const styles = css `
   :host {
     display: block;
     position: fixed;
-    z-index: var(--nuraly-z-index-toast);
+    z-index: 1200;
     pointer-events: none;
     
     /* Force CSS custom property inheritance to ensure theme switching works properly */
-    color: var(--nuraly-color-text);
-    font-family: var(--nuraly-font-family);
+    color: #161616;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   /* Container positioning */
   :host([position="top-right"]) {
-    top: var(--nuraly-spacing-4);
-    right: var(--nuraly-spacing-4);
+    top: 1rem;
+    right: 1rem;
   }
 
   :host([position="top-left"]) {
-    top: var(--nuraly-spacing-4);
-    left: var(--nuraly-spacing-4);
+    top: 1rem;
+    left: 1rem;
   }
 
   :host([position="top-center"]) {
-    top: var(--nuraly-spacing-4);
+    top: 1rem;
     left: 50%;
     transform: translateX(-50%);
   }
 
   :host([position="bottom-right"]) {
-    bottom: var(--nuraly-spacing-4);
-    right: var(--nuraly-spacing-4);
+    bottom: 1rem;
+    right: 1rem;
   }
 
   :host([position="bottom-left"]) {
-    bottom: var(--nuraly-spacing-4);
-    left: var(--nuraly-spacing-4);
+    bottom: 1rem;
+    left: 1rem;
   }
 
   :host([position="bottom-center"]) {
-    bottom: var(--nuraly-spacing-4);
+    bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -59,61 +59,61 @@ export const styles = css `
   .toast-container {
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-toast-stack-gap);
-    min-width: var(--nuraly-toast-min-width);
-    max-width: var(--nuraly-toast-max-width);
+    gap: 0.5rem;
+    min-width: 280px;
+    max-width: 480px;
   }
 
   .toast {
     display: flex;
     align-items: start;
-    gap: var(--nuraly-toast-gap);
-    padding: var(--nuraly-toast-padding-vertical) var(--nuraly-toast-padding-horizontal);
-    background-color: var(--nuraly-color-background);
-    color: var(--nuraly-color-text);
-    border: 1px solid var(--nuraly-color-border);
-    border-radius: var(--nuraly-border-radius-toast);
-    box-shadow: var(--nuraly-shadow-toast);
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background-color: #ffffff;
+    color: #161616;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
     pointer-events: auto;
     cursor: default;
-    transition: all var(--nuraly-transition-fast) ease;
+    transition: all 0.15s ease;
     position: relative;
     overflow: hidden;
   }
 
   .toast:hover {
-    box-shadow: var(--nuraly-shadow-toast-hover);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }
 
   /* Toast type variants */
   .toast--default {
-    background-color: var(--nuraly-toast-default-background);
-    border-color: var(--nuraly-toast-default-border);
-    color: var(--nuraly-toast-default-text);
+    background-color: #ffffff;
+    border-color: #e0e0e0;
+    color: #161616;
   }
 
   .toast--success {
-    background-color: var(--nuraly-toast-success-background);
-    border-color: var(--nuraly-toast-success-border);
-    color: var(--nuraly-toast-success-text);
+    background-color: #defbe6;
+    border-color: #198038;
+    color: #0e6027;
   }
 
   .toast--error {
-    background-color: var(--nuraly-toast-error-background);
-    border-color: var(--nuraly-toast-error-border);
-    color: var(--nuraly-toast-error-text);
+    background-color: #fff1f1;
+    border-color: #dc2626;
+    color: #a61a1a;
   }
 
   .toast--warning {
-    background-color: var(--nuraly-toast-warning-background);
-    border-color: var(--nuraly-toast-warning-border);
-    color: var(--nuraly-toast-warning-text);
+    background-color: #fdf4d3;
+    border-color: #f1c21b;
+    color: #75490a;
   }
 
   .toast--info {
-    background-color: var(--nuraly-toast-info-background);
-    border-color: var(--nuraly-toast-info-border);
-    color: var(--nuraly-toast-info-text);
+    background-color: #edf5ff;
+    border-color: #0043ce;
+    color: #003087;
   }
 
   /* Toast icon */
@@ -134,12 +134,12 @@ export const styles = css `
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-spacing-2);
+    gap: 0.5rem;
     min-width: 0;
   }
 
   .toast__text {
-    font-size: var(--nuraly-font-size-sm);
+    font-size: 0.875rem;
     line-height: 1.5;
     word-break: break-word;
   }
@@ -148,7 +148,7 @@ export const styles = css `
   .toast__button {
     display: flex;
     align-items: center;
-    margin-top: var(--nuraly-spacing-1);
+    margin-top: 0.25rem;
   }
 
   .toast__button nr-button {
@@ -158,8 +158,8 @@ export const styles = css `
   /* Close button */
   .toast__close {
     flex-shrink: 0;
-    min-width: var(--nuraly-toast-close-size);
-    min-height: var(--nuraly-toast-close-size);
+    min-width: 1.5rem;
+    min-height: 1.5rem;
     padding: 0;
     border: none;
     background: transparent;
@@ -168,19 +168,19 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--nuraly-border-radius-small);
-    transition: all var(--nuraly-transition-fast) ease;
-    opacity: var(--nuraly-toast-close-opacity);
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    opacity: 0.6;
   }
 
   .toast__close:hover {
-    opacity: var(--nuraly-toast-close-opacity-hover);
-    background-color: var(--nuraly-toast-close-hover-background);
+    opacity: 1;
+    background-color: rgba(0,0,0,0.08);
   }
 
   .toast__close:focus {
-    outline: var(--nuraly-focus-outline);
-    outline-offset: var(--nuraly-focus-outline-offset);
+    outline: 2px solid #7c3aed;
+    outline-offset: 2px;
   }
 
   .toast__close nr-icon {
@@ -290,38 +290,38 @@ export const styles = css `
 
   /* Animation classes */
   .toast--fade-in {
-    animation: toast-fade-in var(--nuraly-transition-toast) ease;
+    animation: toast-fade-in 0.3s ease;
   }
 
   .toast--fade-out {
-    animation: toast-fade-out var(--nuraly-transition-toast) ease;
+    animation: toast-fade-out 0.3s ease;
   }
 
   .toast--slide-in {
-    animation: toast-slide-in-right var(--nuraly-transition-toast) ease;
+    animation: toast-slide-in-right 0.3s ease;
   }
 
   .toast--slide-out {
-    animation: toast-slide-out-right var(--nuraly-transition-toast) ease;
+    animation: toast-slide-out-right 0.3s ease;
   }
 
   .toast--bounce-in {
-    animation: toast-bounce-in var(--nuraly-transition-toast) ease;
+    animation: toast-bounce-in 0.3s ease;
   }
 
   .toast--bounce-out {
-    animation: toast-bounce-out var(--nuraly-transition-toast) ease;
+    animation: toast-bounce-out 0.3s ease;
   }
 
   /* Position-specific slide animations */
   :host([position="top-left"]) .toast--slide-in,
   :host([position="bottom-left"]) .toast--slide-in {
-    animation: toast-slide-in-left var(--nuraly-transition-toast) ease;
+    animation: toast-slide-in-left 0.3s ease;
   }
 
   :host([position="top-left"]) .toast--slide-out,
   :host([position="bottom-left"]) .toast--slide-out {
-    animation: toast-slide-out-left var(--nuraly-transition-toast) ease;
+    animation: toast-slide-out-left 0.3s ease;
   }
 
   /* Progress bar for duration indicator */
@@ -329,9 +329,9 @@ export const styles = css `
     position: absolute;
     bottom: 0;
     left: 0;
-    height: var(--nuraly-toast-progress-height);
+    height: 3px;
     background-color: currentColor;
-    opacity: var(--nuraly-toast-progress-opacity);
+    opacity: 0.4;
     transition: width linear;
   }
 `;

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

@@ -1,7 +1,7 @@
-import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property as n,state as e,customElement as h}from"lit/decorators.js";const r=[t`
+import{css as t,LitElement as i,html as s,nothing as o}from"lit";import{property as e,state as n,customElement as h}from"lit/decorators.js";const r=[t`
   :host([show]) {
-    background-color: var(--nuraly-tooltip-background-color);
-    color: var(--nuraly-tooltip-text-color);
+    background-color: #161616;
+    color: #ffffff;
     position: fixed;
     padding: 5px;
     text-align: center;
@@ -51,20 +51,20 @@ import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property
     border: 5px solid transparent;
   }
   :host(.top-position)::after {
-    border-top-color: var(--nuraly-tooltip-background-color);
+    border-top-color: #161616;
     top: 100%;
   }
   :host(.left-position)::after {
-    border-left-color: var(--nuraly-tooltip-background-color);
+    border-left-color: #161616;
     left: 100%;
   }
 
   :host(.right-position)::after {
-    border-right-color: var(--nuraly-tooltip-background-color);
+    border-right-color: #161616;
     right: 100%;
   }
   :host(.bottom-position)::after {
-    border-bottom-color: var(--nuraly-tooltip-background-color);
+    border-bottom-color: #161616;
     bottom: 100%;
   }
   :host(.alignement-center.top-position)::after,
@@ -107,8 +107,8 @@ import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property
       --nuraly-tooltip-text-color: #161616;
     }
   }
-`];var a,l;!function(t){t.Top="top",t.Bottom="bottom",t.Right="right",t.Left="left"}(a||(a={})),function(t){t.Start="start",t.Center="center",t.End="end"}(l||(l={}));var p=function(t,i,o,s){for(var n,e=arguments.length,h=e<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,o):s,r=t.length-1;r>=0;r--)(n=t[r])&&(h=(e<3?n(h):e>3?n(i,o,h):n(i,o))||h);return e>3&&h&&Object.defineProperty(i,o,h),h};let c=class extends i{constructor(){super(...arguments),this.position=a.Bottom,this.alignement=l.Center,this.show=!1,this.isPopConfirm=!1,this.popConfirmTitle="",this.popConfirmDescription="",this.okText="Yes",this.cancelText="No",this.horizontalOffset=10,this.verticalOffset=10,this.onMouseOver=()=>{this.show=!0},this.onMouseLeave=()=>{this.show=!1,this.initStyles()},this.onClick=()=>{this.show=!this.show},this.calculatePosition=()=>{this.initStyles(),this.style.width=`${this.clientWidth}px`,this.position===a.Bottom||this.position===a.Top?(this.calculateYposition(),this.calculateYalignement()):(this.calculateXposition(),this.calculateXalignement())},this.calculateYposition=()=>{const t=this.target.getBoundingClientRect(),i=t.bottom,o=t.top,s=window.visualViewport.height,n=this.clientHeight,e=n+this.verticalOffset<s-i,h=n+this.verticalOffset<o;this.position===a.Bottom?e||!h?(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`):(this.classList.add("top-position"),this.style.top=o-n-this.verticalOffset+"px"):h||!e?(this.classList.add("top-position"),this.style.top=o-n-this.verticalOffset+"px"):(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`)},this.calculateYalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.right,o=t.width,s=t.left,n=this.clientWidth,e=s+o/2,h=window.visualViewport.width,r=h-i+o/2;if(this.alignement===l.Start){n+s<h?(this.classList.add("alignement-start"),this.style.left=s-this.horizontalOffset+"px"):(this.classList.add("alignement-end"),this.style.left=`${s-n+this.horizontalOffset}px`)}else if(this.alignement===l.End){n<s?(this.classList.add("alignement-end"),this.style.left=`${s-n+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=s-this.horizontalOffset+"px")}else{const t=n<e;n/2<e&&n/2<r||n>e&&n>r?(this.classList.add("alignement-center"),this.style.left=s-n/2+o/2+"px"):t?(this.classList.add("alignement-end"),this.style.left=`${s-n+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=s-this.horizontalOffset+"px")}},this.calculateXposition=()=>{const t=this.target.getBoundingClientRect(),i=t.left,o=t.right,s=window.visualViewport.width,n=this.clientWidth,e=n+this.horizontalOffset<s-o,h=n+this.horizontalOffset<i;this.position===a.Right?e||!h?(this.classList.add("right-position"),this.style.left=`${o+this.horizontalOffset}px`):(this.classList.add("left-position"),this.style.left=i-n-this.horizontalOffset+"px"):h||!e?(this.classList.add("left-position"),this.style.left=i-n-this.horizontalOffset+"px"):(this.classList.add("right-position"),this.style.left=`${o+this.horizontalOffset}px`)},this.calculateXalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.top,o=t.height,s=t.bottom,n=this.clientHeight,e=window.visualViewport.height,h=e-s;if(this.alignement===l.End){n<i?(this.classList.add("alignement-end"),this.style.top=s-n+"px"):(this.classList.add("alignement-start"),this.style.top=i-o/4+"px")}else if(this.alignement===l.Start){n<e-s?(this.classList.add("alignement-start"),this.style.top=i-o/4+"px"):(this.classList.add("alignement-end"),this.style.top=s-n+"px")}else{const t=n<i;n/2<i&&n/2<h||n>i&&n>h?(this.classList.add("alignement-center"),this.style.top=i+o/2-n/2+"px"):t?(this.classList.add("alignement-end"),this.style.top=s-n+"px"):(this.classList.add("alignement-start"),this.style.top=i-o/4+"px")}},this.onClickOutside=t=>{const i=t.composedPath();!i.includes(this.target)&&!i.includes(this)&&(this.show=!1)}}connectedCallback(){super.connectedCallback(),this.target=this.target||this.previousElementSibling,this.target?this.isPopConfirm?(document.addEventListener("scroll",this.calculatePosition),this.target.addEventListener("click",this.onClick),document.addEventListener("click",this.onClickOutside)):(this.target.addEventListener("mouseover",this.onMouseOver),this.target.addEventListener("mouseleave",this.onMouseLeave)):console.error("Tooltip target is not defined or found. Ensure target is explicitly set or precedes the tooltip.")}initStyles(){this.style.top="",this.style.left="",this.style.width="",this.classList.remove(...this.classList.values())}updated(t){this.show&&this.calculatePosition()}onPopConfirmCancel(){this.dispatchEvent(new CustomEvent("onCancel")),this.show=!1,this.initStyles()}onPopConfirmConfirm(){this.dispatchEvent(new CustomEvent("onConfirm")),this.show=!1,this.initStyles()}disconnectedCallback(){super.disconnectedCallback(),this.isPopConfirm?(this.target.removeEventListener("click",this.onClick),document.removeEventListener("scroll",this.calculatePosition)):(this.target.removeEventListener("mouseover",this.onMouseOver),this.target.removeEventListener("mouseleave",this.onMouseLeave))}render(){return this.isPopConfirm?this.show?o`
-          <div class="popconfirm-container">
+`];var a,p;!function(t){t.Top="top",t.Bottom="bottom",t.Right="right",t.Left="left"}(a||(a={})),function(t){t.Start="start",t.Center="center",t.End="end"}(p||(p={}));var l=function(t,i,s,o){for(var e,n=arguments.length,h=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,s):o,r=t.length-1;r>=0;r--)(e=t[r])&&(h=(n<3?e(h):n>3?e(i,s,h):e(i,s))||h);return n>3&&h&&Object.defineProperty(i,s,h),h};let c=class extends i{constructor(){super(...arguments),this.position=a.Bottom,this.alignement=p.Center,this.show=!1,this.isPopConfirm=!1,this.popConfirmTitle="",this.popConfirmDescription="",this.okText="Yes",this.cancelText="No",this.horizontalOffset=10,this.verticalOffset=10,this.onMouseOver=()=>{this.show=!0},this.onMouseLeave=()=>{this.show=!1,this.initStyles()},this.onClick=()=>{this.show=!this.show},this.calculatePosition=()=>{this.initStyles(),this.style.width=`${this.clientWidth}px`,this.position===a.Bottom||this.position===a.Top?(this.calculateYposition(),this.calculateYalignement()):(this.calculateXposition(),this.calculateXalignement())},this.calculateYposition=()=>{const t=this.target.getBoundingClientRect(),i=t.bottom,s=t.top,o=window.visualViewport.height,e=this.clientHeight,n=e+this.verticalOffset<o-i,h=e+this.verticalOffset<s;this.position===a.Bottom?n||!h?(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`):(this.classList.add("top-position"),this.style.top=s-e-this.verticalOffset+"px"):h||!n?(this.classList.add("top-position"),this.style.top=s-e-this.verticalOffset+"px"):(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`)},this.calculateYalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.right,s=t.width,o=t.left,e=this.clientWidth,n=o+s/2,h=window.visualViewport.width,r=h-i+s/2;if(this.alignement===p.Start){e+o<h?(this.classList.add("alignement-start"),this.style.left=o-this.horizontalOffset+"px"):(this.classList.add("alignement-end"),this.style.left=`${o-e+this.horizontalOffset}px`)}else if(this.alignement===p.End){e<o?(this.classList.add("alignement-end"),this.style.left=`${o-e+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=o-this.horizontalOffset+"px")}else{const t=e<n;e/2<n&&e/2<r||e>n&&e>r?(this.classList.add("alignement-center"),this.style.left=o-e/2+s/2+"px"):t?(this.classList.add("alignement-end"),this.style.left=`${o-e+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=o-this.horizontalOffset+"px")}},this.calculateXposition=()=>{const t=this.target.getBoundingClientRect(),i=t.left,s=t.right,o=window.visualViewport.width,e=this.clientWidth,n=e+this.horizontalOffset<o-s,h=e+this.horizontalOffset<i;this.position===a.Right?n||!h?(this.classList.add("right-position"),this.style.left=`${s+this.horizontalOffset}px`):(this.classList.add("left-position"),this.style.left=i-e-this.horizontalOffset+"px"):h||!n?(this.classList.add("left-position"),this.style.left=i-e-this.horizontalOffset+"px"):(this.classList.add("right-position"),this.style.left=`${s+this.horizontalOffset}px`)},this.calculateXalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.top,s=t.height,o=t.bottom,e=this.clientHeight,n=window.visualViewport.height,h=n-o;if(this.alignement===p.End){e<i?(this.classList.add("alignement-end"),this.style.top=o-e+"px"):(this.classList.add("alignement-start"),this.style.top=i-s/4+"px")}else if(this.alignement===p.Start){e<n-o?(this.classList.add("alignement-start"),this.style.top=i-s/4+"px"):(this.classList.add("alignement-end"),this.style.top=o-e+"px")}else{const t=e<i;e/2<i&&e/2<h||e>i&&e>h?(this.classList.add("alignement-center"),this.style.top=i+s/2-e/2+"px"):t?(this.classList.add("alignement-end"),this.style.top=o-e+"px"):(this.classList.add("alignement-start"),this.style.top=i-s/4+"px")}},this.onClickOutside=t=>{const i=t.composedPath();!i.includes(this.target)&&!i.includes(this)&&(this.show=!1)}}connectedCallback(){super.connectedCallback(),this.target=this.target||this.previousElementSibling,this.target?this.isPopConfirm?(document.addEventListener("scroll",this.calculatePosition),this.target.addEventListener("click",this.onClick),document.addEventListener("click",this.onClickOutside)):(this.target.addEventListener("mouseover",this.onMouseOver),this.target.addEventListener("mouseleave",this.onMouseLeave)):console.error("Tooltip target is not defined or found. Ensure target is explicitly set or precedes the tooltip.")}initStyles(){this.style.top="",this.style.left="",this.style.width="",this.classList.remove(...this.classList.values())}updated(t){this.show&&this.calculatePosition()}onPopConfirmCancel(){this.dispatchEvent(new CustomEvent("onCancel")),this.show=!1,this.initStyles()}onPopConfirmConfirm(){this.dispatchEvent(new CustomEvent("onConfirm")),this.show=!1,this.initStyles()}disconnectedCallback(){super.disconnectedCallback(),this.isPopConfirm?(this.target.removeEventListener("click",this.onClick),document.removeEventListener("scroll",this.calculatePosition)):(this.target.removeEventListener("mouseover",this.onMouseOver),this.target.removeEventListener("mouseleave",this.onMouseLeave))}render(){return this.isPopConfirm?this.show?s`
+          <div class="popconfirm-container" part="container">
             <p class="popconfirm-title">${this.popConfirmTitle}</p>
             <p class="popconfirm-description">${this.popConfirmDescription}</p>
             <div class="btn-block">
@@ -120,4 +120,4 @@ import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property
               >
             </div>
           </div>
-        `:s:this.show?o`<slot></slot>`:s}};c.styles=r,p([n({reflect:!0})],c.prototype,"position",void 0),p([n({reflect:!0})],c.prototype,"alignement",void 0),p([e()],c.prototype,"target",void 0),p([n({reflect:!0,type:Boolean})],c.prototype,"show",void 0),p([n()],c.prototype,"isPopConfirm",void 0),p([n()],c.prototype,"popConfirmTitle",void 0),p([n()],c.prototype,"popConfirmDescription",void 0),p([n()],c.prototype,"okText",void 0),p([n()],c.prototype,"cancelText",void 0),c=p([h("hy-tooltip")],c);export{c as TooltipElement};
+        `:o:this.show?s`<slot></slot>`:o}};c.styles=r,c.useShadowDom=!0,l([e({reflect:!0})],c.prototype,"position",void 0),l([e({reflect:!0})],c.prototype,"alignement",void 0),l([n()],c.prototype,"target",void 0),l([e({reflect:!0,type:Boolean})],c.prototype,"show",void 0),l([e()],c.prototype,"isPopConfirm",void 0),l([e()],c.prototype,"popConfirmTitle",void 0),l([e()],c.prototype,"popConfirmDescription",void 0),l([e()],c.prototype,"okText",void 0),l([e()],c.prototype,"cancelText",void 0),c=l([h("hy-tooltip")],c);export{c as TooltipElement};

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

@@ -1,7 +1,15 @@
 import { LitElement, nothing, PropertyValueMap } from 'lit';
 import { TooltipAlignment, TooltipPosition } from './tooltips.constant.js';
+/**
+ * Tooltip / popconfirm overlay component.
+ *
+ * @element hy-tooltip
+ *
+ * @csspart container - The popconfirm inner container
+ */
 export declare class TooltipElement extends LitElement {
     static styles: import("lit").CSSResult[];
+    static useShadowDom: boolean;
     position: TooltipPosition;
     alignement: TooltipAlignment;
     target: Element;

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

@@ -9,6 +9,13 @@ import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './tooltips.style.js';
 import { EMPTY_STRING, TooltipAlignment, TooltipPosition } from './tooltips.constant.js';
+/**
+ * Tooltip / popconfirm overlay component.
+ *
+ * @element hy-tooltip
+ *
+ * @csspart container - The popconfirm inner container
+ */
 let TooltipElement = class TooltipElement extends LitElement {
     constructor() {
         super(...arguments);
@@ -262,7 +269,7 @@ let TooltipElement = class TooltipElement extends LitElement {
                 : nothing
             : this.show
                 ? html `
-          <div class="popconfirm-container">
+          <div class="popconfirm-container" part="container">
             <p class="popconfirm-title">${this.popConfirmTitle}</p>
             <p class="popconfirm-description">${this.popConfirmDescription}</p>
             <div class="btn-block">
@@ -279,6 +286,7 @@ let TooltipElement = class TooltipElement extends LitElement {
     }
 };
 TooltipElement.styles = styles;
+TooltipElement.useShadowDom = true;
 __decorate([
     property({ reflect: true })
 ], TooltipElement.prototype, "position", void 0);

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

@@ -2,8 +2,8 @@ import { css } from 'lit';
 import { styleVariables } from './tooltips.variables.js';
 const tooltipStyles = css `
   :host([show]) {
-    background-color: var(--nuraly-tooltip-background-color);
-    color: var(--nuraly-tooltip-text-color);
+    background-color: #161616;
+    color: #ffffff;
     position: fixed;
     padding: 5px;
     text-align: center;
@@ -53,20 +53,20 @@ const tooltipStyles = css `
     border: 5px solid transparent;
   }
   :host(.top-position)::after {
-    border-top-color: var(--nuraly-tooltip-background-color);
+    border-top-color: #161616;
     top: 100%;
   }
   :host(.left-position)::after {
-    border-left-color: var(--nuraly-tooltip-background-color);
+    border-left-color: #161616;
     left: 100%;
   }
 
   :host(.right-position)::after {
-    border-right-color: var(--nuraly-tooltip-background-color);
+    border-right-color: #161616;
     right: 100%;
   }
   :host(.bottom-position)::after {
-    border-bottom-color: var(--nuraly-tooltip-background-color);
+    border-bottom-color: #161616;
     bottom: 100%;
   }
   :host(.alignement-center.top-position)::after,

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

@@ -1,4 +1,20 @@
-import{css as e,LitElement as i,html as o}from"lit";import{property as r,state as t,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as n}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var l=e`
+import{css as e,html as t,LitElement as i}from"lit";import{property as o,state as s,customElement as r}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const d=e=>class extends e{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 e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"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))}},l=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(l())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!l())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const o=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,o):console.error(o.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},c=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const o=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,o)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const o=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,o)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},p=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 v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=m(i);e&&function(e,t,i){var o;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const s=u.get(e),r=`doc:${e}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],p.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],p.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var b=e`
   :host {
     display: inline-block;
     box-sizing: border-box;
@@ -12,14 +28,14 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: var(--nuraly-video-bg, #000);
+    background-color: #000;
   }
 
   video {
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: var(--nuraly-video-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .video--error {
@@ -27,8 +43,8 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     align-items: center;
     justify-content: center;
     min-height: 200px;
-    background-color: var(--nuraly-video-error-bg, #f5f5f5);
-    color: var(--nuraly-video-error-color, #999);
+    background-color: var(--nr-bg-hover, #f4f4f4);
+    color: var(--nr-text-secondary, #525252);
   }
 
   .error-message {
@@ -43,7 +59,6 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     opacity: 0.5;
   }
 
-  /* Preview/Fullscreen Modal */
   .preview-modal {
     position: fixed;
     top: 0;
@@ -53,15 +68,15 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));
-    z-index: var(--nuraly-video-preview-zindex, 1000);
-    animation: fadeIn 0.3s ease;
+    background-color: rgba(0, 0, 0, 0.95);
+    z-index: 1000;
+    animation: nr-video-fadeIn 0.3s ease;
   }
 
   .preview-modal video {
     max-width: 90%;
     max-height: 90%;
-    border-radius: var(--nuraly-video-preview-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .preview-close {
@@ -70,10 +85,10 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     right: 20px;
     width: 40px;
     height: 40px;
-    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
+    background: rgba(255, 255, 255, 0.2);
     border: none;
     border-radius: 50%;
-    color: var(--nuraly-video-preview-close-color, white);
+    color: white;
     font-size: 24px;
     line-height: 1;
     cursor: pointer;
@@ -85,19 +100,19 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
   }
 
   .preview-close:hover {
-    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
+    background: rgba(255, 255, 255, 0.3);
   }
 
   .preview-button {
     position: absolute;
     top: 10px;
     right: 10px;
-    background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));
+    background-color: rgba(0, 0, 0, 0.5);
     border: none;
     border-radius: 4px;
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--nuraly-video-fullscreen-btn-color, white);
+    color: white;
     font-size: 12px;
     display: flex;
     align-items: center;
@@ -107,29 +122,25 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
   }
 
   .preview-button:hover {
-    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
+    background-color: rgba(0, 0, 0, 0.7);
   }
 
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+  @keyframes nr-video-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
-`,v=function(e,i,o,r){for(var t,s=arguments.length,a=s<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,o):r,n=e.length-1;n>=0;n--)(t=e[n])&&(a=(s<3?t(a):s>3?t(i,o,a):t(i,o))||a);return s>3&&a&&Object.defineProperty(i,o,a),a};let p=class extends(d(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.autoplay=!1,this.loop=!1,this.muted=!1,this.controls=!0,this.preload="metadata",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-video-error",{bubbles:!0,composed:!0,detail:{error:`Error loading video: ${this.src}`,src:this.src}}))}handlePlay(){this.dispatchEvent(new CustomEvent("nr-video-play",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handlePause(){this.dispatchEvent(new CustomEvent("nr-video-pause",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handleEnded(){this.dispatchEvent(new CustomEvent("nr-video-ended",{bubbles:!0,composed:!0,detail:{src:this.src}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-video-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}render(){const e={"video-container":!0,"video--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?o`
-        <div class=${a(e)}>
-          <div class="error-message">
+`,g=function(e,t,i,o){for(var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let w=class extends((e=>h(d(c(v(e)))))(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.autoplay=!1,this.loop=!1,this.muted=!1,this.controls=!0,this.preload="metadata",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-video-error",{bubbles:!0,composed:!0,detail:{error:`Error loading video: ${this.src}`,src:this.src}}))}handlePlay(){this.dispatchEvent(new CustomEvent("nr-video-play",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handlePause(){this.dispatchEvent(new CustomEvent("nr-video-pause",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handleEnded(){this.dispatchEvent(new CustomEvent("nr-video-ended",{bubbles:!0,composed:!0,detail:{src:this.src}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-video-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}render(){const e={"video-container":!0,"video--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?t`
+        <div part="container" class=${n(e)}>
+          <div part="error-message" class="error-message">
             <img class="error-icon" src=${this.defaultFallback} alt="Video error" />
             <p>Unable to load video</p>
           </div>
         </div>
-      `:o`
-      <div class=${a(e)}>
+      `:t`
+      <div part="container" class=${n(e)}>
         <video
-          style=${n(i)}
+          part="video"
+          style=${a(i)}
           ?autoplay=${this.autoplay}
           ?loop=${this.loop}
           ?muted=${this.muted}
@@ -144,8 +155,8 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
           <source src=${this.src} />
           Your browser does not support the video tag.
         </video>
-        ${this.previewable?o`
-          <button class="preview-button" @click=${this.showPreviewModal}>
+        ${this.previewable?t`
+          <button part="preview-button" class="preview-button" @click=${this.showPreviewModal}>
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z"/>
               <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z"/>
@@ -153,9 +164,9 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
             Fullscreen
           </button>
         `:""}
-        ${this.showPreview?o`
-          <div class="preview-modal" @click=${this.closePreviewModal}>
-            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+        ${this.showPreview?t`
+          <div part="preview-modal" class="preview-modal" @click=${this.closePreviewModal}>
+            <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             <video
               ?autoplay=${!0}
               ?loop=${this.loop}
@@ -168,4 +179,4 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
           </div>
         `:""}
       </div>
-    `}};p.styles=l,v([r({type:String})],p.prototype,"src",void 0),v([r({type:String})],p.prototype,"poster",void 0),v([r({type:String})],p.prototype,"width",void 0),v([r({type:String})],p.prototype,"height",void 0),v([r({type:Boolean})],p.prototype,"autoplay",void 0),v([r({type:Boolean})],p.prototype,"loop",void 0),v([r({type:Boolean})],p.prototype,"muted",void 0),v([r({type:Boolean})],p.prototype,"controls",void 0),v([r({type:String})],p.prototype,"preload",void 0),v([r({type:Boolean})],p.prototype,"previewable",void 0),v([r({type:Boolean,reflect:!0})],p.prototype,"block",void 0),v([t()],p.prototype,"showPreview",void 0),v([t()],p.prototype,"hasError",void 0),p=v([s("nr-video")],p);export{p as NrVideoElement};
+    `}};w.styles=b,w.useShadowDom=!0,g([o({type:String})],w.prototype,"src",void 0),g([o({type:String})],w.prototype,"poster",void 0),g([o({type:String})],w.prototype,"width",void 0),g([o({type:String})],w.prototype,"height",void 0),g([o({type:Boolean})],w.prototype,"autoplay",void 0),g([o({type:Boolean})],w.prototype,"loop",void 0),g([o({type:Boolean})],w.prototype,"muted",void 0),g([o({type:Boolean})],w.prototype,"controls",void 0),g([o({type:String})],w.prototype,"preload",void 0),g([o({type:Boolean})],w.prototype,"previewable",void 0),g([o({type:Boolean,reflect:!0})],w.prototype,"block",void 0),g([s()],w.prototype,"showPreview",void 0),g([s()],w.prototype,"hasError",void 0),w=g([r("nr-video")],w);export{w as NrVideoElement};