@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -4,20 +4,13 @@
  * SPDX-License-Identifier: MIT
  */
 import { css } from 'lit';
-/**
- * Breadcrumb component styles for the Hybrid UI Library
- * Using shared CSS variables from /src/shared/themes/
- *
- * This file contains all the styling for the nr-breadcrumb component with
- * clean CSS variable usage without local fallbacks and proper theme switching support.
- */
 export const styles = css `
   :host {
     display: block;
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-breadcrumb-font-size, 0.875rem);
-    line-height: var(--nuraly-breadcrumb-line-height, 1.5);
-    color: var(--nuraly-breadcrumb-item-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--nr-text-secondary, #525252);
   }
 
   .breadcrumb {
@@ -33,37 +26,37 @@ export const styles = css `
   .breadcrumb-item {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1, 0.25rem);
+    gap: 0.25rem;
     position: relative;
   }
 
   .breadcrumb-item:not(:last-child) {
-    margin-right: var(--nuraly-breadcrumb-separator-margin, 8px);
+    margin-right: 8px;
   }
 
   .breadcrumb-link {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1, 0.25rem);
-    color: var(--nuraly-breadcrumb-link-color);
+    gap: 0.25rem;
+    color: var(--nr-primary, #7c3aed);
     text-decoration: none;
-    transition: color var(--nuraly-transition-fast, 0.15s) ease;
+    transition: color 0.15s ease;
     cursor: pointer;
-    padding: var(--nuraly-spacing-1, 0.25rem) 0;
-    border-radius: var(--nuraly-border-radius-small, 2px);
+    padding: 0.25rem 0;
+    border-radius: 2px;
   }
 
   .breadcrumb-link:hover {
-    color: var(--nuraly-breadcrumb-link-hover-color);
+    color: #0353e9;
   }
 
   .breadcrumb-link:focus {
-    outline: var(--nuraly-focus-outline);
-    outline-offset: var(--nuraly-focus-outline-offset);
+    outline: 2px solid var(--nr-focus, #7c3aed);
+    outline-offset: 2px;
   }
 
   .breadcrumb-link.disabled {
-    color: var(--nuraly-color-text-disabled);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -71,83 +64,72 @@ export const styles = css `
   .breadcrumb-text {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1, 0.25rem);
-    color: var(--nuraly-breadcrumb-last-item-color);
-    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+    gap: 0.25rem;
+    color: var(--nr-text, #161616);
+    padding: 0.25rem 0;
   }
 
   .breadcrumb-separator {
     display: inline-flex;
     align-items: center;
-    color: var(--nuraly-breadcrumb-separator-color);
-    margin: 0 var(--nuraly-breadcrumb-separator-margin, 8px);
+    color: var(--nr-text-secondary, #525252);
+    margin: 0 8px;
     user-select: none;
-    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+    font-size: 14px;
   }
 
   .breadcrumb-icon {
     display: inline-flex;
     align-items: center;
-    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+    font-size: 14px;
   }
 
-  /* Dropdown menu styles */
-  .breadcrumb-item-with-menu {
-    position: relative;
-  }
-
-  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown {
-    display: block;
-  }
+  /* Dropdown menu */
+  .breadcrumb-item-with-menu { position: relative; }
+  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown { display: block; }
 
   .breadcrumb-dropdown {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
-    z-index: var(--nuraly-z-index-dropdown, 1000);
-    background-color: var(--nuraly-color-background-elevated);
-    border: 1px solid var(--nuraly-color-border);
-    border-radius: var(--nuraly-border-radius-medium, 4px);
-    box-shadow: var(--nuraly-shadow-dropdown);
+    z-index: 1000;
+    background-color: var(--nr-surface, #ffffff);
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     min-width: 160px;
-    margin-top: var(--nuraly-spacing-1, 0.25rem);
-    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+    margin-top: 0.25rem;
+    padding: 0.25rem 0;
   }
 
   .breadcrumb-menu-item {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-2, 0.5rem);
-    padding: var(--nuraly-spacing-2, 0.5rem) var(--nuraly-spacing-3, 0.75rem);
-    color: var(--nuraly-color-text);
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    color: var(--nr-text, #161616);
     text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--nuraly-transition-fast, 0.15s) ease;
+    transition: background-color 0.15s ease;
   }
 
   .breadcrumb-menu-item:hover {
-    background-color: var(--nuraly-color-background-hover);
+    background-color: var(--nr-bg-hover, #f4f4f4);
   }
 
   .breadcrumb-menu-item.disabled {
-    color: var(--nuraly-color-text-disabled);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  /* RTL Support */
-  :host([dir="rtl"]) .breadcrumb {
-    direction: rtl;
-  }
-
+  /* RTL */
+  :host([dir="rtl"]) .breadcrumb { direction: rtl; }
   :host([dir="rtl"]) .breadcrumb-item:not(:last-child) {
     margin-right: 0;
-    margin-left: var(--nuraly-breadcrumb-separator-margin, 8px);
-  }
-
-  :host([dir="rtl"]) .breadcrumb-separator {
-    transform: scaleX(-1);
+    margin-left: 8px;
   }
+  :host([dir="rtl"]) .breadcrumb-separator { transform: scaleX(-1); }
 `;
 //# sourceMappingURL=breadcrumb.style.js.map

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

@@ -1,15 +1,15 @@
-import{css as r,LitElement as a,nothing as e,html as n}from"lit";import{property as i,customElement as o}from"lit/decorators.js";import{map as t}from"lit/directives/map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";
+import{css as e,nothing as t,html as r,LitElement as i}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{map as a}from"lit/directives/map.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const s=r`
+ */const o=e`
   :host {
     display: block;
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-breadcrumb-font-size, 0.875rem);
-    line-height: var(--nuraly-breadcrumb-line-height, 1.5);
-    color: var(--nuraly-breadcrumb-item-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--nr-text-secondary, #525252);
   }
 
   .breadcrumb {
@@ -25,37 +25,37 @@ import{css as r,LitElement as a,nothing as e,html as n}from"lit";import{property
   .breadcrumb-item {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1, 0.25rem);
+    gap: 0.25rem;
     position: relative;
   }
 
   .breadcrumb-item:not(:last-child) {
-    margin-right: var(--nuraly-breadcrumb-separator-margin, 8px);
+    margin-right: 8px;
   }
 
   .breadcrumb-link {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1, 0.25rem);
-    color: var(--nuraly-breadcrumb-link-color);
+    gap: 0.25rem;
+    color: var(--nr-primary, #7c3aed);
     text-decoration: none;
-    transition: color var(--nuraly-transition-fast, 0.15s) ease;
+    transition: color 0.15s ease;
     cursor: pointer;
-    padding: var(--nuraly-spacing-1, 0.25rem) 0;
-    border-radius: var(--nuraly-border-radius-small, 2px);
+    padding: 0.25rem 0;
+    border-radius: 2px;
   }
 
   .breadcrumb-link:hover {
-    color: var(--nuraly-breadcrumb-link-hover-color);
+    color: #0353e9;
   }
 
   .breadcrumb-link:focus {
-    outline: var(--nuraly-focus-outline);
-    outline-offset: var(--nuraly-focus-outline-offset);
+    outline: 2px solid var(--nr-focus, #7c3aed);
+    outline-offset: 2px;
   }
 
   .breadcrumb-link.disabled {
-    color: var(--nuraly-color-text-disabled);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -63,151 +63,154 @@ import{css as r,LitElement as a,nothing as e,html as n}from"lit";import{property
   .breadcrumb-text {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1, 0.25rem);
-    color: var(--nuraly-breadcrumb-last-item-color);
-    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+    gap: 0.25rem;
+    color: var(--nr-text, #161616);
+    padding: 0.25rem 0;
   }
 
   .breadcrumb-separator {
     display: inline-flex;
     align-items: center;
-    color: var(--nuraly-breadcrumb-separator-color);
-    margin: 0 var(--nuraly-breadcrumb-separator-margin, 8px);
+    color: var(--nr-text-secondary, #525252);
+    margin: 0 8px;
     user-select: none;
-    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+    font-size: 14px;
   }
 
   .breadcrumb-icon {
     display: inline-flex;
     align-items: center;
-    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+    font-size: 14px;
   }
 
-  /* Dropdown menu styles */
-  .breadcrumb-item-with-menu {
-    position: relative;
-  }
-
-  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown {
-    display: block;
-  }
+  /* Dropdown menu */
+  .breadcrumb-item-with-menu { position: relative; }
+  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown { display: block; }
 
   .breadcrumb-dropdown {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
-    z-index: var(--nuraly-z-index-dropdown, 1000);
-    background-color: var(--nuraly-color-background-elevated);
-    border: 1px solid var(--nuraly-color-border);
-    border-radius: var(--nuraly-border-radius-medium, 4px);
-    box-shadow: var(--nuraly-shadow-dropdown);
+    z-index: 1000;
+    background-color: var(--nr-surface, #ffffff);
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     min-width: 160px;
-    margin-top: var(--nuraly-spacing-1, 0.25rem);
-    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+    margin-top: 0.25rem;
+    padding: 0.25rem 0;
   }
 
   .breadcrumb-menu-item {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-2, 0.5rem);
-    padding: var(--nuraly-spacing-2, 0.5rem) var(--nuraly-spacing-3, 0.75rem);
-    color: var(--nuraly-color-text);
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    color: var(--nr-text, #161616);
     text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--nuraly-transition-fast, 0.15s) ease;
+    transition: background-color 0.15s ease;
   }
 
   .breadcrumb-menu-item:hover {
-    background-color: var(--nuraly-color-background-hover);
+    background-color: var(--nr-bg-hover, #f4f4f4);
   }
 
   .breadcrumb-menu-item.disabled {
-    color: var(--nuraly-color-text-disabled);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  /* RTL Support */
-  :host([dir="rtl"]) .breadcrumb {
-    direction: rtl;
-  }
-
+  /* RTL */
+  :host([dir="rtl"]) .breadcrumb { direction: rtl; }
   :host([dir="rtl"]) .breadcrumb-item:not(:last-child) {
     margin-right: 0;
-    margin-left: var(--nuraly-breadcrumb-separator-margin, 8px);
-  }
-
-  :host([dir="rtl"]) .breadcrumb-separator {
-    transform: scaleX(-1);
+    margin-left: 8px;
   }
+  :host([dir="rtl"]) .breadcrumb-separator { transform: scaleX(-1); }
 `
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var c=function(r,a,e,n){for(var i,o=arguments.length,t=o<3?a:null===n?n=Object.getOwnPropertyDescriptor(a,e):n,l=r.length-1;l>=0;l--)(i=r[l])&&(t=(o<3?i(t):o>3?i(a,e,t):i(a,e))||t);return o>3&&t&&Object.defineProperty(a,e,t),t};let d=class extends(l(a)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.separator="/"}handleItemClick(r,a){r.disabled?a.preventDefault():(this.dispatchEvent(new CustomEvent("nr-breadcrumb-click",{detail:{item:r,event:a},bubbles:!0,composed:!0})),r.onClick&&r.onClick(a))}handleMenuItemClick(r,a){r.disabled?a.preventDefault():r.onClick&&r.onClick(a)}renderIcon(r){return r.icon?n`
+ */,c=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,r;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(r=this.mediaQuery)||void 0===r||r.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const r=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return r||((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))}},d=()=>{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(d())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(!d())return!0;let t=!0;for(const r of this.requiredComponents)if(!this.isComponentAvailable(r)){t=!1;const i=new Error(`Required component "${r}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(r,i):console.error(i.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)}},u=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var r;const i=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(r=this.tagName)||void 0===r?void 0:r.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,i)}dispatchInputEvent(e,t){const r=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,r)}dispatchFocusEvent(e,t){const r=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,r)}dispatchValidationEvent(e,t){var r;const i=Object.assign({target:t.target||this,value:t.value,isValid:null!==(r=t.isValid)&&void 0!==r&&r,error:t.error},t);this.dispatchCustomEvent(e,i)}dispatchActionEvent(e,t){const r=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,r)}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}},m=new Set,p=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const h=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(),r=e.styles;if(r){const e=b(r);e&&function(e,t,r){var i;if(!p.has(e)){const r=new CSSStyleSheet;r.replaceSync(t),p.set(e,r)}const n=p.get(e),s=`doc:${e}`;if(m.has(s)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],m.add(s)),r){let t=r;for(;t;){const r=t.getRootNode();if(!(r instanceof ShadowRoot))break;{const s=`shadow:${((null===(i=r.host)||void 0===i?void 0:i.tagName)||"").toLowerCase()}:${e}`;m.has(s)||(r.adoptedStyleSheets=[...r.adoptedStyleSheets,n],m.add(s)),t=r.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 b(e){return Array.isArray(e)?e.map(e=>b(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var v=function(e,t,r,i){for(var n,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i,o=e.length-1;o>=0;o--)(n=e[o])&&(a=(s<3?n(a):s>3?n(t,r,a):n(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let f=class extends((e=>l(c(u(h(e)))))(i)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.separator="/"}handleItemClick(e,t){e.disabled?t.preventDefault():(this.dispatchEvent(new CustomEvent("nr-breadcrumb-click",{detail:{item:e,event:t},bubbles:!0,composed:!0})),e.onClick&&e.onClick(t))}handleMenuItemClick(e,t){e.disabled?t.preventDefault():e.onClick&&e.onClick(t)}renderIcon(e){return e.icon?r`
       <nr-icon
+        part="icon"
         class="breadcrumb-icon"
-        name="${r.icon}"
-        type="${r.iconType||"regular"}"
+        name="${e.icon}"
+        type="${e.iconType||"regular"}"
       ></nr-icon>
-    `:e}renderSeparator(){return this.separatorConfig?this.separatorConfig.isIcon?n`
-          <span class="breadcrumb-separator">
+    `:t}renderSeparator(){return this.separatorConfig?this.separatorConfig.isIcon?r`
+          <span part="separator" class="breadcrumb-separator">
             <nr-icon
               name="${this.separatorConfig.separator}"
               type="${this.separatorConfig.iconType||"regular"}"
             ></nr-icon>
           </span>
-        `:n`<span class="breadcrumb-separator">${this.separatorConfig.separator}</span>`:n`<span class="breadcrumb-separator">${this.separator}</span>`}renderMenu(r){return n`
+        `:r`<span part="separator" class="breadcrumb-separator">${this.separatorConfig.separator}</span>`:r`<span part="separator" class="breadcrumb-separator">${this.separator}</span>`}renderMenu(e){return r`
       <div class="breadcrumb-dropdown">
-        ${t(r,r=>n`
-            ${r.href?n`
+        ${a(e,e=>r`
+            ${e.href?r`
                   <a
-                    class="breadcrumb-menu-item ${r.disabled?"disabled":""}"
-                    href="${r.href}"
-                    @click="${a=>this.handleMenuItemClick(r,a)}"
+                    class="breadcrumb-menu-item ${e.disabled?"disabled":""}"
+                    href="${e.href}"
+                    @click="${t=>this.handleMenuItemClick(e,t)}"
                   >
-                    ${r.icon?n`<nr-icon name="${r.icon}"></nr-icon>`:e}
-                    <span>${r.label}</span>
+                    ${e.icon?r`<nr-icon name="${e.icon}"></nr-icon>`:t}
+                    <span>${e.label}</span>
                   </a>
-                `:n`
+                `:r`
                   <div
-                    class="breadcrumb-menu-item ${r.disabled?"disabled":""}"
-                    @click="${a=>this.handleMenuItemClick(r,a)}"
+                    class="breadcrumb-menu-item ${e.disabled?"disabled":""}"
+                    @click="${t=>this.handleMenuItemClick(e,t)}"
                   >
-                    ${r.icon?n`<nr-icon name="${r.icon}"></nr-icon>`:e}
-                    <span>${r.label}</span>
+                    ${e.icon?r`<nr-icon name="${e.icon}"></nr-icon>`:t}
+                    <span>${e.label}</span>
                   </div>
                 `}
           `)}
       </div>
-    `}renderItem(r,a){const i=a===this.items.length-1,o=r.menu&&r.menu.length>0,t=n`
-      ${this.renderIcon(r)}
-      <span>${r.title}</span>
-    `;return n`
-      <li class="breadcrumb-item ${o?"breadcrumb-item-with-menu":""} ${r.className||""}">
-        ${i?n`<span class="breadcrumb-text">${t}</span>`:r.href?n`
+    `}renderItem(e,i){const n=i===this.items.length-1,s=e.menu&&e.menu.length>0,a=r`
+      ${this.renderIcon(e)}
+      <span>${e.title}</span>
+    `;return r`
+      <li part="item" class="breadcrumb-item ${s?"breadcrumb-item-with-menu":""} ${e.className||""}">
+        ${n?r`<span part="text" class="breadcrumb-text">${a}</span>`:e.href?r`
                 <a
-                  class="breadcrumb-link ${r.disabled?"disabled":""}"
-                  href="${r.href}"
-                  @click="${a=>this.handleItemClick(r,a)}"
+                  part="link"
+                  class="breadcrumb-link ${e.disabled?"disabled":""}"
+                  href="${e.href}"
+                  @click="${t=>this.handleItemClick(e,t)}"
                 >
-                  ${t}
+                  ${a}
                 </a>
-              `:n`
+              `:r`
                 <span
-                  class="breadcrumb-link ${r.disabled?"disabled":""}"
-                  @click="${a=>this.handleItemClick(r,a)}"
+                  part="link"
+                  class="breadcrumb-link ${e.disabled?"disabled":""}"
+                  @click="${t=>this.handleItemClick(e,t)}"
                 >
-                  ${t}
+                  ${a}
                 </span>
               `}
-        ${o?this.renderMenu(r.menu):e}
+        ${s?this.renderMenu(e.menu):t}
       </li>
-      ${i?e:this.renderSeparator()}
-    `}render(){return this.items&&0!==this.items.length?n`
-      <nav aria-label="Breadcrumb" class="breadcrumb">
-        ${t(this.items,(r,a)=>this.renderItem(r,a))}
+      ${n?t:this.renderSeparator()}
+    `}render(){return this.items&&0!==this.items.length?r`
+      <nav part="nav" aria-label="Breadcrumb" class="breadcrumb">
+        ${a(this.items,(e,t)=>this.renderItem(e,t))}
       </nav>
-    `:e}};d.styles=s,c([i({type:Array})],d.prototype,"items",void 0),c([i({type:String})],d.prototype,"separator",void 0),c([i({type:Object,attribute:"separator-config"})],d.prototype,"separatorConfig",void 0),d=c([o("nr-breadcrumb")],d);export{d as NrBreadcrumbElement};
+    `:t}};f.styles=o,f.useShadowDom=!0,v([n({type:Array})],f.prototype,"items",void 0),v([n({type:String})],f.prototype,"separator",void 0),v([n({type:Object,attribute:"separator-config"})],f.prototype,"separatorConfig",void 0),f=v([s("nr-breadcrumb")],f);export{f as NrBreadcrumbElement};