@forgeroute/ui 0.4.6 → 0.4.7

package/fesm2022/forgeroute-ui.mjs

@@ -22216,9 +22216,9 @@ var FormRowComponent = class FormRowComponent {
 				transformFunction: null
 			} },
 			ngImport: i0,
-			template: `<div class="fr-row" [style.--fr-cols]="cols()"><ng-content /></div>`,
+			template: `<div class="fr-row" [class.fr-row--4]="cols() === 4" [style.--fr-cols]="cols()"><ng-content /></div>`,
 			isInline: true,
-			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"],
+			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>::ng-deep .ui-span-3{grid-column:1 / -1}}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -22234,8 +22234,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-form-row",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `<div class="fr-row" [style.--fr-cols]="cols()"><ng-content /></div>`,
-			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"]
+			template: `<div class="fr-row" [class.fr-row--4]="cols() === 4" [style.--fr-cols]="cols()"><ng-content /></div>`,
+			styles: [":host{display:block}.fr-row{display:grid;grid-template-columns:repeat(var(--fr-cols, 2),1fr);gap:12px}.fr-row>::ng-deep .ui-span-2{grid-column:span 2}.fr-row>::ng-deep .ui-span-3{grid-column:span 3}.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}@media(max-width:768px){.fr-row--4{grid-template-columns:repeat(2,1fr)}.fr-row--4>::ng-deep .ui-span-3{grid-column:1 / -1}}@media(max-width:480px){.fr-row{grid-template-columns:1fr}.fr-row>::ng-deep .ui-span-2,.fr-row>::ng-deep .ui-span-3,.fr-row>::ng-deep .ui-span-all{grid-column:1 / -1}}\n"]
 		}]
 	}],
 	propDecorators: { cols: [{
@@ -24671,6 +24671,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 	constructor() {
 		this.sections = input([], ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 		this.showEmptyState = input(false, ...ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []);
+		this.labelColon = input(false, ...ngDevMode ? [{ debugName: "labelColon" }] : /* istanbul ignore next */ []);
 		this.displaySections = computed(() => this.showEmptyState() ? this.sections() : this.sections().filter((s) => s.items.some((i) => !i.hidden)), ...ngDevMode ? [{ debugName: "displaySections" }] : /* istanbul ignore next */ []);
 	}
 	hrefOf(item) {
@@ -24729,6 +24730,13 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				labelColon: {
+					classPropertyName: "labelColon",
+					publicName: "labelColon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
@@ -24749,7 +24757,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
           <div class="pil-grid-2">
             @for (item of visibleItems(section); track item.label) {
               <div class="pil-grid-cell">
-                <span class="pil-label">{{ item.label }}</span>
+                <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
                 <span class="pil-value pil-value--block">
                   @if (item.badge) {
                     <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
@@ -24764,8 +24772,8 @@ var PanelInfoListComponent = class PanelInfoListComponent {
           </div>
         } @else {
           @for (item of visibleItems(section); track item.label) {
-            <div class="pil-row">
-              <span class="pil-label">{{ item.label }}</span>
+            <div class="pil-row" [class.pil-row--inline]="labelColon()">
+              <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
               <span class="pil-value">
                 @if (item.badges) {
                   <span class="pil-badges">
@@ -24802,7 +24810,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -24905,7 +24913,7 @@ i0.ɵɵngDeclareClassMetadata({
           <div class="pil-grid-2">
             @for (item of visibleItems(section); track item.label) {
               <div class="pil-grid-cell">
-                <span class="pil-label">{{ item.label }}</span>
+                <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
                 <span class="pil-value pil-value--block">
                   @if (item.badge) {
                     <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
@@ -24920,8 +24928,8 @@ i0.ɵɵngDeclareClassMetadata({
           </div>
         } @else {
           @for (item of visibleItems(section); track item.label) {
-            <div class="pil-row">
-              <span class="pil-label">{{ item.label }}</span>
+            <div class="pil-row" [class.pil-row--inline]="labelColon()">
+              <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
               <span class="pil-value">
                 @if (item.badges) {
                   <span class="pil-badges">
@@ -24957,7 +24965,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -24976,6 +24984,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "showEmptyState",
 				required: false
 			}]
+		}],
+		labelColon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelColon",
+				required: false
+			}]
 		}]
 	}
 });
@@ -26444,6 +26460,11 @@ var TimelineComponent = class TimelineComponent {
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.emptyMessage = input("", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+		this.maxHeight = input("", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+		this.timePosition = input("below", ...ngDevMode ? [{ debugName: "timePosition" }] : /* istanbul ignore next */ []);
+	}
+	dotColor(item) {
+		return item.dotVariant ? BADGE_VARIANT_STYLES[item.dotVariant]?.color ?? null : null;
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -26483,36 +26504,70 @@ var TimelineComponent = class TimelineComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				maxHeight: {
+					classPropertyName: "maxHeight",
+					publicName: "maxHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				timePosition: {
+					classPropertyName: "timePosition",
+					publicName: "timePosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
 			template: `
     @if (items().length) {
+      @if (maxHeight()) {
+        <div class="tl-scroll" role="region" tabindex="0" [attr.aria-label]="ariaLabel() || 'Timeline'" [style.max-height]="maxHeight()">
+          <ng-container [ngTemplateOutlet]="listTpl" />
+        </div>
+      } @else {
+        <ng-container [ngTemplateOutlet]="listTpl" />
+      }
+    } @else if (emptyMessage()) {
+      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
+    }
+    <ng-template #listTpl>
       <ol class="tl" [attr.aria-label]="ariaLabel() || null">
         @for (item of items(); track item.id ?? $index) {
-          <li class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon">
+          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
             <span class="tl-marker" aria-hidden="true">
               @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
             </span>
             <div class="tl-content">
               <div class="tl-head">
                 <span class="tl-title">{{ item.title }}</span>
-                @if (item.badge) { <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" /> }
+                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+                }
               </div>
               @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
-              @if (item.time || item.dateTime) {
+              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
                 <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
               }
             </div>
           </li>
         }
       </ol>
-    } @else if (emptyMessage()) {
-      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
-    }
+    </ng-template>
+    <ng-template #badgeTpl let-b>
+      @if (b.tooltip) {
+        <span class="tl-badge-tip" tabindex="0" [uiTooltip]="b.tooltip" [attr.data-testid]="b.testId || null"><ui-badge [label]="b.label" [variant]="b.variant" /></span>
+      } @else {
+        <ui-badge [label]="b.label" [variant]="b.variant" [attr.data-testid]="b.testId || null" />
+      }
+    </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
+			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -26540,6 +26595,22 @@ var TimelineComponent = class TimelineComponent {
 						"interactive"
 					],
 					outputs: ["iconClick"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: TooltipDirective,
+					selector: "[uiTooltip]",
+					inputs: ["uiTooltip", "tooltipPosition"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -26560,34 +26631,56 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				BadgeComponent,
 				HintComponent,
-				IconComponent
+				IconComponent,
+				NgTemplateOutlet,
+				TooltipDirective
 			],
 			template: `
     @if (items().length) {
+      @if (maxHeight()) {
+        <div class="tl-scroll" role="region" tabindex="0" [attr.aria-label]="ariaLabel() || 'Timeline'" [style.max-height]="maxHeight()">
+          <ng-container [ngTemplateOutlet]="listTpl" />
+        </div>
+      } @else {
+        <ng-container [ngTemplateOutlet]="listTpl" />
+      }
+    } @else if (emptyMessage()) {
+      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
+    }
+    <ng-template #listTpl>
       <ol class="tl" [attr.aria-label]="ariaLabel() || null">
         @for (item of items(); track item.id ?? $index) {
-          <li class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon">
+          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
             <span class="tl-marker" aria-hidden="true">
               @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
             </span>
             <div class="tl-content">
               <div class="tl-head">
                 <span class="tl-title">{{ item.title }}</span>
-                @if (item.badge) { <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" /> }
+                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+                }
               </div>
               @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
-              @if (item.time || item.dateTime) {
+              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
                 <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
               }
             </div>
           </li>
         }
       </ol>
-    } @else if (emptyMessage()) {
-      <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
-    }
+    </ng-template>
+    <ng-template #badgeTpl let-b>
+      @if (b.tooltip) {
+        <span class="tl-badge-tip" tabindex="0" [uiTooltip]="b.tooltip" [attr.data-testid]="b.testId || null"><ui-badge [label]="b.label" [variant]="b.variant" /></span>
+      } @else {
+        <ui-badge [label]="b.label" [variant]="b.variant" [attr.data-testid]="b.testId || null" />
+      }
+    </ng-template>
   `,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
+			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -26614,6 +26707,22 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "emptyMessage",
 				required: false
 			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		timePosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timePosition",
+				required: false
+			}]
 		}]
 	}
 });