@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,8 +1,29 @@
-import{css as e,LitElement as o,html as i}from"lit";import{property as t,state as r,customElement as s}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}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 r,customElement as s}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))}},c=()=>{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)},l=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())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(!c())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)}},h=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 m=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=g(i);e&&function(e,t,i){var o;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const r=u.get(e),s=`doc:${e}`;if(p.has(s)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,r],p.add(s)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const s=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;p.has(s)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,r],p.add(s)),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 g(e){return Array.isArray(e)?e.map(e=>g(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var v=e`
   :host {
     display: block;
   }
 
+  :host([block]) {
+    display: block;
+    width: 100%;
+  }
+
   .document-container {
     width: 100%;
     height: 100%;
@@ -54,7 +75,7 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
   .preview-button:hover {
     background-color: #fff;
   }
-  
+
   .pdf-container {
     display: flex;
     flex-direction: column;
@@ -64,7 +85,7 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     background-color: #f5f5f5;
     position: relative;
   }
-  
+
   .toolbar {
     display: flex;
     align-items: center;
@@ -73,7 +94,7 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     border-bottom: 1px solid #ddd;
     gap: 8px;
   }
-  
+
   .toolbar button {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -82,21 +103,10 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     cursor: pointer;
     font-size: 14px;
   }
-  
-  .toolbar button:hover {
-    background-color: #e6e6e6;
-  }
-  
-  .toolbar button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  .toolbar span {
-    margin: 0 4px;
-    font-size: 14px;
-  }
-  
+  .toolbar button:hover { background-color: #e6e6e6; }
+  .toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }
+  .toolbar span { margin: 0 4px; font-size: 14px; }
+
   .canvas-container {
     flex: 1;
     overflow: auto;
@@ -107,12 +117,12 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     padding: 16px;
     min-height: 200px;
   }
-  
+
   canvas {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     background-color: white;
   }
-  
+
   .preview-modal {
     position: fixed;
     top: 0;
@@ -131,7 +141,7 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     height: 100%;
     border: none;
   }
-  
+
   .preview-content {
     position: relative;
     display: flex;
@@ -142,7 +152,7 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     border-radius: 8px;
     overflow: hidden;
   }
-  
+
   .preview-toolbar {
     display: flex;
     align-items: center;
@@ -151,7 +161,6 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     border-bottom: 1px solid #ddd;
     gap: 12px;
   }
-  
   .preview-toolbar button {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -160,12 +169,8 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     cursor: pointer;
     font-size: 16px;
   }
-  
-  .preview-toolbar span {
-    margin: 0 6px;
-    font-size: 16px;
-  }
-  
+  .preview-toolbar span { margin: 0 6px; font-size: 16px; }
+
   .preview-close {
     position: absolute;
     top: 10px;
@@ -183,11 +188,7 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     align-items: center;
     justify-content: center;
   }
-  
-  .preview-close:hover {
-    background-color: #fff;
-    color: #000;
-  }
+  .preview-close:hover { background-color: #fff; color: #000; }
 
   .preview-header {
     position: absolute;
@@ -196,33 +197,34 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
     z-index: 1010;
     padding: 10px;
   }
-  
+
   .preview-modal canvas {
     max-width: 100%;
-    max-height: calc(100% - 60px); /* Account for toolbar height */
+    max-height: calc(100% - 60px);
     object-fit: contain;
     margin: auto;
     display: block;
     flex: 1;
   }
-`,c=function(e,o,i,t){for(var r,s=arguments.length,n=s<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(n=(s<3?r(n):s>3?r(o,i,n):r(o,i))||n);return s>3&&n&&Object.defineProperty(o,i,n),n};let p=class extends(d(o)){constructor(){super(...arguments),this.type="pdf",this.width="auto",this.height="500px",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz48cGF0aCBkPSJNNTkuNCA2Mi44VjgwLjRINDguMlY0MS42SDYzLjRDNjcuMSA0MS42IDcwLjEgNDIuNiA3Mi40IDQ0LjdDNzQuNyA0Ni44IDc1LjggNDkuNiA3NS44IDUzQzc1LjggNTYuNSA3NC43IDU5LjIgNzIuNCA2MS4zQzcwLjIgNjMuNCA2Ny4yIDY0LjQgNjMuNCA2NC40SDU5LjRWNjIuOFpNNTkuNCA1NC42SDYzLjRDNjUgNTQuNiA2Ni4zIDU0LjEgNjcuMiA1M0M2OC4xIDUxLjkgNjguNiA1MC42IDY4LjYgNDlDNjguNiA0Ny41IDY4LjEgNDYuMiA2Ny4yIDQ1LjFDNjYuMyA0NCA2NSA0My40IDYzLjQgNDMuNEg1OS40VjU0LjZaIiBmaWxsPSIjNjg3Nzg3Ii8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-document-error",{bubbles:!0,composed:!0,detail:{error:`Error loading document: ${this.src}`,src:this.src,type:this.type}}))}handleLoad(){this.dispatchEvent(new CustomEvent("nr-document-load",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-document-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-document-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}render(){const e={"document-container":!0,"document--error":this.hasError},o={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?i`
-        <div class=${n(e)} style=${a(o)}>
-          <div class="error-message">
+`,b=function(e,t,i,o){for(var r,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,a=e.length-1;a>=0;a--)(r=e[a])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};let f=class extends((e=>l(d(h(m(e)))))(i)){constructor(){super(...arguments),this.type="pdf",this.width="auto",this.height="500px",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz48cGF0aCBkPSJNNTkuNCA2Mi44VjgwLjRINDguMlY0MS42SDYzLjRDNjcuMSA0MS42IDcwLjEgNDIuNiA3Mi40IDQ0LjdDNzQuNyA0Ni44IDc1LjggNDkuNiA3NS44IDUzQzc1LjggNTYuNSA3NC43IDU5LjIgNzIuNCA2MS4zQzcwLjIgNjMuNCA2Ny4yIDY0LjQgNjMuNCA2NC40SDU5LjRWNjIuOFpNNTkuNCA1NC42SDYzLjRDNjUgNTQuNiA2Ni4zIDU0LjEgNjcuMiA1M0M2OC4xIDUxLjkgNjguNiA1MC42IDY4LjYgNDlDNjguNiA0Ny41IDY4LjEgNDYuMiA2Ny4yIDQ1LjFDNjYuMyA0NCA2NSA0My40IDYzLjQgNDMuNEg1OS40VjU0LjZaIiBmaWxsPSIjNjg3Nzg3Ii8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-document-error",{bubbles:!0,composed:!0,detail:{error:`Error loading document: ${this.src}`,src:this.src,type:this.type}}))}handleLoad(){this.dispatchEvent(new CustomEvent("nr-document-load",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-document-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-document-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}render(){const e={"document-container":!0,"document--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)} style=${a(i)}>
+          <div part="error-message" class="error-message">
             <img class="error-icon" src=${this.defaultFallback} alt="Document error" />
             <p>Unable to load document</p>
           </div>
         </div>
-      `:i`
-      <div class=${n(e)} style=${a(o)}>
+      `:t`
+      <div part="container" class=${n(e)} style=${a(i)}>
         <iframe
+          part="iframe"
           class="document-iframe"
           src=${this.src}
           @error=${this.handleError}
           @load=${this.handleLoad}
           title="Document viewer"
         ></iframe>
-        ${this.previewable?i`
-          <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"/>
@@ -230,13 +232,13 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
             Fullscreen
           </button>
         `:""}
-        ${this.showPreview?i`
-          <div class="preview-modal">
+        ${this.showPreview?t`
+          <div part="preview-modal" class="preview-modal">
             <div class="preview-header">
-              <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+              <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             </div>
             <iframe src=${this.src} title="Document viewer fullscreen"></iframe>
           </div>
         `:""}
       </div>
-    `}};p.styles=l,c([t({type:String})],p.prototype,"src",void 0),c([t({type:String})],p.prototype,"type",void 0),c([t({type:String})],p.prototype,"width",void 0),c([t({type:String})],p.prototype,"height",void 0),c([t({type:Boolean})],p.prototype,"previewable",void 0),c([t({type:Boolean,reflect:!0})],p.prototype,"block",void 0),c([r()],p.prototype,"showPreview",void 0),c([r()],p.prototype,"hasError",void 0),p=c([s("nr-document")],p);export{p as NrDocumentElement};
+    `}};f.styles=v,f.useShadowDom=!0,b([o({type:String})],f.prototype,"src",void 0),b([o({type:String})],f.prototype,"type",void 0),b([o({type:String})],f.prototype,"width",void 0),b([o({type:String})],f.prototype,"height",void 0),b([o({type:Boolean})],f.prototype,"previewable",void 0),b([o({type:Boolean,reflect:!0})],f.prototype,"block",void 0),b([r()],f.prototype,"showPreview",void 0),b([r()],f.prototype,"hasError",void 0),f=b([s("nr-document")],f);export{f as NrDocumentElement};

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

@@ -1,8 +1,19 @@
 import { LitElement } from "lit";
 import { DocumentType } from "./document.types.js";
-declare const NrDocumentElement_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 NrDocumentElement_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;
+/**
+ * Document viewer component for embedding PDFs and other documents via iframe.
+ *
+ * @csspart container - The root wrapper div of the document viewer
+ * @csspart iframe - The native iframe element rendering the document
+ * @csspart preview-button - The button that opens the fullscreen preview modal
+ * @csspart preview-modal - The fullscreen preview overlay
+ * @csspart preview-close - The close button inside the preview modal
+ * @csspart error-message - The error state container shown when the document fails to load
+ */
 export declare class NrDocumentElement extends NrDocumentElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     src: string;
     type: DocumentType;
     width: string;

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

@@ -10,6 +10,16 @@ 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 "./document.style.js";
+/**
+ * Document viewer component for embedding PDFs and other documents via iframe.
+ *
+ * @csspart container - The root wrapper div of the document viewer
+ * @csspart iframe - The native iframe element rendering the document
+ * @csspart preview-button - The button that opens the fullscreen preview modal
+ * @csspart preview-modal - The fullscreen preview overlay
+ * @csspart preview-close - The close button inside the preview modal
+ * @csspart error-message - The error state container shown when the document fails to load
+ */
 let NrDocumentElement = class NrDocumentElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
@@ -66,8 +76,8 @@ let NrDocumentElement = class NrDocumentElement extends NuralyUIBaseMixin(LitEle
         };
         if (this.hasError) {
             return html `
-        <div class=${classMap(containerClasses)} style=${styleMap(containerStyles)}>
-          <div class="error-message">
+        <div part="container" class=${classMap(containerClasses)} style=${styleMap(containerStyles)}>
+          <div part="error-message" class="error-message">
             <img class="error-icon" src=${this.defaultFallback} alt="Document error" />
             <p>Unable to load document</p>
           </div>
@@ -75,8 +85,9 @@ let NrDocumentElement = class NrDocumentElement extends NuralyUIBaseMixin(LitEle
       `;
         }
         return html `
-      <div class=${classMap(containerClasses)} style=${styleMap(containerStyles)}>
+      <div part="container" class=${classMap(containerClasses)} style=${styleMap(containerStyles)}>
         <iframe
+          part="iframe"
           class="document-iframe"
           src=${this.src}
           @error=${this.handleError}
@@ -84,7 +95,7 @@ let NrDocumentElement = class NrDocumentElement extends NuralyUIBaseMixin(LitEle
           title="Document viewer"
         ></iframe>
         ${this.previewable ? html `
-          <button class="preview-button" @click=${this.showPreviewModal}>
+          <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"/>
@@ -93,9 +104,9 @@ let NrDocumentElement = class NrDocumentElement extends NuralyUIBaseMixin(LitEle
           </button>
         ` : ''}
         ${this.showPreview ? html `
-          <div class="preview-modal">
+          <div part="preview-modal" class="preview-modal">
             <div class="preview-header">
-              <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+              <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             </div>
             <iframe src=${this.src} title="Document viewer fullscreen"></iframe>
           </div>
@@ -105,6 +116,7 @@ let NrDocumentElement = class NrDocumentElement extends NuralyUIBaseMixin(LitEle
     }
 };
 NrDocumentElement.styles = styles;
+NrDocumentElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrDocumentElement.prototype, "src", void 0);

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

@@ -4,6 +4,11 @@ export default css `
     display: block;
   }
 
+  :host([block]) {
+    display: block;
+    width: 100%;
+  }
+
   .document-container {
     width: 100%;
     height: 100%;
@@ -55,7 +60,7 @@ export default css `
   .preview-button:hover {
     background-color: #fff;
   }
-  
+
   .pdf-container {
     display: flex;
     flex-direction: column;
@@ -65,7 +70,7 @@ export default css `
     background-color: #f5f5f5;
     position: relative;
   }
-  
+
   .toolbar {
     display: flex;
     align-items: center;
@@ -74,7 +79,7 @@ export default css `
     border-bottom: 1px solid #ddd;
     gap: 8px;
   }
-  
+
   .toolbar button {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -83,21 +88,10 @@ export default css `
     cursor: pointer;
     font-size: 14px;
   }
-  
-  .toolbar button:hover {
-    background-color: #e6e6e6;
-  }
-  
-  .toolbar button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  .toolbar span {
-    margin: 0 4px;
-    font-size: 14px;
-  }
-  
+  .toolbar button:hover { background-color: #e6e6e6; }
+  .toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }
+  .toolbar span { margin: 0 4px; font-size: 14px; }
+
   .canvas-container {
     flex: 1;
     overflow: auto;
@@ -108,12 +102,12 @@ export default css `
     padding: 16px;
     min-height: 200px;
   }
-  
+
   canvas {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     background-color: white;
   }
-  
+
   .preview-modal {
     position: fixed;
     top: 0;
@@ -132,7 +126,7 @@ export default css `
     height: 100%;
     border: none;
   }
-  
+
   .preview-content {
     position: relative;
     display: flex;
@@ -143,7 +137,7 @@ export default css `
     border-radius: 8px;
     overflow: hidden;
   }
-  
+
   .preview-toolbar {
     display: flex;
     align-items: center;
@@ -152,7 +146,6 @@ export default css `
     border-bottom: 1px solid #ddd;
     gap: 12px;
   }
-  
   .preview-toolbar button {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -161,12 +154,8 @@ export default css `
     cursor: pointer;
     font-size: 16px;
   }
-  
-  .preview-toolbar span {
-    margin: 0 6px;
-    font-size: 16px;
-  }
-  
+  .preview-toolbar span { margin: 0 6px; font-size: 16px; }
+
   .preview-close {
     position: absolute;
     top: 10px;
@@ -184,11 +173,7 @@ export default css `
     align-items: center;
     justify-content: center;
   }
-  
-  .preview-close:hover {
-    background-color: #fff;
-    color: #000;
-  }
+  .preview-close:hover { background-color: #fff; color: #000; }
 
   .preview-header {
     position: absolute;
@@ -197,10 +182,10 @@ export default css `
     z-index: 1010;
     padding: 10px;
   }
-  
+
   .preview-modal canvas {
     max-width: 100%;
-    max-height: calc(100% - 60px); /* Account for toolbar height */
+    max-height: calc(100% - 60px);
     object-fit: contain;
     margin: auto;
     display: block;