@nuraly/lumenui 0.5.0 → 0.6.0

package/dist/nuralyui.bundle.js

@@ -4175,6 +4175,7 @@ function un(e){if(!e)return"";const t=e instanceof Date?e:new Date(e);if(Number.
           size="small"
           color="#9ca3af"
           class="message__copy"
+          part="message-copy"
           @click=${()=>t.onCopy(e)}
           @keydown=${i=>t.onCopyKeydown(i,e)}
           title="${i.messages.copyMessageLabel}"
@@ -4201,7 +4202,7 @@ function un(e){if(!e)return"";const t=e instanceof Date?e:new Date(e);if(Number.
       ${0===e.length?function(e){return q`
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
-        <div class="empty-state__content">
+        <div class="empty-state__content" part="empty-state-content">
           ${e.messages.startConversationLabel}
         </div>
       </slot>
@@ -4261,6 +4262,7 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
           <div
             slot="trigger"
             class="file-thumb ${e.isUploading?"file-thumb--uploading":""}"
+            part="file-thumb"
             role="button"
             tabindex="0"
             title="${e.name}"
@@ -4269,22 +4271,24 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
             ${a(e.mimeType)&&(e.previewUrl||e.url)?q`
               <img
                 class="file-thumb__image"
+                part="file-thumb-image"
                 src="${e.previewUrl||e.url}"
                 alt="${e.name}"
               />
             `:q`
-              <div class="file-thumb__ext" data-ext="${s(e.name,e.mimeType)}">
-                <span class="file-thumb__ext-label">${s(e.name,e.mimeType)}</span>
+              <div class="file-thumb__ext" part="file-thumb-ext" data-ext="${s(e.name,e.mimeType)}">
+                <span class="file-thumb__ext-label" part="file-thumb-ext-label">${s(e.name,e.mimeType)}</span>
               </div>
             `}
             ${e.isUploading?q`
-              <div class="file-thumb__spinner" aria-label="${i.input.uploadingLabel}">
+              <div class="file-thumb__spinner" part="file-thumb-spinner" aria-label="${i.input.uploadingLabel}">
                 <span class="file-thumb__spinner-ring"></span>
               </div>
             `:""}
             <button
               type="button"
               class="file-thumb__remove"
+              part="file-thumb-remove"
               aria-label="${i.input.removeFileLabel}"
               title="${i.input.removeFileLabel}"
               @click=${i=>{i.stopPropagation(),t(e.id)}}
@@ -4320,8 +4324,8 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
       `)}
     </div>
   `}function zn(e,t){return q`
-    <div class="action-buttons-row">
-      <div class="action-buttons-left">
+    <div class="action-buttons-row" part="actions">
+      <div class="action-buttons-left" part="actions-left">
         ${e.enableFileUpload?function(e,t){return q`
     <nr-dropdown
       .items=${e.fileUploadItems}
@@ -4369,11 +4373,12 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
   `}(e,t):K}
       </div>
 
-      <div class="action-buttons-right">
+      <div class="action-buttons-right" part="actions-right">
         ${e.showAudioButton&&!e.isQueryRunning?q`
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-transcribe"
             title="${e.i18n.audio.recordSpeechLabel}"
             ?disabled=${e.disabled}
             @click=${()=>{var e;return null===(e=t.onAudioStart)||void 0===e?void 0:e.call(t,"transcribe")}}
@@ -4392,6 +4397,7 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-voice"
             title="${e.i18n.audio.sendVoiceMessageLabel}"
             ?disabled=${e.disabled}
             @click=${()=>{var e;return null===(e=t.onAudioStart)||void 0===e?void 0:e.call(t,"message")}}
@@ -4433,9 +4439,10 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
       </svg>`:q`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
         <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
       </svg>`;return q`
-    <div class="audio-recording-bar">
+    <div class="audio-recording-bar" part="audio-recording-bar">
       <button
         class="audio-rec-cancel"
+        part="audio-cancel-button"
         title="${e.i18n.audio.cancelRecordingLabel}"
         @click=${t.onAudioCancel}
         aria-label="${e.i18n.audio.cancelRecordingLabel}"
@@ -4447,22 +4454,23 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
         </svg>
       </button>
 
-      <div class="audio-rec-indicator">
-        <span class="audio-rec-dot"></span>
-        <div class="audio-rec-wave">
+      <div class="audio-rec-indicator" part="audio-indicator">
+        <span class="audio-rec-dot" part="audio-dot"></span>
+        <div class="audio-rec-wave" part="audio-wave">
           ${n.map(e=>q`
-            <div class="audio-rec-bar" style=${Be({height:`${Math.round(24*e)}px`})}></div>
+            <div class="audio-rec-bar" part="audio-bar" style=${Be({height:`${Math.round(24*e)}px`})}></div>
           `)}
         </div>
-        <span class="audio-rec-time">${i}</span>
+        <span class="audio-rec-time" part="audio-time">${i}</span>
       </div>
 
-      <span class="audio-rec-mode-label">
+      <span class="audio-rec-mode-label" part="audio-mode-label">
         ${s?e.i18n.audio.speechToTextLabel:e.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
         class="audio-rec-send ${s?"audio-rec-send--transcribe":""}"
+        part="audio-send-button"
         title="${a}"
         @click=${t.onAudioSend}
         aria-label="${a}"
@@ -4480,7 +4488,7 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
         ${e.uploadedFiles.length>0?Dn(e.uploadedFiles,t.onFileRemove,e.i18n,t.onFileClick):K}
 
         <!-- Input area -->
-        <div class="input-row">
+        <div class="input-row" part="input-row">
           <div
             class="input-box__input"
             part="input"
@@ -4515,6 +4523,7 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
         ${t.editingThreadId===e.id&&i.onRenameThread?q`
           <input
             class="thread-item__rename-input"
+            part="thread-rename-input"
             type="text"
             .value=${e.title||""}
             @click=${e=>e.stopPropagation()}
@@ -4522,9 +4531,9 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
             @blur=${t=>{const n=t.target.value.trim();n&&n!==e.title?i.onRenameThread(e.id,n):i.onRenameThread(e.id,e.title||"")}}
           />
         `:q`
-          <div class="thread-item__title">${e.title||t.i18n.threads.newChatTitle}</div>
+          <div class="thread-item__title" part="thread-title">${e.title||t.i18n.threads.newChatTitle}</div>
         `}
-        <div class="thread-item__actions">
+        <div class="thread-item__actions" part="thread-actions">
           ${i.onBookmarkThread&&e.bookmarked?q`
             <button
               class="thread-item__action-btn thread-item__bookmark--active"
@@ -4558,10 +4567,10 @@ function Dn(e,t,i,n){const s=(e,t)=>{const i=e.lastIndexOf(".");if(i>=0&&i<e.len
           `:""}
         </div>
       </div>
-      <div class="thread-item__preview">
+      <div class="thread-item__preview" part="thread-preview">
         ${s}
       </div>
-      <div class="thread-item__timestamp">${un(e.updatedAt)}</div>
+      <div class="thread-item__timestamp" part="thread-timestamp">${un(e.updatedAt)}</div>
     </div>
   `}function On(e,t){if(!e.isOpen||!e.file)return K;const i=e.file,n=i.mimeType.startsWith("image/"),s="application/pdf"===i.mimeType||i.name.toLowerCase().endsWith(".pdf");return q`
     <nr-modal
@@ -4621,15 +4630,15 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
  */function In(e,t){var i;if(!e.isOpen||!e.artifact)return K;const n=e.artifact,s=bn(n.language);return q`
     <div class="artifact-panel" part="artifact-panel">
       <div class="artifact-panel__resize-handle" part="artifact-panel-resize-handle">
-        <div class="artifact-panel__resize-bar"></div>
+        <div class="artifact-panel__resize-bar" part="artifact-panel-resize-bar"></div>
       </div>
-      <div class="artifact-panel__body">
-        <div class="artifact-panel__header">
-          <div class="artifact-panel__header-info">
-            <nr-tag size="small" class="artifact-panel__lang-badge">${s}</nr-tag>
-            <span class="artifact-panel__title">${n.title}</span>
+      <div class="artifact-panel__body" part="artifact-panel-body">
+        <div class="artifact-panel__header" part="artifact-panel-header">
+          <div class="artifact-panel__header-info" part="artifact-panel-header-info">
+            <nr-tag size="small" class="artifact-panel__lang-badge" part="artifact-panel-lang">${s}</nr-tag>
+            <span class="artifact-panel__title" part="artifact-panel-title">${n.title}</span>
           </div>
-          <div class="artifact-panel__actions">
+          <div class="artifact-panel__actions" part="artifact-panel-actions">
             <nr-button
               type="text"
               size="small"
@@ -4648,8 +4657,8 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
             ></nr-button>
           </div>
         </div>
-        <div class="artifact-panel__content">
-          ${(null===(i=e.renderContent)||void 0===i?void 0:i.call(e,n))||function(e){switch(e.language){case"json":{let t;try{t=JSON.stringify(JSON.parse(e.content),null,2)}catch(i){t=e.content}return q`<pre class="artifact-panel__code"><code>${t}</code></pre>`}case"md":case"markdown":return q`<div class="artifact-panel__rendered-md">${Jt(gn(e.content))}</div>`;case"html":return q`<div class="artifact-panel__rendered-html">${Jt(e.content)}</div>`;case"text":case"txt":return q`<div class="artifact-panel__rendered-text">${e.content}</div>`;default:return q`<pre class="artifact-panel__code"><code>${e.content}</code></pre>`}}(n)}
+        <div class="artifact-panel__content" part="artifact-panel-content">
+          ${(null===(i=e.renderContent)||void 0===i?void 0:i.call(e,n))||function(e){switch(e.language){case"json":{let t;try{t=JSON.stringify(JSON.parse(e.content),null,2)}catch(i){t=e.content}return q`<pre class="artifact-panel__code" part="artifact-panel-code"><code>${t}</code></pre>`}case"md":case"markdown":return q`<div class="artifact-panel__rendered-md" part="artifact-panel-md">${Jt(gn(e.content))}</div>`;case"html":return q`<div class="artifact-panel__rendered-html" part="artifact-panel-html">${Jt(e.content)}</div>`;case"text":case"txt":return q`<div class="artifact-panel__rendered-text" part="artifact-panel-text">${e.content}</div>`;default:return q`<pre class="artifact-panel__code" part="artifact-panel-code"><code>${e.content}</code></pre>`}}(n)}
         </div>
       </div>
     </div>
@@ -4661,16 +4670,16 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
  */function jn(e,t){return!1!==e.showMessages?q`
       <div class="chatbot-content" part="content">
         ${xn(e.messages,wn(e.chatStarted,e.suggestions,t.suggestion,e.i18n),e.isTyping?function(e,t,i){if(!e)return K;const n=t===Qi.Dots?q`
-        <div class="dots">
+        <div class="dots" part="typing-dots">
           <span></span>
           <span></span>
           <span></span>
         </div>
-      `:q`<div class="spinner"></div>`;return q`
+      `:q`<div class="spinner" part="typing-spinner"></div>`;return q`
     <div class="message bot loading" part="typing-indicator">
-      <div class="message__content">
+      <div class="message__content" part="typing-content">
         ${n}
-        ${i?q`<span class="loading-text">${i.split("").map((e,t)=>q`<span class="loading-text__char" style="animation-delay:${.04*t}s">${" "===e?" ":e}</span>`)}</span>`:K}
+        ${i?q`<span class="loading-text" part="typing-text">${i.split("").map((e,t)=>q`<span class="loading-text__char" style="animation-delay:${.04*t}s">${" "===e?" ":e}</span>`)}</span>`:K}
       </div>
     </div>
   `}(e.isTyping,e.loadingIndicator||Qi.Spinner,e.loadingText):K,t.message,e.i18n)}
@@ -4690,14 +4699,14 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
 
       ${e.enableThreads&&e.isThreadSidebarOpen&&e.threadSidebar&&t.threadSidebar?function(e,t){const i=e.threads.filter(e=>e.bookmarked),n=e.threads.filter(e=>!e.bookmarked);return q`
     <div class="thread-sidebar" part="thread-sidebar">
-      <div class="thread-sidebar__header">
-        <h3>${e.i18n.threads.conversationsTitle}</h3>
+      <div class="thread-sidebar__header" part="thread-sidebar-header">
+        <h3 part="thread-sidebar-title">${e.i18n.threads.conversationsTitle}</h3>
       </div>
 
-      <div class="thread-list">
+      <div class="thread-list" part="thread-list">
         ${i.length>0?q`
-          <div class="thread-section" part="thread-section-bookmarks">
-            <div class="thread-section__label">
+          <div class="thread-section" part="thread-section thread-section-bookmarks">
+            <div class="thread-section__label" part="thread-section-label">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
               ${e.i18n.threads.bookmarksLabel}
             </div>
@@ -4706,11 +4715,11 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
         `:K}
         ${n.length>0||0===i.length?q`
           ${i.length>0?q`
-            <div class="thread-section__label">${e.i18n.threads.allConversationsLabel}</div>
+            <div class="thread-section__label" part="thread-section-label">${e.i18n.threads.allConversationsLabel}</div>
           `:K}
           ${Cn(n,e=>e.id,i=>An(i,e,t))}
           ${0===n.length&&0===i.length?q`
-            <p class="empty-msg">${e.i18n.threads.noConversationsLabel}</p>
+            <p class="empty-msg" part="thread-empty">${e.i18n.threads.noConversationsLabel}</p>
           `:K}
         `:K}
       </div>
@@ -4764,9 +4773,9 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
       class="file-upload-area ${e.isDragging?"file-upload-area--dragging":""}"
       part="file-upload-area"
     >
-      <div class="file-upload-area__content">
-        <nr-icon name="upload" size="xlarge"></nr-icon>
-        <div class="file-upload-area__text">
+      <div class="file-upload-area__content" part="file-upload-area-content">
+        <nr-icon name="upload" size="xlarge" part="file-upload-area-icon"></nr-icon>
+        <div class="file-upload-area__text" part="file-upload-area-text">
           ${e.label}
         </div>
       </div>

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

@@ -3029,6 +3029,7 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
           size="small"
           color="#9ca3af"
           class="message__copy"
+          part="message-copy"
           @click=${()=>t.onCopy(e)}
           @keydown=${i=>t.onCopyKeydown(i,e)}
           title="${a.messages.copyMessageLabel}"
@@ -3055,7 +3056,7 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
       ${0===e.length?function(e){return i`
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
-        <div class="empty-state__content">
+        <div class="empty-state__content" part="empty-state-content">
           ${e.messages.startConversationLabel}
         </div>
       </slot>
@@ -3104,6 +3105,7 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
           <div
             slot="trigger"
             class="file-thumb ${e.isUploading?"file-thumb--uploading":""}"
+            part="file-thumb"
             role="button"
             tabindex="0"
             title="${e.name}"
@@ -3112,22 +3114,24 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
             ${s(e.mimeType)&&(e.previewUrl||e.url)?i`
               <img
                 class="file-thumb__image"
+                part="file-thumb-image"
                 src="${e.previewUrl||e.url}"
                 alt="${e.name}"
               />
             `:i`
-              <div class="file-thumb__ext" data-ext="${o(e.name,e.mimeType)}">
-                <span class="file-thumb__ext-label">${o(e.name,e.mimeType)}</span>
+              <div class="file-thumb__ext" part="file-thumb-ext" data-ext="${o(e.name,e.mimeType)}">
+                <span class="file-thumb__ext-label" part="file-thumb-ext-label">${o(e.name,e.mimeType)}</span>
               </div>
             `}
             ${e.isUploading?i`
-              <div class="file-thumb__spinner" aria-label="${n.input.uploadingLabel}">
+              <div class="file-thumb__spinner" part="file-thumb-spinner" aria-label="${n.input.uploadingLabel}">
                 <span class="file-thumb__spinner-ring"></span>
               </div>
             `:""}
             <button
               type="button"
               class="file-thumb__remove"
+              part="file-thumb-remove"
               aria-label="${n.input.removeFileLabel}"
               title="${n.input.removeFileLabel}"
               @click=${i=>{i.stopPropagation(),t(e.id)}}
@@ -3163,8 +3167,8 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
       `)}
     </div>
   `}function Ut(e,t){return i`
-    <div class="action-buttons-row">
-      <div class="action-buttons-left">
+    <div class="action-buttons-row" part="actions">
+      <div class="action-buttons-left" part="actions-left">
         ${e.enableFileUpload?function(e,t){return i`
     <nr-dropdown
       .items=${e.fileUploadItems}
@@ -3212,11 +3216,12 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
   `}(e,t):n}
       </div>
 
-      <div class="action-buttons-right">
+      <div class="action-buttons-right" part="actions-right">
         ${e.showAudioButton&&!e.isQueryRunning?i`
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-transcribe"
             title="${e.i18n.audio.recordSpeechLabel}"
             ?disabled=${e.disabled}
             @click=${()=>{var e;return null===(e=t.onAudioStart)||void 0===e?void 0:e.call(t,"transcribe")}}
@@ -3235,6 +3240,7 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-voice"
             title="${e.i18n.audio.sendVoiceMessageLabel}"
             ?disabled=${e.disabled}
             @click=${()=>{var e;return null===(e=t.onAudioStart)||void 0===e?void 0:e.call(t,"message")}}
@@ -3276,9 +3282,10 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
       </svg>`:i`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
         <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
       </svg>`;return i`
-    <div class="audio-recording-bar">
+    <div class="audio-recording-bar" part="audio-recording-bar">
       <button
         class="audio-rec-cancel"
+        part="audio-cancel-button"
         title="${e.i18n.audio.cancelRecordingLabel}"
         @click=${t.onAudioCancel}
         aria-label="${e.i18n.audio.cancelRecordingLabel}"
@@ -3290,22 +3297,23 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
         </svg>
       </button>
 
-      <div class="audio-rec-indicator">
-        <span class="audio-rec-dot"></span>
-        <div class="audio-rec-wave">
+      <div class="audio-rec-indicator" part="audio-indicator">
+        <span class="audio-rec-dot" part="audio-dot"></span>
+        <div class="audio-rec-wave" part="audio-wave">
           ${a.map(e=>i`
-            <div class="audio-rec-bar" style=${d({height:`${Math.round(24*e)}px`})}></div>
+            <div class="audio-rec-bar" part="audio-bar" style=${d({height:`${Math.round(24*e)}px`})}></div>
           `)}
         </div>
-        <span class="audio-rec-time">${n}</span>
+        <span class="audio-rec-time" part="audio-time">${n}</span>
       </div>
 
-      <span class="audio-rec-mode-label">
+      <span class="audio-rec-mode-label" part="audio-mode-label">
         ${o?e.i18n.audio.speechToTextLabel:e.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
         class="audio-rec-send ${o?"audio-rec-send--transcribe":""}"
+        part="audio-send-button"
         title="${s}"
         @click=${t.onAudioSend}
         aria-label="${s}"
@@ -3323,7 +3331,7 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
         ${e.uploadedFiles.length>0?Bt(e.uploadedFiles,t.onFileRemove,e.i18n,t.onFileClick):n}
 
         <!-- Input area -->
-        <div class="input-row">
+        <div class="input-row" part="input-row">
           <div
             class="input-box__input"
             part="input"
@@ -3358,6 +3366,7 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
         ${t.editingThreadId===e.id&&n.onRenameThread?i`
           <input
             class="thread-item__rename-input"
+            part="thread-rename-input"
             type="text"
             .value=${e.title||""}
             @click=${e=>e.stopPropagation()}
@@ -3365,9 +3374,9 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
             @blur=${t=>{const i=t.target.value.trim();i&&i!==e.title?n.onRenameThread(e.id,i):n.onRenameThread(e.id,e.title||"")}}
           />
         `:i`
-          <div class="thread-item__title">${e.title||t.i18n.threads.newChatTitle}</div>
+          <div class="thread-item__title" part="thread-title">${e.title||t.i18n.threads.newChatTitle}</div>
         `}
-        <div class="thread-item__actions">
+        <div class="thread-item__actions" part="thread-actions">
           ${n.onBookmarkThread&&e.bookmarked?i`
             <button
               class="thread-item__action-btn thread-item__bookmark--active"
@@ -3401,10 +3410,10 @@ function(e){const t=e.match(/\[ERROR_START\]\[ERROR_TITLE_START\]([\s\S]*?)\[ERR
           `:""}
         </div>
       </div>
-      <div class="thread-item__preview">
+      <div class="thread-item__preview" part="thread-preview">
         ${o}
       </div>
-      <div class="thread-item__timestamp">${_t(e.updatedAt)}</div>
+      <div class="thread-item__timestamp" part="thread-timestamp">${_t(e.updatedAt)}</div>
     </div>
   `}function qt(e,t){if(!e.isOpen||!e.file)return n;const a=e.file,o=a.mimeType.startsWith("image/"),s="application/pdf"===a.mimeType||a.name.toLowerCase().endsWith(".pdf");return i`
     <nr-modal
@@ -3464,15 +3473,15 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
  */function Gt(e,t){var a;if(!e.isOpen||!e.artifact)return n;const o=e.artifact,s=(r=o.language,Rt[r]||r.charAt(0).toUpperCase()+r.slice(1));var r;return i`
     <div class="artifact-panel" part="artifact-panel">
       <div class="artifact-panel__resize-handle" part="artifact-panel-resize-handle">
-        <div class="artifact-panel__resize-bar"></div>
+        <div class="artifact-panel__resize-bar" part="artifact-panel-resize-bar"></div>
       </div>
-      <div class="artifact-panel__body">
-        <div class="artifact-panel__header">
-          <div class="artifact-panel__header-info">
-            <nr-tag size="small" class="artifact-panel__lang-badge">${s}</nr-tag>
-            <span class="artifact-panel__title">${o.title}</span>
+      <div class="artifact-panel__body" part="artifact-panel-body">
+        <div class="artifact-panel__header" part="artifact-panel-header">
+          <div class="artifact-panel__header-info" part="artifact-panel-header-info">
+            <nr-tag size="small" class="artifact-panel__lang-badge" part="artifact-panel-lang">${s}</nr-tag>
+            <span class="artifact-panel__title" part="artifact-panel-title">${o.title}</span>
           </div>
-          <div class="artifact-panel__actions">
+          <div class="artifact-panel__actions" part="artifact-panel-actions">
             <nr-button
               type="text"
               size="small"
@@ -3491,8 +3500,8 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
             ></nr-button>
           </div>
         </div>
-        <div class="artifact-panel__content">
-          ${(null===(a=e.renderContent)||void 0===a?void 0:a.call(e,o))||function(e){switch(e.language){case"json":{let t;try{t=JSON.stringify(JSON.parse(e.content),null,2)}catch(i){t=e.content}return i`<pre class="artifact-panel__code"><code>${t}</code></pre>`}case"md":case"markdown":return i`<div class="artifact-panel__rendered-md">${u(function(e){let t=function(e){return e.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;")}(e);return t=t.replaceAll(/```([\s\S]*?)```/g,'<pre class="md-code"><code>$1</code></pre>'),t=t.replaceAll(/`([^`]+)`/g,'<code class="md-inline-code">$1</code>'),t=t.replaceAll(/^###[^\S\n]+(.+)$/gm,"<h3>$1</h3>"),t=t.replaceAll(/^##[^\S\n]+(.+)$/gm,"<h2>$1</h2>"),t=t.replaceAll(/^#[^\S\n]+(.+)$/gm,"<h1>$1</h1>"),t=t.replaceAll(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>"),t=t.replaceAll(/\*([^*]+)\*/g,"<em>$1</em>"),t=t.replaceAll(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),t=t.replaceAll(/(?:^|\n)-\s+(.+)(?=\n|$)/g,(e,t)=>`\n<ul><li>${t}</li></ul>`),t=t.replaceAll(/<ul>\s*<li>([\s\S]*?)<\/li>\s*<\/ul>\n<ul>/g,"<ul><li>$1</li>"),t=t.split(/\n\n+/).map(e=>/^(<h\d|<pre|<ul|<ol|<blockquote)/.test(e.trim())?e:`<p>${e.replaceAll("\n","<br/>")}</p>`).join("\n"),t}(e.content))}</div>`;case"html":return i`<div class="artifact-panel__rendered-html">${u(e.content)}</div>`;case"text":case"txt":return i`<div class="artifact-panel__rendered-text">${e.content}</div>`;default:return i`<pre class="artifact-panel__code"><code>${e.content}</code></pre>`}}(o)}
+        <div class="artifact-panel__content" part="artifact-panel-content">
+          ${(null===(a=e.renderContent)||void 0===a?void 0:a.call(e,o))||function(e){switch(e.language){case"json":{let t;try{t=JSON.stringify(JSON.parse(e.content),null,2)}catch(i){t=e.content}return i`<pre class="artifact-panel__code" part="artifact-panel-code"><code>${t}</code></pre>`}case"md":case"markdown":return i`<div class="artifact-panel__rendered-md" part="artifact-panel-md">${u(function(e){let t=function(e){return e.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;")}(e);return t=t.replaceAll(/```([\s\S]*?)```/g,'<pre class="md-code"><code>$1</code></pre>'),t=t.replaceAll(/`([^`]+)`/g,'<code class="md-inline-code">$1</code>'),t=t.replaceAll(/^###[^\S\n]+(.+)$/gm,"<h3>$1</h3>"),t=t.replaceAll(/^##[^\S\n]+(.+)$/gm,"<h2>$1</h2>"),t=t.replaceAll(/^#[^\S\n]+(.+)$/gm,"<h1>$1</h1>"),t=t.replaceAll(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>"),t=t.replaceAll(/\*([^*]+)\*/g,"<em>$1</em>"),t=t.replaceAll(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),t=t.replaceAll(/(?:^|\n)-\s+(.+)(?=\n|$)/g,(e,t)=>`\n<ul><li>${t}</li></ul>`),t=t.replaceAll(/<ul>\s*<li>([\s\S]*?)<\/li>\s*<\/ul>\n<ul>/g,"<ul><li>$1</li>"),t=t.split(/\n\n+/).map(e=>/^(<h\d|<pre|<ul|<ol|<blockquote)/.test(e.trim())?e:`<p>${e.replaceAll("\n","<br/>")}</p>`).join("\n"),t}(e.content))}</div>`;case"html":return i`<div class="artifact-panel__rendered-html" part="artifact-panel-html">${u(e.content)}</div>`;case"text":case"txt":return i`<div class="artifact-panel__rendered-text" part="artifact-panel-text">${e.content}</div>`;default:return i`<pre class="artifact-panel__code" part="artifact-panel-code"><code>${e.content}</code></pre>`}}(o)}
         </div>
       </div>
     </div>
@@ -3504,16 +3513,16 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
  */function Wt(e,t){return!1!==e.showMessages?i`
       <div class="chatbot-content" part="content">
         ${jt(e.messages,Ft(e.chatStarted,e.suggestions,t.suggestion,e.i18n),e.isTyping?function(e,t,a){if(!e)return n;const o=t===Mt.Dots?i`
-        <div class="dots">
+        <div class="dots" part="typing-dots">
           <span></span>
           <span></span>
           <span></span>
         </div>
-      `:i`<div class="spinner"></div>`;return i`
+      `:i`<div class="spinner" part="typing-spinner"></div>`;return i`
     <div class="message bot loading" part="typing-indicator">
-      <div class="message__content">
+      <div class="message__content" part="typing-content">
         ${o}
-        ${a?i`<span class="loading-text">${a.split("").map((e,t)=>i`<span class="loading-text__char" style="animation-delay:${.04*t}s">${" "===e?" ":e}</span>`)}</span>`:n}
+        ${a?i`<span class="loading-text" part="typing-text">${a.split("").map((e,t)=>i`<span class="loading-text__char" style="animation-delay:${.04*t}s">${" "===e?" ":e}</span>`)}</span>`:n}
       </div>
     </div>
   `}(e.isTyping,e.loadingIndicator||Mt.Spinner,e.loadingText):n,t.message,e.i18n)}
@@ -3533,14 +3542,14 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
 
       ${e.enableThreads&&e.isThreadSidebarOpen&&e.threadSidebar&&t.threadSidebar?function(e,t){const a=e.threads.filter(e=>e.bookmarked),o=e.threads.filter(e=>!e.bookmarked);return i`
     <div class="thread-sidebar" part="thread-sidebar">
-      <div class="thread-sidebar__header">
-        <h3>${e.i18n.threads.conversationsTitle}</h3>
+      <div class="thread-sidebar__header" part="thread-sidebar-header">
+        <h3 part="thread-sidebar-title">${e.i18n.threads.conversationsTitle}</h3>
       </div>
 
-      <div class="thread-list">
+      <div class="thread-list" part="thread-list">
         ${a.length>0?i`
-          <div class="thread-section" part="thread-section-bookmarks">
-            <div class="thread-section__label">
+          <div class="thread-section" part="thread-section thread-section-bookmarks">
+            <div class="thread-section__label" part="thread-section-label">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
               ${e.i18n.threads.bookmarksLabel}
             </div>
@@ -3549,11 +3558,11 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
         `:n}
         ${o.length>0||0===a.length?i`
           ${a.length>0?i`
-            <div class="thread-section__label">${e.i18n.threads.allConversationsLabel}</div>
+            <div class="thread-section__label" part="thread-section-label">${e.i18n.threads.allConversationsLabel}</div>
           `:n}
           ${b(o,e=>e.id,i=>Ht(i,e,t))}
           ${0===o.length&&0===a.length?i`
-            <p class="empty-msg">${e.i18n.threads.noConversationsLabel}</p>
+            <p class="empty-msg" part="thread-empty">${e.i18n.threads.noConversationsLabel}</p>
           `:n}
         `:n}
       </div>
@@ -3607,9 +3616,9 @@ function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(102
       class="file-upload-area ${e.isDragging?"file-upload-area--dragging":""}"
       part="file-upload-area"
     >
-      <div class="file-upload-area__content">
-        <nr-icon name="upload" size="xlarge"></nr-icon>
-        <div class="file-upload-area__text">
+      <div class="file-upload-area__content" part="file-upload-area-content">
+        <nr-icon name="upload" size="xlarge" part="file-upload-area-icon"></nr-icon>
+        <div class="file-upload-area__text" part="file-upload-area-text">
           ${e.label}
         </div>
       </div>

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

@@ -2062,6 +2062,7 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
           size="small"
           color="#9ca3af"
           class="message__copy"
+          part="message-copy"
           @click=${()=>n.onCopy(t)}
           @keydown=${e=>n.onCopyKeydown(e,t)}
           title="${o.messages.copyMessageLabel}"
@@ -2088,7 +2089,7 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
       ${0===t.length?function(t){return i`
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
-        <div class="empty-state__content">
+        <div class="empty-state__content" part="empty-state-content">
           ${t.messages.startConversationLabel}
         </div>
       </slot>
@@ -2137,6 +2138,7 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
           <div
             slot="trigger"
             class="file-thumb ${t.isUploading?"file-thumb--uploading":""}"
+            part="file-thumb"
             role="button"
             tabindex="0"
             title="${t.name}"
@@ -2145,22 +2147,24 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
             ${r(t.mimeType)&&(t.previewUrl||t.url)?i`
               <img
                 class="file-thumb__image"
+                part="file-thumb-image"
                 src="${t.previewUrl||t.url}"
                 alt="${t.name}"
               />
             `:i`
-              <div class="file-thumb__ext" data-ext="${s(t.name,t.mimeType)}">
-                <span class="file-thumb__ext-label">${s(t.name,t.mimeType)}</span>
+              <div class="file-thumb__ext" part="file-thumb-ext" data-ext="${s(t.name,t.mimeType)}">
+                <span class="file-thumb__ext-label" part="file-thumb-ext-label">${s(t.name,t.mimeType)}</span>
               </div>
             `}
             ${t.isUploading?i`
-              <div class="file-thumb__spinner" aria-label="${n.input.uploadingLabel}">
+              <div class="file-thumb__spinner" part="file-thumb-spinner" aria-label="${n.input.uploadingLabel}">
                 <span class="file-thumb__spinner-ring"></span>
               </div>
             `:""}
             <button
               type="button"
               class="file-thumb__remove"
+              part="file-thumb-remove"
               aria-label="${n.input.removeFileLabel}"
               title="${n.input.removeFileLabel}"
               @click=${i=>{i.stopPropagation(),e(t.id)}}
@@ -2196,8 +2200,8 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
       `)}
     </div>
   `}function vt(t,n){return i`
-    <div class="action-buttons-row">
-      <div class="action-buttons-left">
+    <div class="action-buttons-row" part="actions">
+      <div class="action-buttons-left" part="actions-left">
         ${t.enableFileUpload?function(t,e){return i`
     <nr-dropdown
       .items=${t.fileUploadItems}
@@ -2245,11 +2249,12 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
   `}(t,n):e}
       </div>
 
-      <div class="action-buttons-right">
+      <div class="action-buttons-right" part="actions-right">
         ${t.showAudioButton&&!t.isQueryRunning?i`
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-transcribe"
             title="${t.i18n.audio.recordSpeechLabel}"
             ?disabled=${t.disabled}
             @click=${()=>{var t;return null===(t=n.onAudioStart)||void 0===t?void 0:t.call(n,"transcribe")}}
@@ -2268,6 +2273,7 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-voice"
             title="${t.i18n.audio.sendVoiceMessageLabel}"
             ?disabled=${t.disabled}
             @click=${()=>{var t;return null===(t=n.onAudioStart)||void 0===t?void 0:t.call(n,"message")}}
@@ -2309,9 +2315,10 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
       </svg>`:i`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
         <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
       </svg>`;return i`
-    <div class="audio-recording-bar">
+    <div class="audio-recording-bar" part="audio-recording-bar">
       <button
         class="audio-rec-cancel"
+        part="audio-cancel-button"
         title="${t.i18n.audio.cancelRecordingLabel}"
         @click=${e.onAudioCancel}
         aria-label="${t.i18n.audio.cancelRecordingLabel}"
@@ -2323,22 +2330,23 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
         </svg>
       </button>
 
-      <div class="audio-rec-indicator">
-        <span class="audio-rec-dot"></span>
-        <div class="audio-rec-wave">
+      <div class="audio-rec-indicator" part="audio-indicator">
+        <span class="audio-rec-dot" part="audio-dot"></span>
+        <div class="audio-rec-wave" part="audio-wave">
           ${o.map(t=>i`
-            <div class="audio-rec-bar" style=${c({height:`${Math.round(24*t)}px`})}></div>
+            <div class="audio-rec-bar" part="audio-bar" style=${c({height:`${Math.round(24*t)}px`})}></div>
           `)}
         </div>
-        <span class="audio-rec-time">${n}</span>
+        <span class="audio-rec-time" part="audio-time">${n}</span>
       </div>
 
-      <span class="audio-rec-mode-label">
+      <span class="audio-rec-mode-label" part="audio-mode-label">
         ${s?t.i18n.audio.speechToTextLabel:t.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
         class="audio-rec-send ${s?"audio-rec-send--transcribe":""}"
+        part="audio-send-button"
         title="${r}"
         @click=${e.onAudioSend}
         aria-label="${r}"
@@ -2356,7 +2364,7 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
         ${t.uploadedFiles.length>0?gt(t.uploadedFiles,n.onFileRemove,t.i18n,n.onFileClick):e}
 
         <!-- Input area -->
-        <div class="input-row">
+        <div class="input-row" part="input-row">
           <div
             class="input-box__input"
             part="input"
@@ -2391,6 +2399,7 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
         ${e.editingThreadId===t.id&&n.onRenameThread?i`
           <input
             class="thread-item__rename-input"
+            part="thread-rename-input"
             type="text"
             .value=${t.title||""}
             @click=${t=>t.stopPropagation()}
@@ -2398,9 +2407,9 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
             @blur=${e=>{const i=e.target.value.trim();i&&i!==t.title?n.onRenameThread(t.id,i):n.onRenameThread(t.id,t.title||"")}}
           />
         `:i`
-          <div class="thread-item__title">${t.title||e.i18n.threads.newChatTitle}</div>
+          <div class="thread-item__title" part="thread-title">${t.title||e.i18n.threads.newChatTitle}</div>
         `}
-        <div class="thread-item__actions">
+        <div class="thread-item__actions" part="thread-actions">
           ${n.onBookmarkThread&&t.bookmarked?i`
             <button
               class="thread-item__action-btn thread-item__bookmark--active"
@@ -2434,10 +2443,10 @@ function rt(t){if(!t)return"";const e=t instanceof Date?t:new Date(t);if(Number.
           `:""}
         </div>
       </div>
-      <div class="thread-item__preview">
+      <div class="thread-item__preview" part="thread-preview">
         ${s}
       </div>
-      <div class="thread-item__timestamp">${rt(t.updatedAt)}</div>
+      <div class="thread-item__timestamp" part="thread-timestamp">${rt(t.updatedAt)}</div>
     </div>
   `}function xt(t,n){if(!t.isOpen||!t.file)return e;const o=t.file,s=o.mimeType.startsWith("image/"),r="application/pdf"===o.mimeType||o.name.toLowerCase().endsWith(".pdf");return i`
     <nr-modal
@@ -2497,15 +2506,15 @@ function(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(102
  */function wt(t,n){var o;if(!t.isOpen||!t.artifact)return e;const s=t.artifact,r=dt(s.language);return i`
     <div class="artifact-panel" part="artifact-panel">
       <div class="artifact-panel__resize-handle" part="artifact-panel-resize-handle">
-        <div class="artifact-panel__resize-bar"></div>
+        <div class="artifact-panel__resize-bar" part="artifact-panel-resize-bar"></div>
       </div>
-      <div class="artifact-panel__body">
-        <div class="artifact-panel__header">
-          <div class="artifact-panel__header-info">
-            <nr-tag size="small" class="artifact-panel__lang-badge">${r}</nr-tag>
-            <span class="artifact-panel__title">${s.title}</span>
+      <div class="artifact-panel__body" part="artifact-panel-body">
+        <div class="artifact-panel__header" part="artifact-panel-header">
+          <div class="artifact-panel__header-info" part="artifact-panel-header-info">
+            <nr-tag size="small" class="artifact-panel__lang-badge" part="artifact-panel-lang">${r}</nr-tag>
+            <span class="artifact-panel__title" part="artifact-panel-title">${s.title}</span>
           </div>
-          <div class="artifact-panel__actions">
+          <div class="artifact-panel__actions" part="artifact-panel-actions">
             <nr-button
               type="text"
               size="small"
@@ -2524,8 +2533,8 @@ function(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(102
             ></nr-button>
           </div>
         </div>
-        <div class="artifact-panel__content">
-          ${(null===(o=t.renderContent)||void 0===o?void 0:o.call(t,s))||function(t){switch(t.language){case"json":{let e;try{e=JSON.stringify(JSON.parse(t.content),null,2)}catch(i){e=t.content}return i`<pre class="artifact-panel__code"><code>${e}</code></pre>`}case"md":case"markdown":return i`<div class="artifact-panel__rendered-md">${l(ct(t.content))}</div>`;case"html":return i`<div class="artifact-panel__rendered-html">${l(t.content)}</div>`;case"text":case"txt":return i`<div class="artifact-panel__rendered-text">${t.content}</div>`;default:return i`<pre class="artifact-panel__code"><code>${t.content}</code></pre>`}}(s)}
+        <div class="artifact-panel__content" part="artifact-panel-content">
+          ${(null===(o=t.renderContent)||void 0===o?void 0:o.call(t,s))||function(t){switch(t.language){case"json":{let e;try{e=JSON.stringify(JSON.parse(t.content),null,2)}catch(i){e=t.content}return i`<pre class="artifact-panel__code" part="artifact-panel-code"><code>${e}</code></pre>`}case"md":case"markdown":return i`<div class="artifact-panel__rendered-md" part="artifact-panel-md">${l(ct(t.content))}</div>`;case"html":return i`<div class="artifact-panel__rendered-html" part="artifact-panel-html">${l(t.content)}</div>`;case"text":case"txt":return i`<div class="artifact-panel__rendered-text" part="artifact-panel-text">${t.content}</div>`;default:return i`<pre class="artifact-panel__code" part="artifact-panel-code"><code>${t.content}</code></pre>`}}(s)}
         </div>
       </div>
     </div>
@@ -2537,16 +2546,16 @@ function(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(102
  */function _t(t,n){return!1!==t.showMessages?i`
       <div class="chatbot-content" part="content">
         ${ft(t.messages,mt(t.chatStarted,t.suggestions,n.suggestion,t.i18n),t.isTyping?function(t,n,o){if(!t)return e;const s=n===V.Dots?i`
-        <div class="dots">
+        <div class="dots" part="typing-dots">
           <span></span>
           <span></span>
           <span></span>
         </div>
-      `:i`<div class="spinner"></div>`;return i`
+      `:i`<div class="spinner" part="typing-spinner"></div>`;return i`
     <div class="message bot loading" part="typing-indicator">
-      <div class="message__content">
+      <div class="message__content" part="typing-content">
         ${s}
-        ${o?i`<span class="loading-text">${o.split("").map((t,e)=>i`<span class="loading-text__char" style="animation-delay:${.04*e}s">${" "===t?" ":t}</span>`)}</span>`:e}
+        ${o?i`<span class="loading-text" part="typing-text">${o.split("").map((t,e)=>i`<span class="loading-text__char" style="animation-delay:${.04*e}s">${" "===t?" ":t}</span>`)}</span>`:e}
       </div>
     </div>
   `}(t.isTyping,t.loadingIndicator||V.Spinner,t.loadingText):e,n.message,t.i18n)}
@@ -2566,14 +2575,14 @@ function(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(102
 
       ${t.enableThreads&&t.isThreadSidebarOpen&&t.threadSidebar&&n.threadSidebar?function(t,n){const o=t.threads.filter(t=>t.bookmarked),s=t.threads.filter(t=>!t.bookmarked);return i`
     <div class="thread-sidebar" part="thread-sidebar">
-      <div class="thread-sidebar__header">
-        <h3>${t.i18n.threads.conversationsTitle}</h3>
+      <div class="thread-sidebar__header" part="thread-sidebar-header">
+        <h3 part="thread-sidebar-title">${t.i18n.threads.conversationsTitle}</h3>
       </div>
 
-      <div class="thread-list">
+      <div class="thread-list" part="thread-list">
         ${o.length>0?i`
-          <div class="thread-section" part="thread-section-bookmarks">
-            <div class="thread-section__label">
+          <div class="thread-section" part="thread-section thread-section-bookmarks">
+            <div class="thread-section__label" part="thread-section-label">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
               ${t.i18n.threads.bookmarksLabel}
             </div>
@@ -2582,11 +2591,11 @@ function(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(102
         `:e}
         ${s.length>0||0===o.length?i`
           ${o.length>0?i`
-            <div class="thread-section__label">${t.i18n.threads.allConversationsLabel}</div>
+            <div class="thread-section__label" part="thread-section-label">${t.i18n.threads.allConversationsLabel}</div>
           `:e}
           ${d(s,t=>t.id,e=>yt(e,t,n))}
           ${0===s.length&&0===o.length?i`
-            <p class="empty-msg">${t.i18n.threads.noConversationsLabel}</p>
+            <p class="empty-msg" part="thread-empty">${t.i18n.threads.noConversationsLabel}</p>
           `:e}
         `:e}
       </div>
@@ -2640,9 +2649,9 @@ function(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(102
       class="file-upload-area ${t.isDragging?"file-upload-area--dragging":""}"
       part="file-upload-area"
     >
-      <div class="file-upload-area__content">
-        <nr-icon name="upload" size="xlarge"></nr-icon>
-        <div class="file-upload-area__text">
+      <div class="file-upload-area__content" part="file-upload-area-content">
+        <nr-icon name="upload" size="xlarge" part="file-upload-area-icon"></nr-icon>
+        <div class="file-upload-area__text" part="file-upload-area-text">
           ${t.label}
         </div>
       </div>

package/dist/src/components/chatbot/templates/artifact-panel.template.js

@@ -17,18 +17,18 @@ function renderArtifactContent(artifact) {
             catch (_a) {
                 prettyContent = artifact.content;
             }
-            return html `<pre class="artifact-panel__code"><code>${prettyContent}</code></pre>`;
+            return html `<pre class="artifact-panel__code" part="artifact-panel-code"><code>${prettyContent}</code></pre>`;
         }
         case 'md':
         case 'markdown':
-            return html `<div class="artifact-panel__rendered-md">${unsafeHTML(renderMarkdown(artifact.content))}</div>`;
+            return html `<div class="artifact-panel__rendered-md" part="artifact-panel-md">${unsafeHTML(renderMarkdown(artifact.content))}</div>`;
         case 'html':
-            return html `<div class="artifact-panel__rendered-html">${unsafeHTML(artifact.content)}</div>`;
+            return html `<div class="artifact-panel__rendered-html" part="artifact-panel-html">${unsafeHTML(artifact.content)}</div>`;
         case 'text':
         case 'txt':
-            return html `<div class="artifact-panel__rendered-text">${artifact.content}</div>`;
+            return html `<div class="artifact-panel__rendered-text" part="artifact-panel-text">${artifact.content}</div>`;
         default:
-            return html `<pre class="artifact-panel__code"><code>${artifact.content}</code></pre>`;
+            return html `<pre class="artifact-panel__code" part="artifact-panel-code"><code>${artifact.content}</code></pre>`;
     }
 }
 /**
@@ -43,15 +43,15 @@ export function renderArtifactPanel(data, handlers) {
     return html `
     <div class="artifact-panel" part="artifact-panel">
       <div class="artifact-panel__resize-handle" part="artifact-panel-resize-handle">
-        <div class="artifact-panel__resize-bar"></div>
+        <div class="artifact-panel__resize-bar" part="artifact-panel-resize-bar"></div>
       </div>
-      <div class="artifact-panel__body">
-        <div class="artifact-panel__header">
-          <div class="artifact-panel__header-info">
-            <nr-tag size="small" class="artifact-panel__lang-badge">${langLabel}</nr-tag>
-            <span class="artifact-panel__title">${artifact.title}</span>
+      <div class="artifact-panel__body" part="artifact-panel-body">
+        <div class="artifact-panel__header" part="artifact-panel-header">
+          <div class="artifact-panel__header-info" part="artifact-panel-header-info">
+            <nr-tag size="small" class="artifact-panel__lang-badge" part="artifact-panel-lang">${langLabel}</nr-tag>
+            <span class="artifact-panel__title" part="artifact-panel-title">${artifact.title}</span>
           </div>
-          <div class="artifact-panel__actions">
+          <div class="artifact-panel__actions" part="artifact-panel-actions">
             <nr-button
               type="text"
               size="small"
@@ -70,7 +70,7 @@ export function renderArtifactPanel(data, handlers) {
             ></nr-button>
           </div>
         </div>
-        <div class="artifact-panel__content">
+        <div class="artifact-panel__content" part="artifact-panel-content">
           ${((_a = data.renderContent) === null || _a === void 0 ? void 0 : _a.call(data, artifact)) || renderArtifactContent(artifact)}
         </div>
       </div>

package/dist/src/components/chatbot/templates/file-upload-area.template.js

@@ -10,9 +10,9 @@ export function renderFileUploadArea(data) {
       class="file-upload-area ${data.isDragging ? 'file-upload-area--dragging' : ''}"
       part="file-upload-area"
     >
-      <div class="file-upload-area__content">
-        <nr-icon name="upload" size="xlarge"></nr-icon>
-        <div class="file-upload-area__text">
+      <div class="file-upload-area__content" part="file-upload-area-content">
+        <nr-icon name="upload" size="xlarge" part="file-upload-area-icon"></nr-icon>
+        <div class="file-upload-area__text" part="file-upload-area-text">
           ${data.label}
         </div>
       </div>

package/dist/src/components/chatbot/templates/input-box.template.js

@@ -45,6 +45,7 @@ function renderContextTags(files, onRemove, i18n, onFileClick) {
           <div
             slot="trigger"
             class="file-thumb ${f.isUploading ? 'file-thumb--uploading' : ''}"
+            part="file-thumb"
             role="button"
             tabindex="0"
             title="${f.name}"
@@ -53,22 +54,24 @@ function renderContextTags(files, onRemove, i18n, onFileClick) {
             ${isImage(f.mimeType) && (f.previewUrl || f.url) ? html `
               <img
                 class="file-thumb__image"
+                part="file-thumb-image"
                 src="${f.previewUrl || f.url}"
                 alt="${f.name}"
               />
             ` : html `
-              <div class="file-thumb__ext" data-ext="${getExtension(f.name, f.mimeType)}">
-                <span class="file-thumb__ext-label">${getExtension(f.name, f.mimeType)}</span>
+              <div class="file-thumb__ext" part="file-thumb-ext" data-ext="${getExtension(f.name, f.mimeType)}">
+                <span class="file-thumb__ext-label" part="file-thumb-ext-label">${getExtension(f.name, f.mimeType)}</span>
               </div>
             `}
             ${f.isUploading ? html `
-              <div class="file-thumb__spinner" aria-label="${i18n.input.uploadingLabel}">
+              <div class="file-thumb__spinner" part="file-thumb-spinner" aria-label="${i18n.input.uploadingLabel}">
                 <span class="file-thumb__spinner-ring"></span>
               </div>
             ` : ''}
             <button
               type="button"
               class="file-thumb__remove"
+              part="file-thumb-remove"
               aria-label="${i18n.input.removeFileLabel}"
               title="${i18n.input.removeFileLabel}"
               @click=${(e) => { e.stopPropagation(); onRemove(f.id); }}
@@ -199,9 +202,10 @@ function renderRecordingBar(data, handlers) {
         <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
       </svg>`;
     return html `
-    <div class="audio-recording-bar">
+    <div class="audio-recording-bar" part="audio-recording-bar">
       <button
         class="audio-rec-cancel"
+        part="audio-cancel-button"
         title="${data.i18n.audio.cancelRecordingLabel}"
         @click=${handlers.onAudioCancel}
         aria-label="${data.i18n.audio.cancelRecordingLabel}"
@@ -213,22 +217,23 @@ function renderRecordingBar(data, handlers) {
         </svg>
       </button>
 
-      <div class="audio-rec-indicator">
-        <span class="audio-rec-dot"></span>
-        <div class="audio-rec-wave">
+      <div class="audio-rec-indicator" part="audio-indicator">
+        <span class="audio-rec-dot" part="audio-dot"></span>
+        <div class="audio-rec-wave" part="audio-wave">
           ${bars.map(v => html `
-            <div class="audio-rec-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
+            <div class="audio-rec-bar" part="audio-bar" style=${styleMap({ height: `${Math.round(v * 24)}px` })}></div>
           `)}
         </div>
-        <span class="audio-rec-time">${duration}</span>
+        <span class="audio-rec-time" part="audio-time">${duration}</span>
       </div>
 
-      <span class="audio-rec-mode-label">
+      <span class="audio-rec-mode-label" part="audio-mode-label">
         ${isTranscribe ? data.i18n.audio.speechToTextLabel : data.i18n.audio.voiceMessageLabel}
       </span>
 
       <button
         class="audio-rec-send ${isTranscribe ? 'audio-rec-send--transcribe' : ''}"
+        part="audio-send-button"
         title="${sendTitle}"
         @click=${handlers.onAudioSend}
         aria-label="${sendTitle}"
@@ -243,19 +248,20 @@ function renderRecordingBar(data, handlers) {
  */
 function renderActionButtons(data, handlers) {
     return html `
-    <div class="action-buttons-row">
-      <div class="action-buttons-left">
+    <div class="action-buttons-row" part="actions">
+      <div class="action-buttons-left" part="actions-left">
         ${data.enableFileUpload ? renderFileUploadButton(data, handlers) : nothing}
         ${data.enableModuleSelection && data.moduleOptions.length > 0
         ? renderModuleSelector(data, handlers)
         : nothing}
       </div>
 
-      <div class="action-buttons-right">
+      <div class="action-buttons-right" part="actions-right">
         ${data.showAudioButton && !data.isQueryRunning ? html `
           <!-- Speech-to-text: mic + keyboard indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-transcribe"
             title="${data.i18n.audio.recordSpeechLabel}"
             ?disabled=${data.disabled}
             @click=${() => { var _a; return (_a = handlers.onAudioStart) === null || _a === void 0 ? void 0 : _a.call(handlers, 'transcribe'); }}
@@ -274,6 +280,7 @@ function renderActionButtons(data, handlers) {
           <!-- Voice message: mic + waveform indicator -->
           <button
             class="audio-mic-btn"
+            part="audio-mic-button audio-mic-voice"
             title="${data.i18n.audio.sendVoiceMessageLabel}"
             ?disabled=${data.disabled}
             @click=${() => { var _a; return (_a = handlers.onAudioStart) === null || _a === void 0 ? void 0 : _a.call(handlers, 'message'); }}
@@ -319,7 +326,7 @@ export function renderInputBox(data, handlers) {
         : nothing}
 
         <!-- Input area -->
-        <div class="input-row">
+        <div class="input-row" part="input-row">
           <div
             class="input-box__input"
             part="input"

package/dist/src/components/chatbot/templates/message.template.js

@@ -144,6 +144,7 @@ export function renderMessage(message, handlers, i18n) {
           size="small"
           color="#9ca3af"
           class="message__copy"
+          part="message-copy"
           @click=${() => handlers.onCopy(message)}
           @keydown=${(e) => handlers.onCopyKeydown(e, message)}
           title="${i18n.messages.copyMessageLabel}"
@@ -177,18 +178,18 @@ export function renderBotTypingIndicator(isTyping, loadingIndicator, loadingText
         return nothing;
     const indicatorContent = loadingIndicator === ChatbotLoadingType.Dots
         ? html `
-        <div class="dots">
+        <div class="dots" part="typing-dots">
           <span></span>
           <span></span>
           <span></span>
         </div>
       `
-        : html `<div class="spinner"></div>`;
+        : html `<div class="spinner" part="typing-spinner"></div>`;
     return html `
     <div class="message bot loading" part="typing-indicator">
-      <div class="message__content">
+      <div class="message__content" part="typing-content">
         ${indicatorContent}
-        ${loadingText ? html `<span class="loading-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
+        ${loadingText ? html `<span class="loading-text" part="typing-text">${loadingText.split('').map((char, i) => html `<span class="loading-text__char" style="animation-delay:${i * 0.04}s">${char === ' ' ? '\u00A0' : char}</span>`)}</span>` : nothing}
       </div>
     </div>
   `;
@@ -200,7 +201,7 @@ export function renderEmptyState(i18n) {
     return html `
     <div class="empty-state" part="empty-state">
       <slot name="empty-state">
-        <div class="empty-state__content">
+        <div class="empty-state__content" part="empty-state-content">
           ${i18n.messages.startConversationLabel}
         </div>
       </slot>

package/dist/src/components/chatbot/templates/thread-sidebar.template.js

@@ -26,6 +26,7 @@ function renderThreadItem(thread, data, handlers) {
         ${data.editingThreadId === thread.id && handlers.onRenameThread ? html `
           <input
             class="thread-item__rename-input"
+            part="thread-rename-input"
             type="text"
             .value=${thread.title || ''}
             @click=${(e) => e.stopPropagation()}
@@ -52,9 +53,9 @@ function renderThreadItem(thread, data, handlers) {
     }}
           />
         ` : html `
-          <div class="thread-item__title">${thread.title || data.i18n.threads.newChatTitle}</div>
+          <div class="thread-item__title" part="thread-title">${thread.title || data.i18n.threads.newChatTitle}</div>
         `}
-        <div class="thread-item__actions">
+        <div class="thread-item__actions" part="thread-actions">
           ${handlers.onBookmarkThread && thread.bookmarked ? html `
             <button
               class="thread-item__action-btn thread-item__bookmark--active"
@@ -111,10 +112,10 @@ function renderThreadItem(thread, data, handlers) {
           ` : ''}
         </div>
       </div>
-      <div class="thread-item__preview">
+      <div class="thread-item__preview" part="thread-preview">
         ${previewText}
       </div>
-      <div class="thread-item__timestamp">${formatTimestamp(thread.updatedAt)}</div>
+      <div class="thread-item__timestamp" part="thread-timestamp">${formatTimestamp(thread.updatedAt)}</div>
     </div>
   `;
 }
@@ -126,14 +127,14 @@ export function renderThreadSidebar(data, handlers) {
     const regularThreads = data.threads.filter(t => !t.bookmarked);
     return html `
     <div class="thread-sidebar" part="thread-sidebar">
-      <div class="thread-sidebar__header">
-        <h3>${data.i18n.threads.conversationsTitle}</h3>
+      <div class="thread-sidebar__header" part="thread-sidebar-header">
+        <h3 part="thread-sidebar-title">${data.i18n.threads.conversationsTitle}</h3>
       </div>
 
-      <div class="thread-list">
+      <div class="thread-list" part="thread-list">
         ${bookmarkedThreads.length > 0 ? html `
-          <div class="thread-section" part="thread-section-bookmarks">
-            <div class="thread-section__label">
+          <div class="thread-section" part="thread-section thread-section-bookmarks">
+            <div class="thread-section__label" part="thread-section-label">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
               ${data.i18n.threads.bookmarksLabel}
             </div>
@@ -142,11 +143,11 @@ export function renderThreadSidebar(data, handlers) {
         ` : nothing}
         ${regularThreads.length > 0 || bookmarkedThreads.length === 0 ? html `
           ${bookmarkedThreads.length > 0 ? html `
-            <div class="thread-section__label">${data.i18n.threads.allConversationsLabel}</div>
+            <div class="thread-section__label" part="thread-section-label">${data.i18n.threads.allConversationsLabel}</div>
           ` : nothing}
           ${repeat(regularThreads, t => t.id, t => renderThreadItem(t, data, handlers))}
           ${regularThreads.length === 0 && bookmarkedThreads.length === 0 ? html `
-            <p class="empty-msg">${data.i18n.threads.noConversationsLabel}</p>
+            <p class="empty-msg" part="thread-empty">${data.i18n.threads.noConversationsLabel}</p>
           ` : nothing}
         ` : nothing}
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A comprehensive collection of enterprise-class web components built with Lit and TypeScript",
   "type": "module",
   "main": "dist/nuralyui.bundle.js",