lifecycle-timeline 1.2.7 → 1.2.9

package/dist/timeline.css

@@ -1 +1 @@
-.lt-root{--bg-page: #f9fafb;--bg-card: #ffffff;--bg-track: #e5e7eb;--text-primary: #1f2937;--text-secondary: #6b7280;--text-inverse: #ffffff;--border-color: #e5e7eb;--line-color: #e5e7eb;--grid-line: #9ca3af;--accent-oss: #99e67d;--accent-ent: #ffe88e;--current-date: #086dc3;--accent-eol: #ef4444;--font-family: "Inter", system-ui, -apple-system, sans-serif;--tooltip-bg: #ffffff;--tooltip-shadow: rgba(0, 0, 0, .1);transition:background-color .3s ease,color .3s ease;background-color:var(--bg-card);color:var(--text-primary);font-family:var(--font-family);padding:24px;border-radius:16px;overflow:hidden;border:1px solid var(--border-color)}.lt-root[data-theme=dark]{--bg-page: #111827;--bg-card: #1f2937;--bg-track: #374151;--text-primary: #f9fafb;--text-secondary: #9ca3af;--border-color: #374151;--line-color: #374151;--grid-line: #6b7280;--tooltip-bg: #1f2937;--tooltip-shadow: rgba(0, 0, 0, .5);--accent-oss: #78bd5d;--accent-ent: #e3c456;--accent-eol: #f87171}.lt-wrapper{position:relative;padding-top:40px;padding-bottom:60px;overflow-x:auto;scrollbar-width:thin}.lt-header{display:flex;position:sticky;left:0;margin-bottom:20px}.lt-tracks{position:relative;padding-top:20px}.lt-axis{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:10px;padding-bottom:8px;position:relative}.lt-year{flex:1;font-size:.875rem;font-weight:600;color:var(--text-secondary);border-left:1px dashed var(--border-color);padding-left:0;text-align:center;box-sizing:border-box}.lt-year:first-child{border-left:none}.lt-row{display:flex;align-items:center;margin-bottom:1.5rem;position:relative;height:36px;z-index:1;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}.lt-row.lt-row-visible{opacity:1;transform:translateY(0)}.lt-version-label{width:80px;min-width:80px;box-sizing:border-box;padding:4px;border-radius:12px;flex-shrink:0;font-weight:600;font-size:.85rem;color:var(--text-primary);margin-right:16px;text-align:center;background-color:transparent;cursor:pointer;transition:all .3s ease;position:sticky;left:0;z-index:10}.lt-version-label.lt-version-major{font-weight:800;border:2px solid var(--border-color)}.lt-version-label:hover{background-color:var(--bg-track);transform:scale(1.05);box-shadow:0 4px 12px #0000001a}.lt-version-label a.lt-version-link{text-decoration:none;color:inherit;display:block;width:100%;height:100%}.lt-version-label a.lt-version-link:hover{text-decoration:underline;opacity:.8}.lt-status-oss{background-color:var(--accent-oss);color:#000}.lt-status-ent{background-color:var(--accent-ent);color:#000}.lt-status-expired{background-color:var(--accent-eol);color:#fff}.lt-track-container{flex-grow:1;position:relative;height:100%;background:var(--bg-track);border-radius:0;overflow:hidden;transition:background-color .3s ease}.lt-bar-segment{position:absolute;height:100%;top:0;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:500;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000001a}.lt-bar-oss{background:linear-gradient(to bottom,#dcfce7 0%,var(--accent-oss) 100%);z-index:2;border-radius:0;height:100%;top:auto;bottom:0}[data-theme=dark] .lt-bar-oss{background:linear-gradient(to bottom,#a7f3d0 0%,var(--accent-oss) 100%)}.lt-bar-ent{background:linear-gradient(to bottom,#fef9c3 0%,var(--accent-ent) 100%);z-index:1;border-radius:0;opacity:.9;height:100%}.lt-bar-eol{background:linear-gradient(to bottom,#fee2e2 0%,var(--accent-eol) 100%);z-index:0;border-radius:0;opacity:.8}.lt-grid-lines-container{position:absolute;inset:0 0 0 96px;pointer-events:none;z-index:5}.lt-indicators-container{position:absolute;inset:0 0 0 96px;pointer-events:none;z-index:20}.lt-current-date-indicator{position:absolute;top:-30px;bottom:0;width:3px;background-image:linear-gradient(to bottom,var(--current-date) 60%,transparent 60%);background-size:3px 20px;background-repeat:repeat-y;border-left:none;z-index:20;pointer-events:none}@keyframes pulse-blue{0%{box-shadow:0 0 #086dc3b3}70%{box-shadow:0 0 0 6px #086dc300}to{box-shadow:0 0 #086dc300}}.lt-current-date-badge{position:absolute;top:100%;margin-top:8px;left:50%;transform:translate(-50%);background-color:var(--current-date);color:#fff;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 4px #086dc333;z-index:25;animation:pulse-blue 2s infinite}.lt-year-grid-line{position:absolute;top:0;bottom:0;border-left:2px solid var(--grid-line);opacity:1;z-index:5;pointer-events:none}.lt-tooltip{position:absolute;background:var(--tooltip-bg);color:var(--text-primary);padding:10px 14px;border-radius:8px;font-size:.85rem;box-shadow:0 10px 15px -3px var(--tooltip-shadow),0 4px 6px -4px var(--tooltip-shadow);border:1px solid var(--border-color);pointer-events:none;z-index:10000;transition:opacity .15s ease-out;line-height:1.4}.lt-tooltip-header{font-weight:700;margin-bottom:4px;color:var(--current-date);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.lt-tooltip-date strong{color:var(--text-secondary)}.lt-row{transition:opacity .3s ease,transform .3s ease,height .3s ease}.lt-row[style*="display: none"]{opacity:0;transform:translateY(10px)}.lt-bar-segment{transition:transform .2s ease,box-shadow .2s ease}.lt-bar-segment:hover{box-shadow:0 4px 12px #0000001a}.lt-bar-segment:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px;z-index:100}.lt-track-container{transition:background-color .3s ease}.lt-legend{margin:40px auto 0;padding:24px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;gap:16px;max-width:800px}.lt-legend-block{display:flex;align-items:flex-start;gap:12px}.lt-legend-icon{width:20px;height:20px;border-radius:4px;flex-shrink:0;margin-top:2px}.lt-legend-block h3{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--text-primary)}.lt-legend-block p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.lt-legend-block.oss .lt-legend-icon{background-color:var(--accent-oss)}.lt-legend-block.commercial .lt-legend-icon{background-color:var(--accent-ent)}.lt-legend-block.eol .lt-legend-icon{background-color:var(--accent-eol)}.lt-toolbar{display:flex;justify-content:flex-start;align-items:center;margin-bottom:24px;gap:16px}.lt-filter-container{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px 16px;border-radius:24px;max-width:400px;flex-grow:1;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.lt-filter-container:focus-within{border-color:var(--current-date);box-shadow:0 8px 20px #086dc31a}.lt-filter-input{border:none;outline:none;font-size:.95rem;color:var(--text-primary);background:transparent;width:100%}.lt-checkbox-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.lt-checkbox-label input{width:16px;height:16px;cursor:pointer}.lt-highlight-match{background-color:#fde68a;color:#92400e;padding:0 2px;border-radius:2px;font-weight:700}.lt-legend{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.lt-legend-item-reactive{cursor:pointer;transition:all .2s ease;padding:8px;border-radius:8px;border:1px solid transparent}.lt-legend-item-reactive:hover{background-color:var(--bg-track);transform:translateY(-2px)}.lt-legend-item-reactive.lt-active-highlight{background-color:var(--bg-track);border-color:var(--grid-line);box-shadow:0 2px 4px #0000001a}.lt-bar-segment,.lt-version-label{transition:opacity .3s ease,filter .3s ease}.lt-mode-compact .lt-row{margin-bottom:.85rem;height:24px}.lt-mode-compact .lt-version-label{font-size:.75rem;padding:2px 4px}.lt-mode-compact .lt-bar-segment{font-size:.7rem}[class*=lt-highlight-oss] .lt-bar-segment:not(.lt-segment-oss),[class*=lt-highlight-oss] .lt-version-label:not(.lt-status-oss){opacity:.3;filter:grayscale(.5)}[class*=lt-highlight-ent] .lt-bar-segment:not(.lt-segment-ent),[class*=lt-highlight-ent] .lt-version-label:not(.lt-status-ent){opacity:.3;filter:grayscale(.5)}[class*=lt-highlight-eol] .lt-bar-segment,[class*=lt-highlight-eol] .lt-version-label:not(.lt-status-expired){opacity:.3;filter:grayscale(.5)}.lt-toggle-btn{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.875rem;font-weight:500;color:var(--text-primary);box-shadow:0 1px 2px #0000000d;transition:all .2s ease}.lt-toggle-btn:hover{background:var(--bg-page);border-color:var(--text-secondary);transform:translateY(-1px)}.lt-toggle-btn:focus-visible{outline:2px solid var(--current-date);outline-offset:2px}.lt-theme-toggle-btn{position:absolute;top:24px;right:24px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:1000;box-shadow:0 4px 6px -1px #0000001a}.lt-theme-toggle-btn:focus-visible{outline:2px solid var(--current-date);outline-offset:2px}.lt-root{position:relative}.lt-theme-toggle-btn:hover{background-color:var(--bg-track);transform:scale(1.1)}@media(max-width:1024px){.lt-wrapper{padding-left:0}}@media(max-width:768px){.page-container{padding:1rem}.lt-toolbar{flex-direction:column;align-items:stretch}.lt-filter-container{max-width:none}}.lt-row,.lt-table tr{transition:opacity .4s ease,transform .4s cubic-bezier(.4,0,.2,1)}.lt-row-hidden{display:none!important;opacity:0;transform:translateY(-10px)}.lt-row-visible{display:flex!important;opacity:1;transform:translateY(0)}.lt-table tr.lt-row-visible{display:table-row!important}.lt-tracks,.lt-table tbody{transition:max-height .5s ease-in-out}.lt-table-container{margin-top:1rem;margin-bottom:2rem;overflow-x:auto;border-radius:12px;border:1px solid var(--border-color);background-color:var(--bg-card);transition:all .3s ease}.lt-table{width:100%;border-collapse:collapse;font-size:.85rem;text-align:left}.lt-table th{background-color:var(--bg-page);color:var(--text-secondary);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--border-color);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.lt-table td{padding:12px 16px;border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle}.lt-table tr:hover td{background-color:var(--bg-page)}.lt-table tr:last-child td{border-bottom:none}.lt-table-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.85rem;font-weight:600;font-family:var(--font-family);text-align:center;min-width:64px;transition:all .3s ease}.lt-table-version-link{text-decoration:none;color:inherit;display:inline-block}.lt-table-version-link:hover .lt-table-badge{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.lt-table-badge.status-oss{background-color:var(--accent-oss);color:#000}.lt-table-badge.status-ent{background-color:var(--accent-ent);color:#000}.lt-table-badge.status-expired{background-color:var(--accent-eol);color:#fff}.lt-past-date{color:var(--text-secondary);opacity:.7;font-style:italic}.lt-table-toggle{display:flex;justify-content:center;padding:10px;background-color:var(--bg-card);border-top:1px solid var(--border-color);border-bottom-left-radius:12px;margin-top:40px}.risk-high{color:#ef4444}.risk-medium{color:#f59e0b}.risk-low{color:#10b981}[data-theme=dark] .details-header{background-color:#0f172a}
+.lt-root{--bg-page: #f9fafb;--bg-card: #ffffff;--bg-track: #e5e7eb;--text-primary: #1f2937;--text-secondary: #6b7280;--text-inverse: #ffffff;--border-color: #e5e7eb;--line-color: #e5e7eb;--grid-line: #9ca3af;--accent-oss: #99e67d;--accent-ent: #ffe88e;--current-date: #086dc3;--accent-eol: #ef4444;--font-family: "Inter", system-ui, -apple-system, sans-serif;--tooltip-bg: #ffffff;--tooltip-shadow: rgba(0, 0, 0, .1);transition:background-color .3s ease,color .3s ease;background-color:var(--bg-card);color:var(--text-primary);font-family:var(--font-family);padding:24px;border-radius:16px;overflow:hidden;border:1px solid var(--border-color)}.lt-root[data-theme=dark]{--bg-page: #111827;--bg-card: #1f2937;--bg-track: #374151;--text-primary: #f9fafb;--text-secondary: #9ca3af;--border-color: #374151;--line-color: #374151;--grid-line: #6b7280;--tooltip-bg: #1f2937;--tooltip-shadow: rgba(0, 0, 0, .5);--accent-oss: #78bd5d;--accent-ent: #e3c456;--accent-eol: #f87171}.lt-wrapper{position:relative;padding-top:40px;padding-bottom:60px;overflow-x:auto;scrollbar-width:thin}.lt-header{display:flex;position:sticky;left:0;margin-bottom:20px}.lt-tracks{position:relative;padding-top:20px}.lt-axis{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:10px;padding-bottom:8px;position:relative}.lt-year{flex:1;font-size:.875rem;font-weight:600;color:var(--text-secondary);border-left:1px dashed var(--border-color);padding-left:0;text-align:center;box-sizing:border-box}.lt-year:first-child{border-left:none}.lt-row{display:flex;align-items:center;margin-bottom:1.5rem;position:relative;min-height:36px;height:auto;z-index:1;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}.lt-row.lt-row-visible{opacity:1;transform:translateY(0)}.lt-version-label{width:90px;min-width:90px;box-sizing:border-box;padding:4px;border-radius:12px;flex-shrink:0;font-weight:600;font-size:.85rem;color:var(--text-primary);margin-right:16px;text-align:center;background-color:transparent;cursor:pointer;transition:all .3s ease;position:sticky;left:0;z-index:10;white-space:normal;word-wrap:break-word;overflow:visible;display:flex;align-items:center;justify-content:center;line-height:1.2}.lt-version-label.lt-version-major{font-weight:800;border:2px solid var(--border-color)}.lt-version-label:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000001a;filter:brightness(.95)}.lt-version-label a.lt-version-link{text-decoration:none;color:inherit;display:block;width:100%;height:100%}.lt-version-label a.lt-version-link:hover{text-decoration:underline;opacity:.8}.lt-status-oss{background-color:var(--accent-oss);color:#000}.lt-status-ent{background-color:var(--accent-ent);color:#000}.lt-status-expired{background-color:var(--accent-eol);color:#fff}.lt-status-future{background-color:var(--bg-track);color:var(--text-secondary);border:1px solid var(--border-color)}.lt-track-container{flex-grow:1;position:relative;height:36px;background:var(--bg-track);border-radius:0;overflow:hidden;transition:background-color .3s ease}.lt-bar-segment{position:absolute;height:100%;top:0;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:500;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000001a}.lt-bar-oss{background:linear-gradient(to bottom,#dcfce7 0%,var(--accent-oss) 100%);z-index:2;border-radius:0;height:100%;top:auto;bottom:0}[data-theme=dark] .lt-bar-oss{background:linear-gradient(to bottom,#a7f3d0 0%,var(--accent-oss) 100%)}.lt-bar-ent{background:linear-gradient(to bottom,#fef9c3 0%,var(--accent-ent) 100%);z-index:1;border-radius:0;opacity:.9;height:100%}.lt-bar-eol{background:linear-gradient(to bottom,#fee2e2 0%,var(--accent-eol) 100%);z-index:0;border-radius:0;opacity:.8}.lt-grid-lines-container{position:absolute;inset:0 0 0 96px;pointer-events:none;z-index:5}.lt-indicators-container{position:absolute;inset:0 0 0 96px;pointer-events:none;z-index:20}.lt-current-date-indicator{position:absolute;top:-30px;bottom:0;width:3px;background-image:linear-gradient(to bottom,var(--current-date) 60%,transparent 60%);background-size:3px 20px;background-repeat:repeat-y;border-left:none;z-index:20;pointer-events:none}@keyframes pulse-blue{0%{box-shadow:0 0 #086dc3b3}70%{box-shadow:0 0 0 6px #086dc300}to{box-shadow:0 0 #086dc300}}.lt-current-date-badge{position:absolute;top:100%;margin-top:8px;left:50%;transform:translate(-50%);background-color:var(--current-date);color:#fff;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 4px #086dc333;z-index:25;animation:pulse-blue 2s infinite}.lt-year-grid-line{position:absolute;top:0;bottom:0;border-left:2px solid var(--grid-line);opacity:1;z-index:5;pointer-events:none}.lt-tooltip{position:absolute;background:var(--tooltip-bg);color:var(--text-primary);padding:10px 14px;border-radius:8px;font-size:.85rem;box-shadow:0 10px 15px -3px var(--tooltip-shadow),0 4px 6px -4px var(--tooltip-shadow);border:1px solid var(--border-color);pointer-events:none;z-index:10000;transition:opacity .15s ease-out;line-height:1.4}.lt-tooltip-header{font-weight:700;margin-bottom:4px;color:var(--current-date);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.lt-tooltip-date strong{color:var(--text-secondary)}.lt-row{transition:opacity .3s ease,transform .3s ease,height .3s ease}.lt-row[style*="display: none"]{opacity:0;transform:translateY(10px)}.lt-bar-segment{transition:transform .2s ease,box-shadow .2s ease}.lt-bar-segment:hover{box-shadow:0 4px 12px #0000001a}.lt-bar-segment:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px;z-index:100}.lt-track-container{transition:background-color .3s ease}.lt-legend{margin:40px auto 0;padding:24px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;gap:16px;max-width:800px}.lt-legend-block{display:flex;align-items:flex-start;gap:12px}.lt-legend-icon{width:20px;height:20px;border-radius:4px;flex-shrink:0;margin-top:2px}.lt-legend-block h3{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--text-primary)}.lt-legend-block p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.lt-legend-block.oss .lt-legend-icon{background-color:var(--accent-oss)}.lt-legend-block.commercial .lt-legend-icon{background-color:var(--accent-ent)}.lt-legend-block.eol .lt-legend-icon{background-color:var(--accent-eol)}.lt-toolbar{display:flex;justify-content:flex-start;align-items:center;margin-bottom:24px;gap:16px}.lt-filter-container{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px 16px;border-radius:24px;max-width:400px;flex-grow:1;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.lt-filter-container:focus-within{border-color:var(--current-date);box-shadow:0 8px 20px #086dc31a}.lt-filter-input{border:none;outline:none;font-size:.95rem;color:var(--text-primary);background:transparent;width:100%}.lt-checkbox-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.lt-checkbox-label input{width:16px;height:16px;cursor:pointer}.lt-highlight-match{background-color:#fde68a;color:#92400e;padding:0 2px;border-radius:2px;font-weight:700}.lt-legend{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.lt-legend-item-reactive{cursor:pointer;transition:all .2s ease;padding:8px;border-radius:8px;border:1px solid transparent}.lt-legend-item-reactive:hover{background-color:var(--bg-track);transform:translateY(-2px)}.lt-legend-item-reactive.lt-active-highlight{background-color:var(--bg-track);border-color:var(--grid-line);box-shadow:0 2px 4px #0000001a}.lt-bar-segment,.lt-version-label{transition:opacity .3s ease,filter .3s ease}.lt-mode-compact .lt-row{margin-bottom:.85rem;height:24px}.lt-mode-compact .lt-version-label{font-size:.75rem;padding:2px 4px}.lt-mode-compact .lt-bar-segment{font-size:.7rem}[class*=lt-highlight-oss] .lt-bar-segment:not(.lt-segment-oss),[class*=lt-highlight-oss] .lt-version-label:not(.lt-status-oss){opacity:.3;filter:grayscale(.5)}[class*=lt-highlight-ent] .lt-bar-segment:not(.lt-segment-ent),[class*=lt-highlight-ent] .lt-version-label:not(.lt-status-ent){opacity:.3;filter:grayscale(.5)}[class*=lt-highlight-eol] .lt-bar-segment,[class*=lt-highlight-eol] .lt-version-label:not(.lt-status-expired){opacity:.3;filter:grayscale(.5)}.lt-toggle-btn{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.875rem;font-weight:500;color:var(--text-primary);box-shadow:0 1px 2px #0000000d;transition:all .2s ease}.lt-toggle-btn:hover{background:var(--bg-page);border-color:var(--text-secondary);transform:translateY(-1px)}.lt-toggle-btn:focus-visible{outline:2px solid var(--current-date);outline-offset:2px}.lt-theme-toggle-btn{position:absolute;top:24px;right:24px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:1000;box-shadow:0 4px 6px -1px #0000001a}.lt-theme-toggle-btn:focus-visible{outline:2px solid var(--current-date);outline-offset:2px}.lt-root{position:relative}.lt-theme-toggle-btn:hover{background-color:var(--bg-track);transform:scale(1.1)}@media(max-width:1024px){.lt-wrapper{padding-left:0}}@media(max-width:768px){.page-container{padding:1rem}.lt-toolbar{flex-direction:column;align-items:stretch}.lt-filter-container{max-width:none}}.lt-row,.lt-table tr{transition:opacity .4s ease,transform .4s cubic-bezier(.4,0,.2,1)}.lt-row-hidden{display:none!important;opacity:0;transform:translateY(-10px)}.lt-row-visible{display:flex!important;opacity:1;transform:translateY(0)}.lt-table tr.lt-row-visible{display:table-row!important}.lt-tracks,.lt-table tbody{transition:max-height .5s ease-in-out}.lt-table-container{margin-top:1rem;margin-bottom:2rem;overflow-x:auto;border-radius:12px;border:1px solid var(--border-color);background-color:var(--bg-card);transition:all .3s ease}.lt-table{width:100%;border-collapse:collapse;font-size:.85rem;text-align:left}.lt-table th{background-color:var(--bg-page);color:var(--text-secondary);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--border-color);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.lt-table td{padding:12px 16px;border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle}.lt-table tr:hover td{background-color:var(--bg-page)}.lt-table tr:last-child td{border-bottom:none}.lt-table-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.85rem;font-weight:600;font-family:var(--font-family);text-align:center;min-width:64px;transition:all .3s ease}.lt-table-version-link{text-decoration:none;color:inherit;display:inline-block}.lt-table-version-link:hover .lt-table-badge{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.lt-table-badge.status-oss{background-color:var(--accent-oss);color:#000}.lt-table-badge.status-ent{background-color:var(--accent-ent);color:#000}.lt-table-badge.status-expired{background-color:var(--accent-eol);color:#fff}.lt-past-date{color:var(--text-secondary);opacity:.7;font-style:italic}.lt-table-toggle{display:flex;justify-content:center;padding:10px;background-color:var(--bg-card);border-top:1px solid var(--border-color);border-bottom-left-radius:12px;margin-top:40px}.risk-high{color:#ef4444}.risk-medium{color:#f59e0b}.risk-low{color:#10b981}[data-theme=dark] .details-header{background-color:#0f172a}

package/dist/timeline.d.ts

@@ -0,0 +1,267 @@
+/**
+ * Represents a Lifecycle Timeline component.
+ */
+declare class Timeline {
+    root: HTMLElement | null;
+    options: TimelineOptions;
+    visibleCount: number;
+    showTable: boolean;
+    showThemeToggle: boolean;
+    showLegend: boolean;
+    filterVersions: boolean;
+    splitSupport: boolean;
+    compactMode: boolean;
+    showMajorFilter: boolean;
+    isExpanded: boolean;
+    theme: 'light' | 'dark';
+    filterText: string;
+    majorFilterEnabled: boolean;
+    activeHighlight: string | null;
+    translations: Record<string, Record<string, string>>;
+    locale: string;
+    data: TimelineVersion[];
+    minYear: number;
+    maxYear: number;
+    currentDate: Date;
+    tableContainer: HTMLElement;
+    wrapper: HTMLElement;
+    axis: HTMLElement;
+    tracks: HTMLElement;
+    legendContainer: HTMLElement;
+    tableBody: HTMLElement;
+    tableRows: {
+        el: HTMLElement;
+        version: string;
+        versionOriginal: string;
+    }[];
+    tableToggleContainer: HTMLElement;
+    grid: HTMLElement;
+    indicators: HTMLElement;
+    rows: {
+        el: HTMLElement;
+        version: string;
+        versionOriginal: string;
+        isMajor?: boolean;
+    }[];
+    toggleContainer: HTMLElement;
+    tooltip: HTMLElement;
+    /**
+     * Creates an instance of Timeline.
+     * @param elementId - The ID of the root element.
+     * @param data - The data array containing version details.
+     * @param options - Configuration options.
+     */
+    constructor(elementId: string, data: TimelineVersion[], options?: TimelineOptions);
+    /**
+     * Detects the browser language.
+     * @returns The detected language code or 'en'.
+     */
+    detectLanguage(): string;
+    /**
+     * Translates a key based on the current locale.
+     * @param key - The translation key.
+     * @param params - Parameters to replace in the translation string.
+     * @returns The translated string.
+     */
+    t(key: string, params?: Record<string, any>): string;
+    /**
+     * Sets up the initial layout of the timeline.
+     */
+    setupBaseLayout(): void;
+    /**
+     * Updates the timeline data and re-renders.
+     * @param newData - The new data array.
+     */
+    updateData(newData: TimelineVersion[]): void;
+    /**
+     * Validates the input data.
+     * @param data - The data array to validate.
+     * @returns The validated and filtered data array.
+     */
+    validateData(data: TimelineVersion[]): TimelineVersion[];
+    /**
+     * Calculates the min and max years based on the data.
+     */
+    calculateTimeRange(): void;
+    /**
+     * Renders the data table.
+     */
+    renderTable(): void;
+    /**
+     * Creates a row for the data table.
+     * @param item - Version data.
+     */
+    createTableRow(item: TimelineVersion): {
+        el: HTMLElement;
+        version: string;
+        versionOriginal: string;
+    };
+    /**
+     * Updates table visibility based on filter and visibleCount.
+     */
+    updateTableVisibility(): void;
+    /**
+     * Renders the entire timeline.
+     */
+    render(): void;
+    /**
+     * Sets up the tooltip overlay.
+     */
+    setupTooltip(): void;
+    /**
+     * Shows the tooltip with provided content.
+     * @param e - The mouse event or position object.
+     * @param content - The HTML content for the tooltip.
+     */
+    showTooltip(e: MouseEvent | {
+        pageX: number;
+        pageY: number;
+    }, content: string): void;
+    /**
+     * Updates tooltip position relative to mouse.
+     * @param e - The mouse event or position object.
+     */
+    updateTooltipPos(e: MouseEvent | {
+        pageX: number;
+        pageY: number;
+        clientX?: number;
+        clientY?: number;
+    }): void;
+    /**
+     * Hides the tooltip.
+     */
+    hideTooltip(): void;
+    /**
+     * Highlights the search term in a given text.
+     * @param text - The text to process.
+     * @returns The HTML with highlighted segments.
+     */
+    highlight(text: string): string;
+    /**
+     * Helper to create DOM elements with styles and classes.
+     * @param tag - HTML tag.
+     * @param className - CSS class name.
+     * @param parent - Parent element.
+     * @param styles - Inline styles.
+     * @returns The created element.
+     */
+    el(tag: string, className: string, parent?: HTMLElement, styles?: Record<string, string>): HTMLElement;
+    /**
+     * Renders the toolbar with the filter input.
+     */
+    renderToolbar(): void;
+    /**
+     * Renders the theme toggle button.
+     */
+    renderThemeToggle(): void;
+    /**
+     * Renders the legend section.
+     */
+    renderLegend(): void;
+    /**
+     * Toggles highlighting for a specific segment type.
+     * @param type - 'oss', 'ent', or 'eol'.
+     */
+    highlightSegment(type: string): void;
+    /**
+     * Renders the year axis.
+     */
+    renderAxis(): void;
+    /**
+     * Renders the vertical grid lines for years.
+     */
+    renderGrid(): void;
+    /**
+     * Creates a row for a specific version.
+     * @param item - The version data item.
+     * @returns Metadata about the created row.
+     */
+    createRow(item: TimelineVersion, index: number): {
+        el: HTMLElement;
+        version: string;
+        versionOriginal: string;
+        isMajor?: boolean;
+    };
+    /**
+     * Creates a colored bar segment for the timeline.
+     * @param item - The version item.
+     * @param startStr - Start date string.
+     * @param endStr - End date string.
+     * @param className - CSS class.
+     * @param label - Support type label for tooltip.
+     * @returns The created bar element.
+     */
+    createBar(item: TimelineVersion, startStr: string, endStr: string, className: string, label: string): HTMLElement;
+    /**
+     * Updates visibility of rows based on filtering and expansion state.
+     */
+    updateVisibility(): void;
+    /**
+     * Renders the vertical line indicating current date.
+     */
+    renderCurrentDateLine(): void;
+}
+export default Timeline;
+
+declare interface TimelineOptions {
+    /**
+     * Number of versions to show before "Show more" button appears.
+     * @default 3
+     */
+    visibleCount?: number;
+    /**
+     * Preferred locale for translations ('en' or 'fr').
+     * Defaults to browser language.
+     */
+    locale?: 'en' | 'fr' | string;
+    /**
+     * Custom translations to merge or override.
+     */
+    i18n?: Record<string, Record<string, string>>;
+    /**
+     * Whether to show the data table between filter and timeline.
+     * @default true
+     */
+    showTable?: boolean;
+    /**
+     * Whether to show the legend below the timeline.
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to show the version filter input.
+     * @default true
+     */
+    filterVersions?: boolean;
+    /**
+     * Whether to show the enterprise bar normally (false) or split after OSS (true).
+     * @default false
+     */
+    splitSupport?: boolean;
+    /**
+     * Whether to use compact mode (reduced height).
+     * @default false
+     */
+    compactMode?: boolean;
+    /**
+     * Whether to show the major version filter checkbox.
+     * @default false
+     */
+    showMajorFilter?: boolean;
+    /**
+     * Whether the major version filter runs by default.
+     * @default false
+     */
+    majorFilterDefault?: boolean;
+}
+
+declare interface TimelineVersion {
+    version: string;
+    ossStart: string;
+    ossEnd: string;
+    enterpriseEnd?: string;
+    releaseNotesUrl?: string;
+    isMajor?: boolean;
+}
+
+export { }

package/dist/timeline.js

@@ -1,4 +1,4 @@
-const u = {
+const p = {
   en: {
     filter: "Filter versions...",
     oss: "OSS Support",
@@ -38,22 +38,57 @@ const u = {
     majorOnly: "Versions majeures uniquement"
   }
 };
-class v {
+class f {
+  root;
+  options;
+  visibleCount;
+  showTable;
+  showThemeToggle;
+  showLegend;
+  filterVersions;
+  splitSupport;
+  compactMode;
+  showMajorFilter;
+  isExpanded;
+  theme;
+  filterText;
+  majorFilterEnabled;
+  activeHighlight;
+  translations;
+  locale;
+  data = [];
+  minYear = 0;
+  maxYear = 0;
+  currentDate = /* @__PURE__ */ new Date();
+  tableContainer;
+  wrapper;
+  axis;
+  tracks;
+  legendContainer;
+  tableBody;
+  tableRows = [];
+  tableToggleContainer;
+  grid;
+  indicators;
+  rows = [];
+  toggleContainer;
+  tooltip;
   /**
    * Creates an instance of Timeline.
-   * @param {string} elementId - The ID of the root element.
-   * @param {Array<Object>} data - The data array containing version details.
-   * @param {Object} [options={}] - Configuration options.
-   * @param {number} [options.visibleCount=3] - Number of versions to show initially.
-   * @param {string} [options.locale] - Language code (e.g., 'en', 'fr').
-   * @param {Object} [options.i18n] - Custom translations to merge or override.
+   * @param elementId - The ID of the root element.
+   * @param data - The data array containing version details.
+   * @param options - Configuration options.
    */
   constructor(t, e, i = {}) {
-    this.root = document.getElementById(t), this.root && (this.options = i, this.visibleCount = i.visibleCount || 3, this.showTable = i.showTable !== !1, this.showThemeToggle = i.showThemeToggle !== !1, this.showLegend = i.showLegend !== !1, this.filterVersions = i.filterVersions !== !1, this.splitSupport = i.splitSupport === !0, this.compactMode = i.compactMode === !0, this.showMajorFilter = i.showMajorFilter === !0, this.isExpanded = !1, this.theme = "light", this.filterText = "", this.majorFilterEnabled = !1, this.activeHighlight = null, this.root.classList.add("lt-root"), this.root.classList.toggle("lt-mode-split", this.splitSupport), this.root.classList.toggle("lt-mode-overlay", !this.splitSupport), this.root.classList.toggle("lt-mode-compact", this.compactMode), this.root.setAttribute("data-theme", this.theme), this.translations = { ...u, ...i.i18n || {} }, this.locale = i.locale || this.detectLanguage(), this.setupBaseLayout(), this.updateData(e));
+    if (this.root = document.getElementById(t), !this.root) {
+      this.options = i, this.visibleCount = 3, this.showTable = !0, this.showThemeToggle = !0, this.showLegend = !0, this.filterVersions = !0, this.splitSupport = !1, this.compactMode = !1, this.showMajorFilter = !1, this.isExpanded = !1, this.theme = "light", this.filterText = "", this.majorFilterEnabled = !1, this.activeHighlight = null, this.translations = {}, this.locale = "en";
+      return;
+    }
+    this.options = i, this.visibleCount = i.visibleCount || 3, this.showTable = i.showTable !== !1, this.showThemeToggle = i.showThemeToggle !== !1, this.showLegend = i.showLegend !== !1, this.filterVersions = i.filterVersions !== !1, this.splitSupport = i.splitSupport === !0, this.compactMode = i.compactMode === !0, this.showMajorFilter = i.showMajorFilter === !0, this.isExpanded = !1, this.theme = "light", this.filterText = "", this.majorFilterEnabled = i.majorFilterDefault === !0, this.activeHighlight = null, this.root.classList.add("lt-root"), this.root.classList.toggle("lt-mode-split", this.splitSupport), this.root.classList.toggle("lt-mode-overlay", !this.splitSupport), this.root.classList.toggle("lt-mode-compact", this.compactMode), this.root.setAttribute("data-theme", this.theme), this.translations = { ...p, ...i.i18n || {} }, this.locale = i.locale || this.detectLanguage(), this.setupBaseLayout(), this.updateData(e);
   }
   /**
    * Detects the browser language.
-   * @returns {string} The detected language code or 'en'.
+   * @returns The detected language code or 'en'.
    */
   detectLanguage() {
     const t = (navigator.language || "en").split("-")[0];
@@ -61,9 +96,9 @@ class v {
   }
   /**
    * Translates a key based on the current locale.
-   * @param {string} key - The translation key.
-   * @param {Object} [params={}] - Parameters to replace in the translation string.
-   * @returns {string} The translated string.
+   * @param key - The translation key.
+   * @param params - Parameters to replace in the translation string.
+   * @returns The translated string.
    */
   t(t, e = {}) {
     let i = (this.translations[this.locale] || this.translations.en)[t] || t;
@@ -73,26 +108,26 @@ class v {
    * Sets up the initial layout of the timeline.
    */
   setupBaseLayout() {
-    this.root.innerHTML = "", this.root.setAttribute("role", "application"), this.root.setAttribute("aria-label", "Product Lifecycle Timeline"), this.renderToolbar(), this.showThemeToggle && this.renderThemeToggle(), this.showTable && (this.tableContainer = this.el("div", "lt-table-container", this.root)), this.wrapper = this.el("div", "lt-wrapper", this.root), this.wrapper.setAttribute("role", "grid"), this.wrapper.setAttribute("aria-readonly", "true"), this.axis = this.el("div", "lt-axis", this.wrapper), this.axis.setAttribute("role", "row"), this.tracks = this.el("div", "lt-tracks", this.wrapper), this.showLegend && (this.legendContainer = this.el("div", "lt-legend-container", this.wrapper));
+    this.root && (this.root.innerHTML = "", this.root.setAttribute("role", "application"), this.root.setAttribute("aria-label", "Product Lifecycle Timeline"), this.renderToolbar(), this.showThemeToggle && this.renderThemeToggle(), this.showTable && (this.tableContainer = this.el("div", "lt-table-container", this.root)), this.wrapper = this.el("div", "lt-wrapper", this.root), this.wrapper.setAttribute("role", "grid"), this.wrapper.setAttribute("aria-readonly", "true"), this.axis = this.el("div", "lt-axis", this.wrapper), this.axis.setAttribute("role", "row"), this.tracks = this.el("div", "lt-tracks", this.wrapper), this.showLegend && (this.legendContainer = this.el("div", "lt-legend-container", this.wrapper)));
   }
   /**
    * Updates the timeline data and re-renders.
-   * @param {Array<Object>} newData - The new data array.
+   * @param newData - The new data array.
    */
   updateData(t) {
     this.data = this.validateData(t || []), this.calculateTimeRange(), this.render();
   }
   /**
    * Validates the input data.
-   * @param {Array<Object>} data - The data array to validate.
-   * @returns {Array<Object>} The validated and filtered data array.
+   * @param data - The data array to validate.
+   * @returns The validated and filtered data array.
    */
   validateData(t) {
     return t.filter((e, i) => {
-      const n = ["version", "ossStart", "ossEnd"].filter((r) => !e[r]);
-      if (n.length > 0)
-        return console.warn(`[Timeline] Missing fields for item at index ${i}: ${n.join(", ")}`), !1;
-      const a = ["ossStart", "ossEnd", "enterpriseEnd"].filter((r) => e[r]).filter((r) => isNaN(new Date(e[r]).getTime()));
+      const o = ["version", "ossStart", "ossEnd"].filter((l) => !e[l]);
+      if (o.length > 0)
+        return console.warn(`[Timeline] Missing fields for item at index ${i}: ${o.join(", ")}`), !1;
+      const a = ["ossStart", "ossEnd", "enterpriseEnd"].filter((l) => e[l]).filter((l) => isNaN(new Date(e[l]).getTime()));
       return a.length > 0 ? (console.warn(`[Timeline] Invalid date format for item "${e.version}": ${a.join(", ")}`), !1) : !0;
     });
   }
@@ -105,8 +140,8 @@ class v {
       return;
     }
     const t = this.data.flatMap((e) => [
-      new Date(e.ossStart),
-      new Date(e.enterpriseEnd || e.ossEnd)
+      new Date(e.ossStart).getTime(),
+      new Date(e.enterpriseEnd || e.ossEnd).getTime()
     ]);
     this.minYear = new Date(Math.min(...t)).getFullYear(), this.maxYear = new Date(Math.max(...t)).getFullYear();
   }
@@ -123,18 +158,18 @@ class v {
   }
   /**
    * Creates a row for the data table.
-   * @param {Object} item - Version data.
+   * @param item - Version data.
    */
   createTableRow(t) {
-    const e = this.el("tr", "", this.tableBody), i = Date.now(), s = new Date(t.ossStart).getTime(), n = new Date(t.ossEnd).getTime(), l = t.enterpriseEnd ? new Date(t.enterpriseEnd).getTime() : n, a = i >= s && i <= n ? "lt-status-oss" : i > n && i <= l ? "lt-status-ent" : i > l ? "lt-status-expired" : "", r = this.el("td", "", e);
-    let h = `<span class="lt-table-badge ${a}">${t.versionOriginal || t.version}</span>`;
-    t.releaseNotesUrl ? r.innerHTML = `<a href="${t.releaseNotesUrl}" target="_blank" class="lt-table-version-link">${h}</a>` : r.innerHTML = h;
-    const o = this.el("td", "", e);
-    o.textContent = t.ossStart, i > s && (o.className = "lt-past-date");
+    const e = this.el("tr", "", this.tableBody), i = Date.now(), s = new Date(t.ossStart).getTime(), o = new Date(t.ossEnd).getTime(), n = t.enterpriseEnd ? new Date(t.enterpriseEnd).getTime() : o, a = i >= s && i <= o ? "lt-status-oss" : i > o && i <= n ? "lt-status-ent" : i > n ? "lt-status-expired" : "", l = this.el("td", "", e);
+    let h = `<span class="lt-table-badge ${a}">${t.version}</span>`;
+    t.releaseNotesUrl ? l.innerHTML = `<a href="${t.releaseNotesUrl}" target="_blank" class="lt-table-version-link">${h}</a>` : l.innerHTML = h;
+    const r = this.el("td", "", e);
+    r.textContent = t.ossStart, i > s && (r.className = "lt-past-date");
     const g = this.el("td", "", e);
-    g.textContent = t.ossEnd, i > n && (g.className = "lt-past-date");
+    g.textContent = t.ossEnd, i > o && (g.className = "lt-past-date");
     const c = this.el("td", "", e);
-    return c.textContent = t.enterpriseEnd || t.ossEnd, i > l && (c.className = "lt-past-date"), { el: e, version: t.version.toLowerCase(), versionOriginal: t.versionOriginal || t.version };
+    return c.textContent = t.enterpriseEnd || t.ossEnd, i > n && (c.className = "lt-past-date"), { el: e, version: t.version.toLowerCase(), versionOriginal: t.version };
   }
   /**
    * Updates table visibility based on filter and visibleCount.
@@ -142,15 +177,15 @@ class v {
   updateTableVisibility() {
     const t = this.tableRows.filter((s) => s.version.includes(this.filterText));
     this.tableRows.forEach((s) => {
-      const n = s.el.querySelector(".lt-table-badge");
-      n.innerHTML = this.highlight(s.versionOriginal || s.version), s.el.classList.remove("lt-row-visible"), s.el.classList.add("lt-row-hidden");
+      const o = s.el.querySelector(".lt-table-badge");
+      o && (o.innerHTML = this.highlight(s.versionOriginal || s.version)), s.el.classList.remove("lt-row-visible"), s.el.classList.add("lt-row-hidden");
     });
     const e = this.filterText === "" && t.length > this.visibleCount;
     if ((e && !this.isExpanded ? t.slice(0, this.visibleCount) : t).forEach((s) => {
       s.el.classList.remove("lt-row-hidden"), s.el.classList.add("lt-row-visible");
     }), this.tableToggleContainer.innerHTML = "", e) {
-      const s = this.el("button", "lt-toggle-btn lt-table-toggle", this.tableToggleContainer), n = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="${this.isExpanded ? "18 15 12 9 6 15" : "6 9 12 15 18 9"}"></polyline></svg>`;
-      s.innerHTML = this.isExpanded ? `${this.t("less")} ${n}` : `${this.t("more", { n: t.length - this.visibleCount })} ${n}`, s.onclick = () => {
+      const s = this.el("button", "lt-toggle-btn lt-table-toggle", this.tableToggleContainer), o = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="${this.isExpanded ? "18 15 12 9 6 15" : "6 9 12 15 18 9"}"></polyline></svg>`;
+      s.innerHTML = this.isExpanded ? `${this.t("less")} ${o}` : `${this.t("more", { n: t.length - this.visibleCount })} ${o}`, s.onclick = () => {
         this.isExpanded = !this.isExpanded, this.updateVisibility();
       };
     }
@@ -175,21 +210,22 @@ class v {
   }
   /**
    * Shows the tooltip with provided content.
-   * @param {MouseEvent} e - The mouse event.
-   * @param {string} content - The HTML content for the tooltip.
+   * @param e - The mouse event or position object.
+   * @param content - The HTML content for the tooltip.
    */
   showTooltip(t, e) {
     this.tooltip.innerHTML = e, this.tooltip.style.display = "block", this.updateTooltipPos(t);
   }
   /**
    * Updates tooltip position relative to mouse.
-   * @param {MouseEvent} e - The mouse event.
+   * @param e - The mouse event or position object.
    */
   updateTooltipPos(t) {
-    const e = this.root.getBoundingClientRect(), i = 12;
-    let s = t.clientX - e.left + i, n = t.clientY - e.top + i;
-    const l = this.tooltip.offsetWidth, a = this.tooltip.offsetHeight;
-    s + l > this.root.offsetWidth && (s = t.clientX - e.left - l - i), n + a > this.root.offsetHeight && (n = t.clientY - e.top - a - i), this.tooltip.style.left = `${s}px`, this.tooltip.style.top = `${n}px`;
+    if (!this.root) return;
+    const e = this.root.getBoundingClientRect(), i = 12, s = "clientX" in t ? t.clientX : t.pageX - window.scrollX, o = "clientY" in t ? t.clientY : t.pageY - window.scrollY;
+    let n = (s || 0) - e.left + i, a = (o || 0) - e.top + i;
+    const l = this.tooltip.offsetWidth, h = this.tooltip.offsetHeight;
+    n + l > this.root.offsetWidth && (n = (s || 0) - e.left - l - i), a + h > this.root.offsetHeight && (a = (o || 0) - e.top - h - i), this.tooltip.style.left = `${n}px`, this.tooltip.style.top = `${a}px`;
   }
   /**
    * Hides the tooltip.
@@ -199,8 +235,8 @@ class v {
   }
   /**
    * Highlights the search term in a given text.
-   * @param {string} text - The text to process.
-   * @returns {string} The HTML with highlighted segments.
+   * @param text - The text to process.
+   * @returns The HTML with highlighted segments.
    */
   highlight(t) {
     if (!this.filterText) return t;
@@ -213,20 +249,21 @@ class v {
   }
   /**
    * Helper to create DOM elements with styles and classes.
-   * @param {string} tag - HTML tag.
-   * @param {string} className - CSS class name.
-   * @param {HTMLElement} [parent] - Parent element.
-   * @param {Object} [styles={}] - Inline styles.
-   * @returns {HTMLElement} The created element.
+   * @param tag - HTML tag.
+   * @param className - CSS class name.
+   * @param parent - Parent element.
+   * @param styles - Inline styles.
+   * @returns The created element.
    */
   el(t, e, i, s = {}) {
-    const n = document.createElement(t);
-    return e && (n.className = e), Object.assign(n.style, s), i && i.appendChild(n), n;
+    const o = document.createElement(t);
+    return e && (o.className = e), Object.assign(o.style, s), i && i.appendChild(o), o;
   }
   /**
    * Renders the toolbar with the filter input.
    */
   renderToolbar() {
+    if (!this.root) return;
     const t = this.el("div", "lt-toolbar", this.root);
     if (this.filterVersions) {
       const e = this.el("div", "lt-filter-container", t);
@@ -238,8 +275,8 @@ class v {
     }
     if (this.showMajorFilter) {
       const e = this.el("label", "lt-checkbox-label", t), i = this.el("input", "", e);
-      i.type = "checkbox", i.checked = this.majorFilterEnabled, i.onchange = (n) => {
-        this.majorFilterEnabled = n.target.checked, this.updateVisibility();
+      i.type = "checkbox", i.checked = this.majorFilterEnabled, i.onchange = (o) => {
+        this.majorFilterEnabled = o.target.checked, this.updateVisibility();
       };
       const s = this.el("span", "", e);
       s.textContent = this.t("majorOnly");
@@ -249,6 +286,7 @@ class v {
    * Renders the theme toggle button.
    */
   renderThemeToggle() {
+    if (!this.root) return;
     const t = this.el("button", "lt-theme-toggle-btn", this.root);
     t.title = this.t("dark"), t.setAttribute("aria-label", this.t("dark"));
     const e = {
@@ -256,7 +294,7 @@ class v {
       sun: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'
     };
     t.innerHTML = this.theme === "dark" ? e.sun : e.moon, t.onclick = () => {
-      this.theme = this.theme === "light" ? "dark" : "light", this.root.setAttribute("data-theme", this.theme), t.innerHTML = this.theme === "dark" ? e.sun : e.moon, t.setAttribute("aria-pressed", this.theme === "dark");
+      this.theme = this.theme === "light" ? "dark" : "light", this.root.setAttribute("data-theme", this.theme), t.innerHTML = this.theme === "dark" ? e.sun : e.moon, t.setAttribute("aria-pressed", (this.theme === "dark").toString());
     };
   }
   /**
@@ -275,19 +313,19 @@ class v {
   }
   /**
    * Toggles highlighting for a specific segment type.
-   * @param {string} type - 'oss', 'ent', or 'eol'.
+   * @param type - 'oss', 'ent', or 'eol'.
    */
   highlightSegment(t) {
-    this.activeHighlight = this.activeHighlight === t ? null : t, this.root.classList.remove("lt-highlight-oss", "lt-highlight-ent", "lt-highlight-eol"), this.activeHighlight && this.root.classList.add(`lt-highlight-${this.activeHighlight}`), this.renderLegend();
+    this.root && (this.activeHighlight = this.activeHighlight === t ? null : t, this.root.classList.remove("lt-highlight-oss", "lt-highlight-ent", "lt-highlight-eol"), this.activeHighlight && this.root.classList.add(`lt-highlight-${this.activeHighlight}`), this.renderLegend());
   }
   /**
    * Renders the year axis.
    */
   renderAxis() {
-    this.el("div", "", this.axis, { width: "96px", flexShrink: "0" }).setAttribute("role", "presentation");
+    this.el("div", "", this.axis, { width: "106px", flexShrink: "0" }).setAttribute("role", "presentation");
     for (let e = this.minYear; e <= this.maxYear; e++) {
       const i = this.el("div", "lt-year", this.axis);
-      i.textContent = e, i.setAttribute("role", "columnheader");
+      i.textContent = e.toString(), i.setAttribute("role", "columnheader");
     }
   }
   /**
@@ -302,65 +340,65 @@ class v {
   }
   /**
    * Creates a row for a specific version.
-   * @param {Object} item - The version data item.
-   * @returns {Object} Metadata about the created row.
+   * @param item - The version data item.
+   * @returns Metadata about the created row.
    */
   createRow(t, e) {
     const i = this.el("div", "lt-row row-entrance", this.tracks);
     i.setAttribute("role", "row"), i.style.transitionDelay = `${e * 0.05}s`;
     const s = this.el("div", "lt-version-label", i);
     s.setAttribute("role", "rowheader");
-    const n = Date.now(), l = new Date(t.ossStart).getTime(), a = new Date(t.ossEnd).getTime(), r = t.enterpriseEnd ? new Date(t.enterpriseEnd).getTime() : a, h = n >= l && n <= a ? "lt-status-oss" : n > a && n <= r ? "lt-status-ent" : n > r ? "lt-status-expired" : "";
+    const o = Date.now(), n = new Date(t.ossStart).getTime(), a = new Date(t.ossEnd).getTime(), l = t.enterpriseEnd ? new Date(t.enterpriseEnd).getTime() : a, h = o < n ? "lt-status-future" : o >= n && o <= a ? "lt-status-oss" : o > a && o <= l ? "lt-status-ent" : o > l ? "lt-status-expired" : "";
     if (h && s.classList.add(h), t.isMajor && s.classList.add("lt-version-major"), t.releaseNotesUrl) {
-      const d = this.el("a", "lt-version-link", s);
-      d.href = t.releaseNotesUrl, d.target = "_blank", d.innerHTML = this.highlight(t.version), d.title = this.t("notes", { v: t.version }), d.setAttribute("aria-label", this.t("notes", { v: t.version }));
+      const u = this.el("a", "lt-version-link", s);
+      u.href = t.releaseNotesUrl, u.target = "_blank", u.innerHTML = this.highlight(t.version), u.title = this.t("notes", { v: t.version }), u.setAttribute("aria-label", this.t("notes", { v: t.version }));
     } else
-      s.innerHTML = this.highlight(t.version);
-    const o = this.el("div", "lt-track-container", i);
-    o.setAttribute("role", "gridcell");
-    const g = this.splitSupport ? t.ossEnd : t.ossStart, c = t.enterpriseEnd || t.ossEnd, p = new Date(this.maxYear, 11, 31).toISOString().split("T")[0];
-    return o.appendChild(this.createBar(t, c, p, "lt-bar-eol", this.t("eol"))), o.appendChild(this.createBar(t, g, t.enterpriseEnd || t.ossEnd, "lt-bar-ent", this.t("ent"))), o.appendChild(this.createBar(t, t.ossStart, t.ossEnd, "lt-bar-oss", this.t("oss"))), { el: i, version: t.version.toLowerCase(), versionOriginal: t.version, isMajor: t.isMajor };
+      s.innerHTML = this.highlight(t.version), s.title = t.version;
+    const r = this.el("div", "lt-track-container", i);
+    r.setAttribute("role", "gridcell");
+    const g = this.splitSupport ? t.ossEnd : t.ossStart, c = t.enterpriseEnd || t.ossEnd, d = new Date(this.maxYear, 11, 31).toISOString().split("T")[0];
+    return r.appendChild(this.createBar(t, c, d, "lt-bar-eol", this.t("eol"))), r.appendChild(this.createBar(t, g, t.enterpriseEnd || t.ossEnd, "lt-bar-ent", this.t("ent"))), r.appendChild(this.createBar(t, t.ossStart, t.ossEnd, "lt-bar-oss", this.t("oss"))), { el: i, version: t.version.toLowerCase(), versionOriginal: t.version, isMajor: t.isMajor };
   }
   /**
    * Creates a colored bar segment for the timeline.
-   * @param {Object} item - The version item.
-   * @param {string} startStr - Start date string.
-   * @param {string} endStr - End date string.
-   * @param {string} className - CSS class.
-   * @param {string} label - Support type label for tooltip.
-   * @returns {HTMLElement} The created bar element.
+   * @param item - The version item.
+   * @param startStr - Start date string.
+   * @param endStr - End date string.
+   * @param className - CSS class.
+   * @param label - Support type label for tooltip.
+   * @returns The created bar element.
    */
-  createBar(t, e, i, s, n) {
-    const l = new Date(e).getTime(), a = new Date(i).getTime(), r = new Date(this.minYear, 0, 1).getTime(), h = new Date(this.maxYear, 11, 31).getTime() - r, o = this.el("div", `lt-bar-segment ${s}`), g = s === "lt-bar-oss" ? "lt-segment-oss" : s === "lt-bar-ent" ? "lt-segment-ent" : "lt-segment-eol";
-    o.classList.add(g), o.style.left = `${(l - r) / h * 100}%`, o.style.width = `${(a - l) / h * 100}%`, o.setAttribute("role", "img"), o.setAttribute("aria-label", `${n}: ${t.version} (${e} to ${i})`), o.tabIndex = 0;
+  createBar(t, e, i, s, o) {
+    const n = new Date(e).getTime(), a = new Date(i).getTime(), l = new Date(this.minYear, 0, 1).getTime(), h = new Date(this.maxYear, 11, 31).getTime() - l, r = this.el("div", `lt-bar-segment ${s}`), g = s === "lt-bar-oss" ? "lt-segment-oss" : s === "lt-bar-ent" ? "lt-segment-ent" : "lt-segment-eol";
+    r.classList.add(g), r.style.left = `${(n - l) / h * 100}%`, r.style.width = `${(a - n) / h * 100}%`, r.setAttribute("role", "img"), r.setAttribute("aria-label", `${o}: ${t.version} (${e} to ${i})`), r.tabIndex = 0;
     const c = `
-      <div class="lt-tooltip-header">${n} - ${t.version}</div>
+      <div class="lt-tooltip-header">${o} - ${t.version}</div>
       <div class="lt-tooltip-date"><strong>Du:</strong> ${e}</div>
       <div class="lt-tooltip-date"><strong>Au:</strong> ${i}</div>
     `;
-    return o.onmouseenter = (p) => this.showTooltip(p, c), o.onmousemove = (p) => this.updateTooltipPos(p), o.onmouseleave = () => this.hideTooltip(), o.onfocus = (p) => {
-      const d = o.getBoundingClientRect();
+    return r.onmouseenter = (d) => this.showTooltip(d, c), r.onmousemove = (d) => this.updateTooltipPos(d), r.onmouseleave = () => this.hideTooltip(), r.onfocus = () => {
+      const d = r.getBoundingClientRect();
       this.showTooltip({ pageX: d.left + window.scrollX, pageY: d.top + window.scrollY - 40 }, c);
-    }, o.onblur = () => this.hideTooltip(), o;
+    }, r.onblur = () => this.hideTooltip(), r;
   }
   /**
    * Updates visibility of rows based on filtering and expansion state.
    */
   updateVisibility() {
     const t = this.rows.filter((s) => {
-      const n = s.version.includes(this.filterText), l = this.majorFilterEnabled ? s.isMajor : !0;
-      return n && l;
+      const o = s.version.includes(this.filterText), n = this.majorFilterEnabled ? s.isMajor : !0;
+      return o && n;
     });
     this.rows.forEach((s) => {
-      const n = s.el.querySelector(".lt-version-label"), l = n.querySelector(".lt-version-link");
-      l ? l.innerHTML = this.highlight(s.versionOriginal || s.version) : n.innerHTML = this.highlight(s.versionOriginal || s.version), s.el.classList.remove("lt-row-visible"), s.el.classList.add("lt-row-hidden");
+      const o = s.el.querySelector(".lt-version-label"), n = o.querySelector(".lt-version-link");
+      n ? n.innerHTML = this.highlight(s.versionOriginal || s.version) : o.innerHTML = this.highlight(s.versionOriginal || s.version), s.el.classList.remove("lt-row-visible"), s.el.classList.add("lt-row-hidden");
     });
     const e = this.filterText === "" && t.length > this.visibleCount;
     if ((e && !this.isExpanded ? t.slice(0, this.visibleCount) : t).forEach((s) => {
       s.el.classList.remove("lt-row-hidden"), s.el.classList.add("lt-row-visible");
     }), this.showTable && this.updateTableVisibility(), this.toggleContainer.innerHTML = "", e) {
-      const s = this.el("button", "lt-toggle-btn", this.toggleContainer), n = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="${this.isExpanded ? "18 15 12 9 6 15" : "6 9 12 15 18 9"}"></polyline></svg>`;
-      s.innerHTML = this.isExpanded ? `${this.t("less")} ${n}` : `${this.t("more", { n: t.length - this.visibleCount })} ${n}`, s.setAttribute("aria-expanded", this.isExpanded), s.onclick = () => {
+      const s = this.el("button", "lt-toggle-btn", this.toggleContainer), o = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="${this.isExpanded ? "18 15 12 9 6 15" : "6 9 12 15 18 9"}"></polyline></svg>`;
+      s.innerHTML = this.isExpanded ? `${this.t("less")} ${o}` : `${this.t("more", { n: t.length - this.visibleCount })} ${o}`, s.setAttribute("aria-expanded", this.isExpanded.toString()), s.onclick = () => {
         this.isExpanded = !this.isExpanded, this.updateVisibility();
       };
     }
@@ -371,12 +409,12 @@ class v {
   renderCurrentDateLine() {
     const t = new Date(this.minYear, 0, 1).getTime(), e = new Date(this.maxYear, 11, 31).getTime() - t, i = Date.now() - t;
     if (i < 0 || i > e) return;
-    const s = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], n = this.el("div", "lt-current-date-indicator", this.indicators);
-    n.style.left = `${i / e * 100}%`, n.setAttribute("role", "separator"), n.setAttribute("aria-label", this.t("today", { date: s }));
-    const l = this.el("div", "lt-current-date-badge", n);
-    l.textContent = s, l.setAttribute("aria-hidden", "true");
+    const s = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.el("div", "lt-current-date-indicator", this.indicators);
+    o.style.left = `${i / e * 100}%`, o.setAttribute("role", "separator"), o.setAttribute("aria-label", this.t("today", { date: s }));
+    const n = this.el("div", "lt-current-date-badge", o);
+    n.textContent = s, n.setAttribute("aria-hidden", "true");
   }
 }
 export {
-  v as default
+  f as default
 };

package/dist/timeline.umd.cjs

@@ -1,8 +1,8 @@
-(function(u,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(u=typeof globalThis<"u"?globalThis:u||self,u.Timeline=b())})(this,(function(){"use strict";const u={en:{filter:"Filter versions...",oss:"OSS Support",ent:"Enterprise Support",eol:"Out of Support",less:"Show Less",more:"Show {n} more versions",notes:"View Release Notes for {v}",dark:"Toggle Dark Mode",ossDesc:"Free security updates and bugfixes.",entDesc:"Expert support during OSS plus extended support after EOL.",eolDesc:"End of life. No further updates are provided.",today:"Today's date: {date}",branch:"Branch",initial:"Initial Release",ossEnd:"End OSS",entEnd:"End Enterprise *",majorOnly:"Major versions only"},fr:{filter:"Filtrer les versions...",oss:"Support OSS",ent:"Support Entreprise",eol:"Fin de support",less:"Voir moins",more:"Voir {n} versions supplémentaires",notes:"Voir les notes de version pour {v}",dark:"Changer le mode sombre",ossDesc:"Mises à jour de sécurité et corrections de bugs gratuites.",entDesc:"Support pendant la période OSS plus support étendu après.",eolDesc:"Version en fin de vie. Plus de mises à jour.",today:"Date du jour : {date}",branch:"Version",initial:"Sortie initiale",ossEnd:"Fin OSS",entEnd:"Fin Entreprise *",majorOnly:"Versions majeures uniquement"}};class b{constructor(t,e,i={}){this.root=document.getElementById(t),this.root&&(this.options=i,this.visibleCount=i.visibleCount||3,this.showTable=i.showTable!==!1,this.showThemeToggle=i.showThemeToggle!==!1,this.showLegend=i.showLegend!==!1,this.filterVersions=i.filterVersions!==!1,this.splitSupport=i.splitSupport===!0,this.compactMode=i.compactMode===!0,this.showMajorFilter=i.showMajorFilter===!0,this.isExpanded=!1,this.theme="light",this.filterText="",this.majorFilterEnabled=!1,this.activeHighlight=null,this.root.classList.add("lt-root"),this.root.classList.toggle("lt-mode-split",this.splitSupport),this.root.classList.toggle("lt-mode-overlay",!this.splitSupport),this.root.classList.toggle("lt-mode-compact",this.compactMode),this.root.setAttribute("data-theme",this.theme),this.translations={...u,...i.i18n||{}},this.locale=i.locale||this.detectLanguage(),this.setupBaseLayout(),this.updateData(e))}detectLanguage(){const t=(navigator.language||"en").split("-")[0];return this.translations[t]?t:"en"}t(t,e={}){let i=(this.translations[this.locale]||this.translations.en)[t]||t;return Object.keys(e).forEach(s=>i=i.replace(`{${s}}`,e[s])),i}setupBaseLayout(){this.root.innerHTML="",this.root.setAttribute("role","application"),this.root.setAttribute("aria-label","Product Lifecycle Timeline"),this.renderToolbar(),this.showThemeToggle&&this.renderThemeToggle(),this.showTable&&(this.tableContainer=this.el("div","lt-table-container",this.root)),this.wrapper=this.el("div","lt-wrapper",this.root),this.wrapper.setAttribute("role","grid"),this.wrapper.setAttribute("aria-readonly","true"),this.axis=this.el("div","lt-axis",this.wrapper),this.axis.setAttribute("role","row"),this.tracks=this.el("div","lt-tracks",this.wrapper),this.showLegend&&(this.legendContainer=this.el("div","lt-legend-container",this.wrapper))}updateData(t){this.data=this.validateData(t||[]),this.calculateTimeRange(),this.render()}validateData(t){return t.filter((e,i)=>{const n=["version","ossStart","ossEnd"].filter(r=>!e[r]);if(n.length>0)return console.warn(`[Timeline] Missing fields for item at index ${i}: ${n.join(", ")}`),!1;const a=["ossStart","ossEnd","enterpriseEnd"].filter(r=>e[r]).filter(r=>isNaN(new Date(e[r]).getTime()));return a.length>0?(console.warn(`[Timeline] Invalid date format for item "${e.version}": ${a.join(", ")}`),!1):!0})}calculateTimeRange(){if(this.currentDate=new Date,!this.data.length){this.minYear=this.currentDate.getFullYear()-1,this.maxYear=this.currentDate.getFullYear()+3;return}const t=this.data.flatMap(e=>[new Date(e.ossStart),new Date(e.enterpriseEnd||e.ossEnd)]);this.minYear=new Date(Math.min(...t)).getFullYear(),this.maxYear=new Date(Math.max(...t)).getFullYear()}renderTable(){const t=this.el("table","lt-table",this.tableContainer);t.setAttribute("aria-label","Project support");const e=this.el("thead","",t),i=this.el("tr","",e);[this.t("branch"),this.t("initial"),this.t("ossEnd"),this.t("entEnd")].forEach(s=>{this.el("th","",i).textContent=s}),this.tableBody=this.el("tbody","",t),this.tableRows=this.data.map(s=>this.createTableRow(s)),this.tableToggleContainer=this.el("div","lt-table-toggle",this.tableContainer),this.updateTableVisibility()}createTableRow(t){const e=this.el("tr","",this.tableBody),i=Date.now(),s=new Date(t.ossStart).getTime(),n=new Date(t.ossEnd).getTime(),l=t.enterpriseEnd?new Date(t.enterpriseEnd).getTime():n,a=i>=s&&i<=n?"lt-status-oss":i>n&&i<=l?"lt-status-ent":i>l?"lt-status-expired":"",r=this.el("td","",e);let h=`<span class="lt-table-badge ${a}">${t.versionOriginal||t.version}</span>`;t.releaseNotesUrl?r.innerHTML=`<a href="${t.releaseNotesUrl}" target="_blank" class="lt-table-version-link">${h}</a>`:r.innerHTML=h;const o=this.el("td","",e);o.textContent=t.ossStart,i>s&&(o.className="lt-past-date");const g=this.el("td","",e);g.textContent=t.ossEnd,i>n&&(g.className="lt-past-date");const c=this.el("td","",e);return c.textContent=t.enterpriseEnd||t.ossEnd,i>l&&(c.className="lt-past-date"),{el:e,version:t.version.toLowerCase(),versionOriginal:t.versionOriginal||t.version}}updateTableVisibility(){const t=this.tableRows.filter(s=>s.version.includes(this.filterText));this.tableRows.forEach(s=>{const n=s.el.querySelector(".lt-table-badge");n.innerHTML=this.highlight(s.versionOriginal||s.version),s.el.classList.remove("lt-row-visible"),s.el.classList.add("lt-row-hidden")});const e=this.filterText===""&&t.length>this.visibleCount;if((e&&!this.isExpanded?t.slice(0,this.visibleCount):t).forEach(s=>{s.el.classList.remove("lt-row-hidden"),s.el.classList.add("lt-row-visible")}),this.tableToggleContainer.innerHTML="",e){const s=this.el("button","lt-toggle-btn lt-table-toggle",this.tableToggleContainer),n=`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="${this.isExpanded?"18 15 12 9 6 15":"6 9 12 15 18 9"}"></polyline></svg>`;s.innerHTML=this.isExpanded?`${this.t("less")} ${n}`:`${this.t("more",{n:t.length-this.visibleCount})} ${n}`,s.onclick=()=>{this.isExpanded=!this.isExpanded,this.updateVisibility()}}}render(){this.showTable&&(this.tableContainer.innerHTML=""),this.axis.innerHTML="",this.tracks.innerHTML="",this.showLegend&&(this.legendContainer.innerHTML=""),this.showTable&&this.renderTable(),this.renderAxis(),this.grid=this.el("div","lt-grid-lines-container",this.tracks),this.indicators=this.el("div","lt-indicators-container",this.tracks),this.renderGrid(),this.renderCurrentDateLine(),this.rows=this.data.map((t,e)=>this.createRow(t,e)),this.toggleContainer=this.el("div","lt-more-toggle",this.tracks,{paddingTop:"10px",display:"flex",justifyContent:"center",position:"relative",zIndex:"10"}),this.updateVisibility(),this.showLegend&&this.renderLegend(),this.setupTooltip()}setupTooltip(){this.tooltip&&this.tooltip.remove(),this.tooltip=this.el("div","lt-tooltip",this.root),this.tooltip.style.display="none",this.tooltip.setAttribute("role","tooltip")}showTooltip(t,e){this.tooltip.innerHTML=e,this.tooltip.style.display="block",this.updateTooltipPos(t)}updateTooltipPos(t){const e=this.root.getBoundingClientRect(),i=12;let s=t.clientX-e.left+i,n=t.clientY-e.top+i;const l=this.tooltip.offsetWidth,a=this.tooltip.offsetHeight;s+l>this.root.offsetWidth&&(s=t.clientX-e.left-l-i),n+a>this.root.offsetHeight&&(n=t.clientY-e.top-a-i),this.tooltip.style.left=`${s}px`,this.tooltip.style.top=`${n}px`}hideTooltip(){this.tooltip&&(this.tooltip.style.display="none")}highlight(t){if(!this.filterText)return t;try{const e=new RegExp(`(${this.filterText})`,"gi");return t.replace(e,'<mark class="lt-highlight-match">$1</mark>')}catch{return t}}el(t,e,i,s={}){const n=document.createElement(t);return e&&(n.className=e),Object.assign(n.style,s),i&&i.appendChild(n),n}renderToolbar(){const t=this.el("div","lt-toolbar",this.root);if(this.filterVersions){const e=this.el("div","lt-filter-container",t);e.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>';const i=this.el("input","lt-filter-input",e);i.placeholder=this.t("filter"),i.value=this.filterText,i.setAttribute("aria-label",this.t("filter")),i.oninput=s=>{this.filterText=s.target.value.toLowerCase().trim(),this.updateVisibility()}}if(this.showMajorFilter){const e=this.el("label","lt-checkbox-label",t),i=this.el("input","",e);i.type="checkbox",i.checked=this.majorFilterEnabled,i.onchange=n=>{this.majorFilterEnabled=n.target.checked,this.updateVisibility()};const s=this.el("span","",e);s.textContent=this.t("majorOnly")}}renderThemeToggle(){const t=this.el("button","lt-theme-toggle-btn",this.root);t.title=this.t("dark"),t.setAttribute("aria-label",this.t("dark"));const e={moon:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>',sun:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'};t.innerHTML=this.theme==="dark"?e.sun:e.moon,t.onclick=()=>{this.theme=this.theme==="light"?"dark":"light",this.root.setAttribute("data-theme",this.theme),t.innerHTML=this.theme==="dark"?e.sun:e.moon,t.setAttribute("aria-pressed",this.theme==="dark")}}renderLegend(){this.legendContainer.innerHTML="";const t=this.el("div","lt-legend",this.legendContainer);t.setAttribute("role","complementary"),t.setAttribute("aria-label","Support Legend"),["oss","ent","eol"].forEach(e=>{const i=this.el("div",`lt-legend-block ${e==="ent"?"commercial":e}`,t);i.classList.add("lt-legend-item-reactive"),this.activeHighlight===e&&i.classList.add("lt-active-highlight"),i.innerHTML=`
+(function(u,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(u=typeof globalThis<"u"?globalThis:u||self,u.Timeline=p())})(this,(function(){"use strict";const u={en:{filter:"Filter versions...",oss:"OSS Support",ent:"Enterprise Support",eol:"Out of Support",less:"Show Less",more:"Show {n} more versions",notes:"View Release Notes for {v}",dark:"Toggle Dark Mode",ossDesc:"Free security updates and bugfixes.",entDesc:"Expert support during OSS plus extended support after EOL.",eolDesc:"End of life. No further updates are provided.",today:"Today's date: {date}",branch:"Branch",initial:"Initial Release",ossEnd:"End OSS",entEnd:"End Enterprise *",majorOnly:"Major versions only"},fr:{filter:"Filtrer les versions...",oss:"Support OSS",ent:"Support Entreprise",eol:"Fin de support",less:"Voir moins",more:"Voir {n} versions supplémentaires",notes:"Voir les notes de version pour {v}",dark:"Changer le mode sombre",ossDesc:"Mises à jour de sécurité et corrections de bugs gratuites.",entDesc:"Support pendant la période OSS plus support étendu après.",eolDesc:"Version en fin de vie. Plus de mises à jour.",today:"Date du jour : {date}",branch:"Version",initial:"Sortie initiale",ossEnd:"Fin OSS",entEnd:"Fin Entreprise *",majorOnly:"Versions majeures uniquement"}};class p{root;options;visibleCount;showTable;showThemeToggle;showLegend;filterVersions;splitSupport;compactMode;showMajorFilter;isExpanded;theme;filterText;majorFilterEnabled;activeHighlight;translations;locale;data=[];minYear=0;maxYear=0;currentDate=new Date;tableContainer;wrapper;axis;tracks;legendContainer;tableBody;tableRows=[];tableToggleContainer;grid;indicators;rows=[];toggleContainer;tooltip;constructor(t,e,i={}){if(this.root=document.getElementById(t),!this.root){this.options=i,this.visibleCount=3,this.showTable=!0,this.showThemeToggle=!0,this.showLegend=!0,this.filterVersions=!0,this.splitSupport=!1,this.compactMode=!1,this.showMajorFilter=!1,this.isExpanded=!1,this.theme="light",this.filterText="",this.majorFilterEnabled=!1,this.activeHighlight=null,this.translations={},this.locale="en";return}this.options=i,this.visibleCount=i.visibleCount||3,this.showTable=i.showTable!==!1,this.showThemeToggle=i.showThemeToggle!==!1,this.showLegend=i.showLegend!==!1,this.filterVersions=i.filterVersions!==!1,this.splitSupport=i.splitSupport===!0,this.compactMode=i.compactMode===!0,this.showMajorFilter=i.showMajorFilter===!0,this.isExpanded=!1,this.theme="light",this.filterText="",this.majorFilterEnabled=i.majorFilterDefault===!0,this.activeHighlight=null,this.root.classList.add("lt-root"),this.root.classList.toggle("lt-mode-split",this.splitSupport),this.root.classList.toggle("lt-mode-overlay",!this.splitSupport),this.root.classList.toggle("lt-mode-compact",this.compactMode),this.root.setAttribute("data-theme",this.theme),this.translations={...u,...i.i18n||{}},this.locale=i.locale||this.detectLanguage(),this.setupBaseLayout(),this.updateData(e)}detectLanguage(){const t=(navigator.language||"en").split("-")[0];return this.translations[t]?t:"en"}t(t,e={}){let i=(this.translations[this.locale]||this.translations.en)[t]||t;return Object.keys(e).forEach(s=>i=i.replace(`{${s}}`,e[s])),i}setupBaseLayout(){this.root&&(this.root.innerHTML="",this.root.setAttribute("role","application"),this.root.setAttribute("aria-label","Product Lifecycle Timeline"),this.renderToolbar(),this.showThemeToggle&&this.renderThemeToggle(),this.showTable&&(this.tableContainer=this.el("div","lt-table-container",this.root)),this.wrapper=this.el("div","lt-wrapper",this.root),this.wrapper.setAttribute("role","grid"),this.wrapper.setAttribute("aria-readonly","true"),this.axis=this.el("div","lt-axis",this.wrapper),this.axis.setAttribute("role","row"),this.tracks=this.el("div","lt-tracks",this.wrapper),this.showLegend&&(this.legendContainer=this.el("div","lt-legend-container",this.wrapper)))}updateData(t){this.data=this.validateData(t||[]),this.calculateTimeRange(),this.render()}validateData(t){return t.filter((e,i)=>{const n=["version","ossStart","ossEnd"].filter(l=>!e[l]);if(n.length>0)return console.warn(`[Timeline] Missing fields for item at index ${i}: ${n.join(", ")}`),!1;const a=["ossStart","ossEnd","enterpriseEnd"].filter(l=>e[l]).filter(l=>isNaN(new Date(e[l]).getTime()));return a.length>0?(console.warn(`[Timeline] Invalid date format for item "${e.version}": ${a.join(", ")}`),!1):!0})}calculateTimeRange(){if(this.currentDate=new Date,!this.data.length){this.minYear=this.currentDate.getFullYear()-1,this.maxYear=this.currentDate.getFullYear()+3;return}const t=this.data.flatMap(e=>[new Date(e.ossStart).getTime(),new Date(e.enterpriseEnd||e.ossEnd).getTime()]);this.minYear=new Date(Math.min(...t)).getFullYear(),this.maxYear=new Date(Math.max(...t)).getFullYear()}renderTable(){const t=this.el("table","lt-table",this.tableContainer);t.setAttribute("aria-label","Project support");const e=this.el("thead","",t),i=this.el("tr","",e);[this.t("branch"),this.t("initial"),this.t("ossEnd"),this.t("entEnd")].forEach(s=>{this.el("th","",i).textContent=s}),this.tableBody=this.el("tbody","",t),this.tableRows=this.data.map(s=>this.createTableRow(s)),this.tableToggleContainer=this.el("div","lt-table-toggle",this.tableContainer),this.updateTableVisibility()}createTableRow(t){const e=this.el("tr","",this.tableBody),i=Date.now(),s=new Date(t.ossStart).getTime(),n=new Date(t.ossEnd).getTime(),o=t.enterpriseEnd?new Date(t.enterpriseEnd).getTime():n,a=i>=s&&i<=n?"lt-status-oss":i>n&&i<=o?"lt-status-ent":i>o?"lt-status-expired":"",l=this.el("td","",e);let h=`<span class="lt-table-badge ${a}">${t.version}</span>`;t.releaseNotesUrl?l.innerHTML=`<a href="${t.releaseNotesUrl}" target="_blank" class="lt-table-version-link">${h}</a>`:l.innerHTML=h;const r=this.el("td","",e);r.textContent=t.ossStart,i>s&&(r.className="lt-past-date");const g=this.el("td","",e);g.textContent=t.ossEnd,i>n&&(g.className="lt-past-date");const c=this.el("td","",e);return c.textContent=t.enterpriseEnd||t.ossEnd,i>o&&(c.className="lt-past-date"),{el:e,version:t.version.toLowerCase(),versionOriginal:t.version}}updateTableVisibility(){const t=this.tableRows.filter(s=>s.version.includes(this.filterText));this.tableRows.forEach(s=>{const n=s.el.querySelector(".lt-table-badge");n&&(n.innerHTML=this.highlight(s.versionOriginal||s.version)),s.el.classList.remove("lt-row-visible"),s.el.classList.add("lt-row-hidden")});const e=this.filterText===""&&t.length>this.visibleCount;if((e&&!this.isExpanded?t.slice(0,this.visibleCount):t).forEach(s=>{s.el.classList.remove("lt-row-hidden"),s.el.classList.add("lt-row-visible")}),this.tableToggleContainer.innerHTML="",e){const s=this.el("button","lt-toggle-btn lt-table-toggle",this.tableToggleContainer),n=`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="${this.isExpanded?"18 15 12 9 6 15":"6 9 12 15 18 9"}"></polyline></svg>`;s.innerHTML=this.isExpanded?`${this.t("less")} ${n}`:`${this.t("more",{n:t.length-this.visibleCount})} ${n}`,s.onclick=()=>{this.isExpanded=!this.isExpanded,this.updateVisibility()}}}render(){this.showTable&&(this.tableContainer.innerHTML=""),this.axis.innerHTML="",this.tracks.innerHTML="",this.showLegend&&(this.legendContainer.innerHTML=""),this.showTable&&this.renderTable(),this.renderAxis(),this.grid=this.el("div","lt-grid-lines-container",this.tracks),this.indicators=this.el("div","lt-indicators-container",this.tracks),this.renderGrid(),this.renderCurrentDateLine(),this.rows=this.data.map((t,e)=>this.createRow(t,e)),this.toggleContainer=this.el("div","lt-more-toggle",this.tracks,{paddingTop:"10px",display:"flex",justifyContent:"center",position:"relative",zIndex:"10"}),this.updateVisibility(),this.showLegend&&this.renderLegend(),this.setupTooltip()}setupTooltip(){this.tooltip&&this.tooltip.remove(),this.tooltip=this.el("div","lt-tooltip",this.root),this.tooltip.style.display="none",this.tooltip.setAttribute("role","tooltip")}showTooltip(t,e){this.tooltip.innerHTML=e,this.tooltip.style.display="block",this.updateTooltipPos(t)}updateTooltipPos(t){if(!this.root)return;const e=this.root.getBoundingClientRect(),i=12,s="clientX"in t?t.clientX:t.pageX-window.scrollX,n="clientY"in t?t.clientY:t.pageY-window.scrollY;let o=(s||0)-e.left+i,a=(n||0)-e.top+i;const l=this.tooltip.offsetWidth,h=this.tooltip.offsetHeight;o+l>this.root.offsetWidth&&(o=(s||0)-e.left-l-i),a+h>this.root.offsetHeight&&(a=(n||0)-e.top-h-i),this.tooltip.style.left=`${o}px`,this.tooltip.style.top=`${a}px`}hideTooltip(){this.tooltip&&(this.tooltip.style.display="none")}highlight(t){if(!this.filterText)return t;try{const e=new RegExp(`(${this.filterText})`,"gi");return t.replace(e,'<mark class="lt-highlight-match">$1</mark>')}catch{return t}}el(t,e,i,s={}){const n=document.createElement(t);return e&&(n.className=e),Object.assign(n.style,s),i&&i.appendChild(n),n}renderToolbar(){if(!this.root)return;const t=this.el("div","lt-toolbar",this.root);if(this.filterVersions){const e=this.el("div","lt-filter-container",t);e.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>';const i=this.el("input","lt-filter-input",e);i.placeholder=this.t("filter"),i.value=this.filterText,i.setAttribute("aria-label",this.t("filter")),i.oninput=s=>{this.filterText=s.target.value.toLowerCase().trim(),this.updateVisibility()}}if(this.showMajorFilter){const e=this.el("label","lt-checkbox-label",t),i=this.el("input","",e);i.type="checkbox",i.checked=this.majorFilterEnabled,i.onchange=n=>{this.majorFilterEnabled=n.target.checked,this.updateVisibility()};const s=this.el("span","",e);s.textContent=this.t("majorOnly")}}renderThemeToggle(){if(!this.root)return;const t=this.el("button","lt-theme-toggle-btn",this.root);t.title=this.t("dark"),t.setAttribute("aria-label",this.t("dark"));const e={moon:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>',sun:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'};t.innerHTML=this.theme==="dark"?e.sun:e.moon,t.onclick=()=>{this.theme=this.theme==="light"?"dark":"light",this.root.setAttribute("data-theme",this.theme),t.innerHTML=this.theme==="dark"?e.sun:e.moon,t.setAttribute("aria-pressed",(this.theme==="dark").toString())}}renderLegend(){this.legendContainer.innerHTML="";const t=this.el("div","lt-legend",this.legendContainer);t.setAttribute("role","complementary"),t.setAttribute("aria-label","Support Legend"),["oss","ent","eol"].forEach(e=>{const i=this.el("div",`lt-legend-block ${e==="ent"?"commercial":e}`,t);i.classList.add("lt-legend-item-reactive"),this.activeHighlight===e&&i.classList.add("lt-active-highlight"),i.innerHTML=`
         <div class="lt-legend-icon" aria-hidden="true"></div>
         <div><h3>${this.t(e)}</h3><p>${this.t(e+"Desc")}</p></div>
-      `,i.onclick=()=>this.highlightSegment(e)})}highlightSegment(t){this.activeHighlight=this.activeHighlight===t?null:t,this.root.classList.remove("lt-highlight-oss","lt-highlight-ent","lt-highlight-eol"),this.activeHighlight&&this.root.classList.add(`lt-highlight-${this.activeHighlight}`),this.renderLegend()}renderAxis(){this.el("div","",this.axis,{width:"96px",flexShrink:"0"}).setAttribute("role","presentation");for(let e=this.minYear;e<=this.maxYear;e++){const i=this.el("div","lt-year",this.axis);i.textContent=e,i.setAttribute("role","columnheader")}}renderGrid(){const t=new Date(this.minYear,0,1).getTime(),e=new Date(this.maxYear,11,31).getTime()-t;for(let i=this.minYear;i<=this.maxYear;i++){const s=this.el("div","lt-year-grid-line",this.grid);s.style.left=`${(new Date(i,0,1).getTime()-t)/e*100}%`,s.setAttribute("role","presentation")}}createRow(t,e){const i=this.el("div","lt-row row-entrance",this.tracks);i.setAttribute("role","row"),i.style.transitionDelay=`${e*.05}s`;const s=this.el("div","lt-version-label",i);s.setAttribute("role","rowheader");const n=Date.now(),l=new Date(t.ossStart).getTime(),a=new Date(t.ossEnd).getTime(),r=t.enterpriseEnd?new Date(t.enterpriseEnd).getTime():a,h=n>=l&&n<=a?"lt-status-oss":n>a&&n<=r?"lt-status-ent":n>r?"lt-status-expired":"";if(h&&s.classList.add(h),t.isMajor&&s.classList.add("lt-version-major"),t.releaseNotesUrl){const d=this.el("a","lt-version-link",s);d.href=t.releaseNotesUrl,d.target="_blank",d.innerHTML=this.highlight(t.version),d.title=this.t("notes",{v:t.version}),d.setAttribute("aria-label",this.t("notes",{v:t.version}))}else s.innerHTML=this.highlight(t.version);const o=this.el("div","lt-track-container",i);o.setAttribute("role","gridcell");const g=this.splitSupport?t.ossEnd:t.ossStart,c=t.enterpriseEnd||t.ossEnd,p=new Date(this.maxYear,11,31).toISOString().split("T")[0];return o.appendChild(this.createBar(t,c,p,"lt-bar-eol",this.t("eol"))),o.appendChild(this.createBar(t,g,t.enterpriseEnd||t.ossEnd,"lt-bar-ent",this.t("ent"))),o.appendChild(this.createBar(t,t.ossStart,t.ossEnd,"lt-bar-oss",this.t("oss"))),{el:i,version:t.version.toLowerCase(),versionOriginal:t.version,isMajor:t.isMajor}}createBar(t,e,i,s,n){const l=new Date(e).getTime(),a=new Date(i).getTime(),r=new Date(this.minYear,0,1).getTime(),h=new Date(this.maxYear,11,31).getTime()-r,o=this.el("div",`lt-bar-segment ${s}`),g=s==="lt-bar-oss"?"lt-segment-oss":s==="lt-bar-ent"?"lt-segment-ent":"lt-segment-eol";o.classList.add(g),o.style.left=`${(l-r)/h*100}%`,o.style.width=`${(a-l)/h*100}%`,o.setAttribute("role","img"),o.setAttribute("aria-label",`${n}: ${t.version} (${e} to ${i})`),o.tabIndex=0;const c=`
+      `,i.onclick=()=>this.highlightSegment(e)})}highlightSegment(t){this.root&&(this.activeHighlight=this.activeHighlight===t?null:t,this.root.classList.remove("lt-highlight-oss","lt-highlight-ent","lt-highlight-eol"),this.activeHighlight&&this.root.classList.add(`lt-highlight-${this.activeHighlight}`),this.renderLegend())}renderAxis(){this.el("div","",this.axis,{width:"106px",flexShrink:"0"}).setAttribute("role","presentation");for(let e=this.minYear;e<=this.maxYear;e++){const i=this.el("div","lt-year",this.axis);i.textContent=e.toString(),i.setAttribute("role","columnheader")}}renderGrid(){const t=new Date(this.minYear,0,1).getTime(),e=new Date(this.maxYear,11,31).getTime()-t;for(let i=this.minYear;i<=this.maxYear;i++){const s=this.el("div","lt-year-grid-line",this.grid);s.style.left=`${(new Date(i,0,1).getTime()-t)/e*100}%`,s.setAttribute("role","presentation")}}createRow(t,e){const i=this.el("div","lt-row row-entrance",this.tracks);i.setAttribute("role","row"),i.style.transitionDelay=`${e*.05}s`;const s=this.el("div","lt-version-label",i);s.setAttribute("role","rowheader");const n=Date.now(),o=new Date(t.ossStart).getTime(),a=new Date(t.ossEnd).getTime(),l=t.enterpriseEnd?new Date(t.enterpriseEnd).getTime():a,h=n<o?"lt-status-future":n>=o&&n<=a?"lt-status-oss":n>a&&n<=l?"lt-status-ent":n>l?"lt-status-expired":"";if(h&&s.classList.add(h),t.isMajor&&s.classList.add("lt-version-major"),t.releaseNotesUrl){const b=this.el("a","lt-version-link",s);b.href=t.releaseNotesUrl,b.target="_blank",b.innerHTML=this.highlight(t.version),b.title=this.t("notes",{v:t.version}),b.setAttribute("aria-label",this.t("notes",{v:t.version}))}else s.innerHTML=this.highlight(t.version),s.title=t.version;const r=this.el("div","lt-track-container",i);r.setAttribute("role","gridcell");const g=this.splitSupport?t.ossEnd:t.ossStart,c=t.enterpriseEnd||t.ossEnd,d=new Date(this.maxYear,11,31).toISOString().split("T")[0];return r.appendChild(this.createBar(t,c,d,"lt-bar-eol",this.t("eol"))),r.appendChild(this.createBar(t,g,t.enterpriseEnd||t.ossEnd,"lt-bar-ent",this.t("ent"))),r.appendChild(this.createBar(t,t.ossStart,t.ossEnd,"lt-bar-oss",this.t("oss"))),{el:i,version:t.version.toLowerCase(),versionOriginal:t.version,isMajor:t.isMajor}}createBar(t,e,i,s,n){const o=new Date(e).getTime(),a=new Date(i).getTime(),l=new Date(this.minYear,0,1).getTime(),h=new Date(this.maxYear,11,31).getTime()-l,r=this.el("div",`lt-bar-segment ${s}`),g=s==="lt-bar-oss"?"lt-segment-oss":s==="lt-bar-ent"?"lt-segment-ent":"lt-segment-eol";r.classList.add(g),r.style.left=`${(o-l)/h*100}%`,r.style.width=`${(a-o)/h*100}%`,r.setAttribute("role","img"),r.setAttribute("aria-label",`${n}: ${t.version} (${e} to ${i})`),r.tabIndex=0;const c=`
       <div class="lt-tooltip-header">${n} - ${t.version}</div>
       <div class="lt-tooltip-date"><strong>Du:</strong> ${e}</div>
       <div class="lt-tooltip-date"><strong>Au:</strong> ${i}</div>
-    `;return o.onmouseenter=p=>this.showTooltip(p,c),o.onmousemove=p=>this.updateTooltipPos(p),o.onmouseleave=()=>this.hideTooltip(),o.onfocus=p=>{const d=o.getBoundingClientRect();this.showTooltip({pageX:d.left+window.scrollX,pageY:d.top+window.scrollY-40},c)},o.onblur=()=>this.hideTooltip(),o}updateVisibility(){const t=this.rows.filter(s=>{const n=s.version.includes(this.filterText),l=this.majorFilterEnabled?s.isMajor:!0;return n&&l});this.rows.forEach(s=>{const n=s.el.querySelector(".lt-version-label"),l=n.querySelector(".lt-version-link");l?l.innerHTML=this.highlight(s.versionOriginal||s.version):n.innerHTML=this.highlight(s.versionOriginal||s.version),s.el.classList.remove("lt-row-visible"),s.el.classList.add("lt-row-hidden")});const e=this.filterText===""&&t.length>this.visibleCount;if((e&&!this.isExpanded?t.slice(0,this.visibleCount):t).forEach(s=>{s.el.classList.remove("lt-row-hidden"),s.el.classList.add("lt-row-visible")}),this.showTable&&this.updateTableVisibility(),this.toggleContainer.innerHTML="",e){const s=this.el("button","lt-toggle-btn",this.toggleContainer),n=`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="${this.isExpanded?"18 15 12 9 6 15":"6 9 12 15 18 9"}"></polyline></svg>`;s.innerHTML=this.isExpanded?`${this.t("less")} ${n}`:`${this.t("more",{n:t.length-this.visibleCount})} ${n}`,s.setAttribute("aria-expanded",this.isExpanded),s.onclick=()=>{this.isExpanded=!this.isExpanded,this.updateVisibility()}}}renderCurrentDateLine(){const t=new Date(this.minYear,0,1).getTime(),e=new Date(this.maxYear,11,31).getTime()-t,i=Date.now()-t;if(i<0||i>e)return;const s=new Date().toISOString().split("T")[0],n=this.el("div","lt-current-date-indicator",this.indicators);n.style.left=`${i/e*100}%`,n.setAttribute("role","separator"),n.setAttribute("aria-label",this.t("today",{date:s}));const l=this.el("div","lt-current-date-badge",n);l.textContent=s,l.setAttribute("aria-hidden","true")}}return b}));
+    `;return r.onmouseenter=d=>this.showTooltip(d,c),r.onmousemove=d=>this.updateTooltipPos(d),r.onmouseleave=()=>this.hideTooltip(),r.onfocus=()=>{const d=r.getBoundingClientRect();this.showTooltip({pageX:d.left+window.scrollX,pageY:d.top+window.scrollY-40},c)},r.onblur=()=>this.hideTooltip(),r}updateVisibility(){const t=this.rows.filter(s=>{const n=s.version.includes(this.filterText),o=this.majorFilterEnabled?s.isMajor:!0;return n&&o});this.rows.forEach(s=>{const n=s.el.querySelector(".lt-version-label"),o=n.querySelector(".lt-version-link");o?o.innerHTML=this.highlight(s.versionOriginal||s.version):n.innerHTML=this.highlight(s.versionOriginal||s.version),s.el.classList.remove("lt-row-visible"),s.el.classList.add("lt-row-hidden")});const e=this.filterText===""&&t.length>this.visibleCount;if((e&&!this.isExpanded?t.slice(0,this.visibleCount):t).forEach(s=>{s.el.classList.remove("lt-row-hidden"),s.el.classList.add("lt-row-visible")}),this.showTable&&this.updateTableVisibility(),this.toggleContainer.innerHTML="",e){const s=this.el("button","lt-toggle-btn",this.toggleContainer),n=`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="${this.isExpanded?"18 15 12 9 6 15":"6 9 12 15 18 9"}"></polyline></svg>`;s.innerHTML=this.isExpanded?`${this.t("less")} ${n}`:`${this.t("more",{n:t.length-this.visibleCount})} ${n}`,s.setAttribute("aria-expanded",this.isExpanded.toString()),s.onclick=()=>{this.isExpanded=!this.isExpanded,this.updateVisibility()}}}renderCurrentDateLine(){const t=new Date(this.minYear,0,1).getTime(),e=new Date(this.maxYear,11,31).getTime()-t,i=Date.now()-t;if(i<0||i>e)return;const s=new Date().toISOString().split("T")[0],n=this.el("div","lt-current-date-indicator",this.indicators);n.style.left=`${i/e*100}%`,n.setAttribute("role","separator"),n.setAttribute("aria-label",this.t("today",{date:s}));const o=this.el("div","lt-current-date-badge",n);o.textContent=s,o.setAttribute("aria-hidden","true")}}return p}));

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "lifecycle-timeline",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "A beautiful, premium JS timeline component for visualizing product lifecycles, OSS support, and enterprise support dates.",
   "type": "module",
   "main": "./dist/timeline.umd.cjs",
   "module": "./dist/timeline.js",
-  "types": "./src/index.d.ts",
+  "types": "./dist/timeline.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
+      "types": "./dist/timeline.d.ts",
       "import": "./dist/timeline.js",
       "require": "./dist/timeline.umd.cjs"
     },
@@ -16,8 +16,7 @@
     "./dist/timeline.css": "./dist/timeline.css"
   },
   "files": [
-    "dist",
-    "src/index.d.ts"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",
@@ -25,7 +24,6 @@
     "build:demo": "vite build --config vite.config.demo.js",
     "preview": "vite preview",
     "test": "vitest run",
-    "prepublishOnly": "npm run build",
     "release": "npm run build && npm publish"
   },
   "keywords": [
@@ -61,10 +59,11 @@
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
     "jsdom": "^24.1.3",
+    "typescript": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "@types/node": "^20.0.0",
     "vite": "^7.3.0",
     "vitest": "^4.0.16"
   },
-  "dependencies": {
-    "html-to-image": "^1.11.13"
-  }
+  "dependencies": {}
 }

package/src/index.d.ts

@@ -1,104 +0,0 @@
-export interface TimelineVersion {
-    version: string;
-    ossStart: string;
-    ossEnd: string;
-    enterpriseEnd: string;
-    releaseNotesUrl?: string;
-    isMajor?: boolean;
-}
-
-export interface TimelineOptions {
-    /**
-     * Number of versions to show before "Show more" button appears.
-     * @default 3
-     */
-    visibleCount?: number;
-
-    /**
-     * Preferred locale for translations ('en' or 'fr'). 
-     * Defaults to browser language.
-     */
-    locale?: 'en' | 'fr' | string;
-
-    /**
-     * Custom translations to merge or override.
-     */
-    i18n?: Record<string, Record<string, string>>;
-
-    /**
-     * Whether to show the data table between filter and timeline.
-     * @default true
-     */
-    showTable?: boolean;
-
-    /**
-     * Whether to show the legend below the timeline.
-     * @default true
-     */
-    showLegend?: boolean;
-
-    /**
-     * Whether to show the version filter input.
-     * @default true
-     */
-    filterVersions?: boolean;
-
-    /**
-     * Whether to show the enterprise bar normally (false) or split after OSS (true).
-     * @default false
-     */
-    splitSupport?: boolean;
-
-    /**
-     * Whether to use compact mode (reduced height).
-     * @default false
-     */
-    compactMode?: boolean;
-
-    /**
-     * Whether to show the major version filter checkbox.
-     * @default false
-     */
-    showMajorFilter?: boolean;
-}
-
-export default class Timeline {
-    /**
-     * Creates a new Lifecycle Timeline.
-     * @param elementId The ID of the container element.
-     * @param data Array of version data.
-     * @param options Configuration options.
-     */
-    constructor(elementId: string, data: TimelineVersion[], options?: TimelineOptions);
-
-    /**
-     * Sets up the initial layout.
-     */
-    setupBaseLayout(): void;
-
-    /**
-     * Updates the timeline data and re-renders.
-     * @param newData Array of version data.
-     */
-    updateData(newData: TimelineVersion[]): void;
-
-    /**
-     * Renders the entire timeline.
-     */
-    render(): void;
-
-    /**
-     * Renders the toolbar (search/filter).
-     */
-    renderToolbar(): void;
-
-    /**
-     * Renders the theme toggle button.
-     */
-    renderThemeToggle(): void;
-
-    /**
-     * Updates the visibility of rows based on filtering and expansion state.
-     */
-    updateVisibility(): void;
-}