@forgeroute/ui 0.4.5 → 0.4.7

package/fesm2022/forgeroute-ui.mjs

@@ -14030,8 +14030,10 @@ var RadioComponent = class RadioComponent {
 			alias: "disabled"
 		});
 		this.disabled = this._disabledInput;
-		this._labelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
-		this._labelledBy = computed(() => this.label() && this.description() && !this.ariaLabel() ? this._labelId : null, ...ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []);
+		this.labelId = input("", ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+		this._generatedLabelId = `rd-${Math.random().toString(36).slice(2, 8)}-label`;
+		this._labelId = computed(() => this.labelId() || this._generatedLabelId, ...ngDevMode ? [{ debugName: "_labelId" }] : /* istanbul ignore next */ []);
+		this._labelledBy = computed(() => this.label() && this.description() && !this.ariaLabel() ? this._labelId() : null, ...ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []);
 		this._descriptionId = `rd-${Math.random().toString(36).slice(2, 8)}-desc`;
 		this._describedByIds = computed(() => {
 			return [this.describedBy(), this.description() ? this._descriptionId : ""].filter(Boolean).join(" ") || null;
@@ -14128,6 +14130,13 @@ var RadioComponent = class RadioComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				labelId: {
+					classPropertyName: "labelId",
+					publicName: "labelId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { selected: "selected" },
@@ -14152,7 +14161,7 @@ var RadioComponent = class RadioComponent {
         (change)="onChange($event)"
       />
       <span class="rd-text">
-        @if (label()) { <span class="rd-label" [id]="_labelId">{{ label() }}</span> }
+        @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
         <ng-content />
       </span>
@@ -14195,7 +14204,7 @@ i0.ɵɵngDeclareClassMetadata({
         (change)="onChange($event)"
       />
       <span class="rd-text">
-        @if (label()) { <span class="rd-label" [id]="_labelId">{{ label() }}</span> }
+        @if (label()) { <span class="rd-label" [id]="_labelId()">{{ label() }}</span> }
         @if (description()) { <span class="rd-description" [id]="_descriptionId">{{ description() }}</span> }
         <ng-content />
       </span>
@@ -14285,6 +14294,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelId",
+				required: false
+			}]
+		}],
 		selected: [{
 			type: i0.Output,
 			args: ["selected"]
@@ -14352,6 +14369,9 @@ var RadioGroupComponent = class RadioGroupComponent {
 	get _name() {
 		return this.name() || this._generatedName;
 	}
+	_optionLabelId(index) {
+		return `${this._generatedName}-opt-${index}-label`;
+	}
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -14567,9 +14587,10 @@ var RadioGroupComponent = class RadioGroupComponent {
             [invalid]="!!_activeError()"
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
             [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
+            [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
             (selected)="onSelect($event)" />
           @if (_value() === opt.value && _nestedContent().get(opt.value); as nested) {
-            <div class="rg-nested" [id]="_nestedId"><ng-container [ngTemplateOutlet]="nested" /></div>
+            <div class="rg-nested" role="group" [id]="_nestedId" [attr.aria-labelledby]="opt.label ? _optionLabelId($index) : null"><ng-container [ngTemplateOutlet]="nested" /></div>
           }
         }
       </div>
@@ -14596,7 +14617,8 @@ var RadioGroupComponent = class RadioGroupComponent {
 					"invalid",
 					"describedBy",
 					"controls",
-					"disabled"
+					"disabled",
+					"labelId"
 				],
 				outputs: ["selected"]
 			}, {
@@ -14670,9 +14692,10 @@ i0.ɵɵngDeclareClassMetadata({
             [invalid]="!!_activeError()"
             [describedBy]="(_activeError() || hint()) ? _descId : ''"
             [controls]="(_value() === opt.value && _nestedContent().has(opt.value)) ? _nestedId : ''"
+            [labelId]="_nestedContent().has(opt.value) ? _optionLabelId($index) : ''"
             (selected)="onSelect($event)" />
           @if (_value() === opt.value && _nestedContent().get(opt.value); as nested) {
-            <div class="rg-nested" [id]="_nestedId"><ng-container [ngTemplateOutlet]="nested" /></div>
+            <div class="rg-nested" role="group" [id]="_nestedId" [attr.aria-labelledby]="opt.label ? _optionLabelId($index) : null"><ng-container [ngTemplateOutlet]="nested" /></div>
           }
         }
       </div>
@@ -22193,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
 		});
 	}
@@ -22211,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: [{
@@ -24648,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) {
@@ -24706,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,
@@ -24726,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" />
@@ -24741,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">
@@ -24779,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",
@@ -24882,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" />
@@ -24897,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">
@@ -24934,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: {
@@ -24953,6 +24984,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "showEmptyState",
 				required: false
 			}]
+		}],
+		labelColon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelColon",
+				required: false
+			}]
 		}]
 	}
 });
