minerva-design 1.11.0 → 1.12.1

package/dist/angular/fesm2022/minerva-angular.mjs

@@ -1,8 +1,8 @@
 import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, SecurityContext, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
-import { DEFAULT_LANGUAGE, DEFAULT_TAG_SEPARATORS, PALETTES, RATING_STAR_COUNT, addDays, clampNumber, cn, createCheckboxMachine, createRatingMachine, createSwitchMachine, createTypeahead, dayKey, designAttributes, findCascaderPath, flattenCascaderOptions, formatHasSeconds, formatNumberValue, formatTime, getNextIndex, getPageRange, getRatingKeyValue, getRatingStarFills, getVirtualRange, inferStepPrecision, isPalette, isSupportedLanguage, localDate, matchesAccept, messages, monthStart, parseDayKey, parseNumberDraft, parseTimeInput, presetPalette, resolveDesign, resolveSize, resolveSpace, resolveTimeFormat, sameMonth, splitBySeparators, startOfToday, translate } from "../../core/index.js";
-import { FOCUS_SCOPE_UNMOUNT_EVENT, PALETTE_COOKIE_NAME, THEME_COOKIE_NAME, applyDesignAttributes, applyPosition, autoPosition, createDismissableLayer, createFocusScope, focusElement, generateCSSVariables, getDirection, getSystemTheme, getTabbables, hideOthers, isBilingualTheme, lockScroll, logicalArrowKey, parsePaletteCookie, parsePlacement, parseThemeCookie, readCookieValue, resolveTheme, serializeThemeCookie, waitForExitAnimation } from "../../dom/index.js";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, SecurityContext, TemplateRef, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { DEFAULT_LANGUAGE, DEFAULT_TAG_SEPARATORS, PALETTES, RATING_STAR_COUNT, addDays, clampNumber, cn, createCheckboxMachine, createRatingMachine, createSwitchMachine, createTypeahead, dayKey, designAttributes, findCascaderPath, flattenCascaderOptions, formatDevMessage, formatHasSeconds, formatNumberValue, formatTime, getNextIndex, getPageRange, getRatingKeyValue, getRatingStarFills, getVirtualRange, inferStepPrecision, invalidPrimaryColorMessage, isPalette, isSupportedLanguage, localDate, matchesAccept, messages, monthStart, palettes, parseDayKey, parseNumberDraft, parseTimeInput, presetPalette, resolveDesign, resolvePrimaryColor, resolveSize, resolveSpace, resolveTimeFormat, sameMonth, splitBySeparators, startOfToday, translate, weekStart } from "../../core/index.js";
+import { FOCUS_SCOPE_UNMOUNT_EVENT, PALETTE_COOKIE_NAME, THEME_COOKIE_NAME, applyDesignAttributes, applyPosition, autoPosition, createDismissableLayer, createFocusScope, focusElement, generateCSSVariables, getDirection, getSystemTheme, getTabbables, hideOthers, isBilingualTheme, lockScroll, logicalArrowKey, parsePaletteCookie, parsePlacement, parseThemeCookie, primaryColorCss, primaryColorTheme, readCookieValue, resolveTheme, serializeThemeCookie, waitForExitAnimation } from "../../dom/index.js";
 import { FormGroupDirective, NG_VALUE_ACCESSOR, NgControl, NgForm } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 import { boxplotData, bubbleSeries, createChart, createChart3D, createDepthChart, createGraphChart, createOrderBook, createOrderBookHeatmap, createShapeChart, createTimeAndSales, createTradingChart, ganttSeries, heatmapChartOptions, histogramSeries, quadrantChartOptions, quadrantOf, sparklineOptions, waterfallSeries } from "../../charts/core.js";
