@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -1,17 +1,36 @@
-import{css as i,LitElement as t,html as r}from"lit";import{property as e,state as o,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var g=i`
-img{
-    border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
-    border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
-    border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
-    border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
-}
-.image-container {
+import{css as t,html as e,LitElement as i}from"lit";import{property as s,state as o,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 c=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))}},h=()=>{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)},l=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())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(!h())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.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)}},d=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}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 s=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,s)}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}},u=new Set,p=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const m=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 s;if(!p.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),p.set(t,i)}const o=p.get(t),r=`doc:${t}`;if(u.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],u.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;u.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,o],u.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 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:""}var v=t`
+  :host {
+    display: inline-block;
+  }
+
+  :host([block]) {
+    display: block;
+  }
+
+  .image-container {
     position: relative;
   }
 
   img {
     display: block;
     max-width: 100%;
+    border-radius: 4px;
   }
 
   .preview-modal {
@@ -25,7 +44,7 @@ img{
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 1000;
-    animation: fadeIn 0.3s ease;
+    animation: nr-image-fadeIn 0.3s ease;
   }
 
   .preview-modal img {
@@ -33,7 +52,7 @@ img{
     max-height: 90%;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     border-radius: 4px;
-    animation: zoomIn 0.3s ease;
+    animation: nr-image-zoomIn 0.3s ease;
   }
 
   .preview-close {
@@ -59,40 +78,31 @@ img{
     background: rgba(255, 255, 255, 0.4);
   }
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+  @keyframes nr-image-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 
-  @keyframes zoomIn {
-    from {
-      transform: scale(0.9);
-      opacity: 0;
-    }
-    to {
-      transform: scale(1);
-      opacity: 1;
-    }
+  @keyframes nr-image-zoomIn {
+    from { transform: scale(0.9); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
   }
-`,c=function(i,t,r,e){for(var o,s=arguments.length,a=s<3?t:null===e?e=Object.getOwnPropertyDescriptor(t,r):e,l=i.length-1;l>=0;l--)(o=i[l])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let n=class extends(d(t)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.alt="",this.previewable=!1,this.block=!1,this.currentSrc="",this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg=="}willUpdate(i){i.has("src")&&(this.currentSrc=this.src,this.hasError=!1)}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-image-error",{bubbles:!0,composed:!0,detail:{error:`Error loading image: ${this.currentSrc}`,src:this.currentSrc}})),this.fallback&&this.currentSrc!==this.fallback&&this.currentSrc!==this.defaultFallback?this.currentSrc=this.fallback:this.currentSrc!==this.defaultFallback&&(this.currentSrc=this.defaultFallback)}handleLoad(){this.hasError=!1,this.dispatchEvent(new CustomEvent("nr-image-load",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-image-preview-open",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-image-preview-close",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}render(){const i={"image-container":!0,"image--previewable":this.previewable,"image--error":this.hasError},t={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.fit&&(t["object-fit"]=this.fit),r`
-      <div class=${a(i)}>
+`,w=function(t,e,i,s){for(var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let b=class extends((t=>l(c(d(m(t)))))(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.alt="",this.previewable=!1,this.block=!1,this.currentSrc="",this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg=="}willUpdate(t){t.has("src")&&(this.currentSrc=this.src,this.hasError=!1)}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-image-error",{bubbles:!0,composed:!0,detail:{error:`Error loading image: ${this.currentSrc}`,src:this.currentSrc}})),this.fallback&&this.currentSrc!==this.fallback&&this.currentSrc!==this.defaultFallback?this.currentSrc=this.fallback:this.currentSrc!==this.defaultFallback&&(this.currentSrc=this.defaultFallback)}handleLoad(){this.hasError=!1,this.dispatchEvent(new CustomEvent("nr-image-load",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-image-preview-open",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-image-preview-close",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}render(){const t={"image-container":!0,"image--previewable":this.previewable,"image--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.fit&&(i["object-fit"]=this.fit),e`
+      <div part="container" class=${n(t)}>
         <img
+          part="image"
           src=${this.currentSrc}
           alt=${this.alt}
-          style=${l(t)}
+          style=${a(i)}
           @error=${this.handleError}
           @load=${this.handleLoad}
           @click=${this.showPreviewModal}
         />
-        ${this.showPreview?r`
-          <div class="preview-modal" @click=${this.closePreviewModal}>
-            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+        ${this.showPreview?e`
+          <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>
             <img src="${this.currentSrc}" alt="${this.alt}" />
           </div>
         `:""}
       </div>
-    `}};n.styles=g,c([e({type:String})],n.prototype,"src",void 0),c([e({type:String})],n.prototype,"fallback",void 0),c([e({type:String})],n.prototype,"width",void 0),c([e({type:String})],n.prototype,"height",void 0),c([e({type:String})],n.prototype,"alt",void 0),c([e({type:Boolean})],n.prototype,"previewable",void 0),c([e({type:String})],n.prototype,"fit",void 0),c([e({type:Boolean,reflect:!0})],n.prototype,"block",void 0),c([o()],n.prototype,"currentSrc",void 0),c([o()],n.prototype,"showPreview",void 0),c([o()],n.prototype,"hasError",void 0),n=c([s("nr-image")],n);export{n as NrImageElement};
+    `}};b.styles=v,b.useShadowDom=!0,w([s({type:String})],b.prototype,"src",void 0),w([s({type:String})],b.prototype,"fallback",void 0),w([s({type:String})],b.prototype,"width",void 0),w([s({type:String})],b.prototype,"height",void 0),w([s({type:String})],b.prototype,"alt",void 0),w([s({type:Boolean})],b.prototype,"previewable",void 0),w([s({type:String})],b.prototype,"fit",void 0),w([s({type:Boolean,reflect:!0})],b.prototype,"block",void 0),w([o()],b.prototype,"currentSrc",void 0),w([o()],b.prototype,"showPreview",void 0),w([o()],b.prototype,"hasError",void 0),b=w([r("nr-image")],b);export{b as NrImageElement};

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

@@ -1,8 +1,17 @@
 import { LitElement, type PropertyValues } from "lit";
 import { ImageFit } from "./image.types.js";
-declare const NrImageElement_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 NrImageElement_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;
+/**
+ * Image component with fallback, preview modal, and object-fit support.
+ *
+ * @csspart container - The root wrapper div of the image
+ * @csspart image - The native img element
+ * @csspart preview-modal - The fullscreen preview overlay (visible when previewable and clicked)
+ * @csspart preview-close - The close button inside the preview modal
+ */
 export declare class NrImageElement extends NrImageElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     src: string;
     fallback?: string;
     width: string;

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

@@ -10,6 +10,14 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import styles from "./image.style.js";
+/**
+ * Image component with fallback, preview modal, and object-fit support.
+ *
+ * @csspart container - The root wrapper div of the image
+ * @csspart image - The native img element
+ * @csspart preview-modal - The fullscreen preview overlay (visible when previewable and clicked)
+ * @csspart preview-close - The close button inside the preview modal
+ */
 let NrImageElement = class NrImageElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
@@ -83,8 +91,9 @@ let NrImageElement = class NrImageElement extends NuralyUIBaseMixin(LitElement)
             imageStyles['object-fit'] = this.fit;
         }
         return html `
-      <div class=${classMap(containerClasses)}>
+      <div part="container" class=${classMap(containerClasses)}>
         <img
+          part="image"
           src=${this.currentSrc}
           alt=${this.alt}
           style=${styleMap(imageStyles)}
@@ -93,8 +102,8 @@ let NrImageElement = class NrImageElement extends NuralyUIBaseMixin(LitElement)
           @click=${this.showPreviewModal}
         />
         ${this.showPreview ? html `
-          <div class="preview-modal" @click=${this.closePreviewModal}>
-            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+          <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>
             <img src="${this.currentSrc}" alt="${this.alt}" />
           </div>
         ` : ''}
@@ -103,6 +112,7 @@ let NrImageElement = class NrImageElement extends NuralyUIBaseMixin(LitElement)
     }
 };
 NrImageElement.styles = styles;
+NrImageElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrImageElement.prototype, "src", void 0);

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

@@ -1,18 +1,21 @@
-import { css } from "lit";
+import { css } from 'lit';
 export default css `
-img{
-    border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
-    border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
-    border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
-    border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
-}
-.image-container {
+  :host {
+    display: inline-block;
+  }
+
+  :host([block]) {
+    display: block;
+  }
+
+  .image-container {
     position: relative;
   }
 
   img {
     display: block;
     max-width: 100%;
+    border-radius: 4px;
   }
 
   .preview-modal {
@@ -26,7 +29,7 @@ img{
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 1000;
-    animation: fadeIn 0.3s ease;
+    animation: nr-image-fadeIn 0.3s ease;
   }
 
   .preview-modal img {
@@ -34,7 +37,7 @@ img{
     max-height: 90%;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     border-radius: 4px;
-    animation: zoomIn 0.3s ease;
+    animation: nr-image-zoomIn 0.3s ease;
   }
 
   .preview-close {
@@ -60,24 +63,14 @@ img{
     background: rgba(255, 255, 255, 0.4);
   }
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+  @keyframes nr-image-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 
-  @keyframes zoomIn {
-    from {
-      transform: scale(0.9);
-      opacity: 0;
-    }
-    to {
-      transform: scale(1);
-      opacity: 1;
-    }
+  @keyframes nr-image-zoomIn {
+    from { transform: scale(0.9); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
   }
 `;
 //# sourceMappingURL=image.style.js.map