@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,15 +1,15 @@
-import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{classMap as o}from"lit/directives/class-map.js";import{map as a}from"lit/directives/map.js";import{styleMap as m}from"lit/directives/style-map.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";
+import{css as e,html as t,nothing as i,LitElement as n}from"lit";import{property as r,customElement as o}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{map as l}from"lit/directives/map.js";import{styleMap as a}from"lit/directives/style-map.js";import{ifDefined as d}from"lit/directives/if-defined.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const c=e`
+ */const m=e`
   :host {
     display: block;
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-font-size-base, 14px);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 14px;
     line-height: 1.5715;
-    color: var(--nuraly-color-text);
+    color: var(--nr-text, #161616);
     min-height: 0;
   }
 
@@ -19,137 +19,90 @@ import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property
     list-style: none;
   }
 
-  /* Timeline Item */
   .timeline-item {
     position: relative;
-    padding-bottom: var(--nuraly-timeline-item-padding-bottom, 20px);
+    padding-bottom: 20px;
     list-style: none;
   }
+  .timeline-item:last-child { padding-bottom: 0; }
 
-  .timeline-item:last-child {
-    padding-bottom: 0;
-  }
-
-  /* Timeline Tail (connecting line) */
+  /* Tail */
   .timeline-item-tail {
     position: absolute;
     top: 10px;
     left: 4px;
     height: calc(100% - 10px);
-    border-left: var(--nuraly-timeline-tail-width, 2px) solid var(--nuraly-timeline-tail-color, rgba(5, 5, 5, 0.06));
+    border-left: 2px solid rgba(5, 5, 5, 0.06);
   }
+  .timeline-item:last-child .timeline-item-tail { display: none; }
+  .timeline-item.pending .timeline-item-tail { display: block; }
 
-  .timeline-item:last-child .timeline-item-tail {
-    display: none;
-  }
-
-  .timeline-item.pending .timeline-item-tail {
-    display: block;
-  }
-
-  /* Timeline Head (dot container) */
+  /* Dot */
   .timeline-item-head {
     position: absolute;
     top: 5.5px;
     left: 0;
     width: 10px;
     height: 10px;
-    background-color: var(--nuraly-timeline-dot-bg, #ffffff);
-    border: var(--nuraly-timeline-dot-border-width, 2px) solid transparent;
+    background-color: var(--nr-bg, #ffffff);
+    border: 2px solid transparent;
     border-radius: 50%;
   }
 
-  /* Timeline Head Colors */
-  .timeline-item-head.blue {
-    border-color: var(--nuraly-color-primary, #1890ff);
-  }
+  .timeline-item-head.blue { border-color: var(--nr-primary, #7c3aed); }
+  .timeline-item-head.red { border-color: var(--nr-danger, #da1e28); }
+  .timeline-item-head.green { border-color: var(--nr-success, #198038); }
+  .timeline-item-head.gray { border-color: var(--nr-disabled, #c6c6c6); }
 
-  .timeline-item-head.red {
-    border-color: var(--nuraly-color-error, #ff4d4f);
-  }
-
-  .timeline-item-head.green {
-    border-color: var(--nuraly-color-success, #52c41a);
-  }
-
-  .timeline-item-head.gray {
-    border-color: var(--nuraly-color-text-disabled, #d9d9d9);
-  }
-
-  /* Custom Head (with icon or custom content) */
+  /* Custom head (icon) */
   .timeline-item-head-custom {
     position: absolute;
-    top: 5.5px;
-    left: 0;
+    top: 10px;
+    left: 5px;
     width: auto;
     height: auto;
-    margin-top: 0;
     padding: 3px 1px;
     line-height: 1;
     text-align: center;
     border: 0;
     border-radius: 0;
     transform: translate(-50%, -50%);
-    top: 10px;
-    left: 5px;
   }
-
   .timeline-item-head-custom nr-icon {
     font-size: 16px;
     vertical-align: middle;
   }
 
-  /* Timeline Content */
+  /* Content */
   .timeline-item-content {
     position: relative;
     margin: 0 0 0 26px;
     word-break: break-word;
   }
 
-  /* Timeline Label */
+  /* Label */
   .timeline-item-label {
     position: absolute;
-    top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 / 2);
+    top: calc(-1 * 14px * 1.5715 / 2);
     width: calc(50% - 12px);
     text-align: right;
-    color: var(--nuraly-color-text-secondary, rgba(0, 0, 0, 0.45));
-  }
-
-  /* Pending Item */
-  .timeline-item.pending .timeline-item-head {
-    border-color: var(--nuraly-color-primary, #1890ff);
-  }
-
-  .timeline-item.pending .timeline-item-content {
-    color: var(--nuraly-color-text-secondary, rgba(0, 0, 0, 0.45));
+    color: var(--nr-text-secondary, #525252);
   }
 
-  /* Right Mode */
-  :host([mode="right"]) .timeline-item-tail {
-    left: auto;
-    right: 4px;
-  }
+  /* Pending */
+  .timeline-item.pending .timeline-item-head { border-color: var(--nr-primary, #7c3aed); }
+  .timeline-item.pending .timeline-item-content { color: var(--nr-text-secondary, #525252); }
 
+  /* Right mode */
+  :host([mode="right"]) .timeline-item-tail { left: auto; right: 4px; }
   :host([mode="right"]) .timeline-item-head,
-  :host([mode="right"]) .timeline-item-head-custom {
-    left: auto;
-    right: 0;
-  }
-
-  :host([mode="right"]) .timeline-item-head-custom {
-    right: 5px;
-  }
-
-  :host([mode="right"]) .timeline-item-content {
-    margin: 0 26px 0 0;
-    text-align: right;
-  }
+  :host([mode="right"]) .timeline-item-head-custom { left: auto; right: 0; }
+  :host([mode="right"]) .timeline-item-head-custom { right: 5px; }
+  :host([mode="right"]) .timeline-item-content { margin: 0 26px 0 0; text-align: right; }
 
-  /* Alternate Mode */
+  /* Alternate mode */
   :host([mode="alternate"]) .timeline,
-  :host([mode="alternate"]) .timeline-item {
-    display: block;
-  }
+  :host([mode="alternate"]) .timeline-item { display: block; }
 
   :host([mode="alternate"]) .timeline-item-tail,
   :host([mode="alternate"]) .timeline-item-head,
@@ -157,21 +110,14 @@ import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property
     left: 50%;
     margin-left: -1px;
   }
-
-  :host([mode="alternate"]) .timeline-item-head {
-    margin-left: -5px;
-  }
-
-  :host([mode="alternate"]) .timeline-item-head-custom {
-    margin-left: -5px;
-  }
+  :host([mode="alternate"]) .timeline-item-head { margin-left: -5px; }
+  :host([mode="alternate"]) .timeline-item-head-custom { margin-left: -5px; }
 
   :host([mode="alternate"]) .timeline-item-left .timeline-item-content {
     left: calc(50% - 4px);
     width: calc(50% - 14px);
     text-align: left;
   }
-
   :host([mode="alternate"]) .timeline-item-right .timeline-item-content {
     left: auto;
     right: calc(50% - 4px);
@@ -179,83 +125,74 @@ import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property
     text-align: right;
   }
 
-  /* Alternate with Label */
   :host([mode="alternate"]) .timeline-item-left .timeline-item-label {
     left: calc(50% + 14px);
     width: calc(50% - 14px);
     text-align: left;
   }
-
   :host([mode="alternate"]) .timeline-item-right .timeline-item-label {
     right: calc(50% + 14px);
     width: calc(50% - 14px);
     text-align: right;
   }
 
-  /* Reverse Mode */
+  /* Reverse */
   :host([reverse]) .timeline {
     display: flex;
     flex-direction: column-reverse;
   }
 
-  /* RTL Support */
-  :host([dir="rtl"]) .timeline-item-tail {
-    left: auto;
-    right: 4px;
-  }
-
+  /* RTL */
+  :host([dir="rtl"]) .timeline-item-tail { left: auto; right: 4px; }
   :host([dir="rtl"]) .timeline-item-head,
-  :host([dir="rtl"]) .timeline-item-head-custom {
-    left: auto;
-    right: 0;
-  }
-
-  :host([dir="rtl"]) .timeline-item-content {
-    margin: 0 26px 0 0;
-  }
-
-  :host([dir="rtl"]) .timeline-item-label {
-    text-align: left;
-  }
-
-  /* Dark theme support */
-  :host([data-theme*="dark"]) .timeline-item-tail {
-    border-color: var(--nuraly-timeline-tail-color, rgba(255, 255, 255, 0.12));
-  }
+  :host([dir="rtl"]) .timeline-item-head-custom { left: auto; right: 0; }
+  :host([dir="rtl"]) .timeline-item-content { margin: 0 26px 0 0; }
+  :host([dir="rtl"]) .timeline-item-label { text-align: left; }
 `
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var h=function(e,t,i,l){for(var r,n=arguments.length,o=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o};let p=class extends(s(t)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.mode="left",this.items=[],this.reverse=!1}getItemPosition(e,t){return"alternate"!==this.mode?"left":e.position?e.position:t%2==0?"left":"right"}isPresetColor(e){if(!e)return!1;return["blue","red","green","gray"].includes(e)}getCustomColorStyle(e){return!e||this.isPresetColor(e)?{}:{borderColor:e}}renderDot(e){const t=!!e.dot,l=e.color||"blue",r=this.isPresetColor(l);if(t)return i`
-        <div class="timeline-item-head-custom">
+ */,h=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},c=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},p=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!c())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const n=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,n):console.error(n.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 i;const n=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,n)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const n=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,n)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},g=new Set,v=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=b(i);e&&function(e,t,i){var n;if(!v.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),v.set(e,i)}const r=v.get(e),o=`doc:${e}`;if(g.has(o)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,r],g.add(o)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const o=`shadow:${((null===(n=i.host)||void 0===n?void 0:n.tagName)||"").toLowerCase()}:${e}`;g.has(o)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,r],g.add(o)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function 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 x=function(e,t,i,n){for(var r,o=arguments.length,s=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n,l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};let y=class extends((e=>p(h(u(f(e)))))(n)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.mode="left",this.items=[],this.reverse=!1}getItemPosition(e,t){return"alternate"!==this.mode?"left":e.position?e.position:t%2==0?"left":"right"}isPresetColor(e){if(!e)return!1;return["blue","red","green","gray"].includes(e)}getCustomColorStyle(e){return!e||this.isPresetColor(e)?{}:{borderColor:e}}renderDot(e){const i=!!e.dot,n=e.color||"blue",r=this.isPresetColor(n);if(i)return t`
+        <div part="dot-custom" class="timeline-item-head-custom">
           <nr-icon name="${d(e.dot)}"></nr-icon>
         </div>
-      `;const n={"timeline-item-head":!0,[l]:r},a=this.getCustomColorStyle(l);return i`
-      <div class=${o(n)} style=${m(a)}></div>
-    `}renderItem(e,t){const r=this.getItemPosition(e,t),n={"timeline-item":!0,"timeline-item-left":"left"===r,"timeline-item-right":"right"===r,[e.className||""]:!!e.className};return i`
-      <li class=${o(n)}>
-        <div class="timeline-item-tail"></div>
+      `;const o={"timeline-item-head":!0,[n]:r},l=this.getCustomColorStyle(n);return t`
+      <div part="dot" class=${s(o)} style=${a(l)}></div>
+    `}renderItem(e,n){const r=this.getItemPosition(e,n),o={"timeline-item":!0,"timeline-item-left":"left"===r,"timeline-item-right":"right"===r,[e.className||""]:!!e.className};return t`
+      <li part="item" class=${s(o)}>
+        <div part="tail" class="timeline-item-tail"></div>
         ${this.renderDot(e)}
-        <div class="timeline-item-content">
-          ${e.label&&"alternate"===this.mode?i`<div class="timeline-item-label">${e.label}</div>`:l}
+        <div part="content" class="timeline-item-content">
+          ${e.label&&"alternate"===this.mode?t`<div part="label" class="timeline-item-label">${e.label}</div>`:i}
           <div>${e.children}</div>
-          ${e.label&&"alternate"!==this.mode?i`<div style="color: var(--nuraly-color-text-secondary); margin-top: 4px;">${e.label}</div>`:l}
+          ${e.label&&"alternate"!==this.mode?t`<div part="label" style="color: #525252; margin-top: 4px;">${e.label}</div>`:i}
         </div>
       </li>
-    `}renderPendingItem(){const e="string"==typeof this.pending?this.pending:"Loading...",t=this.pendingDot||"loading";return i`
+    `}renderPendingItem(){const e="string"==typeof this.pending?this.pending:"Loading...",i=this.pendingDot||"loading";return t`
       <li class="timeline-item pending">
         <div class="timeline-item-tail"></div>
         <div class="timeline-item-head-custom">
-          <nr-icon name="${t}"></nr-icon>
+          <nr-icon name="${i}"></nr-icon>
         </div>
         <div class="timeline-item-content">
           ${e}
         </div>
       </li>
-    `}render(){return this.items&&0!==this.items.length?i`
-      <ul class="timeline">
-        ${a(this.items,(e,t)=>this.renderItem(e,t))}
-        ${this.pending?this.renderPendingItem():l}
+    `}render(){return this.items&&0!==this.items.length?t`
+      <ul part="list" class="timeline">
+        ${l(this.items,(e,t)=>this.renderItem(e,t))}
+        ${this.pending?this.renderPendingItem():i}
       </ul>
-    `:l}};p.styles=c,h([r({type:String,reflect:!0})],p.prototype,"mode",void 0),h([r({type:Array})],p.prototype,"items",void 0),h([r({type:String})],p.prototype,"pending",void 0),h([r({type:String,attribute:"pending-dot"})],p.prototype,"pendingDot",void 0),h([r({type:Boolean,reflect:!0})],p.prototype,"reverse",void 0),p=h([n("nr-timeline")],p);export{p as NrTimelineElement};
+    `:i}};y.styles=m,y.useShadowDom=!0,x([r({type:String,reflect:!0})],y.prototype,"mode",void 0),x([r({type:Array})],y.prototype,"items",void 0),x([r({type:String})],y.prototype,"pending",void 0),x([r({type:String,attribute:"pending-dot"})],y.prototype,"pendingDot",void 0),x([r({type:Boolean,reflect:!0})],y.prototype,"reverse",void 0),y=x([o("nr-timeline")],y);export{y as NrTimelineElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement, nothing, TemplateResult } from 'lit';
 import { TimelineMode, TimelineItem } from './timeline.types.js';