@@ -11,6 +11,7 @@ const injectIsBrowser = () => isPlatformBrowser(inject(PLATFORM_ID));
 const staticInputs = (config = {}) => ({
 	theme: () => config.theme,
 	palette: () => config.palette,
+	primaryColor: () => config.primaryColor,
 	persist: () => config.persist,
 	locale: () => config.locale,
 	preset: () => config.preset,
@@ -25,6 +26,15 @@ const themeModeOf = (theme) => {
 	if (theme === "auto" || theme === "system" || isBilingualTheme(theme)) return "system";
 };
 const supportsPalette = (theme) => theme === "light" || theme === "dark" || theme === "auto" || theme === "system";
+const warnedPrimaryColors = /* @__PURE__ */ new Set();
+const warnInvalidPrimaryColor = (value) => {
+	if (!isDevMode()) return;
+	const key = JSON.stringify(value);
+	if (warnedPrimaryColors.has(key)) return;
+	warnedPrimaryColors.add(key);
+	console.error(formatDevMessage("mn-config", invalidPrimaryColorMessage(value)));
+};
+const BRAND_STYLE_ATTRIBUTE = "data-minerva-primary-color";
 var MnSystemTheme = class MnSystemTheme {
 	constructor() {
 		this.state = signal("light", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
@@ -122,15 +132,39 @@ var MinervaScope = class {
 			const palette = this.palette();
 			return palette && supportsPalette(this.theme()) ? palette : null;
 		}, ...ngDevMode ? [{ debugName: "activePalette" }] : /* istanbul ignore next */ []);
-		this.scoped = computed(() => !isRoot && (this.themeInput() !== void 0 || this.paletteInput() !== void 0 || this.hasDesign()), ...ngDevMode ? [{ debugName: "scoped" }] : /* istanbul ignore next */ []);
+		const ownBrand = computed(() => {
+			const value = inputs.primaryColor();
+			const pair = resolvePrimaryColor(value);
+			if (pair === void 0) warnInvalidPrimaryColor(value);
+			return pair;
+		}, ...ngDevMode ? [{ debugName: "ownBrand" }] : /* istanbul ignore next */ []);
+		const ownsBrand = () => isRoot || inputs.primaryColor() !== void 0 && ownBrand() !== void 0;
+		this.primaryColor = computed(() => ownsBrand() ? ownBrand() ?? null : parent?.primaryColor() ?? null, {
+			...ngDevMode ? { debugName: "primaryColor" } : /* istanbul ignore next */ {},
+			equal: (a, b) => a?.light === b?.light && a?.dark === b?.dark
+		});
+		this.inlineTheme = computed(() => {
+			const palette = this.activePalette();
+			const base = palette ? void 0 : resolveTheme(this.theme(), this.systemTheme());
+			const brand = this.primaryColor();
+			if (!brand) return base ?? {};
+			const mode = this.resolvedMode() ?? "light";
+			return {
+				...base,
+				...primaryColorTheme(brand, mode, palette ? palettes[palette][mode] : base)
+			};
+		}, ...ngDevMode ? [{ debugName: "inlineTheme" }] : /* istanbul ignore next */ []);
+		this.scoped = computed(() => !isRoot && (this.themeInput() !== void 0 || this.paletteInput() !== void 0 || inputs.primaryColor() !== void 0 && ownBrand() !== void 0 || this.hasDesign()), ...ngDevMode ? [{ debugName: "scoped" }] : /* istanbul ignore next */ []);
 		this.scopeVariables = computed(() => {
-			if (!this.scoped() || this.activePalette()) return null;
-			const theme = resolveTheme(this.theme(), this.systemTheme());
-			return Object.fromEntries(Object.entries(theme).filter(([, v]) => v !== void 0 && v !== null && v !== "").map(([key, value]) => [`--${key}`, String(value)]));
+			if (!this.scoped()) return null;
+			const entries = Object.entries(this.inlineTheme()).filter(([, v]) => v !== void 0 && v !== null && v !== "").map(([key, value]) => [`--${key}`, String(value)]);
+			return entries.length ? Object.fromEntries(entries) : null;
 		}, ...ngDevMode ? [{ debugName: "scopeVariables" }] : /* istanbul ignore next */ []);
 		this.scopeDesignAttributes = computed(() => this.scoped() ? designAttributes(this.design(), { all: true }) : null, ...ngDevMode ? [{ debugName: "scopeDesignAttributes" }] : /* istanbul ignore next */ []);
 		this.portalContainer = computed(() => this.scoped() ? this.ownPortal() : parent?.portalContainer() ?? null, ...ngDevMode ? [{ debugName: "portalContainer" }] : /* istanbul ignore next */ []);
-		if (!this.isBrowser || passive) return;
+		if (passive) return;
+		if (isRoot) this.manageBrandStyle();
+		if (!this.isBrowser) return;
 		if (isRoot) this.applyToDocument();
 		else this.managePortalHost();
 	}
@@ -196,8 +230,7 @@ var MinervaScope = class {
 		effect(() => {
 			const mode = this.resolvedMode();
 			const palette = this.activePalette();
-			const theme = this.theme();
-			const system = this.systemTheme();
+			const inlineTheme = this.inlineTheme();
 			const design = this.design();
 			untracked(() => {
 				if (mode) {
@@ -207,13 +240,9 @@ var MinervaScope = class {
 					root.removeAttribute("data-theme");
 					root.style.removeProperty("color-scheme");
 				}
-				if (palette) {
-					root.setAttribute("data-palette", palette);
-					generateCSSVariables(root.style, {});
-				} else {
-					root.removeAttribute("data-palette");
-					generateCSSVariables(root.style, resolveTheme(theme, system));
-				}
+				if (palette) root.setAttribute("data-palette", palette);
+				else root.removeAttribute("data-palette");
+				generateCSSVariables(root.style, inlineTheme);
 				applyDesignAttributes(root, design);
 			});
 		});
@@ -252,8 +281,7 @@ var MinervaScope = class {
 			if (!el) return;
 			const mode = this.resolvedMode();
 			const palette = this.activePalette();
-			const theme = this.theme();
-			const system = this.systemTheme();
+			const inlineTheme = this.inlineTheme();
 			const design = this.design();
 			untracked(() => {
 				if (mode) el.setAttribute("data-theme", mode);
@@ -263,11 +291,35 @@ var MinervaScope = class {
 				applyDesignAttributes(el, design, { all: true });
 				if (mode) el.style.setProperty("color-scheme", mode);
 				else el.style.removeProperty("color-scheme");
-				generateCSSVariables(el.style, palette ? {} : resolveTheme(theme, system));
+				generateCSSVariables(el.style, inlineTheme);
 			});
 		});
 		inject(DestroyRef).onDestroy(() => host?.remove());
 	}
+	manageBrandStyle() {
+		const doc = this.document;
+		let style = null;
+		effect(() => {
+			const brand = this.primaryColor();
+			const palette = this.activePalette();
+			const theme = this.theme();
+			untracked(() => {
+				if (!brand) {
+					style?.remove();
+					style = null;
+					return;
+				}
+				const baseOf = (mode) => palette ? palettes[palette][mode] : resolveTheme(theme, mode);
+				style ??= doc.head.querySelector(`style[${BRAND_STYLE_ATTRIBUTE}]`) ?? doc.head.appendChild(doc.createElement("style"));
+				style.setAttribute(BRAND_STYLE_ATTRIBUTE, "");
+				style.textContent = primaryColorCss(brand, { base: {
+					light: baseOf("light"),
+					dark: baseOf("dark")
+				} });
+			});
+		});
+		inject(DestroyRef).onDestroy(() => style?.remove());
+	}
 };
 const MN_SCOPE = new InjectionToken("MN_SCOPE", {
 	providedIn: "root",
@@ -294,6 +346,7 @@ var MnConfig = class MnConfig {
 		this.radius = input(void 0, ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
 		this.shadow = input(void 0, ...ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []);
 		this.fontScale = input(void 0, ...ngDevMode ? [{ debugName: "fontScale" }] : /* istanbul ignore next */ []);
+		this.primaryColor = input(void 0, ...ngDevMode ? [{ debugName: "primaryColor" }] : /* istanbul ignore next */ []);
 		this.themeChange = output();
 		this.paletteChange = output();
 		this.scope = new MinervaScope(inject(MN_SCOPE, { skipSelf: true }), {
@@ -305,7 +358,8 @@ var MnConfig = class MnConfig {
 			density: this.density,
 			radius: this.radius,
 			shadow: this.shadow,
-			fontScale: this.fontScale
+			fontScale: this.fontScale,
+			primaryColor: this.primaryColor
 		}, false, {
 			themeChange: (theme) => this.themeChange.emit(theme),
 			paletteChange: (palette) => this.paletteChange.emit(palette)
@@ -392,6 +446,13 @@ var MnConfig = class MnConfig {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				primaryColor: {
+					classPropertyName: "primaryColor",
+					publicName: "primaryColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -527,6 +588,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		primaryColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryColor",
+				required: false
+			}]
+		}],
 		themeChange: [{
 			type: i0.Output,
 			args: ["themeChange"]
@@ -1286,31 +1355,40 @@ const popoverStyles = {
 	positioner: "_positioner_13juh_1"
 };
 const progressIndicatorStyles = {
-	bar: "_bar_148vu_82",
-	barAnimation: "_barAnimation_148vu_1",
-	barContainer: "_barContainer_148vu_82",
-	circle: "_circle_148vu_38",
-	current: "_current_148vu_28",
-	defaultWidth: "_defaultWidth_148vu_13",
-	dottedBar: "_dottedBar_148vu_83",
-	dottedBarAnimation: "_dottedBarAnimation_148vu_1",
-	dottedBarContainer: "_dottedBarContainer_148vu_83",
-	fullWidth: "_fullWidth_148vu_16",
-	icon: "_icon_148vu_10",
-	label: "_label_148vu_32",
-	large: "_large_148vu_58",
-	medium: "_medium_148vu_53",
-	neutral: "_neutral_148vu_24",
-	primary: "_primary_148vu_20",
-	progressIndicator: "_progressIndicator_148vu_1",
-	small: "_small_148vu_48",
-	spin: "_spin_148vu_37",
-	spinner: "_spinner_148vu_37",
-	wave: "_wave_148vu_39",
-	waveAnimation: "_waveAnimation_148vu_1",
-	waveContainer: "_waveContainer_148vu_39",
-	xlarge: "_xlarge_148vu_63",
-	xsmall: "_xsmall_148vu_43"
+	bar: "_bar_8om83_133",
+	barAnimation: "_barAnimation_8om83_1",
+	barContainer: "_barContainer_8om83_133",
+	circle: "_circle_8om83_59",
+	current: "_current_8om83_28",
+	danger: "_danger_8om83_40",
+	defaultWidth: "_defaultWidth_8om83_13",
+	determinate: "_determinate_8om83_185",
+	dottedBar: "_dottedBar_8om83_134",
+	dottedBarAnimation: "_dottedBarAnimation_8om83_1",
+	dottedBarContainer: "_dottedBarContainer_8om83_134",
+	fullWidth: "_fullWidth_8om83_16",
+	icon: "_icon_8om83_10",
+	info: "_info_8om83_44",
+	label: "_label_8om83_48",
+	large: "_large_8om83_83",
+	medium: "_medium_8om83_77",
+	neutral: "_neutral_8om83_24",
+	primary: "_primary_8om83_20",
+	progressIndicator: "_progressIndicator_8om83_1",
+	ring: "_ring_8om83_60",
+	ringArc: "_ringArc_8om83_119",
+	ringTrack: "_ringTrack_8om83_116",
+	small: "_small_8om83_71",
+	spin: "_spin_8om83_58",
+	spinner: "_spinner_8om83_58",
+	success: "_success_8om83_32",
+	value: "_value_8om83_53",
+	warning: "_warning_8om83_36",
+	wave: "_wave_8om83_61",
+	waveAnimation: "_waveAnimation_8om83_1",
+	waveContainer: "_waveContainer_8om83_61",
+	xlarge: "_xlarge_8om83_89",
+	xsmall: "_xsmall_8om83_65"
 };
 const proseStyles = { prose: "_prose_3xiks_1" };
 const radioStyles = {
@@ -1671,6 +1749,21 @@ const virtualListStyles = {
 	virtualListContent: "_virtualListContent_150w2_13",
 	virtualListItem: "_virtualListItem_150w2_16"
 };
+const weekStripStyles = {
+	count: "_count_1d8wn_105",
+	day: "_day_1d8wn_25",
+	dayNumber: "_dayNumber_1d8wn_90",
+	days: "_days_1d8wn_62",
+	dot: "_dot_1d8wn_109",
+	heading: "_heading_1d8wn_17",
+	large: "_large_1d8wn_181",
+	marker: "_marker_1d8wn_135",
+	navButton: "_navButton_1d8wn_25",
+	small: "_small_1d8wn_161",
+	toolbar: "_toolbar_1d8wn_9",
+	weekStrip: "_weekStrip_1d8wn_1",
+	weekday: "_weekday_1d8wn_101"
+};
 const RADIUS_CLASS = {
 	none: buttonStyles.borderRadiusNone,
 	small: buttonStyles.borderRadiusSmall,
@@ -22874,9 +22967,42 @@ var MnProgressIndicator = class MnProgressIndicator {
 		this.size = input("medium", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 		this.variant = input("spinner", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 		this.color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+		this.value = input(void 0, {
+			...ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {},
+			transform: (v) => v === void 0 || v === null || v === "" ? void 0 : Number(v)
+		});
+		this.max = input(100, {
+			...ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.showValue = input(false, {
+			...ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.format = input(null, ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
 		this.s = progressIndicatorStyles;
-		this.indicatorClass = computed(() => this.s[this.variant() === "dotted-bar" ? "dottedBar" : this.variant()], ...ngDevMode ? [{ debugName: "indicatorClass" }] : /* istanbul ignore next */ []);
-		this.classes = computed(() => cn(this.s.progressIndicator, this.s[this.size()], this.s[this.color()]), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+		this.fillClass = cn(this.s.bar, this.s.determinate);
+		this.determinate = computed(() => typeof this.value() === "number" && (this.variant() === "bar" || this.variant() === "circle"), ...ngDevMode ? [{ debugName: "determinate" }] : /* istanbul ignore next */ []);
+		this.safeMax = computed(() => {
+			const max = this.max();
+			return Number.isFinite(max) && max > 0 ? max : 100;
+		}, ...ngDevMode ? [{ debugName: "safeMax" }] : /* istanbul ignore next */ []);
+		this.current = computed(() => {
+			const value = this.value();
+			if (!this.determinate() || value === void 0) return 0;
+			return Math.min(Math.max(Number.isNaN(value) ? 0 : value, 0), this.safeMax());
+		}, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+		this.percent = computed(() => this.current() / this.safeMax() * 100, ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+		this.formatted = computed(() => {
+			const format = this.format();
+			return format ? format(this.current(), this.safeMax()) : `${Math.round(this.percent())}%`;
+		}, ...ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []);
+		this.barContainerClass = computed(() => cn(this.s.barContainer, this.s[this.size()]), ...ngDevMode ? [{ debugName: "barContainerClass" }] : /* istanbul ignore next */ []);
+		this.dottedBarContainerClass = computed(() => cn(this.s.dottedBarContainer, this.s[this.size()]), ...ngDevMode ? [{ debugName: "dottedBarContainerClass" }] : /* istanbul ignore next */ []);
+		this.waveContainerClass = computed(() => cn(this.s.waveContainer, this.s[this.size()]), ...ngDevMode ? [{ debugName: "waveContainerClass" }] : /* istanbul ignore next */ []);
+		this.ringClass = computed(() => cn(this.s.ring, this.s[this.size()]), ...ngDevMode ? [{ debugName: "ringClass" }] : /* istanbul ignore next */ []);
+		this.indicatorClass = computed(() => cn(this.s[this.variant() === "circle" ? "circle" : "spinner"], this.s[this.size()]), ...ngDevMode ? [{ debugName: "indicatorClass" }] : /* istanbul ignore next */ []);
+		this.classes = computed(() => cn(this.s.progressIndicator, this.s[this.size()], this.s[this.color()], (this.variant() === "bar" || this.variant() === "dotted-bar") && this.s.defaultWidth), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -22937,6 +23063,34 @@ var MnProgressIndicator = class MnProgressIndicator {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				max: {
+					classPropertyName: "max",
+					publicName: "max",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showValue: {
+					classPropertyName: "showValue",
+					publicName: "showValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				format: {
+					classPropertyName: "format",
+					publicName: "format",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: {
@@ -22946,8 +23100,12 @@ var MnProgressIndicator = class MnProgressIndicator {
 				},
 				properties: {
 					"attr.role": "decorative() ? null : 'progressbar'",
-					"attr.aria-label": "label() || 'Loading'",
+					"attr.aria-label": "label() || (determinate() ? 'Progress' : 'Loading')",
 					"attr.aria-hidden": "decorative() ? true : null",
+					"attr.aria-valuemin": "determinate() && !decorative() ? 0 : null",
+					"attr.aria-valuemax": "determinate() && !decorative() ? safeMax() : null",
+					"attr.aria-valuenow": "determinate() && !decorative() ? current() : null",
+					"attr.aria-valuetext": "determinate() && !decorative() && format() ? formatted() : null",
 					"attr.data-size": "size()",
 					"attr.data-variant": "variant()",
 					"attr.data-color": "color()",
@@ -22964,12 +23122,118 @@ var MnProgressIndicator = class MnProgressIndicator {
         >{{ icon() }}</span
       >
     }
-    <span
-      mnHook="progress"
-      mnPart="indicator"
-      aria-hidden="true"
-      [class]="indicatorClass()"
-    ></span>
+    @if (determinate() && variant() === "bar") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="barContainerClass()"
+      >
+        <div [class]="fillClass" [style.width.%]="percent()"></div>
+      </div>
+    } @else if (determinate()) {
+      <svg
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        focusable="false"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+        [attr.class]="ringClass()"
+      >
+        <circle [attr.class]="s.ringTrack" cx="12" cy="12" r="10" />
+        <circle
+          [attr.class]="s.ringArc"
+          cx="12"
+          cy="12"
+          r="10"
+          pathLength="100"
+          [attr.stroke-dasharray]="percent() + ' 100'"
+        />
+      </svg>
+    } @else if (variant() === "bar") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="barContainerClass()"
+      >
+        <div [class]="s.bar"></div>
+      </div>
+    } @else if (variant() === "dotted-bar") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="dottedBarContainerClass()"
+      >
+        <div [class]="s.dottedBar"></div>
+      </div>
+    } @else if (variant() === "wave") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="waveContainerClass()"
+      >
+        <svg
+          [attr.class]="s.wave"
+          viewBox="0 0 24 24"
+          width="1em"
+          height="1em"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M2 12h3V6h5v12h5V6h5v6h2" />
+        </svg>
+      </div>
+    } @else {
+      <span
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="indicatorClass()"
+        ><svg
+          viewBox="0 0 24 24"
+          width="1em"
+          height="1em"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          @if (variant() === "circle") {
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          } @else {
+            <path d="M12 2v4" />
+            <path d="m16.2 7.8 2.9-2.9" />
+            <path d="M18 12h4" />
+            <path d="m16.2 16.2 2.9 2.9" />
+            <path d="M12 18v4" />
+            <path d="m4.9 19.1 2.9-2.9" />
+            <path d="M2 12h4" />
+            <path d="m4.9 4.9 2.9 2.9" />
+          }</svg
+      ></span>
+    }
+    @if (determinate() && showValue()) {
+      <span
+        mnHook="progress"
+        mnPart="value"
+        aria-hidden="true"
+        [class]="s.value"
+        >{{ formatted() }}</span
+      >
+    }
     @if (label()) {
       <span mnHook="progress" mnPart="label" [class]="s.label">{{
         label()
@@ -23005,8 +23269,12 @@ i0.ɵɵngDeclareClassMetadata({
 				"data-minerva": "progress",
 				"data-part": "root",
 				"[attr.role]": "decorative() ? null : 'progressbar'",
-				"[attr.aria-label]": "label() || 'Loading'",
+				"[attr.aria-label]": "label() || (determinate() ? 'Progress' : 'Loading')",
 				"[attr.aria-hidden]": "decorative() ? true : null",
+				"[attr.aria-valuemin]": "determinate() && !decorative() ? 0 : null",
+				"[attr.aria-valuemax]": "determinate() && !decorative() ? safeMax() : null",
+				"[attr.aria-valuenow]": "determinate() && !decorative() ? current() : null",
+				"[attr.aria-valuetext]": "determinate() && !decorative() && format() ? formatted() : null",
 				"[attr.data-size]": "size()",
 				"[attr.data-variant]": "variant()",
 				"[attr.data-color]": "color()",
@@ -23021,12 +23289,118 @@ i0.ɵɵngDeclareClassMetadata({
         >{{ icon() }}</span
       >
     }
-    <span
-      mnHook="progress"
-      mnPart="indicator"
-      aria-hidden="true"
-      [class]="indicatorClass()"
-    ></span>
+    @if (determinate() && variant() === "bar") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="barContainerClass()"
+      >
+        <div [class]="fillClass" [style.width.%]="percent()"></div>
+      </div>
+    } @else if (determinate()) {
+      <svg
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        focusable="false"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+        [attr.class]="ringClass()"
+      >
+        <circle [attr.class]="s.ringTrack" cx="12" cy="12" r="10" />
+        <circle
+          [attr.class]="s.ringArc"
+          cx="12"
+          cy="12"
+          r="10"
+          pathLength="100"
+          [attr.stroke-dasharray]="percent() + ' 100'"
+        />
+      </svg>
+    } @else if (variant() === "bar") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="barContainerClass()"
+      >
+        <div [class]="s.bar"></div>
+      </div>
+    } @else if (variant() === "dotted-bar") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="dottedBarContainerClass()"
+      >
+        <div [class]="s.dottedBar"></div>
+      </div>
+    } @else if (variant() === "wave") {
+      <div
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="waveContainerClass()"
+      >
+        <svg
+          [attr.class]="s.wave"
+          viewBox="0 0 24 24"
+          width="1em"
+          height="1em"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M2 12h3V6h5v12h5V6h5v6h2" />
+        </svg>
+      </div>
+    } @else {
+      <span
+        mnHook="progress"
+        mnPart="indicator"
+        aria-hidden="true"
+        [class]="indicatorClass()"
+        ><svg
+          viewBox="0 0 24 24"
+          width="1em"
+          height="1em"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          @if (variant() === "circle") {
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          } @else {
+            <path d="M12 2v4" />
+            <path d="m16.2 7.8 2.9-2.9" />
+            <path d="M18 12h4" />
+            <path d="m16.2 16.2 2.9 2.9" />
+            <path d="M12 18v4" />
+            <path d="m4.9 19.1 2.9-2.9" />
+            <path d="M2 12h4" />
+            <path d="m4.9 4.9 2.9 2.9" />
+          }</svg
+      ></span>
+    }
+    @if (determinate() && showValue()) {
+      <span
+        mnHook="progress"
+        mnPart="value"
+        aria-hidden="true"
+        [class]="s.value"
+        >{{ formatted() }}</span
+      >
+    }
     @if (label()) {
       <span mnHook="progress" mnPart="label" [class]="s.label">{{
         label()
@@ -23082,6 +23456,38 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "color",
 				required: false
 			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
 		}]
 	}
 });
@@ -23162,7 +23568,11 @@ var MnLoadingState = class MnLoadingState {
 					"decorative",
 					"size",
 					"variant",
-					"color"
+					"color",
+					"value",
+					"max",
+					"showValue",
+					"format"
 				]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -25965,6 +26375,656 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const WEEKDAYS = [
+	"mon",
+	"tue",
+	"wed",
+	"thu",
+	"fri",
+	"sat",
+	"sun"
+];
+const markerCount = (marker) => typeof marker === "number" && Number.isFinite(marker) && marker > 0 ? Math.floor(marker) : 0;
+var MnWeekStrip = class MnWeekStrip {
+	constructor() {
+		this.value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.week = model(null, ...ngDevMode ? [{ debugName: "week" }] : /* istanbul ignore next */ []);
+		this.firstDayOfWeek = input(1, {
+			...ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {},
+			transform: (value) => numberAttribute(value, 1)
+		});
+		this.today = input(void 0, ...ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []);
+		this.markers = input(void 0, ...ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []);
+		this.getDayLabel = input(void 0, ...ngDevMode ? [{ debugName: "getDayLabel" }] : /* istanbul ignore next */ []);
+		this.showNavigation = input(false, {
+			...ngDevMode ? { debugName: "showNavigation" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.previousWeekLabel = input(void 0, ...ngDevMode ? [{ debugName: "previousWeekLabel" }] : /* istanbul ignore next */ []);
+		this.nextWeekLabel = input(void 0, ...ngDevMode ? [{ debugName: "nextWeekLabel" }] : /* istanbul ignore next */ []);
+		this.weekdayLabels = input(void 0, ...ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []);
+		this.locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.size = input("medium", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(void 0, {
+			...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+			alias: "aria-label"
+		});
+		this.s = weekStripStyles;
+		this.scope = injectScope();
+		this.focused = signal("", ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+		this.host = inject(ElementRef);
+		this.lastValue = void 0;
+		this.pendingFocus = null;
+		this.rootClass = computed(() => {
+			const size = this.size();
+			return size === "small" || size === "large" ? `${this.s.weekStrip} ${this.s[size]}` : this.s.weekStrip;
+		}, ...ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []);
+		this.todayKey = computed(() => {
+			const today = this.today();
+			return today && parseDayKey(today) ? today : dayKey(/* @__PURE__ */ new Date());
+		}, ...ngDevMode ? [{ debugName: "todayKey" }] : /* istanbul ignore next */ []);
+		this.language = computed(() => this.locale() ?? this.scope.language(), ...ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []);
+		this.start = computed(() => {
+			const week = this.week();
+			const date = week instanceof Date && !Number.isNaN(week.getTime()) ? week : parseDayKey(this.value() ?? "") ?? parseDayKey(this.todayKey()) ?? /* @__PURE__ */ new Date();
+			return weekStart(date, this.firstDayOfWeek());
+		}, ...ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []);
+		this.heading = computed(() => {
+			const start = this.start();
+			const end = addDays(start, 6);
+			const lang = this.language();
+			const monthFormat = new Intl.DateTimeFormat(lang, {
+				year: "numeric",
+				month: "long"
+			});
+			if (start.getMonth() === end.getMonth()) return monthFormat.format(start);
+			return `${new Intl.DateTimeFormat(lang, {
+				month: "long",
+				...start.getFullYear() !== end.getFullYear() && { year: "numeric" }
+			}).format(start)} – ${monthFormat.format(end)}`;
+		}, ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+		this.days = computed(() => {
+			const start = this.start();
+			const dates = Array.from({ length: 7 }, (_, index) => addDays(start, index));
+			const keys = dates.map(dayKey);
+			const value = this.value();
+			const todayKey = this.todayKey();
+			const activeKey = [
+				this.focused(),
+				value,
+				todayKey
+			].find((key) => !!key && keys.includes(key)) ?? keys[0];
+			const longDate = new Intl.DateTimeFormat(this.language(), {
+				weekday: "long",
+				year: "numeric",
+				month: "long",
+				day: "numeric"
+			});
+			const markers = this.markers();
+			const getDayLabel = this.getDayLabel();
+			const weekdayLabels = this.weekdayLabels();
+			const disabled = this.disabled();
+			return dates.map((date) => {
+				const key = dayKey(date);
+				const marker = markers?.[key];
+				const count = markerCount(marker);
+				const index = (date.getDay() + 6) % 7;
+				const text = longDate.format(date);
+				const label = getDayLabel ? getDayLabel(key, marker) : count ? this.scope.t("weekStrip.dayWithMarkers", {
+					date: text,
+					count
+				}) : marker === true ? this.scope.t("weekStrip.dayMarked", { date: text }) : text;
+				return {
+					date,
+					key,
+					count,
+					dot: !count && marker === true,
+					selected: value === key,
+					today: key === todayKey,
+					weekday: weekdayLabels?.[index] ?? this.scope.t(`monthCalendar.weekdays.${WEEKDAYS[index]}`),
+					label,
+					tabindex: !disabled && key === activeKey ? 0 : -1
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []);
+		afterEveryRender(() => {
+			if (!this.pendingFocus || this.disabled()) return;
+			const cell = this.host.nativeElement.querySelector(`[data-date="${this.pendingFocus}"]`);
+			if (cell) {
+				this.pendingFocus = null;
+				cell.focus();
+			}
+		});
+		effect(() => {
+			const value = this.value();
+			untracked(() => {
+				const first = this.lastValue === void 0;
+				if (value === this.lastValue) return;
+				this.lastValue = value;
+				const date = value ? parseDayKey(value) : null;
+				if (!first && date) this.goToWeek(date);
+			});
+		});
+	}
+	markerClass(day) {
+		return [
+			this.s.marker,
+			day.count ? this.s.count : "",
+			day.dot ? this.s.dot : ""
+		].filter(Boolean).join(" ");
+	}
+	goToWeek(date) {
+		const next = weekStart(date, this.firstDayOfWeek());
+		if (dayKey(next) !== dayKey(this.start())) this.week.set(next);
+	}
+	moveWeek(offset) {
+		if (!this.disabled()) this.goToWeek(addDays(this.start(), offset));
+	}
+	select(date) {
+		if (this.disabled()) return;
+		const key = dayKey(date);
+		this.goToWeek(date);
+		if (key !== this.value()) {
+			this.lastValue = key;
+			this.value.set(key);
+		}
+	}
+	navigate(event, date) {
+		if (this.disabled()) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			if (!event.repeat) this.select(date);
+			return;
+		}
+		const start = this.start();
+		let target;
+		switch (logicalArrowKey(event.key, event.currentTarget)) {
+			case "ArrowLeft":
+				target = addDays(date, -1);
+				break;
+			case "ArrowRight":
+				target = addDays(date, 1);
+				break;
+			case "Home":
+				target = start;
+				break;
+			case "End":
+				target = addDays(start, 6);
+				break;
+			case "PageUp":
+				target = addDays(date, -7);
+				break;
+			case "PageDown":
+				target = addDays(date, 7);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		const key = dayKey(target);
+		this.pendingFocus = key;
+		this.focused.set(key);
+		this.goToWeek(target);
+	}
+	focus(options) {
+		this.host.nativeElement.querySelector("[role=\"option\"][tabindex=\"0\"]")?.focus(options);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: MnWeekStrip,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: MnWeekStrip,
+			isStandalone: true,
+			selector: "mn-week-strip",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				week: {
+					classPropertyName: "week",
+					publicName: "week",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				firstDayOfWeek: {
+					classPropertyName: "firstDayOfWeek",
+					publicName: "firstDayOfWeek",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				today: {
+					classPropertyName: "today",
+					publicName: "today",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				markers: {
+					classPropertyName: "markers",
+					publicName: "markers",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				getDayLabel: {
+					classPropertyName: "getDayLabel",
+					publicName: "getDayLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showNavigation: {
+					classPropertyName: "showNavigation",
+					publicName: "showNavigation",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				previousWeekLabel: {
+					classPropertyName: "previousWeekLabel",
+					publicName: "previousWeekLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				nextWeekLabel: {
+					classPropertyName: "nextWeekLabel",
+					publicName: "nextWeekLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				weekdayLabels: {
+					classPropertyName: "weekdayLabels",
+					publicName: "weekdayLabels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				locale: {
+					classPropertyName: "locale",
+					publicName: "locale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "aria-label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				value: "valueChange",
+				week: "weekChange"
+			},
+			host: {
+				attributes: {
+					"data-minerva": "week-strip",
+					"data-part": "root"
+				},
+				properties: {
+					"attr.data-disabled": "disabled() ? '' : null",
+					"attr.data-size": "size()",
+					"class": "rootClass()"
+				}
+			},
+			ngImport: i0,
+			template: `@if (showNavigation()) {
+      <div [class]="s.toolbar">
+        <button
+          type="button"
+          mnHook="week-strip"
+          mnPart="nav-button"
+          [class]="s.navButton"
+          [attr.aria-label]="
+            previousWeekLabel() ?? scope.t('weekStrip.previousWeek')
+          "
+          [disabled]="disabled()"
+          (click)="moveWeek(-7)"
+        >
+          <svg mnIcon="ChevronLeft"></svg>
+        </button>
+        <span
+          mnHook="week-strip"
+          mnPart="heading"
+          [class]="s.heading"
+          aria-live="polite"
+          >{{ heading() }}</span
+        >
+        <button
+          type="button"
+          mnHook="week-strip"
+          mnPart="nav-button"
+          [class]="s.navButton"
+          [attr.aria-label]="nextWeekLabel() ?? scope.t('weekStrip.nextWeek')"
+          [disabled]="disabled()"
+          (click)="moveWeek(7)"
+        >
+          <svg mnIcon="ChevronRight"></svg>
+        </button>
+      </div>
+    }
+    <div
+      mnHook="week-strip"
+      mnPart="list"
+      role="listbox"
+      aria-orientation="horizontal"
+      [attr.aria-label]="ariaLabel() ?? scope.t('weekStrip.label')"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [class]="s.days"
+    >
+      @for (day of days(); track day.key) {
+        <div
+          role="option"
+          mnHook="week-strip"
+          mnPart="day"
+          [mnStates]="{
+            selected: day.selected,
+            today: day.today,
+            disabled: disabled(),
+          }"
+          [class]="s.day"
+          [attr.data-date]="day.key"
+          [attr.aria-label]="day.label"
+          [attr.aria-selected]="day.selected"
+          [attr.aria-current]="day.today ? 'date' : null"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [attr.tabindex]="day.tabindex"
+          (focus)="focused.set(day.key)"
+          (click)="select(day.date)"
+          (keydown)="navigate($event, day.date)"
+        >
+          <span [class]="s.weekday" aria-hidden="true">{{ day.weekday }}</span>
+          <span [class]="s.dayNumber" aria-hidden="true">{{
+            day.date.getDate()
+          }}</span>
+          <span
+            mnHook="week-strip"
+            mnPart="indicator"
+            [class]="markerClass(day)"
+            aria-hidden="true"
+            >{{ day.count ? (day.count > 99 ? "99+" : day.count) : "" }}</span
+          >
+        </div>
+      }
+    </div>`,
+			isInline: true,
+			dependencies: [{
+				kind: "directive",
+				type: MnHook,
+				selector: "[mnHook]",
+				inputs: [
+					"mnHook",
+					"mnPart",
+					"mnStates"
+				]
+			}, {
+				kind: "component",
+				type: MnIcon$1,
+				selector: "svg[mnIcon]",
+				inputs: ["mnIcon", "size"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MnWeekStrip,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "mn-week-strip",
+			imports: [MnHook, MnIcon$1],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-minerva": "week-strip",
+				"data-part": "root",
+				"[attr.data-disabled]": "disabled() ? '' : null",
+				"[attr.data-size]": "size()",
+				"[class]": "rootClass()"
+			},
+			template: `@if (showNavigation()) {
+      <div [class]="s.toolbar">
+        <button
+          type="button"
+          mnHook="week-strip"
+          mnPart="nav-button"
+          [class]="s.navButton"
+          [attr.aria-label]="
+            previousWeekLabel() ?? scope.t('weekStrip.previousWeek')
+          "
+          [disabled]="disabled()"
+          (click)="moveWeek(-7)"
+        >
+          <svg mnIcon="ChevronLeft"></svg>
+        </button>
+        <span
+          mnHook="week-strip"
+          mnPart="heading"
+          [class]="s.heading"
+          aria-live="polite"
+          >{{ heading() }}</span
+        >
+        <button
+          type="button"
+          mnHook="week-strip"
+          mnPart="nav-button"
+          [class]="s.navButton"
+          [attr.aria-label]="nextWeekLabel() ?? scope.t('weekStrip.nextWeek')"
+          [disabled]="disabled()"
+          (click)="moveWeek(7)"
+        >
+          <svg mnIcon="ChevronRight"></svg>
+        </button>
+      </div>
+    }
+    <div
+      mnHook="week-strip"
+      mnPart="list"
+      role="listbox"
+      aria-orientation="horizontal"
+      [attr.aria-label]="ariaLabel() ?? scope.t('weekStrip.label')"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [class]="s.days"
+    >
+      @for (day of days(); track day.key) {
+        <div
+          role="option"
+          mnHook="week-strip"
+          mnPart="day"
+          [mnStates]="{
+            selected: day.selected,
+            today: day.today,
+            disabled: disabled(),
+          }"
+          [class]="s.day"
+          [attr.data-date]="day.key"
+          [attr.aria-label]="day.label"
+          [attr.aria-selected]="day.selected"
+          [attr.aria-current]="day.today ? 'date' : null"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [attr.tabindex]="day.tabindex"
+          (focus)="focused.set(day.key)"
+          (click)="select(day.date)"
+          (keydown)="navigate($event, day.date)"
+        >
+          <span [class]="s.weekday" aria-hidden="true">{{ day.weekday }}</span>
+          <span [class]="s.dayNumber" aria-hidden="true">{{
+            day.date.getDate()
+          }}</span>
+          <span
+            mnHook="week-strip"
+            mnPart="indicator"
+            [class]="markerClass(day)"
+            aria-hidden="true"
+            >{{ day.count ? (day.count > 99 ? "99+" : day.count) : "" }}</span
+          >
+        </div>
+      }
+    </div>`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		week: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "week",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["weekChange"]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		today: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "today",
+				required: false
+			}]
+		}],
+		markers: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "markers",
+				required: false
+			}]
+		}],
+		getDayLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "getDayLabel",
+				required: false
+			}]
+		}],
+		showNavigation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showNavigation",
+				required: false
+			}]
+		}],
+		previousWeekLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousWeekLabel",
+				required: false
+			}]
+		}],
+		nextWeekLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextWeekLabel",
+				required: false
+			}]
+		}],
+		weekdayLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekdayLabels",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}]
+	}
+});
 var MnJsonField = class MnJsonField extends MnFormValueControl {
 	constructor() {
 		super(...arguments);
@@ -42072,6 +43132,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { CHART_SURFACE, MN_RADIO_GROUP, MN_SCOPE, MinervaScope, MnAlert, MnAppShell, MnAreaChart, MnAutoComplete, MnAvatar, MnAvatarGroup, MnBadge, MnBar3DChart, MnBarChart, MnBookWidgetBase, MnBox, MnBoxPlotChart, MnBubbleChart, MnBulletChart, MnButton, MnCalendarHeatmap, MnCandlestickChart, MnCard, MnCardContent, MnCardDescription, MnCardFooter, MnCardHeader, MnCardTitle, MnCartesianChartBase, MnCascader, MnCascaderPanel, MnChart, MnChart3DBase, MnChartEngine, MnCheckbox, MnChordChart, MnCodeBlock, MnCommandDialog, MnConfig, MnConfirmDialog, MnConfirmProvider, MnConfirmService, MnContextMenu, MnDataTable, MnDatePicker, MnDependencyGraph, MnDepthChart, MnDescriptionList, MnDivider, MnDonutChart, MnDrawer, MnDrawerBody, MnDrawerClose, MnDrawerFooter, MnDrawerHeader, MnDrawerTrigger, MnDynamicIcon, MnEmpty, MnFieldBase, MnFloatingBase, MnFormControl, MnFormErrorMessage, MnFormField, MnFormHelperText, MnFormLabel, MnFormLayout, MnFunnelChart, MnGanttChart, MnGaugeChart, MnGraphChart, MnGraphChartBase, MnGridItem, MnHStack, MnHeatmapChart, MnHistogramChart, MnHorizontalBarChart, MnHtmlPreview, MnIcon, MnIconBase, MnIconButton, MnIconCanvas, MnInput, MnJsonField, MnKeyValueEditor, MnLine3DChart, MnLineChart, MnList, MnListItem, MnLoadingState, MnMenu, MnMenuBase, MnMixedChart, MnModal, MnModalBody, MnModalClose, MnModalFooter, MnModalHeader, MnModalTrigger, MnMonthCalendar, MnNavTree, MnNumberInput, MnOrderBook, MnOrderBookHeatmap, MnPage, MnPageHeader, MnPageSection, MnPageTab, MnPageTabs, MnPagination, MnPaletteToggle, MnPieBase, MnPieChart, MnPopover, MnPopoverAnchor, MnPopoverClose, MnProgressIndicator, MnProse, MnQuadrantChart, MnRadarChart, MnRadialBarChart, MnRadio, MnRadioGroup, MnRangeAreaChart, MnRating, MnRatingScale, MnResponsiveGrid, MnSankeyChart, MnScatter3DChart, MnScatterChart, MnSelect, MnSelectGroup, MnSelectItem, MnSelectLabel, MnSelectSeparator, MnSeriesChartBase, MnShapeChart, MnShapeChartBase, MnShapeChartCommon, MnSkeleton, MnSkeletonText, MnSparkline, MnSplitLayout, MnStack, MnStackBase, MnStatCard, MnSteps, MnSunburstChart, MnSurface3DChart, MnSwitch, MnTab, MnTabPanel, MnTableBody, MnTableCell, MnTableCellContent, MnTableHead, MnTableHeader, MnTableRoot, MnTableRow, MnTabs, MnTag, MnTagInput, MnTextLink, MnTextarea, MnThemeToggle, MnTimeAndSales, MnTimePicker, MnTimePickerPanel, MnToastRegion, MnToastService, MnToolbar, MnTooltip, MnTooltipProvider, MnTradingChart, MnTreeChart, MnTreemapChart, MnUpload, MnVStack, MnVirtualList, MnWaterfallChart, THEME_SCOPE_ATTRIBUTE, injectMinerva, optionalBoolean, provideEmbeddedMinerva, provideMinerva, sameGraphOptions, themeModeOf, withSeriesType };
+export { CHART_SURFACE, MN_RADIO_GROUP, MN_SCOPE, MinervaScope, MnAlert, MnAppShell, MnAreaChart, MnAutoComplete, MnAvatar, MnAvatarGroup, MnBadge, MnBar3DChart, MnBarChart, MnBookWidgetBase, MnBox, MnBoxPlotChart, MnBubbleChart, MnBulletChart, MnButton, MnCalendarHeatmap, MnCandlestickChart, MnCard, MnCardContent, MnCardDescription, MnCardFooter, MnCardHeader, MnCardTitle, MnCartesianChartBase, MnCascader, MnCascaderPanel, MnChart, MnChart3DBase, MnChartEngine, MnCheckbox, MnChordChart, MnCodeBlock, MnCommandDialog, MnConfig, MnConfirmDialog, MnConfirmProvider, MnConfirmService, MnContextMenu, MnDataTable, MnDatePicker, MnDependencyGraph, MnDepthChart, MnDescriptionList, MnDivider, MnDonutChart, MnDrawer, MnDrawerBody, MnDrawerClose, MnDrawerFooter, MnDrawerHeader, MnDrawerTrigger, MnDynamicIcon, MnEmpty, MnFieldBase, MnFloatingBase, MnFormControl, MnFormErrorMessage, MnFormField, MnFormHelperText, MnFormLabel, MnFormLayout, MnFunnelChart, MnGanttChart, MnGaugeChart, MnGraphChart, MnGraphChartBase, MnGridItem, MnHStack, MnHeatmapChart, MnHistogramChart, MnHorizontalBarChart, MnHtmlPreview, MnIcon, MnIconBase, MnIconButton, MnIconCanvas, MnInput, MnJsonField, MnKeyValueEditor, MnLine3DChart, MnLineChart, MnList, MnListItem, MnLoadingState, MnMenu, MnMenuBase, MnMixedChart, MnModal, MnModalBody, MnModalClose, MnModalFooter, MnModalHeader, MnModalTrigger, MnMonthCalendar, MnNavTree, MnNumberInput, MnOrderBook, MnOrderBookHeatmap, MnPage, MnPageHeader, MnPageSection, MnPageTab, MnPageTabs, MnPagination, MnPaletteToggle, MnPieBase, MnPieChart, MnPopover, MnPopoverAnchor, MnPopoverClose, MnProgressIndicator, MnProse, MnQuadrantChart, MnRadarChart, MnRadialBarChart, MnRadio, MnRadioGroup, MnRangeAreaChart, MnRating, MnRatingScale, MnResponsiveGrid, MnSankeyChart, MnScatter3DChart, MnScatterChart, MnSelect, MnSelectGroup, MnSelectItem, MnSelectLabel, MnSelectSeparator, MnSeriesChartBase, MnShapeChart, MnShapeChartBase, MnShapeChartCommon, MnSkeleton, MnSkeletonText, MnSparkline, MnSplitLayout, MnStack, MnStackBase, MnStatCard, MnSteps, MnSunburstChart, MnSurface3DChart, MnSwitch, MnTab, MnTabPanel, MnTableBody, MnTableCell, MnTableCellContent, MnTableHead, MnTableHeader, MnTableRoot, MnTableRow, MnTabs, MnTag, MnTagInput, MnTextLink, MnTextarea, MnThemeToggle, MnTimeAndSales, MnTimePicker, MnTimePickerPanel, MnToastRegion, MnToastService, MnToolbar, MnTooltip, MnTooltipProvider, MnTradingChart, MnTreeChart, MnTreemapChart, MnUpload, MnVStack, MnVirtualList, MnWaterfallChart, MnWeekStrip, THEME_SCOPE_ATTRIBUTE, injectMinerva, optionalBoolean, provideEmbeddedMinerva, provideMinerva, sameGraphOptions, themeModeOf, withSeriesType };
 
 //# sourceMappingURL=minerva-angular.mjs.map