@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -1,103 +1,89 @@
-import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property as e,customElement as i}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as d}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";
+import{css as t,html as e,nothing as o,LitElement as r}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as s}from"lit/directives/style-map.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const s=r`
+ */const d=t`
   :host {
     display: inline-block;
     position: relative;
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-badge-text-font-size, 12px);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 12px;
     line-height: 1;
     vertical-align: middle;
   }
 
-  /* Badge wrapper for positioning */
   .badge-wrapper {
     position: relative;
     display: inline-block;
   }
 
-  /* Main badge indicator (count or dot) */
   .badge-indicator {
-    /* position: absolute; */
     top: 0;
     right: 0;
-    /* Temporarily disabled for demo - positions badge at exact corner */
-    /* transform: translate(50%, -50%); */
-    /* transform-origin: 100% 0%; */
-    z-index: var(--nuraly-badge-indicator-z-index, auto);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--nuraly-badge-indicator-height, 20px);
-    height: var(--nuraly-badge-indicator-height, 20px);
+    min-width: 20px;
+    height: 20px;
     padding: 0 6px;
-    font-size: var(--nuraly-badge-text-font-size, 12px);
-    font-weight: var(--nuraly-badge-text-font-weight, normal);
-    line-height: var(--nuraly-badge-indicator-height, 20px);
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 20px;
     white-space: nowrap;
     text-align: center;
-    background-color: var(--nuraly-color-error, #ff4d4f);
+    background-color: #ff4d4f;
     color: #fff;
     border-radius: 10px;
-    box-shadow: 0 0 0 1px var(--nuraly-color-background, #fff);
-    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    box-shadow: 0 0 0 1px var(--nr-bg, #ffffff);
+    transition: all 0.15s ease;
   }
 
-  /* Small size badge */
   .badge-indicator.small {
-    min-width: var(--nuraly-badge-indicator-height-sm, 14px);
-    height: var(--nuraly-badge-indicator-height-sm, 14px);
+    min-width: 14px;
+    height: 14px;
     padding: 0 4px;
-    font-size: var(--nuraly-badge-text-font-size-sm, 12px);
-    line-height: var(--nuraly-badge-indicator-height-sm, 14px);
+    font-size: 12px;
+    line-height: 14px;
     border-radius: 7px;
   }
 
-  /* Dot badge (small indicator without count) */
   .badge-indicator.dot {
-    min-width: var(--nuraly-badge-dot-size, 6px);
-    width: var(--nuraly-badge-dot-size, 6px);
-    height: var(--nuraly-badge-dot-size, 6px);
+    min-width: 6px;
+    width: 6px;
+    height: 6px;
     padding: 0;
     border-radius: 50%;
   }
 
-  /* Standalone badge (no children) */
   .badge-standalone {
     position: relative;
     display: inline-block;
     transform: none;
   }
 
-  /* Status badge styles */
   .badge-status {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-2, 0.5rem);
+    gap: 0.5rem;
   }
 
   .badge-status-dot {
-    width: var(--nuraly-badge-status-size, 6px);
-    height: var(--nuraly-badge-status-size, 6px);
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
     display: inline-block;
   }
 
   .badge-status-text {
-    color: var(--nuraly-color-text);
-    font-size: var(--nuraly-font-size-base, 14px);
+    color: var(--nr-text, #161616);
+    font-size: 14px;
   }
 
-  /* Status colors */
-  .badge-status-dot.success {
-    background-color: var(--nuraly-color-success, #52c41a);
-  }
+  .badge-status-dot.success { background-color: #52c41a; }
 
   .badge-status-dot.processing {
-    background-color: var(--nuraly-color-primary, #1890ff);
+    background-color: var(--nr-primary, #7c3aed);
     position: relative;
   }
 
@@ -108,35 +94,20 @@ import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property
     left: -1px;
     width: 100%;
     height: 100%;
-    border: 1px solid var(--nuraly-color-primary, #1890ff);
+    border: 1px solid var(--nr-primary, #7c3aed);
     border-radius: 50%;
     animation: badge-processing 1.2s infinite ease-in-out;
   }
 
   @keyframes badge-processing {
-    0% {
-      transform: scale(0.8);
-      opacity: 0.5;
-    }
-    100% {
-      transform: scale(2.4);
-      opacity: 0;
-    }
-  }
-
-  .badge-status-dot.default {
-    background-color: var(--nuraly-color-text-secondary, #8c8c8c);
+    0% { transform: scale(0.8); opacity: 0.5; }
+    100% { transform: scale(2.4); opacity: 0; }
   }
 
-  .badge-status-dot.error {
-    background-color: var(--nuraly-color-error, #ff4d4f);
-  }
-
-  .badge-status-dot.warning {
-    background-color: var(--nuraly-color-warning, #faad14);
-  }
+  .badge-status-dot.default { background-color: #8c8c8c; }
+  .badge-status-dot.error { background-color: #ff4d4f; }
+  .badge-status-dot.warning { background-color: #faad14; }
 
-  /* Color variants for badge indicator */
   .badge-indicator.pink { background-color: #eb2f96; }
   .badge-indicator.red { background-color: #f5222d; }
   .badge-indicator.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
@@ -151,32 +122,22 @@ import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property
   .badge-indicator.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
   .badge-indicator.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
 
-  /* Ribbon badge styles */
-  .badge-ribbon-wrapper {
-    position: relative;
-  }
+  .badge-ribbon-wrapper { position: relative; }
 
   .badge-ribbon {
     position: absolute;
-    top: var(--nuraly-spacing-2, 0.5rem);
+    top: 0.5rem;
     height: 22px;
-    padding: 0 var(--nuraly-spacing-2, 0.5rem);
+    padding: 0 0.5rem;
     color: #fff;
     line-height: 22px;
     white-space: nowrap;
-    background-color: var(--nuraly-color-primary, #1890ff);
+    background-color: var(--nr-primary, #7c3aed);
     border-radius: 2px;
   }
 
-  .badge-ribbon.start {
-    left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
-    padding-left: var(--nuraly-spacing-2, 0.5rem);
-  }
-
-  .badge-ribbon.end {
-    right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
-    padding-right: var(--nuraly-spacing-2, 0.5rem);
-  }
+  .badge-ribbon.start { left: -0.25rem; padding-left: 0.5rem; }
+  .badge-ribbon.end { right: -0.25rem; padding-right: 0.5rem; }
 
   .badge-ribbon::after {
     content: '';
@@ -201,27 +162,22 @@ import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property
     filter: brightness(0.7);
   }
 
-  /* Ribbon color variants */
-  .badge-ribbon.pink { background-color: #eb2f96; color: #fff; }
-  .badge-ribbon.red { background-color: #f5222d; color: #fff; }
+  .badge-ribbon.pink { background-color: #eb2f96; }
+  .badge-ribbon.red { background-color: #f5222d; }
   .badge-ribbon.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
-  .badge-ribbon.orange { background-color: #fa8c16; color: #fff; }
-  .badge-ribbon.cyan { background-color: #13c2c2; color: #fff; }
-  .badge-ribbon.green { background-color: #52c41a; color: #fff; }
-  .badge-ribbon.blue { background-color: #1890ff; color: #fff; }
-  .badge-ribbon.purple { background-color: #722ed1; color: #fff; }
-  .badge-ribbon.geekblue { background-color: #2f54eb; color: #fff; }
-  .badge-ribbon.magenta { background-color: #eb2f96; color: #fff; }
-  .badge-ribbon.volcano { background-color: #fa541c; color: #fff; }
+  .badge-ribbon.orange { background-color: #fa8c16; }
+  .badge-ribbon.cyan { background-color: #13c2c2; }
+  .badge-ribbon.green { background-color: #52c41a; }
+  .badge-ribbon.blue { background-color: #1890ff; }
+  .badge-ribbon.purple { background-color: #722ed1; }
+  .badge-ribbon.geekblue { background-color: #2f54eb; }
+  .badge-ribbon.magenta { background-color: #eb2f96; }
+  .badge-ribbon.volcano { background-color: #fa541c; }
   .badge-ribbon.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
   .badge-ribbon.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
 
-  /* Hidden state */
-  .badge-hidden {
-    display: none;
-  }
+  .badge-hidden { display: none; }
 
-  /* RTL Support */
   :host([dir="rtl"]) .badge-indicator {
     right: auto;
     left: 0;
@@ -229,49 +185,55 @@ import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property
     transform-origin: 0% 0%;
   }
 
-  :host([dir="rtl"]) .badge-ribbon.start {
-    left: auto;
-    right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
-  }
-
-  :host([dir="rtl"]) .badge-ribbon.end {
-    right: auto;
-    left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
-  }
+  :host([dir="rtl"]) .badge-ribbon.start { left: auto; right: -0.25rem; }
+  :host([dir="rtl"]) .badge-ribbon.end { right: auto; left: -0.25rem; }
 `
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var b=function(r,o,a,t){for(var e,i=arguments.length,n=i<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,a):t,d=r.length-1;d>=0;d--)(e=r[d])&&(n=(i<3?e(n):i>3?e(o,a,n):e(o,a))||n);return i>3&&n&&Object.defineProperty(o,a,n),n};let c=class extends(l(o)){constructor(){super(...arguments),this.dot=!1,this.overflowCount=99,this.showZero=!1,this.size="default",this.ribbonPlacement="end"}getDisplayCount(){if(void 0===this.count)return"";const r=Number(this.count);return r>this.overflowCount?`${this.overflowCount}+`:String(r)}shouldHideBadge(){return!this.dot&&(void 0===this.count||0===this.count&&!this.showZero)}getCustomColorStyle(){if(!this.color)return{};return!["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color)?{backgroundColor:this.color,color:"#fff"}:{}}getOffsetStyle(){if(!this.offset)return{};const[r,o]=this.offset;return{right:`calc(0px - ${r}px)`,top:`${o}px`}}renderStatusBadge(){return a`
-      <span class="badge-status">
-        <span class="badge-status-dot ${this.status}"></span>
-        ${this.text?a`<span class="badge-status-text">${this.text}</span>`:t}
+ */,c=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,o;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const o=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},l=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},b=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(l())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!l())return!0;let e=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){e=!1;const r=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,r):console.error(r.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},g=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const r=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,r)}dispatchInputEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,o)}dispatchFocusEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,o)}dispatchValidationEvent(t,e){var o;const r=Object.assign({target:e.target||this,value:e.value,isValid:null!==(o=e.isValid)&&void 0!==o&&o,error:e.error},e);this.dispatchCustomEvent(t,r)}dispatchActionEvent(t,e){const o=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,o)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},h=new Set,u=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const p=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),o=t.styles;if(o){const t=f(o);t&&function(t,e,o){var r;if(!u.has(t)){const o=new CSSStyleSheet;o.replaceSync(e),u.set(t,o)}const i=u.get(t),n=`doc:${t}`;if(h.has(n)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,i],h.add(n)),o){let e=o;for(;e;){const o=e.getRootNode();if(!(o instanceof ShadowRoot))break;{const n=`shadow:${((null===(r=o.host)||void 0===r?void 0:r.tagName)||"").toLowerCase()}:${t}`;h.has(n)||(o.adoptedStyleSheets=[...o.adoptedStyleSheets,i],h.add(n)),e=o.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function f(t){return Array.isArray(t)?t.map(t=>f(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var m=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,s=t.length-1;s>=0;s--)(i=t[s])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};let v=class extends((t=>b(c(g(p(t)))))(r)){constructor(){super(...arguments),this.dot=!1,this.overflowCount=99,this.showZero=!1,this.size="default",this.ribbonPlacement="end"}getDisplayCount(){if(void 0===this.count)return"";const t=Number(this.count);return t>this.overflowCount?`${this.overflowCount}+`:String(t)}shouldHideBadge(){return!this.dot&&(void 0===this.count||0===this.count&&!this.showZero)}getCustomColorStyle(){if(!this.color)return{};return!["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color)?{backgroundColor:this.color,color:"#fff"}:{}}getOffsetStyle(){if(!this.offset)return{};const[t,e]=this.offset;return{right:`calc(0px - ${t}px)`,top:`${e}px`}}renderStatusBadge(){return e`
+      <span part="status" class="badge-status">
+        <span part="status-dot" class="badge-status-dot ${this.status}"></span>
+        ${this.text?e`<span part="status-text" class="badge-status-text">${this.text}</span>`:o}
       </span>
-    `}renderRibbonBadge(){const r={"badge-ribbon":!0,[this.ribbonPlacement]:!0,[this.color||""]:!!this.color},o=this.getCustomColorStyle();return a`
-      <div class="badge-ribbon-wrapper">
+    `}renderRibbonBadge(){const t={"badge-ribbon":!0,[this.ribbonPlacement]:!0,[this.color||""]:!!this.color},o=this.getCustomColorStyle();return e`
+      <div part="ribbon-wrapper" class="badge-ribbon-wrapper">
         <slot></slot>
-        <div class=${n(r)} style=${d(o)}>
+        <div part="ribbon" class=${a(t)} style=${s(o)}>
           ${this.ribbon}
         </div>
       </div>
-    `}renderCountBadge(){const r=!(null!==this.querySelector(":not([slot])")),o=this.shouldHideBadge(),e=this.color&&["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color),i=Object.assign({"badge-indicator":!0,"badge-standalone":r,"badge-hidden":o,dot:this.dot,small:"small"===this.size},this.color&&e?{[this.color]:!0}:{}),l=Object.assign(Object.assign({},this.getCustomColorStyle()),this.getOffsetStyle()),s=this.dot?t:this.getDisplayCount();return r?a`
+    `}renderCountBadge(){const t=!(this.childNodes.length>0),r=this.shouldHideBadge(),i=this.color&&["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color),n=Object.assign({"badge-indicator":!0,"badge-standalone":t,"badge-hidden":r,dot:this.dot,small:"small"===this.size},this.color&&i?{[this.color]:!0}:{}),d=Object.assign(Object.assign({},this.getCustomColorStyle()),this.getOffsetStyle()),c=this.dot?o:this.getDisplayCount();return t?e`
         <span
-          class=${n(i)}
-          style=${d(l)}
+          part="indicator"
+          class=${a(n)}
+          style=${s(d)}
           title=${this.badgeTitle||""}
         >
-          ${s}
+          ${c}
         </span>
-      `:a`
-      <span class="badge-wrapper">
+      `:e`
+      <span part="wrapper" class="badge-wrapper">
         <slot></slot>
         <span
-          class=${n(i)}
-          style=${d(l)}
+          part="indicator"
+          class=${a(n)}
+          style=${s(d)}
           title=${this.badgeTitle||""}
         >
-          ${s}
+          ${c}
         </span>
       </span>
-    `}render(){return this.ribbon?this.renderRibbonBadge():this.status?this.renderStatusBadge():this.renderCountBadge()}};c.styles=s,b([e({type:Number})],c.prototype,"count",void 0),b([e({type:Boolean})],c.prototype,"dot",void 0),b([e({type:Number,attribute:"overflow-count"})],c.prototype,"overflowCount",void 0),b([e({type:Boolean,attribute:"show-zero"})],c.prototype,"showZero",void 0),b([e({type:Array})],c.prototype,"offset",void 0),b([e({type:String})],c.prototype,"color",void 0),b([e({type:String})],c.prototype,"size",void 0),b([e({type:String})],c.prototype,"status",void 0),b([e({type:String})],c.prototype,"text",void 0),b([e({type:String})],c.prototype,"badgeTitle",void 0),b([e({type:String})],c.prototype,"ribbon",void 0),b([e({type:String,attribute:"ribbon-placement"})],c.prototype,"ribbonPlacement",void 0),c=b([i("nr-badge")],c);export{c as NrBadgeElement};
+    `}render(){return this.ribbon?this.renderRibbonBadge():this.status?this.renderStatusBadge():this.renderCountBadge()}};v.styles=d,v.useShadowDom=!0,m([i({type:Number})],v.prototype,"count",void 0),m([i({type:Boolean})],v.prototype,"dot",void 0),m([i({type:Number,attribute:"overflow-count"})],v.prototype,"overflowCount",void 0),m([i({type:Boolean,attribute:"show-zero"})],v.prototype,"showZero",void 0),m([i({type:Array})],v.prototype,"offset",void 0),m([i({type:String})],v.prototype,"color",void 0),m([i({type:String})],v.prototype,"size",void 0),m([i({type:String})],v.prototype,"status",void 0),m([i({type:String})],v.prototype,"text",void 0),m([i({type:String})],v.prototype,"badgeTitle",void 0),m([i({type:String})],v.prototype,"ribbon",void 0),m([i({type:String,attribute:"ribbon-placement"})],v.prototype,"ribbonPlacement",void 0),v=m([n("nr-badge")],v);export{v as NrBadgeElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement, nothing, TemplateResult } from 'lit';
 import { BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSeparatorConfig } from './breadcrumb.types.js';
-declare const NrBreadcrumbElement_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 NrBreadcrumbElement_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;
 /**
  * # Breadcrumb Component
  *
@@ -60,18 +60,16 @@ declare const NrBreadcrumbElement_base: (new (...args: any[]) => import("@nuraly
  * @element nr-breadcrumb
  * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked
  *
- * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items
- * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items
- * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items
- * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links
- * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover
- * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item
- * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators
- * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators
- * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons
+ * @csspart nav - The root nav element wrapping all breadcrumb items
+ * @csspart item - Each li element in the breadcrumb list
+ * @csspart link - The anchor or span for a clickable breadcrumb item
+ * @csspart text - The span for the last (current) non-clickable breadcrumb item
+ * @csspart separator - The span element between breadcrumb items
+ * @csspart icon - The icon element rendered alongside a breadcrumb item title
  */
 export declare class NrBreadcrumbElement extends NrBreadcrumbElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     /**
      * Array of breadcrumb items to display

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

@@ -68,15 +68,12 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  * @element nr-breadcrumb
  * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked
  *
- * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items
- * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items
- * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items
- * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links
- * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover
- * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item
- * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators
- * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators
- * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons
+ * @csspart nav - The root nav element wrapping all breadcrumb items
+ * @csspart item - Each li element in the breadcrumb list
+ * @csspart link - The anchor or span for a clickable breadcrumb item
+ * @csspart text - The span for the last (current) non-clickable breadcrumb item
+ * @csspart separator - The span element between breadcrumb items
+ * @csspart icon - The icon element rendered alongside a breadcrumb item title
  */
 let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -132,6 +129,7 @@ let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(Li
         }
         return html `
       <nr-icon
+        part="icon"
         class="breadcrumb-icon"
         name="${item.icon}"
         type="${item.iconType || 'regular'}"
@@ -145,7 +143,7 @@ let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(Li
         if (this.separatorConfig) {
             if (this.separatorConfig.isIcon) {
                 return html `
-          <span class="breadcrumb-separator">
+          <span part="separator" class="breadcrumb-separator">
             <nr-icon
               name="${this.separatorConfig.separator}"
               type="${this.separatorConfig.iconType || 'regular'}"
@@ -153,9 +151,9 @@ let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(Li
           </span>
         `;
             }
-            return html `<span class="breadcrumb-separator">${this.separatorConfig.separator}</span>`;
+            return html `<span part="separator" class="breadcrumb-separator">${this.separatorConfig.separator}</span>`;
         }
-        return html `<span class="breadcrumb-separator">${this.separator}</span>`;
+        return html `<span part="separator" class="breadcrumb-separator">${this.separator}</span>`;
     }
     /**
      * Render dropdown menu for an item
@@ -203,12 +201,13 @@ let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(Li
       <span>${item.title}</span>
     `;
         return html `
-      <li class="breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}">
+      <li part="item" class="breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}">
         ${isLast
-            ? html `<span class="breadcrumb-text">${content}</span>`
+            ? html `<span part="text" class="breadcrumb-text">${content}</span>`
             : item.href
                 ? html `
                 <a
+                  part="link"
                   class="breadcrumb-link ${item.disabled ? 'disabled' : ''}"
                   href="${item.href}"
                   @click="${(e) => this.handleItemClick(item, e)}"
@@ -218,6 +217,7 @@ let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(Li
               `
                 : html `
                 <span
+                  part="link"
                   class="breadcrumb-link ${item.disabled ? 'disabled' : ''}"
                   @click="${(e) => this.handleItemClick(item, e)}"
                 >
@@ -234,13 +234,14 @@ let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(Li
             return nothing;
         }
         return html `
-      <nav aria-label="Breadcrumb" class="breadcrumb">
+      <nav part="nav" aria-label="Breadcrumb" class="breadcrumb">
         ${map(this.items, (item, index) => this.renderItem(item, index))}
       </nav>
     `;
     }
 };
 NrBreadcrumbElement.styles = styles;
+NrBreadcrumbElement.useShadowDom = true;
 __decorate([
     property({ type: Array })
 ], NrBreadcrumbElement.prototype, "items", void 0);

package/dist/src/components/breadcrumb/breadcrumb.style.d.ts

@@ -3,12 +3,5 @@
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-/**
- * 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 declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=breadcrumb.style.d.ts.map