-declare const NrTimelineElement_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 NrTimelineElement_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;
 /**
  * # Timeline Component
  *
@@ -45,14 +45,17 @@ declare const NrTimelineElement_base: (new (...args: any[]) => import("@nuralyui
  *
  * @element nr-timeline
  *
- * @cssproperty --nuraly-timeline-item-padding-bottom - Bottom padding of timeline item
- * @cssproperty --nuraly-timeline-tail-width - Width of connecting line
- * @cssproperty --nuraly-timeline-tail-color - Color of connecting line
- * @cssproperty --nuraly-timeline-dot-bg - Background color of dot
- * @cssproperty --nuraly-timeline-dot-border-width - Border width of dot
+ * @csspart list - The root ul element containing all timeline items
+ * @csspart item - Each li element representing a single timeline event
+ * @csspart tail - The vertical connecting line below each item dot
+ * @csspart dot - The colored dot indicator for each item (when no custom icon)
+ * @csspart dot-custom - The custom icon wrapper for items with a custom dot icon
+ * @csspart content - The text content area of each timeline item
+ * @csspart label - The timestamp/label text of a timeline item
  */
 export declare class NrTimelineElement extends NrTimelineElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     /**
      * Timeline display mode

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

@@ -56,11 +56,13 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  *
  * @element nr-timeline
  *
- * @cssproperty --nuraly-timeline-item-padding-bottom - Bottom padding of timeline item
- * @cssproperty --nuraly-timeline-tail-width - Width of connecting line
- * @cssproperty --nuraly-timeline-tail-color - Color of connecting line
- * @cssproperty --nuraly-timeline-dot-bg - Background color of dot
- * @cssproperty --nuraly-timeline-dot-border-width - Border width of dot
+ * @csspart list - The root ul element containing all timeline items
+ * @csspart item - Each li element representing a single timeline event
+ * @csspart tail - The vertical connecting line below each item dot
+ * @csspart dot - The colored dot indicator for each item (when no custom icon)
+ * @csspart dot-custom - The custom icon wrapper for items with a custom dot icon
+ * @csspart content - The text content area of each timeline item
+ * @csspart label - The timestamp/label text of a timeline item
  */
 let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -120,7 +122,7 @@ let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitEle
         const isPreset = this.isPresetColor(color);
         if (hasCustomDot) {
             return html `
-        <div class="timeline-item-head-custom">
+        <div part="dot-custom" class="timeline-item-head-custom">
           <nr-icon name="${ifDefined(item.dot)}"></nr-icon>
         </div>
       `;
@@ -131,7 +133,7 @@ let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitEle
         };
         const headStyle = this.getCustomColorStyle(color);
         return html `
-      <div class=${classMap(headClasses)} style=${styleMap(headStyle)}></div>
+      <div part="dot" class=${classMap(headClasses)} style=${styleMap(headStyle)}></div>
     `;
     }
     /**
@@ -146,16 +148,16 @@ let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitEle
             [item.className || '']: !!item.className,
         };
         return html `
-      <li class=${classMap(itemClasses)}>
-        <div class="timeline-item-tail"></div>
+      <li part="item" class=${classMap(itemClasses)}>
+        <div part="tail" class="timeline-item-tail"></div>
         ${this.renderDot(item)}
-        <div class="timeline-item-content">
+        <div part="content" class="timeline-item-content">
           ${item.label && this.mode === "alternate" /* TimelineMode.Alternate */
