@nuralyui/timeline 0.0.1

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './timeline.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,2 @@
+export * from './timeline.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './timeline.component.js';\n"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@nuralyui/timeline",
+    "version": "0.0.1",
+    "description": "Timeline component for NuralyUI library",
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "timeline.bundled.js",
+        "bundle.js"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/NuralyUI/NuralyUI.git",
+        "directory": "src/components/timeline"
+    },
+    "keywords": [
+        "timeline",
+        "chronology",
+        "history",
+        "events",
+        "vertical-timeline",
+        "web-components",
+        "lit-element",
+        "nuralyui",
+        "ui-components"
+    ],
+    "author": "Nuraly, Laabidi Aymen",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/NuralyUI/NuralyUI/issues"
+    },
+    "homepage": "https://github.com/NuralyUI/NuralyUI#readme"
+}

package/react.d.ts

@@ -0,0 +1,3 @@
+import { NrTimelineElement } from './timeline.component.js';
+export declare const NrTimeline: import("@lit-labs/react").ReactWebComponent<NrTimelineElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.js

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrTimelineElement } from './timeline.component.js';
+export const NrTimeline = createComponent({
+    tagName: 'nr-timeline',
+    elementClass: NrTimelineElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/timeline/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrTimelineElement } from './timeline.component.js';\nexport const NrTimeline = createComponent({\n  tagName: 'nr-timeline',\n  elementClass: NrTimelineElement,\n  react: React,\n  events: {},\n});\n"]}

package/timeline.component.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { TimelineMode, TimelineItem } from './timeline.types.js';
+import '../icon/index.js';
+declare const NrTimelineElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * # Timeline Component
+ *
+ * Vertical display timeline for showing a series of events in chronological order.
+ *
+ * ## Features
+ * - Multiple display modes (left, right, alternate)
+ * - Custom dot colors and icons
+ * - Label support for timestamps
+ * - Pending state for ongoing activities
+ * - Reverse order option
+ * - Custom positioning in alternate mode
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic timeline -->
+ * <nr-timeline .items="${[
+ *   { children: 'Create a services site', label: '2015-09-01' },
+ *   { children: 'Solve initial network problems', label: '2015-09-01' },
+ *   { children: 'Technical testing', label: '2015-09-01' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- With custom colors -->
+ * <nr-timeline .items="${[
+ *   { children: 'Success', color: 'green' },
+ *   { children: 'Error', color: 'red' },
+ *   { children: 'Processing', color: 'blue' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- Alternate mode -->
+ * <nr-timeline mode="alternate" .items="${items}"></nr-timeline>
+ *
+ * <!-- With pending state -->
+ * <nr-timeline pending="Recording..." .items="${items}"></nr-timeline>
+ * ```
+ *
+ * @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
+ */
+export declare class NrTimelineElement extends NrTimelineElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /**
+     * Timeline display mode
+     */
+    mode: TimelineMode;
+    /**
+     * Timeline items array
+     */
+    items: TimelineItem[];
+    /**
+     * Pending state - shows a pending item at the end
+     */
+    pending?: string;
+    /**
+     * Custom pending dot icon
+     */
+    pendingDot?: string;
+    /**
+     * Reverse timeline order
+     */
+    reverse: boolean;
+    /**
+     * Get item position for alternate mode
+     */
+    private getItemPosition;
+    /**
+     * Check if color is a preset color
+     */
+    private isPresetColor;
+    /**
+     * Get custom color style for dot
+     */
+    private getCustomColorStyle;
+    /**
+     * Render timeline item dot
+     */
+    private renderDot;
+    /**
+     * Render timeline item
+     */
+    private renderItem;
+    /**
+     * Render pending item
+     */
+    private renderPendingItem;
+    render(): TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-timeline': NrTimelineElement;
+    }
+}
+export {};
+//# sourceMappingURL=timeline.component.d.ts.map

package/timeline.component.js

@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styles } from './timeline.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import '../icon/index.js';
+/**
+ * # Timeline Component
+ *
+ * Vertical display timeline for showing a series of events in chronological order.
+ *
+ * ## Features
+ * - Multiple display modes (left, right, alternate)
+ * - Custom dot colors and icons
+ * - Label support for timestamps
+ * - Pending state for ongoing activities
+ * - Reverse order option
+ * - Custom positioning in alternate mode
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic timeline -->
+ * <nr-timeline .items="${[
+ *   { children: 'Create a services site', label: '2015-09-01' },
+ *   { children: 'Solve initial network problems', label: '2015-09-01' },
+ *   { children: 'Technical testing', label: '2015-09-01' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- With custom colors -->
+ * <nr-timeline .items="${[
+ *   { children: 'Success', color: 'green' },
+ *   { children: 'Error', color: 'red' },
+ *   { children: 'Processing', color: 'blue' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- Alternate mode -->
+ * <nr-timeline mode="alternate" .items="${items}"></nr-timeline>
+ *
+ * <!-- With pending state -->
+ * <nr-timeline pending="Recording..." .items="${items}"></nr-timeline>
+ * ```
+ *
+ * @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
+ */
+let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        /**
+         * Timeline display mode
+         */
+        this.mode = "left" /* TimelineMode.Left */;
+        /**
+         * Timeline items array
+         */
+        this.items = [];
+        /**
+         * Reverse timeline order
+         */
+        this.reverse = false;
+    }
+    /**
+     * Get item position for alternate mode
+     */
+    getItemPosition(item, index) {
+        if (this.mode !== "alternate" /* TimelineMode.Alternate */) {
+            return "left" /* TimelineItemPosition.Left */;
+        }
+        if (item.position) {
+            return item.position;
+        }
+        return index % 2 === 0 ? "left" /* TimelineItemPosition.Left */ : "right" /* TimelineItemPosition.Right */;
+    }
+    /**
+     * Check if color is a preset color
+     */
+    isPresetColor(color) {
+        if (!color)
+            return false;
+        const presetColors = ['blue', 'red', 'green', 'gray'];
+        return presetColors.includes(color);
+    }
+    /**
+     * Get custom color style for dot
+     */
+    getCustomColorStyle(color) {
+        if (!color || this.isPresetColor(color)) {
+            return {};
+        }
+        return {
+            borderColor: color,
+        };
+    }
+    /**
+     * Render timeline item dot
+     */
+    renderDot(item) {
+        const hasCustomDot = !!item.dot;
+        const color = item.color || "blue" /* TimelineItemColor.Blue */;
+        const isPreset = this.isPresetColor(color);
+        if (hasCustomDot) {
+            return html `
+        <div class="timeline-item-head-custom">
+          <nr-icon name="${ifDefined(item.dot)}"></nr-icon>
+        </div>
+      `;
+        }
+        const headClasses = {
+            'timeline-item-head': true,
+            [color]: isPreset,
+        };
+        const headStyle = this.getCustomColorStyle(color);
+        return html `
+      <div class=${classMap(headClasses)} style=${styleMap(headStyle)}></div>
+    `;
+    }
+    /**
+     * Render timeline item
+     */
+    renderItem(item, index) {
+        const position = this.getItemPosition(item, index);
+        const itemClasses = {
+            'timeline-item': true,
+            'timeline-item-left': position === "left" /* TimelineItemPosition.Left */,
+            'timeline-item-right': position === "right" /* TimelineItemPosition.Right */,
+            [item.className || '']: !!item.className,
+        };
+        return html `
+      <li class=${classMap(itemClasses)}>
+        <div class="timeline-item-tail"></div>
+        ${this.renderDot(item)}
+        <div class="timeline-item-content">
+          ${item.label && this.mode === "alternate" /* TimelineMode.Alternate */
+            ? html `<div 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>`
+            : nothing}
+        </div>
+      </li>
+    `;
+    }
+    /**
+     * Render pending item
+     */
+    renderPendingItem() {
+        const pendingContent = typeof this.pending === 'string' ? this.pending : 'Loading...';
+        const pendingIconName = this.pendingDot || 'loading';
+        return html `
+      <li class="timeline-item pending">
+        <div class="timeline-item-tail"></div>
+        <div class="timeline-item-head-custom">
+          <nr-icon name="${pendingIconName}"></nr-icon>
+        </div>
+        <div class="timeline-item-content">
+          ${pendingContent}
+        </div>
+      </li>
+    `;
+    }
+    render() {
+        if (!this.items || this.items.length === 0) {
+            return nothing;
+        }
+        return html `
+      <ul class="timeline">
+        ${map(this.items, (item, index) => this.renderItem(item, index))}
+        ${this.pending ? this.renderPendingItem() : nothing}
+      </ul>
+    `;
+    }
+};
+NrTimelineElement.styles = styles;
+__decorate([
+    property({ type: String, reflect: true })
+], NrTimelineElement.prototype, "mode", void 0);
+__decorate([
+    property({ type: Array })
+], NrTimelineElement.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], NrTimelineElement.prototype, "pending", void 0);
+__decorate([
+    property({ type: String, attribute: 'pending-dot' })
+], NrTimelineElement.prototype, "pendingDot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTimelineElement.prototype, "reverse", void 0);
+NrTimelineElement = __decorate([
+    customElement('nr-timeline')
+], NrTimelineElement);
+export { NrTimelineElement };
+//# sourceMappingURL=timeline.component.js.map

package/timeline.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.component.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './timeline.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n    TimelineMode,\n    TimelineItem,\n    TimelineItemColor,\n    TimelineItemPosition\n} from './timeline.types.js';\nimport '../icon/index.js';\n\n/**\n * # Timeline Component\n * \n * Vertical display timeline for showing a series of events in chronological order.\n * \n * ## Features\n * - Multiple display modes (left, right, alternate)\n * - Custom dot colors and icons\n * - Label support for timestamps\n * - Pending state for ongoing activities\n * - Reverse order option\n * - Custom positioning in alternate mode\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic timeline -->\n * <nr-timeline .items=\"${[\n *   { children: 'Create a services site', label: '2015-09-01' },\n *   { children: 'Solve initial network problems', label: '2015-09-01' },\n *   { children: 'Technical testing', label: '2015-09-01' }\n * ]}\"></nr-timeline>\n * \n * <!-- With custom colors -->\n * <nr-timeline .items=\"${[\n *   { children: 'Success', color: 'green' },\n *   { children: 'Error', color: 'red' },\n *   { children: 'Processing', color: 'blue' }\n * ]}\"></nr-timeline>\n * \n * <!-- Alternate mode -->\n * <nr-timeline mode=\"alternate\" .items=\"${items}\"></nr-timeline>\n * \n * <!-- With pending state -->\n * <nr-timeline pending=\"Recording...\" .items=\"${items}\"></nr-timeline>\n * ```\n * \n * @element nr-timeline\n * \n * @cssproperty --nuraly-timeline-item-padding-bottom - Bottom padding of timeline item\n * @cssproperty --nuraly-timeline-tail-width - Width of connecting line\n * @cssproperty --nuraly-timeline-tail-color - Color of connecting line\n * @cssproperty --nuraly-timeline-dot-bg - Background color of dot\n * @cssproperty --nuraly-timeline-dot-border-width - Border width of dot\n */\n@customElement('nr-timeline')\nexport class NrTimelineElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon'];\n\n  /**\n   * Timeline display mode\n   */\n  @property({ type: String, reflect: true })\n  mode: TimelineMode = TimelineMode.Left;\n\n  /**\n   * Timeline items array\n   */\n  @property({ type: Array })\n  items: TimelineItem[] = [];\n\n  /**\n   * Pending state - shows a pending item at the end\n   */\n  @property({ type: String })\n  pending?: string;\n\n  /**\n   * Custom pending dot icon\n   */\n  @property({ type: String, attribute: 'pending-dot' })\n  pendingDot?: string;\n\n  /**\n   * Reverse timeline order\n   */\n  @property({ type: Boolean, reflect: true })\n  reverse = false;\n\n  /**\n   * Get item position for alternate mode\n   */\n  private getItemPosition(item: TimelineItem, index: number): TimelineItemPosition {\n    if (this.mode !== TimelineMode.Alternate) {\n      return TimelineItemPosition.Left;\n    }\n\n    if (item.position) {\n      return item.position;\n    }\n\n    return index % 2 === 0 ? TimelineItemPosition.Left : TimelineItemPosition.Right;\n  }\n\n  /**\n   * Check if color is a preset color\n   */\n  private isPresetColor(color?: string): boolean {\n    if (!color) return false;\n    const presetColors = ['blue', 'red', 'green', 'gray'];\n    return presetColors.includes(color);\n  }\n\n  /**\n   * Get custom color style for dot\n   */\n  private getCustomColorStyle(color?: string): Record<string, string> {\n    if (!color || this.isPresetColor(color)) {\n      return {};\n    }\n\n    return {\n      borderColor: color,\n    };\n  }\n\n  /**\n   * Render timeline item dot\n   */\n  private renderDot(item: TimelineItem): TemplateResult {\n    const hasCustomDot = !!item.dot;\n    const color = item.color || TimelineItemColor.Blue;\n    const isPreset = this.isPresetColor(color);\n\n    if (hasCustomDot) {\n      return html`\n        <div class=\"timeline-item-head-custom\">\n          <nr-icon name=\"${ifDefined(item.dot)}\"></nr-icon>\n        </div>\n      `;\n    }\n\n    const headClasses = {\n      'timeline-item-head': true,\n      [color]: isPreset,\n    };\n\n    const headStyle = this.getCustomColorStyle(color);\n\n    return html`\n      <div class=${classMap(headClasses)} style=${styleMap(headStyle)}></div>\n    `;\n  }\n\n  /**\n   * Render timeline item\n   */\n  private renderItem(item: TimelineItem, index: number): TemplateResult {\n    const position = this.getItemPosition(item, index);\n    const itemClasses = {\n      'timeline-item': true,\n      'timeline-item-left': position === TimelineItemPosition.Left,\n      'timeline-item-right': position === TimelineItemPosition.Right,\n      [item.className || '']: !!item.className,\n    };\n\n    return html`\n      <li class=${classMap(itemClasses)}>\n        <div class=\"timeline-item-tail\"></div>\n        ${this.renderDot(item)}\n        <div class=\"timeline-item-content\">\n          ${item.label && this.mode === TimelineMode.Alternate\n            ? html`<div class=\"timeline-item-label\">${item.label}</div>`\n            : nothing}\n          <div>${item.children}</div>\n          ${item.label && this.mode !== TimelineMode.Alternate\n            ? html`<div style=\"color: var(--nuraly-color-text-secondary); margin-top: 4px;\">${item.label}</div>`\n            : nothing}\n        </div>\n      </li>\n    `;\n  }\n\n  /**\n   * Render pending item\n   */\n  private renderPendingItem(): TemplateResult {\n    const pendingContent = typeof this.pending === 'string' ? this.pending : 'Loading...';\n    const pendingIconName = this.pendingDot || 'loading';\n\n    return html`\n      <li class=\"timeline-item pending\">\n        <div class=\"timeline-item-tail\"></div>\n        <div class=\"timeline-item-head-custom\">\n          <nr-icon name=\"${pendingIconName}\"></nr-icon>\n        </div>\n        <div class=\"timeline-item-content\">\n          ${pendingContent}\n        </div>\n      </li>\n    `;\n  }\n\n  override render() {\n    if (!this.items || this.items.length === 0) {\n      return nothing;\n    }\n\n    return html`\n      <ul class=\"timeline\">\n        ${map(this.items, (item, index) => this.renderItem(item, index))}\n        ${this.pending ? this.renderPendingItem() : nothing}\n      </ul>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-timeline': NrTimelineElement;\n  }\n}\n"]}