@@ -26421,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({
@@ -26460,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",
@@ -26517,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
@@ -26537,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: {
@@ -26591,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
+			}]
 		}]
 	}
 });
@@ -29099,7 +29231,8 @@ var RadioMatrixComponent = class RadioMatrixComponent {
 					"invalid",
 					"describedBy",
 					"controls",
-					"disabled"
+					"disabled",
+					"labelId"
 				],
 				outputs: ["selected"]
 			}],
@@ -29979,7 +30112,12 @@ var PdfHotspotComponent = class PdfHotspotComponent {
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.image = input(null, ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
 		this.imageAlt = input("Applied signature", ...ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []);
+		this.scale = input(1, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
 		this.activate = output();
+		this._scaleVar = computed(() => {
+			const s = this.scale();
+			return typeof s === "number" && Number.isFinite(s) && s > 0 && s !== 1 ? String(s) : null;
+		}, ...ngDevMode ? [{ debugName: "_scaleVar" }] : /* istanbul ignore next */ []);
 		this.fontSize = computed(() => Math.min(11, Math.max(7, this.height() * .25)), ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
 	}
 	static {
@@ -30076,6 +30214,13 @@ var PdfHotspotComponent = class PdfHotspotComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				scale: {
+					classPropertyName: "scale",
+					publicName: "scale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { activate: "activate" },
@@ -30084,7 +30229,8 @@ var PdfHotspotComponent = class PdfHotspotComponent {
 				"style.top.px": "y()",
 				"style.width.px": "width()",
 				"style.height.px": "height()",
-				"attr.data-state": "state()"
+				"attr.data-state": "state()",
+				"style.--ph-scale": "_scaleVar()"
 			} },
 			ngImport: i0,
 			template: `
@@ -30103,7 +30249,7 @@ var PdfHotspotComponent = class PdfHotspotComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:44px;transform:translateY(-50%)}}\n"],
+			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:calc(44px / var(--ph-scale, 1));transform:translateY(-50%)}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -30124,7 +30270,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"[style.top.px]": "y()",
 				"[style.width.px]": "width()",
 				"[style.height.px]": "height()",
-				"[attr.data-state]": "state()"
+				"[attr.data-state]": "state()",
+				"[style.--ph-scale]": "_scaleVar()"
 			},
 			template: `
     @if (state() === 'signed' && image()) {
@@ -30141,7 +30288,7 @@ i0.ɵɵngDeclareClassMetadata({
         (click)="activate.emit()"><span class="ph-text">{{ state() === 'blocked' ? blockedLabel() : label() }}</span></button>
     }
   `,
-			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:44px;transform:translateY(-50%)}}\n"]
+			styles: [":host{position:absolute;display:block;box-sizing:border-box}.ph-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.ph-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e;transition:background-color .15s,border-color .15s}.ph-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.ph-button.ph-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.ph-button.ph-ready:hover{background:#bfdbfe}.ph-button.ph-ready.ph-warning{border-color:#f59e0b;background:#fffbeb;color:#b45309}.ph-button.ph-ready.ph-warning:hover{background:#fef3c7}.ph-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}@media(pointer:coarse){.ph-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:calc(44px / var(--ph-scale, 1));transform:translateY(-50%)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -30233,6 +30380,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		scale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scale",
+				required: false
+			}]
+		}],
 		activate: [{
 			type: i0.Output,
 			args: ["activate"]