-            ? html `<div class="timeline-item-label">${item.label}</div>`
+            ? html `<div part="label" class="timeline-item-label">${item.label}</div>`
             : nothing}
           <div>${item.children}</div>
           ${item.label && this.mode !== "alternate" /* TimelineMode.Alternate */
-            ? html `<div style="color: var(--nuraly-color-text-secondary); margin-top: 4px;">${item.label}</div>`
+            ? html `<div part="label" style="color: #525252; margin-top: 4px;">${item.label}</div>`
             : nothing}
         </div>
       </li>
@@ -184,7 +186,7 @@ let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitEle
             return nothing;
         }
         return html `
-      <ul class="timeline">
+      <ul part="list" class="timeline">
         ${map(this.items, (item, index) => this.renderItem(item, index))}
         ${this.pending ? this.renderPendingItem() : nothing}
       </ul>
@@ -192,6 +194,7 @@ let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitEle
     }
 };
 NrTimelineElement.styles = styles;
+NrTimelineElement.useShadowDom = true;
 __decorate([
     property({ type: String, reflect: true })
 ], NrTimelineElement.prototype, "mode", void 0);

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

@@ -3,12 +3,5 @@
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-/**
- * Timeline component styles for the Hybrid UI Library
- * Using shared CSS variables from /src/shared/themes/
- *
- * This file contains all the styling for the nr-timeline component with
- * clean CSS variable usage without local fallbacks and proper theme switching support.
- */
 export declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=timeline.style.d.ts.map