package/timeline.style.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * 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

package/timeline.style.js

@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * 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 const styles = css `
+  :host {
+    display: block;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-font-size-base, 14px);
+    line-height: 1.5715;
+    color: var(--nuraly-color-text);
+  }
+
+  .timeline {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Timeline Item */
+  .timeline-item {
+    position: relative;
+    padding-bottom: var(--nuraly-timeline-item-padding-bottom, 20px);
+    list-style: none;
+  }
+
+  .timeline-item:last-child {
+    padding-bottom: 0;
+  }
+
+  /* Timeline Tail (connecting line) */
+  .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));
+  }
+
+  .timeline-item:last-child .timeline-item-tail {
+    display: none;
+  }
+
+  .timeline-item.pending .timeline-item-tail {
+    display: block;
+  }
+
+  /* Timeline Head (dot container) */
+  .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;
+    border-radius: 50%;
+  }
+
+  /* Timeline Head Colors */
+  .timeline-item-head.blue {
+    border-color: var(--nuraly-color-primary, #1890ff);
+  }
+
+  .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) */
+  .timeline-item-head-custom {
+    position: absolute;
+    top: 5.5px;
+    left: 0;
+    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 */
+  .timeline-item-content {
+    position: relative;
+    top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 - 2px);
+    margin: 0 0 0 26px;
+    word-break: break-word;
+  }
+
+  /* Timeline Label */
+  .timeline-item-label {
+    position: absolute;
+    top: calc(-1 * var(--nuraly-font-size-base, 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));
+  }
+
+  /* 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;
+  }
+
+  /* Alternate Mode */
+  :host([mode="alternate"]) .timeline,
+  :host([mode="alternate"]) .timeline-item {
+    display: block;
+  }
+
+  :host([mode="alternate"]) .timeline-item-tail,
+  :host([mode="alternate"]) .timeline-item-head,
+  :host([mode="alternate"]) .timeline-item-head-custom {
+    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-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);
+    width: calc(50% - 14px);
+    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 */
+  :host([reverse]) .timeline {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* RTL Support */
+  :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));
+  }
+`;
+//# sourceMappingURL=timeline.style.js.map