@eagami/ui 5.51.0 → 5.52.0

package/fesm2022/eagami-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { CSP_NONCE, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, effect, forwardRef, inject, input, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { CSP_NONCE, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
 const EAGAMI_I18N_CONFIG = new InjectionToken("EAGAMI_I18N_CONFIG");
@@ -3918,6 +3918,7 @@ var AccordionItemComponent = class AccordionItemComponent {
 	accordion = inject(AccordionComponent);
 	value = input.required(...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
 	label = input.required(...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
 	id = input(uniqueId("ea-accordion-item"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
 	isExpanded = computed(() => this.accordion.isExpanded(this.value()), ...ngDevMode ? [{ debugName: "isExpanded" }] : 	/* istanbul ignore next */ []);
@@ -3962,6 +3963,13 @@ var AccordionItemComponent = class AccordionItemComponent {
 				isRequired: true,
 				transformFunction: null
 			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -3978,12 +3986,25 @@ var AccordionItemComponent = class AccordionItemComponent {
 			}
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
-		styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
+		template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
+		styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
 		dependencies: [{
 			kind: "component",
 			type: ChevronDownIconComponent,
 			selector: "ea-icon-chevron-down"
+		}, {
+			kind: "directive",
+			type: NgComponentOutlet,
+			selector: "[ngComponentOutlet]",
+			inputs: [
+				"ngComponentOutlet",
+				"ngComponentOutletInputs",
+				"ngComponentOutletInjector",
+				"ngComponentOutletEnvironmentInjector",
+				"ngComponentOutletContent",
+				"ngComponentOutletNgModule"
+			],
+			exportAs: ["ngComponentOutlet"]
 		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -3997,10 +4018,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ea-accordion-item",
-			imports: [ChevronDownIconComponent],
+			imports: [ChevronDownIconComponent, NgComponentOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
-			styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
+			template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
+			styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -4020,6 +4041,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: true
 			}]
 		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -8520,6 +8549,41 @@ function injectChartFormatter(formatValue) {
 function clamp$1(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
+const CHART_LABEL_ANGLES = {
+	horizontal: 0,
+	diagonal: 45,
+	vertical: 90
+};
+const BREAK_HEIGHT = 2.5;
+function tickLength(axisPx) {
+	return axisPx * .4 + 2;
+}
+function labelRoom(text, angle, axisPx) {
+	if (angle === 0) return estimateTextWidth(text, axisPx) + axisPx;
+	return axisPx * 1.15 / Math.sin(angle * Math.PI / 180);
+}
+function labelBand(widest, angle, axisPx, height) {
+	if (!angle) return axisPx * 2.5 + 2 + 2;
+	const radians = angle * Math.PI / 180;
+	return Math.min(height / 2, axisPx * .8 + 2 + 2 + widest * Math.sin(radians) + axisPx * Math.cos(radians) + axisPx * .5);
+}
+function labelLine(axisY, angle, axisPx) {
+	return angle ? axisY + tickLength(axisPx) + 2 + axisPx * .4 : axisY + axisPx * 1.5 + 2 + 2;
+}
+function axisBreak(x, top, bottom, y, axisPx) {
+	const half = axisPx * .8;
+	const gap = axisPx * .35;
+	return {
+		axis: `M${x},${top}L${x},${y - gap}M${x},${y + gap}L${x},${bottom}`,
+		gap: {
+			x: x - half,
+			y: y - gap,
+			width: 2 * half,
+			height: 2 * gap
+		},
+		slashes: [-gap, gap].map((offset) => `M${x - half},${y + offset + half / 2}L${x + half},${y + offset - half / 2}`).join("")
+	};
+}
 const BAR_GAP = 2;
 const BAR_RADIUS = 4;
 function barPath(x, y, w, h, side) {
@@ -8547,6 +8611,8 @@ var BarChartComponent = class BarChartComponent {
 	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : 	/* istanbul ignore next */ []);
 	showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : 	/* istanbul ignore next */ []);
 	showValues = input(false, ...ngDevMode ? [{ debugName: "showValues" }] : 	/* istanbul ignore next */ []);
+	xLabelOrientation = input("horizontal", ...ngDevMode ? [{ debugName: "xLabelOrientation" }] : 	/* istanbul ignore next */ []);
+	showAxisBreak = input(false, ...ngDevMode ? [{ debugName: "showAxisBreak" }] : 	/* istanbul ignore next */ []);
 	height = input(240, ...ngDevMode ? [{ debugName: "height" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	animation = input("grow", ...ngDevMode ? [{ debugName: "animation" }] : 	/* istanbul ignore next */ []);
@@ -8594,6 +8660,7 @@ var BarChartComponent = class BarChartComponent {
 		};
 		let lo = 0;
 		let hi = 0;
+		let lowestTop = Infinity;
 		for (let i = 0; i < count; i++) {
 			let up = 0;
 			let down = 0;
@@ -8609,22 +8676,36 @@ var BarChartComponent = class BarChartComponent {
 			});
 			hi = Math.max(hi, up);
 			lo = Math.min(lo, down);
+			if (stacked && up > 0) lowestTop = Math.min(lowestTop, up);
+		}
+		if (!stacked) {
+			for (const s of series) for (const value of s.data) if (value != null && isFinite(value) && value > 0) lowestTop = Math.min(lowestTop, value);
 		}
+		const breakable = vertical && this.showAxisBreak() && lo >= 0 && isFinite(lowestTop);
+		const scaleLo = breakable ? lowestTop : lo;
 		const labelTexts = Array.from({ length: count }, (_, i) => this.labels()[i] ?? "");
 		const valueRoom = this.showValues() ? axisPx * 1.5 : 0;
-		const provisionalTicks = niceScale(lo, hi).ticks.map(format);
+		const provisionalTicks = niceScale(scaleLo, hi).ticks.map(format);
 		const widestTick = Math.max(0, ...provisionalTicks.map((t) => estimateTextWidth(t, axisPx)));
 		let left;
 		let right;
 		let top;
 		let bottom;
 		let categoryText;
+		let angle = 0;
 		if (vertical) {
 			left = widestTick + axisPx;
 			right = axisPx / 2;
 			top = axisPx + valueRoom;
-			bottom = axisPx * 2.5;
 			categoryText = labelTexts;
+			const orientation = this.xLabelOrientation();
+			const band = Math.max(1, width - left - right) / count;
+			angle = orientation === "auto" ? [
+				0,
+				45,
+				90
+			].find((a) => labelTexts.every((t) => labelRoom(t, a, axisPx) <= band)) ?? 90 : CHART_LABEL_ANGLES[orientation];
+			bottom = labelBand(Math.max(0, ...labelTexts.map((t) => estimateTextWidth(t, axisPx))), angle, axisPx, height);
 		} else {
 			const maxLabel = width * .3;
 			categoryText = labelTexts.map((t) => truncate(t, maxLabel, axisPx));
@@ -8635,8 +8716,21 @@ var BarChartComponent = class BarChartComponent {
 		}
 		const plotWidth = Math.max(1, width - left - right);
 		const plotHeight = Math.max(1, height - top - bottom);
-		const scale = niceScale(lo, hi, Math.max(2, Math.floor((vertical ? plotHeight : plotWidth) / (vertical ? axisPx * 3 : widestTick + axisPx * 2))));
-		const { min, max } = scale;
+		const scale = niceScale(scaleLo, hi, Math.max(2, Math.floor((vertical ? plotHeight : plotWidth) / (vertical ? axisPx * 3 : widestTick + axisPx * 2))));
+		let { min } = scale;
+		const { max } = scale;
+		const scaleTicks = [...scale.ticks];
+		if (breakable && min > 0) {
+			const step = scaleTicks[1] - scaleTicks[0];
+			const clearance = axisPx * 6;
+			const px = (value) => value / (max - min || 1) * plotHeight;
+			for (let steps = 0; steps < 6 && min > 0 && px(lowestTop - min) < clearance; steps++) {
+				min = Number((min - step).toPrecision(12));
+				scaleTicks.unshift(min);
+			}
+		}
+		const axisY = top + plotHeight;
+		const breakY = breakable && min > 0 ? axisY - axisPx * BREAK_HEIGHT : null;
 		const valuePos = (v) => {
 			const t = (clamp$1(v, min, max) - min) / (max - min || 1);
 			return vertical ? top + (1 - t) * plotHeight : left + t * plotWidth;
@@ -8725,13 +8819,13 @@ var BarChartComponent = class BarChartComponent {
 				});
 			});
 		}
-		const ticks = scale.ticks.map((value) => ({
+		const ticks = scaleTicks.filter((value) => value >= min).map((value) => ({
 			value,
 			text: format(value),
 			pos: valuePos(value)
-		}));
-		const widestCategory = Math.max(0, ...categoryText.map((t) => estimateTextWidth(t, axisPx)));
-		const labelStep = vertical ? Math.max(1, Math.ceil((widestCategory + axisPx) / band)) : 1;
+		})).filter((tick) => breakY == null || tick.pos < breakY - axisPx);
+		const widestRoom = Math.max(0, ...categoryText.map((t) => labelRoom(t, angle, axisPx)));
+		const labelStep = vertical ? Math.max(1, Math.ceil(widestRoom / band)) : 1;
 		const categories = categoryText.map((text, index) => ({
 			text,
 			index,
@@ -8755,7 +8849,12 @@ var BarChartComponent = class BarChartComponent {
 			categories,
 			bars,
 			valueLabels,
-			valuePos
+			valuePos,
+			axisY,
+			tickEndY: axisY + tickLength(axisPx),
+			labelAngle: angle,
+			labelY: labelLine(axisY, angle, axisPx),
+			axisBreak: breakY == null ? null : axisBreak(left, top, axisY, breakY, axisPx)
 		};
 	}, ...ngDevMode ? [{ debugName: "layout" }] : 	/* istanbul ignore next */ []);
 	tooltip = computed(() => {
@@ -9010,6 +9109,20 @@ var BarChartComponent = class BarChartComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			xLabelOrientation: {
+				classPropertyName: "xLabelOrientation",
+				publicName: "xLabelOrientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showAxisBreak: {
+				classPropertyName: "showAxisBreak",
+				publicName: "showAxisBreak",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			height: {
 				classPropertyName: "height",
 				publicName: "height",
@@ -9058,8 +9171,8 @@ var BarChartComponent = class BarChartComponent {
 			activePointChange: "activePointChange"
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ea-bar-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-bar-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-bar-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerMove($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (click)=\"onClick()\">\n          <rect\n            class=\"ea-bar-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (layout().vertical) {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"layout().left\"\n                  [attr.x2]=\"layout().left + layout().plotWidth\"\n                  [attr.y1]=\"tick.pos\"\n                  [attr.y2]=\"tick.pos\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"tick.pos\">\n                {{ tick.text }}\n              </text>\n            } @else {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"tick.pos\"\n                  [attr.x2]=\"tick.pos\"\n                  [attr.y1]=\"layout().top\"\n                  [attr.y2]=\"layout().top + layout().plotHeight\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"middle\"\n                [attr.x]=\"tick.pos\"\n                [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n                {{ tick.text }}\n              </text>\n            }\n          }\n          @for (category of layout().categories; track category.index) {\n            @if (layout().vertical) {\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"middle\"\n                [attr.x]=\"category.pos\"\n                [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n                {{ category.text }}\n              </text>\n            } @else {\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"category.pos\">\n                {{ category.text }}\n              </text>\n            }\n          }\n          @for (bar of layout().bars; track $index) {\n            <path\n              class=\"ea-bar-chart__bar\"\n              [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n              [style.--ea-chart-color]=\"bar.color\"\n              [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n              [attr.d]=\"bar.path\" />\n          }\n          @if (layout().vertical) {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().left\"\n              [attr.x2]=\"layout().left + layout().plotWidth\"\n              [attr.y1]=\"layout().baseline\"\n              [attr.y2]=\"layout().baseline\" />\n          } @else {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().baseline\"\n              [attr.x2]=\"layout().baseline\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n            <text\n              class=\"ea-bar-chart__value\"\n              [attr.text-anchor]=\"valueLabel.anchor\"\n              [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n              [attr.x]=\"valueLabel.x\"\n              [attr.y]=\"valueLabel.y\">\n              {{ valueLabel.text }}\n            </text>\n          }\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-bar-chart__anchor\"\n              width=\"2\"\n              height=\"2\"\n              [attr.x]=\"tip.x - 1\"\n              [attr.y]=\"tip.y - 1\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-bar-chart__tooltip\">\n            <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-bar-chart__tooltip-row\"\n                [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-bar-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <table class=\"ea-bar-chart__table\">\n        <caption>\n          {{ label() }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n            @for (s of series(); track $index) {\n              <th scope=\"col\">{{ s.name }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of labels(); track $index; let i = $index) {\n            <tr>\n              <th scope=\"row\">{{ row }}</th>\n              @for (s of series(); track $index) {\n                <td>{{ tableValue(s.data[i]) }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <div\n      class=\"ea-bar-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-bar-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-bar-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-bar-chart__legend-item\">\n          <span\n            class=\"ea-bar-chart__swatch\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
-		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"],
+		template: "<div\n  class=\"ea-bar-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-bar-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-bar-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerMove($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (click)=\"onClick()\">\n          <rect\n            class=\"ea-bar-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (layout().vertical) {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"layout().left\"\n                  [attr.x2]=\"layout().left + layout().plotWidth\"\n                  [attr.y1]=\"tick.pos\"\n                  [attr.y2]=\"tick.pos\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"tick.pos\">\n                {{ tick.text }}\n              </text>\n            } @else {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"tick.pos\"\n                  [attr.x2]=\"tick.pos\"\n                  [attr.y1]=\"layout().top\"\n                  [attr.y2]=\"layout().top + layout().plotHeight\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"middle\"\n                [attr.x]=\"tick.pos\"\n                [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n                {{ tick.text }}\n              </text>\n            }\n          }\n          @for (category of layout().categories; track category.index) {\n            @if (layout().vertical) {\n              <line\n                class=\"ea-bar-chart__x-tick\"\n                [attr.x1]=\"category.pos\"\n                [attr.x2]=\"category.pos\"\n                [attr.y1]=\"layout().axisY\"\n                [attr.y2]=\"layout().tickEndY\" />\n              <text\n                class=\"ea-bar-chart__axis\"\n                [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n                [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n                [attr.transform]=\"\n                  layout().labelAngle\n                    ? 'rotate(' +\n                      -layout().labelAngle +\n                      ' ' +\n                      category.pos +\n                      ' ' +\n                      layout().labelY +\n                      ')'\n                    : null\n                \"\n                [attr.x]=\"category.pos\"\n                [attr.y]=\"layout().labelY\">\n                {{ category.text }}\n              </text>\n            } @else {\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"category.pos\">\n                {{ category.text }}\n              </text>\n            }\n          }\n          @for (bar of layout().bars; track $index) {\n            <path\n              class=\"ea-bar-chart__bar\"\n              [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n              [style.--ea-chart-color]=\"bar.color\"\n              [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n              [attr.d]=\"bar.path\" />\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-bar-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-bar-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @if (layout().vertical) {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().left\"\n              [attr.x2]=\"layout().left + layout().plotWidth\"\n              [attr.y1]=\"layout().baseline\"\n              [attr.y2]=\"layout().baseline\" />\n          } @else {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().baseline\"\n              [attr.x2]=\"layout().baseline\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n            <text\n              class=\"ea-bar-chart__value\"\n              [attr.text-anchor]=\"valueLabel.anchor\"\n              [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n              [attr.x]=\"valueLabel.x\"\n              [attr.y]=\"valueLabel.y\">\n              {{ valueLabel.text }}\n            </text>\n          }\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-bar-chart__anchor\"\n              width=\"2\"\n              height=\"2\"\n              [attr.x]=\"tip.x - 1\"\n              [attr.y]=\"tip.y - 1\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-bar-chart__tooltip\">\n            <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-bar-chart__tooltip-row\"\n                [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-bar-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-bar-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-bar-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-bar-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-bar-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-bar-chart__legend-item\">\n          <span\n            class=\"ea-bar-chart__swatch\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-bar-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -9095,8 +9208,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [NgClass, TooltipDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
-			template: "<div\n  class=\"ea-bar-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-bar-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-bar-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerMove($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (click)=\"onClick()\">\n          <rect\n            class=\"ea-bar-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (layout().vertical) {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"layout().left\"\n                  [attr.x2]=\"layout().left + layout().plotWidth\"\n                  [attr.y1]=\"tick.pos\"\n                  [attr.y2]=\"tick.pos\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"tick.pos\">\n                {{ tick.text }}\n              </text>\n            } @else {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"tick.pos\"\n                  [attr.x2]=\"tick.pos\"\n                  [attr.y1]=\"layout().top\"\n                  [attr.y2]=\"layout().top + layout().plotHeight\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"middle\"\n                [attr.x]=\"tick.pos\"\n                [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n                {{ tick.text }}\n              </text>\n            }\n          }\n          @for (category of layout().categories; track category.index) {\n            @if (layout().vertical) {\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"middle\"\n                [attr.x]=\"category.pos\"\n                [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n                {{ category.text }}\n              </text>\n            } @else {\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"category.pos\">\n                {{ category.text }}\n              </text>\n            }\n          }\n          @for (bar of layout().bars; track $index) {\n            <path\n              class=\"ea-bar-chart__bar\"\n              [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n              [style.--ea-chart-color]=\"bar.color\"\n              [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n              [attr.d]=\"bar.path\" />\n          }\n          @if (layout().vertical) {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().left\"\n              [attr.x2]=\"layout().left + layout().plotWidth\"\n              [attr.y1]=\"layout().baseline\"\n              [attr.y2]=\"layout().baseline\" />\n          } @else {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().baseline\"\n              [attr.x2]=\"layout().baseline\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n            <text\n              class=\"ea-bar-chart__value\"\n              [attr.text-anchor]=\"valueLabel.anchor\"\n              [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n              [attr.x]=\"valueLabel.x\"\n              [attr.y]=\"valueLabel.y\">\n              {{ valueLabel.text }}\n            </text>\n          }\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-bar-chart__anchor\"\n              width=\"2\"\n              height=\"2\"\n              [attr.x]=\"tip.x - 1\"\n              [attr.y]=\"tip.y - 1\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-bar-chart__tooltip\">\n            <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-bar-chart__tooltip-row\"\n                [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-bar-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <table class=\"ea-bar-chart__table\">\n        <caption>\n          {{ label() }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n            @for (s of series(); track $index) {\n              <th scope=\"col\">{{ s.name }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of labels(); track $index; let i = $index) {\n            <tr>\n              <th scope=\"row\">{{ row }}</th>\n              @for (s of series(); track $index) {\n                <td>{{ tableValue(s.data[i]) }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <div\n      class=\"ea-bar-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-bar-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-bar-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-bar-chart__legend-item\">\n          <span\n            class=\"ea-bar-chart__swatch\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
-			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"]
+			template: "<div\n  class=\"ea-bar-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-bar-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-bar-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerMove($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (click)=\"onClick()\">\n          <rect\n            class=\"ea-bar-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (layout().vertical) {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"layout().left\"\n                  [attr.x2]=\"layout().left + layout().plotWidth\"\n                  [attr.y1]=\"tick.pos\"\n                  [attr.y2]=\"tick.pos\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"tick.pos\">\n                {{ tick.text }}\n              </text>\n            } @else {\n              @if (showGrid()) {\n                <line\n                  class=\"ea-bar-chart__grid\"\n                  [attr.x1]=\"tick.pos\"\n                  [attr.x2]=\"tick.pos\"\n                  [attr.y1]=\"layout().top\"\n                  [attr.y2]=\"layout().top + layout().plotHeight\" />\n              }\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"middle\"\n                [attr.x]=\"tick.pos\"\n                [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n                {{ tick.text }}\n              </text>\n            }\n          }\n          @for (category of layout().categories; track category.index) {\n            @if (layout().vertical) {\n              <line\n                class=\"ea-bar-chart__x-tick\"\n                [attr.x1]=\"category.pos\"\n                [attr.x2]=\"category.pos\"\n                [attr.y1]=\"layout().axisY\"\n                [attr.y2]=\"layout().tickEndY\" />\n              <text\n                class=\"ea-bar-chart__axis\"\n                [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n                [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n                [attr.transform]=\"\n                  layout().labelAngle\n                    ? 'rotate(' +\n                      -layout().labelAngle +\n                      ' ' +\n                      category.pos +\n                      ' ' +\n                      layout().labelY +\n                      ')'\n                    : null\n                \"\n                [attr.x]=\"category.pos\"\n                [attr.y]=\"layout().labelY\">\n                {{ category.text }}\n              </text>\n            } @else {\n              <text\n                class=\"ea-bar-chart__axis\"\n                text-anchor=\"end\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"layout().left - layout().axisPx / 2\"\n                [attr.y]=\"category.pos\">\n                {{ category.text }}\n              </text>\n            }\n          }\n          @for (bar of layout().bars; track $index) {\n            <path\n              class=\"ea-bar-chart__bar\"\n              [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n              [style.--ea-chart-color]=\"bar.color\"\n              [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n              [attr.d]=\"bar.path\" />\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-bar-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-bar-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @if (layout().vertical) {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().left\"\n              [attr.x2]=\"layout().left + layout().plotWidth\"\n              [attr.y1]=\"layout().baseline\"\n              [attr.y2]=\"layout().baseline\" />\n          } @else {\n            <line\n              class=\"ea-bar-chart__baseline\"\n              [attr.x1]=\"layout().baseline\"\n              [attr.x2]=\"layout().baseline\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n            <text\n              class=\"ea-bar-chart__value\"\n              [attr.text-anchor]=\"valueLabel.anchor\"\n              [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n              [attr.x]=\"valueLabel.x\"\n              [attr.y]=\"valueLabel.y\">\n              {{ valueLabel.text }}\n            </text>\n          }\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-bar-chart__anchor\"\n              width=\"2\"\n              height=\"2\"\n              [attr.x]=\"tip.x - 1\"\n              [attr.y]=\"tip.y - 1\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-bar-chart__tooltip\">\n            <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-bar-chart__tooltip-row\"\n                [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-bar-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-bar-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-bar-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-bar-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-bar-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-bar-chart__legend-item\">\n          <span\n            class=\"ea-bar-chart__swatch\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-bar-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -9156,6 +9269,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		xLabelOrientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xLabelOrientation",
+				required: false
+			}]
+		}],
+		showAxisBreak: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showAxisBreak",
+				required: false
+			}]
+		}],
 		height: [{
 			type: i0.Input,
 			args: [{
@@ -19091,6 +19220,14 @@ function roundTo(value, digits) {
 	const factor = 10 ** digits;
 	return (Math.round(value * factor) / factor).toString();
 }
+const EDGE_INSET = 8;
+const DRAG_THRESHOLD = 4;
+const WHEEL_LINE_PX = 16;
+const ZOOM_RATE = .01;
+function valueBetween(a, b, position, curve) {
+	if (curve === "step") return position < (a.position + b.position) / 2 ? a.value : b.value;
+	return a.value + (b.value - a.value) * (position - a.position) / (b.position - a.position);
+}
 function linearPath(points) {
 	return points.map((p, i) => `${i ? "L" : "M"}${p.x},${p.y}`).join("");
 }
@@ -19139,10 +19276,14 @@ const CURVES = {
 	smooth: smoothPath,
 	step: stepPath
 };
+let nextId = 0;
 var LineChartComponent = class LineChartComponent {
 	i18n = inject(EagamiI18nService);
 	labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : 	/* istanbul ignore next */ []);
 	series = input([], ...ngDevMode ? [{ debugName: "series" }] : 	/* istanbul ignore next */ []);
+	xValues = input(null, ...ngDevMode ? [{ debugName: "xValues" }] : 	/* istanbul ignore next */ []);
+	xTicks = input(null, ...ngDevMode ? [{ debugName: "xTicks" }] : 	/* istanbul ignore next */ []);
+	visibleXSpan = input(null, ...ngDevMode ? [{ debugName: "visibleXSpan" }] : 	/* istanbul ignore next */ []);
 	curve = input("linear", ...ngDevMode ? [{ debugName: "curve" }] : 	/* istanbul ignore next */ []);
 	showArea = input(false, ...ngDevMode ? [{ debugName: "showArea" }] : 	/* istanbul ignore next */ []);
 	showPoints = input(true, ...ngDevMode ? [{ debugName: "showPoints" }] : 	/* istanbul ignore next */ []);
@@ -19150,6 +19291,8 @@ var LineChartComponent = class LineChartComponent {
 	showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : 	/* istanbul ignore next */ []);
 	yMin = input(void 0, ...ngDevMode ? [{ debugName: "yMin" }] : 	/* istanbul ignore next */ []);
 	yMax = input(void 0, ...ngDevMode ? [{ debugName: "yMax" }] : 	/* istanbul ignore next */ []);
+	xLabelOrientation = input("horizontal", ...ngDevMode ? [{ debugName: "xLabelOrientation" }] : 	/* istanbul ignore next */ []);
+	showAxisBreak = input(false, ...ngDevMode ? [{ debugName: "showAxisBreak" }] : 	/* istanbul ignore next */ []);
 	height = input(240, ...ngDevMode ? [{ debugName: "height" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	animation = input("draw", ...ngDevMode ? [{ debugName: "animation" }] : 	/* istanbul ignore next */ []);
@@ -19161,85 +19304,133 @@ var LineChartComponent = class LineChartComponent {
 	});
 	pointClick = output();
 	activePointChange = output();
+	visibleRangeChange = output();
 	viewport = injectChartViewport(this.size);
 	format = injectChartFormatter(this.formatValue);
 	active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
+	clipId = `ea-line-chart-clip-${nextId++}`;
+	breakMaskId = `${this.clipId}-break`;
+	panEnd = linkedSignal(() => {
+		this.xValues();
+		this.series();
+		this.visibleXSpan();
+		return null;
+	}, ...ngDevMode ? [{ debugName: "panEnd" }] : 	/* istanbul ignore next */ []);
+	zoomSpan = linkedSignal(() => this.visibleXSpan(), ...ngDevMode ? [{ debugName: "zoomSpan" }] : 	/* istanbul ignore next */ []);
+	gestureSpan = null;
+	panning = signal(false, ...ngDevMode ? [{ debugName: "panning" }] : 	/* istanbul ignore next */ []);
+	drag = null;
+	suppressClick = false;
 	label = computed(() => this.ariaLabel() || this.i18n.messages().chart.lineChart, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	count = computed(() => Math.max(this.labels().length, ...this.series().map((s) => s.data.length), 0), ...ngDevMode ? [{ debugName: "count" }] : 	/* istanbul ignore next */ []);
-	hasData = computed(() => this.series().some((s) => s.data.some((v) => v != null && isFinite(v))), ...ngDevMode ? [{ debugName: "hasData" }] : 	/* istanbul ignore next */ []);
+	hasData = computed(() => this.series().some((s) => s.data.some((v) => this.isValue(v))), ...ngDevMode ? [{ debugName: "hasData" }] : 	/* istanbul ignore next */ []);
+	positions = computed(() => {
+		const xValues = this.xValues();
+		return Array.from({ length: this.count() }, (_, i) => xValues ? xValues[i] ?? NaN : i);
+	}, ...ngDevMode ? [{ debugName: "positions" }] : 	/* istanbul ignore next */ []);
+	domain = computed(() => {
+		const known = [...this.positions(), ...this.xTicks()?.map((t) => t.value) ?? []].filter((p) => isFinite(p));
+		const first = known.length ? Math.min(...known) : 0;
+		const last = known.length ? Math.max(...known) : 0;
+		const span = this.zoomSpan();
+		if (span == null || !(span > 0) || last - first <= span) return {
+			first,
+			last,
+			start: first,
+			end: last,
+			span: null
+		};
+		const end = clamp$1(this.panEnd() ?? last, first + span, last);
+		return {
+			first,
+			last,
+			start: end - span,
+			end,
+			span
+		};
+	}, ...ngDevMode ? [{ debugName: "domain" }] : 	/* istanbul ignore next */ []);
+	windowed = computed(() => this.domain().span != null, ...ngDevMode ? [{ debugName: "windowed" }] : 	/* istanbul ignore next */ []);
 	renderPass = computed(() => {
 		this.labels();
 		this.series();
+		this.xValues();
 		this.animation();
 		this.animationDuration();
 		return [{}];
 	}, ...ngDevMode ? [{ debugName: "renderPass" }] : 	/* istanbul ignore next */ []);
 	hostClasses = computed(() => ({
 		[`ea-line-chart--${this.size()}`]: true,
-		[`ea-line-chart--animate-${this.animation()}`]: true
+		[`ea-line-chart--animate-${this.animation()}`]: true,
+		"ea-line-chart--pannable": this.windowed(),
+		"ea-line-chart--panning": this.panning()
 	}), ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
+	runs = computed(() => {
+		const positions = this.positions();
+		return this.series().map((s) => {
+			const runs = [];
+			let run = [];
+			positions.forEach((position, index) => {
+				const value = s.data[index];
+				if (!this.isValue(value) || !isFinite(position)) {
+					if (run.length) runs.push(run);
+					run = [];
+					return;
+				}
+				run.push({
+					index,
+					position,
+					value
+				});
+			});
+			if (run.length) runs.push(run);
+			return runs;
+		});
+	}, ...ngDevMode ? [{ debugName: "runs" }] : 	/* istanbul ignore next */ []);
+	visibleValues = computed(() => {
+		const runs = this.runs().flat();
+		const domain = this.domain();
+		if (domain.span == null) return runs.flatMap((run) => run.map((p) => p.value));
+		const curve = this.curve();
+		const values = [];
+		for (const run of runs) run.forEach((point, i) => {
+			if (point.position >= domain.start && point.position <= domain.end) values.push(point.value);
+			const next = run[i + 1];
+			for (const edge of next ? [domain.start, domain.end] : []) if (point.position < edge && next.position > edge) values.push(valueBetween(point, next, edge, curve));
+		});
+		return values;
+	}, ...ngDevMode ? [{ debugName: "visibleValues" }] : 	/* istanbul ignore next */ []);
 	layout = computed(() => {
-		const count = this.count();
 		const width = this.viewport.width();
 		const height = this.height();
 		const axisPx = this.viewport.fontSize() * .75;
-		const format = this.format();
-		const values = this.series().flatMap((s) => s.data.filter((v) => v != null && isFinite(v)));
+		const orientation = this.xLabelOrientation();
+		const fixedAngle = orientation === "auto" ? 0 : CHART_LABEL_ANGLES[orientation];
+		const plot = this.plotArea(width, height, axisPx, fixedAngle);
+		const angle = orientation === "auto" ? [
+			0,
+			45,
+			90
+		].find((a) => this.labelsFit(plot.candidates, a, axisPx)) ?? 90 : fixedAngle;
+		const { plotHeight, min, max, tickTexts, left, plotWidth, x, xLabels } = angle === fixedAngle ? plot : this.plotArea(width, height, axisPx, angle);
 		const top = axisPx;
-		const bottom = axisPx * 2.5;
-		const plotHeight = Math.max(1, height - top - bottom);
-		let lo = this.yMin() ?? Math.min(...values);
-		let hi = this.yMax() ?? Math.max(...values);
-		if (this.showArea() && this.yMin() === void 0) lo = Math.min(lo, 0);
-		if (lo > hi) [lo, hi] = [hi, lo];
-		const scale = niceScale(lo, hi, Math.max(2, Math.floor(plotHeight / (axisPx * 3))));
-		let min = this.yMin() ?? scale.min;
-		let max = this.yMax() ?? scale.max;
-		if (min > max) [min, max] = [max, min];
-		const ticks = scale.ticks.filter((t) => t >= min && t <= max).map((value) => ({
-			value,
-			text: format(value)
-		}));
-		const labelTexts = Array.from({ length: count }, (_, i) => this.labels()[i] ?? "");
-		const widestLabel = Math.max(0, ...labelTexts.map((t) => estimateTextWidth(t, axisPx)));
-		const left = Math.max(0, ...ticks.map((t) => estimateTextWidth(t.text, axisPx))) + axisPx;
-		const right = Math.min(widestLabel / 2, width * .1) + axisPx / 2;
-		const plotWidth = Math.max(1, width - left - right);
-		const spacing = count > 1 ? plotWidth / (count - 1) : plotWidth;
-		const x = (i) => count > 1 ? left + i * spacing : left + plotWidth / 2;
 		const y = (v) => top + (1 - (clamp$1(v, min, max) - min) / (max - min || 1)) * plotHeight;
 		const baselineY = y(clamp$1(0, min, max));
-		const labelStep = Math.max(1, Math.ceil((widestLabel + axisPx) / spacing));
-		const xLabels = labelTexts.map((text, index) => ({
-			text,
-			index,
-			x: x(index)
-		})).filter((l) => l.index % labelStep === 0);
+		const breakY = this.showAxisBreak() && min > 0 ? top + plotHeight - axisPx * BREAK_HEIGHT : null;
+		const axisY = top + plotHeight;
 		const curve = CURVES[this.curve()];
 		const series = this.series().map((s, seriesIndex) => {
-			const segments = [];
-			let run = [];
-			for (let index = 0; index < count; index++) {
-				const value = s.data[index];
-				if (value == null || !isFinite(value)) {
-					if (run.length) segments.push(run);
-					run = [];
-					continue;
-				}
-				run.push({
-					x: x(index),
-					y: y(value),
-					index,
-					value
-				});
-			}
-			if (run.length) segments.push(run);
+			const runs = this.runs()[seriesIndex].map((run) => run.map((p) => ({
+				x: x(p.index),
+				y: y(p.value),
+				index: p.index,
+				value: p.value
+			})));
 			return {
 				name: s.name,
 				color: chartColor(seriesIndex, s.color),
-				paths: segments.map(curve),
-				areas: segments.map((seg) => `${curve(seg)}L${seg[seg.length - 1].x},${baselineY}L${seg[0].x},${baselineY}Z`),
-				points: segments.flat()
+				paths: runs.map(curve),
+				areas: runs.map((seg) => `${curve(seg)}L${seg[seg.length - 1].x},${baselineY}L${seg[0].x},${baselineY}Z`),
+				points: runs.flat()
 			};
 		});
 		return {
@@ -19250,18 +19441,72 @@ var LineChartComponent = class LineChartComponent {
 			plotWidth,
 			plotHeight,
 			baselineY,
-			labelY: top + plotHeight + axisPx * 1.5,
+			windowed: this.domain().span != null,
+			axisBreak: breakY == null ? null : axisBreak(left, top, axisY, breakY, axisPx),
+			axisY,
+			tickEndY: axisY + tickLength(axisPx),
+			labelAngle: angle,
+			labelY: labelLine(axisY, angle, axisPx),
 			tickX: left - axisPx / 2,
-			ticks: ticks.map((t) => ({
+			ticks: tickTexts.map((t) => ({
 				...t,
 				y: y(t.value)
-			})),
+			})).filter((t) => breakY == null || t.y < breakY - axisPx),
 			xLabels,
 			series,
 			x,
 			y
 		};
 	}, ...ngDevMode ? [{ debugName: "layout" }] : 	/* istanbul ignore next */ []);
+	plotArea(width, height, axisPx, angle) {
+		const format = this.format();
+		const domain = this.domain();
+		const windowed = domain.span != null;
+		const top = axisPx;
+		const bottom = labelBand(this.widestXLabel(axisPx), angle, axisPx, height);
+		const plotHeight = Math.max(1, height - top - bottom);
+		const maxTicks = Math.max(2, Math.floor(plotHeight / (axisPx * 3)));
+		const { min, max, ticks } = this.yScale(this.visibleValues(), plotHeight, axisPx, maxTicks);
+		const tickTexts = ticks.map((value) => ({
+			value,
+			text: format(value)
+		}));
+		const gutterTexts = [...tickTexts.map((t) => t.text), ...windowed ? this.yScale(this.runs().flatMap((runs) => runs.flat().map((p) => p.value)), plotHeight, axisPx, maxTicks).ticks.map(format) : []];
+		const left = Math.max(0, ...gutterTexts.map((t) => estimateTextWidth(t, axisPx))) + axisPx;
+		const positions = this.positions();
+		const xAxis = (right) => {
+			const plotWidth = Math.max(1, width - left - right);
+			const at = this.atPosition(domain, left, plotWidth);
+			const x = (i) => at(positions[i]);
+			return {
+				plotWidth,
+				x,
+				xLabels: this.xLabels(domain, at, x, plotWidth, axisPx, angle),
+				candidates: this.xLabelCandidates(domain, at, x)
+			};
+		};
+		const axis = xAxis(axisPx / 2);
+		const xLabels = axis.xLabels.map((label) => {
+			if (angle) return {
+				...label,
+				textX: label.x
+			};
+			const half = estimateTextWidth(label.text, axisPx) / 2;
+			return {
+				...label,
+				textX: clamp$1(label.x, half, width - half)
+			};
+		});
+		return {
+			plotHeight,
+			min,
+			max,
+			tickTexts,
+			left,
+			...axis,
+			xLabels
+		};
+	}
 	tooltip = computed(() => {
 		const active = this.active();
 		if (!active) return null;
@@ -19273,13 +19518,13 @@ var LineChartComponent = class LineChartComponent {
 			return {
 				name: s.name,
 				color: chartColor(i, s.color),
-				value: value == null || !isFinite(value) ? "–" : this.format()(value),
+				value: this.tableValue(value),
 				active: i === active.series
 			};
 		});
 		return {
 			x,
-			y: activeValue != null && isFinite(activeValue) ? layout.y(activeValue) : layout.top,
+			y: this.isValue(activeValue) ? layout.y(activeValue) : layout.top,
 			title: this.labels()[active.index] ?? "",
 			rows,
 			key: `${active.series}-${active.index}`
@@ -19306,20 +19551,44 @@ var LineChartComponent = class LineChartComponent {
 		return !!active && active.series === seriesIndex && active.index === index;
 	}
 	tableValue(value) {
-		return value == null || !isFinite(value) ? "–" : this.format()(value);
+		return this.isValue(value) ? this.format()(value) : "–";
+	}
+	onPointerDown(event) {
+		this.suppressClick = false;
+		const domain = this.domain();
+		if (domain.span != null && event.button === 0) this.drag = {
+			pointerId: event.pointerId,
+			x: event.clientX,
+			end: domain.end,
+			moved: false
+		};
+		this.onPointerMove(event);
 	}
 	onPointerMove(event) {
+		if (this.drag && event.buttons === 0) this.endDrag();
+		const drag = this.drag;
+		if (drag && drag.pointerId === event.pointerId) {
+			const dx = event.clientX - drag.x;
+			if (drag.moved || Math.abs(dx) >= DRAG_THRESHOLD) {
+				if (!drag.moved) {
+					drag.moved = true;
+					this.panning.set(true);
+					this.setActive(null);
+					event.currentTarget.setPointerCapture?.(event.pointerId);
+				}
+				this.panTo(drag.end - dx * this.unitsPerPx());
+				return;
+			}
+		}
 		const rect = event.currentTarget.getBoundingClientRect();
-		const layout = this.layout();
-		const count = this.count();
-		const px = event.clientX - rect.left;
+		const index = this.indexAt(event.clientX - rect.left);
 		const py = event.clientY - rect.top;
-		const index = count > 1 ? clamp$1(Math.round((px - layout.left) / layout.plotWidth * (count - 1)), 0, count - 1) : 0;
+		const layout = this.layout();
 		let series = -1;
 		let nearest = Infinity;
-		this.series().forEach((s, i) => {
-			const value = s.data[index];
-			if (value == null || !isFinite(value)) return;
+		this.series().forEach((_, i) => {
+			const value = this.valueAt(i, index);
+			if (value == null) return;
 			const distance = Math.abs(layout.y(value) - py);
 			if (distance < nearest) {
 				nearest = distance;
@@ -19331,10 +19600,39 @@ var LineChartComponent = class LineChartComponent {
 			index
 		});
 	}
+	onPointerUp(event) {
+		if (this.drag?.pointerId === event.pointerId) {
+			this.suppressClick = this.drag.moved;
+			this.endDrag();
+		}
+	}
 	onPointerLeave() {
+		if (!this.drag?.moved) this.setActive(null);
+	}
+	onWheel(event) {
+		if (event.ctrlKey && event.deltaY && this.visibleXSpan() != null) {
+			event.preventDefault();
+			const { start, end } = this.domain();
+			this.zoomTo((end - start) * Math.exp(event.deltaY * ZOOM_RATE), {
+				clientX: event.clientX,
+				currentTarget: event.currentTarget
+			});
+			return;
+		}
+		const domain = this.domain();
+		if (domain.span == null) return;
+		const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.shiftKey ? event.deltaY : 0;
+		if (!delta) return;
+		event.preventDefault();
+		const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? WHEEL_LINE_PX : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? this.layout().plotWidth : 1;
 		this.setActive(null);
+		this.panTo(domain.end + delta * unit * this.unitsPerPx());
 	}
 	onClick() {
+		if (this.suppressClick) {
+			this.suppressClick = false;
+			return;
+		}
 		const event = this.eventFor(this.active());
 		if (event) this.pointClick.emit(event);
 	}
@@ -19393,14 +19691,212 @@ var LineChartComponent = class LineChartComponent {
 			default: return;
 		}
 		event.preventDefault();
-		this.setActive(next ?? (event.key === "Escape" ? null : active));
+		const target = next ?? (event.key === "Escape" ? null : active);
+		if (target) this.reveal(target.index);
+		this.setActive(target);
+	}
+	isValue(value) {
+		return value != null && isFinite(value);
+	}
+	yScale(values, plotHeight, axisPx, maxTicks) {
+		const yMin = this.yMin();
+		const yMax = this.yMax();
+		const dataMin = Math.min(...values);
+		const dataMax = Math.max(...values);
+		let lo = yMin ?? dataMin;
+		let hi = yMax ?? dataMax;
+		const zeroFloor = this.showArea() && yMin === void 0 && !(dataMin < 0);
+		if (zeroFloor) lo = Math.min(lo, 0);
+		if (lo > hi) [lo, hi] = [hi, lo];
+		const clearance = axisPx;
+		const breakClearance = axisPx * 6;
+		const derivedFloor = yMin === void 0 && !zeroFloor && dataMin > 0;
+		if (this.windowed() && isFinite(lo) && isFinite(hi)) {
+			const spread = hi - lo || Math.abs(hi) || 1;
+			const pad = clearance * spread / Math.max(1, plotHeight - 2 * clearance);
+			const breakPad = breakClearance * spread / Math.max(1, plotHeight - clearance - breakClearance);
+			const min = yMin ?? (zeroFloor ? lo : derivedFloor ? Math.max(0, lo - breakPad) : lo - pad);
+			const max = yMax ?? hi + pad;
+			return {
+				min,
+				max,
+				ticks: niceScale(min, max, maxTicks).ticks.filter((t) => t >= min && t <= max)
+			};
+		}
+		const scale = niceScale(lo, hi, maxTicks);
+		const step = scale.ticks[1] - scale.ticks[0];
+		const ticks = [...scale.ticks];
+		let min = yMin ?? scale.min;
+		let max = yMax ?? scale.max;
+		if (min > max) [min, max] = [max, min];
+		const px = (value) => value / (max - min || 1) * plotHeight;
+		const lowTight = () => yMin === void 0 && !zeroFloor && px(dataMin - min) < (derivedFloor && min > 0 ? breakClearance : clearance);
+		const highTight = yMax === void 0 && px(max - dataMax) < clearance;
+		for (let steps = 0; steps < 6 && lowTight() && !(derivedFloor && min <= 0); steps++) {
+			min = Number((min - step).toPrecision(12));
+			ticks.unshift(min);
+		}
+		if (highTight) {
+			max = Number((max + step).toPrecision(12));
+			ticks.push(max);
+		}
+		return {
+			min,
+			max,
+			ticks: ticks.filter((t) => t >= min && t <= max)
+		};
+	}
+	atPosition(domain, left, plotWidth) {
+		const inset = domain.span != null ? EDGE_INSET : 0;
+		const inner = Math.max(1, plotWidth - 2 * inset);
+		const extent = domain.end - domain.start;
+		const scale = inner / extent;
+		return (position) => extent > 0 ? left + inset + (position - domain.start) * scale : left + plotWidth / 2;
+	}
+	xLabelCandidates(domain, at, x) {
+		const inView = (position) => position >= domain.start && position <= domain.end;
+		const ticks = this.xTicks();
+		if (ticks) return ticks.filter((t) => inView(t.value)).map((t) => ({
+			key: t.value,
+			text: t.label,
+			x: at(t.value)
+		}));
+		const positions = this.positions();
+		return positions.map((position, index) => ({
+			key: index,
+			text: this.labels()[index] ?? "",
+			x: x(index)
+		})).filter((l) => inView(positions[l.key]));
+	}
+	labelsFit(labels, angle, axisPx) {
+		return labels.every((label, i) => i === 0 || label.x - labels[i - 1].x >= (labelRoom(label.text, angle, axisPx) + labelRoom(labels[i - 1].text, angle, axisPx)) / 2);
+	}
+	xLabels(domain, at, x, plotWidth, axisPx, angle) {
+		const candidates = this.xLabelCandidates(domain, at, x);
+		if (this.xTicks()) return candidates;
+		const texts = this.positions().map((_, i) => this.labels()[i] ?? "");
+		if (!this.xValues()) {
+			const count = texts.length;
+			const extent = domain.end - domain.start;
+			const spacing = count > 1 ? (plotWidth - (domain.span != null ? 2 * EDGE_INSET : 0)) / extent : plotWidth;
+			const room = Math.max(0, ...texts.map((t) => labelRoom(t, angle, axisPx)));
+			const step = Math.max(1, Math.ceil(room / spacing));
+			return candidates.filter((l) => l.key % step === 0);
+		}
+		const labels = [];
+		let edge = -Infinity;
+		for (const label of candidates) {
+			const half = labelRoom(label.text, angle, axisPx) / 2;
+			if (label.x - half >= edge) {
+				labels.push(label);
+				edge = label.x + half;
+			}
+		}
+		return labels;
+	}
+	widestXLabel(axisPx) {
+		const texts = this.xTicks()?.map((t) => t.label) ?? this.labels();
+		return Math.max(0, ...texts.map((t) => estimateTextWidth(t, axisPx)));
+	}
+	onGestureStart(event) {
+		if (this.visibleXSpan() == null) return;
+		event.preventDefault();
+		const { start, end } = this.domain();
+		this.gestureSpan = end - start;
+	}
+	onGestureChange(event) {
+		if (this.gestureSpan == null || !("scale" in event) || !("clientX" in event)) return;
+		const { scale, clientX } = event;
+		if (typeof scale !== "number" || typeof clientX !== "number" || !(scale > 0)) return;
+		event.preventDefault();
+		this.zoomTo(this.gestureSpan / scale, {
+			clientX,
+			currentTarget: event.currentTarget
+		});
+	}
+	onGestureEnd() {
+		this.gestureSpan = null;
+	}
+	zoomTo(span, { clientX, currentTarget }) {
+		const domain = this.domain();
+		const full = domain.last - domain.first;
+		if (!(full > 0) || !(currentTarget instanceof Element)) return;
+		const next = clamp$1(span, Math.min(this.minSpan(), full), full);
+		const shown = domain.end - domain.start;
+		const inset = domain.span != null ? EDGE_INSET : 0;
+		const { left, plotWidth } = this.layout();
+		const ratio = clamp$1((clientX - currentTarget.getBoundingClientRect().left - left - inset) / Math.max(1, plotWidth - 2 * inset), 0, 1);
+		const end = clamp$1(domain.start + ratio * shown + (1 - ratio) * next, domain.first + next, domain.last);
+		this.setActive(null);
+		this.zoomSpan.set(next);
+		this.panEnd.set(end);
+		this.visibleRangeChange.emit({
+			start: end - next,
+			end
+		});
+	}
+	minSpan() {
+		const known = this.positions().filter((p) => isFinite(p)).sort((a, b) => a - b);
+		const gaps = known.slice(1).map((p, i) => p - known[i]).filter((gap) => gap > 0);
+		return gaps.length ? Math.min(...gaps) * 2 : 1;
+	}
+	unitsPerPx() {
+		return (this.domain().span ?? 0) / Math.max(1, this.layout().plotWidth - 2 * EDGE_INSET);
+	}
+	panTo(end) {
+		const domain = this.domain();
+		if (domain.span == null) return;
+		const next = clamp$1(end, domain.first + domain.span, domain.last);
+		if (next === domain.end) return;
+		this.panEnd.set(next);
+		this.visibleRangeChange.emit({
+			start: next - domain.span,
+			end: next
+		});
+	}
+	endDrag() {
+		this.drag = null;
+		this.panning.set(false);
+	}
+	reveal(index) {
+		const domain = this.domain();
+		const position = this.positions()[index];
+		if (domain.span == null) return;
+		if (position < domain.start) this.panTo(position + domain.span);
+		else if (position > domain.end) this.panTo(position);
+	}
+	indexAt(px) {
+		const layout = this.layout();
+		const count = this.count();
+		const domain = this.domain();
+		if (!this.xValues()) {
+			if (count < 2) return 0;
+			const inset = domain.span != null ? EDGE_INSET : 0;
+			const inner = Math.max(1, layout.plotWidth - 2 * inset);
+			return clamp$1(Math.round(domain.start + (px - layout.left - inset) / inner * (domain.end - domain.start)), Math.ceil(domain.start), Math.floor(domain.end));
+		}
+		const positions = this.positions();
+		let best = -1;
+		let nearest = Infinity;
+		for (let index = 0; index < count; index++) {
+			const position = positions[index];
+			if (position < domain.start || position > domain.end || !this.series().some((_, s) => this.valueAt(s, index) != null)) continue;
+			const distance = Math.abs(layout.x(index) - px);
+			if (distance < nearest) {
+				nearest = distance;
+				best = index;
+			}
+		}
+		return best;
 	}
 	valueAt(series, index) {
 		const value = this.series()[series]?.data[index];
-		return value == null || !isFinite(value) ? null : value;
+		return this.isValue(value) && isFinite(this.positions()[index]) ? value : null;
 	}
 	firstPoint() {
+		const domain = this.domain();
 		for (let index = 0; index < this.count(); index++) {
+			if (this.positions()[index] < domain.start) continue;
 			const series = this.series().findIndex((_, s) => this.valueAt(s, index) != null);
 			if (series !== -1) return {
 				series,
@@ -19463,6 +19959,27 @@ var LineChartComponent = class LineChartComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			xValues: {
+				classPropertyName: "xValues",
+				publicName: "xValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			xTicks: {
+				classPropertyName: "xTicks",
+				publicName: "xTicks",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visibleXSpan: {
+				classPropertyName: "visibleXSpan",
+				publicName: "visibleXSpan",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			curve: {
 				classPropertyName: "curve",
 				publicName: "curve",
@@ -19512,6 +20029,20 @@ var LineChartComponent = class LineChartComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			xLabelOrientation: {
+				classPropertyName: "xLabelOrientation",
+				publicName: "xLabelOrientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showAxisBreak: {
+				classPropertyName: "showAxisBreak",
+				publicName: "showAxisBreak",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			height: {
 				classPropertyName: "height",
 				publicName: "height",
@@ -19557,11 +20088,12 @@ var LineChartComponent = class LineChartComponent {
 		},
 		outputs: {
 			pointClick: "pointClick",
-			activePointChange: "activePointChange"
+			activePointChange: "activePointChange",
+			visibleRangeChange: "visibleRangeChange"
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerMove($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (click)=\"onClick()\">\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @for (xLabel of layout().xLabels; track xLabel.index) {\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              text-anchor=\"middle\"\n              [attr.x]=\"xLabel.x\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g class=\"ea-line-chart__lines\">\n            @for (line of layout().series; track $index; let s = $index) {\n              <g\n                class=\"ea-line-chart__series\"\n                [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                [style.--ea-chart-color]=\"line.color\">\n                @if (showArea()) {\n                  @for (area of line.areas; track $index) {\n                    <path\n                      class=\"ea-line-chart__area\"\n                      [attr.d]=\"area\" />\n                  }\n                }\n                @for (path of line.paths; track $index) {\n                  <path\n                    class=\"ea-line-chart__line\"\n                    pathLength=\"1\"\n                    [attr.d]=\"path\" />\n                }\n                @for (point of line.points; track point.index) {\n                  @if (showPoints() || isActivePoint(s, point.index)) {\n                    <circle\n                      class=\"ea-line-chart__point\"\n                      [class.ea-line-chart__point--active]=\"isActivePoint(s, point.index)\"\n                      [attr.cx]=\"point.x\"\n                      [attr.cy]=\"point.y\"\n                      [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                  }\n                }\n              </g>\n            }\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <table class=\"ea-line-chart__table\">\n        <caption>\n          {{ label() }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n            @for (s of series(); track $index) {\n              <th scope=\"col\">{{ s.name }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of labels(); track $index; let i = $index) {\n            <tr>\n              <th scope=\"row\">{{ row }}</th>\n              @for (s of series(); track $index) {\n                <td>{{ tableValue(s.data[i]) }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
-		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .6);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"],
+		template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          (pointercancel)=\"onPointerUp($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (wheel)=\"onWheel($event)\"\n          (gesturestart)=\"onGestureStart($event)\"\n          (gesturechange)=\"onGestureChange($event)\"\n          (gestureend)=\"onGestureEnd()\"\n          (click)=\"onClick()\">\n          @if (layout().windowed) {\n            <defs>\n              <clipPath [attr.id]=\"clipId\">\n                <rect\n                  [attr.x]=\"layout().left\"\n                  y=\"0\"\n                  [attr.width]=\"layout().plotWidth\"\n                  [attr.height]=\"layout().height\" />\n              </clipPath>\n            </defs>\n          }\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-line-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-line-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @for (xLabel of layout().xLabels; track xLabel.key) {\n            <line\n              class=\"ea-line-chart__x-tick\"\n              [attr.x1]=\"xLabel.x\"\n              [attr.x2]=\"xLabel.x\"\n              [attr.y1]=\"layout().axisY\"\n              [attr.y2]=\"layout().tickEndY\" />\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n              [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n              [attr.transform]=\"\n                layout().labelAngle\n                  ? 'rotate(' +\n                    -layout().labelAngle +\n                    ' ' +\n                    xLabel.x +\n                    ' ' +\n                    layout().labelY +\n                    ')'\n                  : null\n              \"\n              [attr.x]=\"xLabel.textX\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n            <mask\n              maskUnits=\"userSpaceOnUse\"\n              [attr.id]=\"breakMaskId\">\n              <rect\n                fill=\"white\"\n                x=\"0\"\n                y=\"0\"\n                [attr.width]=\"layout().width\"\n                [attr.height]=\"layout().height\" />\n              <rect\n                fill=\"black\"\n                [attr.x]=\"axisBreak.gap.x\"\n                [attr.y]=\"axisBreak.gap.y\"\n                [attr.width]=\"axisBreak.gap.width\"\n                [attr.height]=\"axisBreak.gap.height\" />\n            </mask>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n            <g class=\"ea-line-chart__lines\">\n              @for (line of layout().series; track $index; let s = $index) {\n                <g\n                  class=\"ea-line-chart__series\"\n                  [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                  [style.--ea-chart-color]=\"line.color\">\n                  @if (showArea()) {\n                    @for (area of line.areas; track $index) {\n                      <path\n                        class=\"ea-line-chart__area\"\n                        [attr.d]=\"area\" />\n                    }\n                  }\n                  @for (path of line.paths; track $index) {\n                    <path\n                      class=\"ea-line-chart__line\"\n                      pathLength=\"1\"\n                      [attr.d]=\"path\" />\n                  }\n                  @for (point of line.points; track point.index) {\n                    @if (showPoints() || isActivePoint(s, point.index)) {\n                      <circle\n                        class=\"ea-line-chart__point\"\n                        [class.ea-line-chart__point--active]=\"\n                          isActivePoint(s, point.index)\n                        \"\n                        [attr.cx]=\"point.x\"\n                        [attr.cy]=\"point.y\"\n                        [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                    }\n                  }\n                </g>\n              }\n            </g>\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-line-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-line-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--pannable .ea-line-chart__svg{cursor:grab}.ea-line-chart--panning .ea-line-chart__svg{cursor:grabbing;-webkit-user-select:none;user-select:none}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:var(--ea-chart-duration, .6s);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -19597,8 +20129,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [NgClass, TooltipDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
-			template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerMove($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (click)=\"onClick()\">\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @for (xLabel of layout().xLabels; track xLabel.index) {\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              text-anchor=\"middle\"\n              [attr.x]=\"xLabel.x\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g class=\"ea-line-chart__lines\">\n            @for (line of layout().series; track $index; let s = $index) {\n              <g\n                class=\"ea-line-chart__series\"\n                [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                [style.--ea-chart-color]=\"line.color\">\n                @if (showArea()) {\n                  @for (area of line.areas; track $index) {\n                    <path\n                      class=\"ea-line-chart__area\"\n                      [attr.d]=\"area\" />\n                  }\n                }\n                @for (path of line.paths; track $index) {\n                  <path\n                    class=\"ea-line-chart__line\"\n                    pathLength=\"1\"\n                    [attr.d]=\"path\" />\n                }\n                @for (point of line.points; track point.index) {\n                  @if (showPoints() || isActivePoint(s, point.index)) {\n                    <circle\n                      class=\"ea-line-chart__point\"\n                      [class.ea-line-chart__point--active]=\"isActivePoint(s, point.index)\"\n                      [attr.cx]=\"point.x\"\n                      [attr.cy]=\"point.y\"\n                      [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                  }\n                }\n              </g>\n            }\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <table class=\"ea-line-chart__table\">\n        <caption>\n          {{ label() }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n            @for (s of series(); track $index) {\n              <th scope=\"col\">{{ s.name }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of labels(); track $index; let i = $index) {\n            <tr>\n              <th scope=\"row\">{{ row }}</th>\n              @for (s of series(); track $index) {\n                <td>{{ tableValue(s.data[i]) }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
-			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .6);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"]
+			template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          (pointercancel)=\"onPointerUp($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (wheel)=\"onWheel($event)\"\n          (gesturestart)=\"onGestureStart($event)\"\n          (gesturechange)=\"onGestureChange($event)\"\n          (gestureend)=\"onGestureEnd()\"\n          (click)=\"onClick()\">\n          @if (layout().windowed) {\n            <defs>\n              <clipPath [attr.id]=\"clipId\">\n                <rect\n                  [attr.x]=\"layout().left\"\n                  y=\"0\"\n                  [attr.width]=\"layout().plotWidth\"\n                  [attr.height]=\"layout().height\" />\n              </clipPath>\n            </defs>\n          }\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-line-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-line-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @for (xLabel of layout().xLabels; track xLabel.key) {\n            <line\n              class=\"ea-line-chart__x-tick\"\n              [attr.x1]=\"xLabel.x\"\n              [attr.x2]=\"xLabel.x\"\n              [attr.y1]=\"layout().axisY\"\n              [attr.y2]=\"layout().tickEndY\" />\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n              [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n              [attr.transform]=\"\n                layout().labelAngle\n                  ? 'rotate(' +\n                    -layout().labelAngle +\n                    ' ' +\n                    xLabel.x +\n                    ' ' +\n                    layout().labelY +\n                    ')'\n                  : null\n              \"\n              [attr.x]=\"xLabel.textX\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n            <mask\n              maskUnits=\"userSpaceOnUse\"\n              [attr.id]=\"breakMaskId\">\n              <rect\n                fill=\"white\"\n                x=\"0\"\n                y=\"0\"\n                [attr.width]=\"layout().width\"\n                [attr.height]=\"layout().height\" />\n              <rect\n                fill=\"black\"\n                [attr.x]=\"axisBreak.gap.x\"\n                [attr.y]=\"axisBreak.gap.y\"\n                [attr.width]=\"axisBreak.gap.width\"\n                [attr.height]=\"axisBreak.gap.height\" />\n            </mask>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n            <g class=\"ea-line-chart__lines\">\n              @for (line of layout().series; track $index; let s = $index) {\n                <g\n                  class=\"ea-line-chart__series\"\n                  [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                  [style.--ea-chart-color]=\"line.color\">\n                  @if (showArea()) {\n                    @for (area of line.areas; track $index) {\n                      <path\n                        class=\"ea-line-chart__area\"\n                        [attr.d]=\"area\" />\n                    }\n                  }\n                  @for (path of line.paths; track $index) {\n                    <path\n                      class=\"ea-line-chart__line\"\n                      pathLength=\"1\"\n                      [attr.d]=\"path\" />\n                  }\n                  @for (point of line.points; track point.index) {\n                    @if (showPoints() || isActivePoint(s, point.index)) {\n                      <circle\n                        class=\"ea-line-chart__point\"\n                        [class.ea-line-chart__point--active]=\"\n                          isActivePoint(s, point.index)\n                        \"\n                        [attr.cx]=\"point.x\"\n                        [attr.cy]=\"point.y\"\n                        [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                    }\n                  }\n                </g>\n              }\n            </g>\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-line-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-line-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--pannable .ea-line-chart__svg{cursor:grab}.ea-line-chart--panning .ea-line-chart__svg{cursor:grabbing;-webkit-user-select:none;user-select:none}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:var(--ea-chart-duration, .6s);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -19618,6 +20150,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		xValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xValues",
+				required: false
+			}]
+		}],
+		xTicks: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xTicks",
+				required: false
+			}]
+		}],
+		visibleXSpan: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibleXSpan",
+				required: false
+			}]
+		}],
 		curve: [{
 			type: i0.Input,
 			args: [{
@@ -19674,6 +20230,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		xLabelOrientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xLabelOrientation",
+				required: false
+			}]
+		}],
+		showAxisBreak: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showAxisBreak",
+				required: false
+			}]
+		}],
 		height: [{
 			type: i0.Input,
 			args: [{
@@ -19729,6 +20301,10 @@ i0.ɵɵngDeclareClassMetadata({
 		activePointChange: [{
 			type: i0.Output,
 			args: ["activePointChange"]
+		}],
+		visibleRangeChange: [{
+			type: i0.Output,
+			args: ["visibleRangeChange"]
 		}]
 	}
 });
@@ -22638,7 +23214,7 @@ var PieChartComponent = class PieChartComponent {
 		},
 		ngImport: i0,
 		template: "<div\n  class=\"ea-pie-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-pie-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      <div class=\"ea-pie-chart__figure\">\n        @for (pass of renderPass(); track pass) {\n          <svg\n            class=\"ea-pie-chart__svg\"\n            aria-hidden=\"true\"\n            [attr.width]=\"layout().diameter\"\n            [attr.height]=\"layout().diameter\"\n            [attr.viewBox]=\"'0 0 ' + layout().diameter + ' ' + layout().diameter\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerdown)=\"onPointerMove($event)\"\n            (pointerleave)=\"onPointerLeave()\"\n            (click)=\"onClick()\">\n            @for (slice of layout().slices; track slice.index) {\n              <path\n                class=\"ea-pie-chart__slice\"\n                fill-rule=\"evenodd\"\n                [class.ea-pie-chart__slice--dimmed]=\"isDimmed(slice.index)\"\n                [style.--ea-chart-color]=\"slice.color\"\n                [style.transform]=\"offset(slice)\"\n                [attr.d]=\"slice.path\" />\n            }\n            @for (tip of tooltips(); track tip.key) {\n              <rect\n                class=\"ea-pie-chart__anchor\"\n                width=\"2\"\n                height=\"2\"\n                [attr.x]=\"tip.x - 1\"\n                [attr.y]=\"tip.y - 1\"\n                [eaTooltip]=\"tooltipContent\"\n                [tooltipOpen]=\"true\"\n                [maxWidth]=\"undefined\" />\n            }\n          </svg>\n        }\n        <ng-template #tooltipContent>\n          @if (tooltip(); as tip) {\n            <div class=\"ea-pie-chart__tooltip\">\n              <span class=\"ea-pie-chart__tooltip-row\">\n                <span\n                  class=\"ea-pie-chart__swatch\"\n                  [style.--ea-chart-color]=\"tip.color\">\n                </span>\n                <span class=\"ea-pie-chart__tooltip-title\">{{ tip.title }}</span>\n              </span>\n              <span class=\"ea-pie-chart__tooltip-value\">{{ tip.detail }}</span>\n            </div>\n          }\n        </ng-template>\n      </div>\n      <table class=\"ea-pie-chart__table\">\n        <caption>\n          {{ label() }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n            <th scope=\"col\">{{ i18n.messages().chart.value }}</th>\n            <th scope=\"col\">{{ i18n.messages().chart.share }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (slice of data(); track $index; let i = $index) {\n            <tr>\n              <th scope=\"row\">{{ slice.label }}</th>\n              <td>{{ tableValue(slice) }}</td>\n              <td>{{ tablePercent(i) }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <div\n      class=\"ea-pie-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-pie-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showLegend() && hasData()) {\n    <ul\n      class=\"ea-pie-chart__legend\"\n      aria-hidden=\"true\">\n      @for (item of legend(); track $index) {\n        <li class=\"ea-pie-chart__legend-item\">\n          <span\n            class=\"ea-pie-chart__swatch\"\n            [style.--ea-chart-color]=\"item.color\">\n          </span>\n          {{ item.label }}\n          @if (showPercentages()) {\n            <span class=\"ea-pie-chart__legend-percent\">{{ item.percent }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
-		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"],
+		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -22675,7 +23251,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			template: "<div\n  class=\"ea-pie-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-pie-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      <div class=\"ea-pie-chart__figure\">\n        @for (pass of renderPass(); track pass) {\n          <svg\n            class=\"ea-pie-chart__svg\"\n            aria-hidden=\"true\"\n            [attr.width]=\"layout().diameter\"\n            [attr.height]=\"layout().diameter\"\n            [attr.viewBox]=\"'0 0 ' + layout().diameter + ' ' + layout().diameter\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerdown)=\"onPointerMove($event)\"\n            (pointerleave)=\"onPointerLeave()\"\n            (click)=\"onClick()\">\n            @for (slice of layout().slices; track slice.index) {\n              <path\n                class=\"ea-pie-chart__slice\"\n                fill-rule=\"evenodd\"\n                [class.ea-pie-chart__slice--dimmed]=\"isDimmed(slice.index)\"\n                [style.--ea-chart-color]=\"slice.color\"\n                [style.transform]=\"offset(slice)\"\n                [attr.d]=\"slice.path\" />\n            }\n            @for (tip of tooltips(); track tip.key) {\n              <rect\n                class=\"ea-pie-chart__anchor\"\n                width=\"2\"\n                height=\"2\"\n                [attr.x]=\"tip.x - 1\"\n                [attr.y]=\"tip.y - 1\"\n                [eaTooltip]=\"tooltipContent\"\n                [tooltipOpen]=\"true\"\n                [maxWidth]=\"undefined\" />\n            }\n          </svg>\n        }\n        <ng-template #tooltipContent>\n          @if (tooltip(); as tip) {\n            <div class=\"ea-pie-chart__tooltip\">\n              <span class=\"ea-pie-chart__tooltip-row\">\n                <span\n                  class=\"ea-pie-chart__swatch\"\n                  [style.--ea-chart-color]=\"tip.color\">\n                </span>\n                <span class=\"ea-pie-chart__tooltip-title\">{{ tip.title }}</span>\n              </span>\n              <span class=\"ea-pie-chart__tooltip-value\">{{ tip.detail }}</span>\n            </div>\n          }\n        </ng-template>\n      </div>\n      <table class=\"ea-pie-chart__table\">\n        <caption>\n          {{ label() }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n            <th scope=\"col\">{{ i18n.messages().chart.value }}</th>\n            <th scope=\"col\">{{ i18n.messages().chart.share }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (slice of data(); track $index; let i = $index) {\n            <tr>\n              <th scope=\"row\">{{ slice.label }}</th>\n              <td>{{ tableValue(slice) }}</td>\n              <td>{{ tablePercent(i) }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <div\n      class=\"ea-pie-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-pie-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showLegend() && hasData()) {\n    <ul\n      class=\"ea-pie-chart__legend\"\n      aria-hidden=\"true\">\n      @for (item of legend(); track $index) {\n        <li class=\"ea-pie-chart__legend-item\">\n          <span\n            class=\"ea-pie-chart__swatch\"\n            [style.--ea-chart-color]=\"item.color\">\n          </span>\n          {{ item.label }}\n          @if (showPercentages()) {\n            <span class=\"ea-pie-chart__legend-percent\">{{ item.percent }}</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
-			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"]
+			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"]
 		}]
 	}],
 	propDecorators: {