@lifecorner/angular-ui-kit 3.27.2 → 3.29.0

package/fesm2022/lifecorner-angular-ui-kit-number-input.mjs

@@ -9,17 +9,25 @@ function decimalsOf(n) {
 	const decimals = (mantissa.split(".")[1]?.length ?? 0) - (exponent ? Number(exponent) : 0);
 	return Math.max(0, decimals);
 }
-function sanitizeNumericText(raw) {
+function sanitizeNumericText(raw, separator) {
 	let out = "";
 	let seenPoint = false;
 	for (const ch of raw) if (ch >= "0" && ch <= "9") out += ch;
 	else if (ch === "-" && out.length === 0) out += ch;
 	else if ((ch === "." || ch === ",") && !seenPoint) {
 		seenPoint = true;
-		out += ".";
+		out += separator;
 	}
 	return out;
 }
+function decimalSeparatorOf(locale) {
+	if (!locale) return ".";
+	try {
+		return new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal")?.value === "," ? "," : ".";
+	} catch {
+		return ".";
+	}
+}
 var NumberInputComponent = class NumberInputComponent {
 	static nextId = 0;
 	min = input(void 0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
@@ -33,6 +41,10 @@ var NumberInputComponent = class NumberInputComponent {
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	decrementAriaLabel = input("Decrease value", ...ngDevMode ? [{ debugName: "decrementAriaLabel" }] : /* istanbul ignore next */ []);
 	incrementAriaLabel = input("Increase value", ...ngDevMode ? [{ debugName: "incrementAriaLabel" }] : /* istanbul ignore next */ []);
+	locale = input("", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	suffix = input("", ...ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []);
+	suffixAriaLabel = input("", ...ngDevMode ? [{ debugName: "suffixAriaLabel" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	valueChange = output();
 	inputId = `lc-number-input-${++NumberInputComponent.nextId}`;
 	value = signal(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -42,14 +54,20 @@ var NumberInputComponent = class NumberInputComponent {
 	inputEl = viewChild("inputEl", ...ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []);
 	stepPrecision = computed(() => decimalsOf(this.step()), ...ngDevMode ? [{ debugName: "stepPrecision" }] : /* istanbul ignore next */ []);
 	inputMode = computed(() => this.stepPrecision() > 0 ? "decimal" : "numeric", ...ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []);
+	separator = computed(() => decimalSeparatorOf(this.locale()), ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
+	spokenSuffix = computed(() => this.suffixAriaLabel() || this.suffix(), ...ngDevMode ? [{ debugName: "spokenSuffix" }] : /* istanbul ignore next */ []);
+	iconSize = computed(() => this.size() === "xs" || this.size() === "sm" ? "xs" : "sm", ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
 	describedBy = computed(() => {
 		const ids = [];
+		if (this.spokenSuffix()) ids.push(`${this.inputId}-suffix`);
 		if (this.error()) ids.push(`${this.inputId}-error`);
 		else if (this.helperText()) ids.push(`${this.inputId}-helper`);
 		return ids.length ? ids.join(" ") : null;
 	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
 	containerClasses = computed(() => {
 		const classes = ["number-input"];
+		const size = this.size();
+		if (size === "xs" || size === "sm" || size === "lg") classes.push(`number-input--${size}`);
 		if (this.isDisabled()) classes.push("number-input--disabled");
 		if (this.error()) classes.push("number-input--error");
 		return classes.join(" ");
@@ -93,14 +111,14 @@ var NumberInputComponent = class NumberInputComponent {
 	onInput(event) {
 		const target = event.target;
 		const raw = target.value;
-		const text = sanitizeNumericText(raw);
+		const text = sanitizeNumericText(raw, this.separator());
 		if (text !== raw) {
 			const caret = Math.max(0, (target.selectionStart ?? text.length) - (raw.length - text.length));
 			target.value = text;
 			target.setSelectionRange(caret, caret);
 		}
 		this.text.set(text);
-		const parsed = text === "" ? NaN : Number(text);
+		const parsed = text === "" ? NaN : Number(text.replace(",", "."));
 		if (Number.isNaN(parsed)) {
 			if (this.value() !== null) {
 				this.value.set(null);
@@ -123,7 +141,13 @@ var NumberInputComponent = class NumberInputComponent {
 		if (el) el.value = canonical;
 	}
 	format(val) {
-		return val === null ? "" : String(val);
+		if (val === null) return "";
+		const text = String(val);
+		return this.separator() === "," ? text.replace(".", ",") : text;
+	}
+	focusField(event) {
+		event.preventDefault();
+		if (!this.isDisabled()) this.inputEl()?.nativeElement.focus();
 	}
 	clamp(val) {
 		const minV = this.min();
@@ -242,6 +266,34 @@ var NumberInputComponent = class NumberInputComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suffix: {
+				classPropertyName: "suffix",
+				publicName: "suffix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suffixAriaLabel: {
+				classPropertyName: "suffixAriaLabel",
+				publicName: "suffixAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { valueChange: "valueChange" },
@@ -258,8 +310,8 @@ var NumberInputComponent = class NumberInputComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"number-input__control\">\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--decrement\"\n      [disabled]=\"isDisabled() || !canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"decrementAriaLabel()\"\n    >\n      <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n    <input\n      #inputEl\n      type=\"text\"\n      [id]=\"inputId\"\n      [attr.inputmode]=\"inputMode()\"\n      class=\"number-input__input\"\n      [value]=\"text()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--increment\"\n      [disabled]=\"isDisabled() || !canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"incrementAriaLabel()\"\n    >\n      <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  </div>\n  @if (error()) {\n    <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n  } @else if (helperText()) {\n    <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n  }\n</div>\n",
-		styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}.number-input--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.number-input--error .number-input__control:focus-within,.number-input__button:focus-visible{outline-color:Highlight}}\n"],
+		template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"number-input__control\">\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--decrement\"\n      [disabled]=\"isDisabled() || !canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"decrementAriaLabel()\"\n    >\n      <lc-icon name=\"minus\" [size]=\"iconSize()\" [decorative]=\"true\" />\n    </button>\n    <input\n      #inputEl\n      type=\"text\"\n      [id]=\"inputId\"\n      [attr.inputmode]=\"inputMode()\"\n      class=\"number-input__input\"\n      [value]=\"text()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (suffix()) {\n      <!-- The visible unit (3.29): not read; the field's description says it once. A press focuses the field. -->\n      <span class=\"number-input__suffix\" aria-hidden=\"true\" (mousedown)=\"focusField($event)\">{{ suffix() }}</span>\n    }\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--increment\"\n      [disabled]=\"isDisabled() || !canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"incrementAriaLabel()\"\n    >\n      <lc-icon name=\"plus\" [size]=\"iconSize()\" [decorative]=\"true\" />\n    </button>\n  </div>\n  @if (spokenSuffix()) {\n    <span hidden [id]=\"inputId + '-suffix'\">{{ spokenSuffix() }}</span>\n  }\n  @if (error()) {\n    <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n  } @else if (helperText()) {\n    <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n  }\n</div>\n",
+		styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;align-self:flex-start;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__suffix{flex-shrink:0;padding-inline:.25em var(--spacing-2);font-size:var(--typography-font-size-base, 1rem);color:var(--color-text-secondary)}.number-input__control:has(.number-input__suffix) .number-input__input{text-align:end;padding-inline-end:0}.number-input--xs .number-input__input,.number-input--xs .number-input__suffix,.number-input--sm .number-input__input,.number-input--sm .number-input__suffix,.number-input--lg .number-input__input,.number-input--lg .number-input__suffix{align-self:stretch}.number-input--xs .number-input__input,.number-input--sm .number-input__input,.number-input--lg .number-input__input{padding-block:0}.number-input--xs .number-input__suffix,.number-input--sm .number-input__suffix,.number-input--lg .number-input__suffix{display:flex;align-items:center}.number-input--xs .number-input__button{width:var(--size-interactive-xs-height);height:var(--size-interactive-xs-height)}.number-input--xs .number-input__input{width:3rem}.number-input--xs .number-input__input,.number-input--xs .number-input__suffix{font-size:var(--size-interactive-xs-font-size)}.number-input--sm .number-input__button{width:var(--size-interactive-sm-height);height:var(--size-interactive-sm-height)}.number-input--sm .number-input__input{width:3.5rem}.number-input--sm .number-input__input,.number-input--sm .number-input__suffix{font-size:var(--size-interactive-sm-font-size)}.number-input--lg .number-input__button{width:var(--size-interactive-lg-height);height:var(--size-interactive-lg-height)}.number-input--lg .number-input__input{width:4.5rem}.number-input--lg .number-input__input,.number-input--lg .number-input__suffix{font-size:var(--size-interactive-lg-font-size)}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}.number-input--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.number-input--error .number-input__control:focus-within,.number-input__button:focus-visible{outline-color:Highlight}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -296,8 +348,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => NumberInputComponent),
 				multi: true
 			}],
-			template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"number-input__control\">\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--decrement\"\n      [disabled]=\"isDisabled() || !canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"decrementAriaLabel()\"\n    >\n      <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n    <input\n      #inputEl\n      type=\"text\"\n      [id]=\"inputId\"\n      [attr.inputmode]=\"inputMode()\"\n      class=\"number-input__input\"\n      [value]=\"text()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--increment\"\n      [disabled]=\"isDisabled() || !canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"incrementAriaLabel()\"\n    >\n      <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  </div>\n  @if (error()) {\n    <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n  } @else if (helperText()) {\n    <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n  }\n</div>\n",
-			styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}.number-input--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.number-input--error .number-input__control:focus-within,.number-input__button:focus-visible{outline-color:Highlight}}\n"]
+			template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"number-input__control\">\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--decrement\"\n      [disabled]=\"isDisabled() || !canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"decrementAriaLabel()\"\n    >\n      <lc-icon name=\"minus\" [size]=\"iconSize()\" [decorative]=\"true\" />\n    </button>\n    <input\n      #inputEl\n      type=\"text\"\n      [id]=\"inputId\"\n      [attr.inputmode]=\"inputMode()\"\n      class=\"number-input__input\"\n      [value]=\"text()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (suffix()) {\n      <!-- The visible unit (3.29): not read; the field's description says it once. A press focuses the field. -->\n      <span class=\"number-input__suffix\" aria-hidden=\"true\" (mousedown)=\"focusField($event)\">{{ suffix() }}</span>\n    }\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--increment\"\n      [disabled]=\"isDisabled() || !canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"incrementAriaLabel()\"\n    >\n      <lc-icon name=\"plus\" [size]=\"iconSize()\" [decorative]=\"true\" />\n    </button>\n  </div>\n  @if (spokenSuffix()) {\n    <span hidden [id]=\"inputId + '-suffix'\">{{ spokenSuffix() }}</span>\n  }\n  @if (error()) {\n    <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n  } @else if (helperText()) {\n    <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n  }\n</div>\n",
+			styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;align-self:flex-start;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__suffix{flex-shrink:0;padding-inline:.25em var(--spacing-2);font-size:var(--typography-font-size-base, 1rem);color:var(--color-text-secondary)}.number-input__control:has(.number-input__suffix) .number-input__input{text-align:end;padding-inline-end:0}.number-input--xs .number-input__input,.number-input--xs .number-input__suffix,.number-input--sm .number-input__input,.number-input--sm .number-input__suffix,.number-input--lg .number-input__input,.number-input--lg .number-input__suffix{align-self:stretch}.number-input--xs .number-input__input,.number-input--sm .number-input__input,.number-input--lg .number-input__input{padding-block:0}.number-input--xs .number-input__suffix,.number-input--sm .number-input__suffix,.number-input--lg .number-input__suffix{display:flex;align-items:center}.number-input--xs .number-input__button{width:var(--size-interactive-xs-height);height:var(--size-interactive-xs-height)}.number-input--xs .number-input__input{width:3rem}.number-input--xs .number-input__input,.number-input--xs .number-input__suffix{font-size:var(--size-interactive-xs-font-size)}.number-input--sm .number-input__button{width:var(--size-interactive-sm-height);height:var(--size-interactive-sm-height)}.number-input--sm .number-input__input{width:3.5rem}.number-input--sm .number-input__input,.number-input--sm .number-input__suffix{font-size:var(--size-interactive-sm-font-size)}.number-input--lg .number-input__button{width:var(--size-interactive-lg-height);height:var(--size-interactive-lg-height)}.number-input--lg .number-input__input{width:4.5rem}.number-input--lg .number-input__input,.number-input--lg .number-input__suffix{font-size:var(--size-interactive-lg-font-size)}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}.number-input--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.number-input--error .number-input__control:focus-within,.number-input__button:focus-visible{outline-color:Highlight}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -389,6 +441,38 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		suffix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suffix",
+				required: false
+			}]
+		}],
+		suffixAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suffixAriaLabel",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
 		valueChange: [{
 			type: i0.Output,
 			args: ["valueChange"]

package/fesm2022/lifecorner-angular-ui-kit-number-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-number-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.ts","../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  computed,\n  signal,\n  forwardRef,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_PLUS } from '@lifecorner/angular-ui-kit/icons';\n\n/** Number of decimals a number is written with (`0.001` → 3, `1e-7` → 7, `5` → 0). */\nfunction decimalsOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const [mantissa, exponent] = String(n).split('e');\n  const decimals = (mantissa.split('.')[1]?.length ?? 0) - (exponent ? Number(exponent) : 0);\n  return Math.max(0, decimals);\n}\n\n/**\n * Reduces raw text to something `Number()` can parse: digits, one leading\n * minus and one decimal point. A comma is taken as a decimal separator so a\n * German keyboard layout does not silently lose the fraction.\n */\nfunction sanitizeNumericText(raw: string): string {\n  let out = '';\n  let seenPoint = false;\n  for (const ch of raw) {\n    if (ch >= '0' && ch <= '9') {\n      out += ch;\n    } else if (ch === '-' && out.length === 0) {\n      out += ch;\n    } else if ((ch === '.' || ch === ',') && !seenPoint) {\n      seenPoint = true;\n      out += '.';\n    }\n  }\n  return out;\n}\n\n@Component({\n  selector: 'lc-number-input',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_PLUS])],\n  templateUrl: './number-input.component.html',\n  styleUrls: ['./number-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NumberInputComponent),\n      multi: true,\n    },\n  ],\n})\n/**\n * Number input component with increment/decrement controls.\n *\n * Features:\n * - Increment and decrement buttons (also ArrowUp / ArrowDown)\n * - Configurable min, max, and step values\n * - Value clamping within bounds; stepping is rounded to the step's precision\n * - Non-numeric characters are rejected as they are typed\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-number-input label=\"Quantity\" [min]=\"0\" [max]=\"100\" [step]=\"1\" />\n * ```\n */\nexport class NumberInputComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Minimum value */\n  min = input<number | undefined>(undefined);\n\n  /** Maximum value */\n  max = input<number | undefined>(undefined);\n\n  /** Step increment */\n  step = input<number>(1);\n\n  /** Label text */\n  label = input<string>();\n\n  /** Accessible name for the field when no visible `label` is rendered. */\n  ariaLabel = input<string>();\n\n  /** Placeholder */\n  placeholder = input<string>('0');\n\n  /** Helper text shown below the control (linked via `aria-describedby`). */\n  helperText = input<string>();\n\n  /** Error message shown below the control; marks the field `aria-invalid`. */\n  error = input<string>();\n\n  /** Disabled state */\n  disabled = input<boolean>(false);\n\n  /** Accessible name of the minus button. */\n  decrementAriaLabel = input('Decrease value');\n\n  /** Accessible name of the plus button. */\n  incrementAriaLabel = input('Increase value');\n\n  /** Emits value on change */\n  valueChange = output<number>();\n\n  /** Per-instance id wiring the label, hint and error to the field. */\n  readonly inputId = `lc-number-input-${++NumberInputComponent.nextId}`;\n\n  protected value = signal<number | null>(null);\n\n  /**\n   * Text shown in the field. It is re-derived from the model on `writeValue`,\n   * stepping and blur — never while typing — so an in-progress entry such as\n   * \"1.\" or \"-\" is not snapped back to \"1\" under the user's cursor.\n   */\n  protected readonly text = signal('');\n\n  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n  private readonly formDisabled = signal(false);\n\n  /** Disabled by either route — the one flag the template consults. */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n\n  /** Decimals implied by `step` — stepped results are rounded to it so 0.1 + 0.2 does not drift. */\n  private readonly stepPrecision = computed(() => decimalsOf(this.step()));\n\n  /** Fractions need a decimal key on touch keyboards; integers do not. */\n  protected readonly inputMode = computed(() => (this.stepPrecision() > 0 ? 'decimal' : 'numeric'));\n\n  protected readonly describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.error()) ids.push(`${this.inputId}-error`);\n    else if (this.helperText()) ids.push(`${this.inputId}-helper`);\n    return ids.length ? ids.join(' ') : null;\n  });\n\n  protected containerClasses = computed(() => {\n    const classes = ['number-input'];\n    if (this.isDisabled()) classes.push('number-input--disabled');\n    if (this.error()) classes.push('number-input--error');\n    return classes.join(' ');\n  });\n\n  protected canDecrement = computed(() => {\n    const val = this.value();\n    const minV = this.min();\n    if (val === null || minV === undefined) return true;\n    return val > minV;\n  });\n\n  protected canIncrement = computed(() => {\n    const val = this.value();\n    const maxV = this.max();\n    if (val === null || maxV === undefined) return true;\n    return val < maxV;\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (val: number | null) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  decrement(): void {\n    this.stepBy(-1);\n  }\n\n  increment(): void {\n    this.stepBy(1);\n  }\n\n  private stepBy(direction: 1 | -1): void {\n    const cur = this.value() ?? 0;\n    // Keep whatever precision the user typed (1.25 + 0.1 → 1.35), but never\n    // less than the step's own — that is what removes the binary drift.\n    const precision = Math.max(this.stepPrecision(), decimalsOf(cur));\n    const next = this.clamp(Number((cur + direction * this.step()).toFixed(precision)));\n    this.setValue(next);\n    this.text.set(this.format(next));\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (this.canIncrement()) this.increment();\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (this.canDecrement()) this.decrement();\n    }\n  }\n\n  onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    const raw = target.value;\n    const text = sanitizeNumericText(raw);\n    // Property binding alone would not repaint the field when the model does\n    // not change (typing \"a\" after \"12\" leaves 12 as-is), so the stripped\n    // text is written straight back to the element.\n    if (text !== raw) {\n      const caret = Math.max(0, (target.selectionStart ?? text.length) - (raw.length - text.length));\n      target.value = text;\n      target.setSelectionRange(caret, caret);\n    }\n    this.text.set(text);\n    // \"\" would parse as 0; it and the other in-progress entries (\"-\", \".\")\n    // mean the model has no number yet.\n    const parsed = text === '' ? NaN : Number(text);\n    if (Number.isNaN(parsed)) {\n      if (this.value() !== null) {\n        this.value.set(null);\n        this.onChange(null);\n      }\n      return;\n    }\n    this.setValue(parsed);\n  }\n\n  onBlur(): void {\n    this.onTouched();\n    // Clamp on blur\n    const val = this.value();\n    if (val !== null) {\n      const clamped = this.clamp(val);\n      if (clamped !== val) this.setValue(clamped);\n    }\n    // Whatever half-typed text is left (\"1.\", \"-\", \"007\") is replaced by the\n    // model's canonical form. The element is written directly as well, in\n    // case the DOM drifted from the bound text without an input event.\n    const canonical = this.format(this.value());\n    this.text.set(canonical);\n    const el = this.inputEl()?.nativeElement;\n    if (el) el.value = canonical;\n  }\n\n  private format(val: number | null): string {\n    return val === null ? '' : String(val);\n  }\n\n  private clamp(val: number): number {\n    const minV = this.min();\n    const maxV = this.max();\n    if (minV !== undefined) val = Math.max(minV, val);\n    if (maxV !== undefined) val = Math.min(maxV, val);\n    return val;\n  }\n\n  private setValue(val: number): void {\n    if (val === this.value()) return;\n    this.value.set(val);\n    this.valueChange.emit(val);\n    this.onChange(val);\n  }\n\n  // ControlValueAccessor\n  writeValue(val: number | null): void {\n    this.value.set(val);\n    this.text.set(this.format(val));\n  }\n\n  registerOnChange(fn: (val: number | null) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n","<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"number-input__control\">\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--decrement\"\n      [disabled]=\"isDisabled() || !canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"decrementAriaLabel()\"\n    >\n      <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n    <input\n      #inputEl\n      type=\"text\"\n      [id]=\"inputId\"\n      [attr.inputmode]=\"inputMode()\"\n      class=\"number-input__input\"\n      [value]=\"text()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--increment\"\n      [disabled]=\"isDisabled() || !canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"incrementAriaLabel()\"\n    >\n      <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  </div>\n  @if (error()) {\n    <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n  } @else if (helperText()) {\n    <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n  }\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-number-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.ts","../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  computed,\n  signal,\n  forwardRef,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_PLUS } from '@lifecorner/angular-ui-kit/icons';\n\n/** Number of decimals a number is written with (`0.001` → 3, `1e-7` → 7, `5` → 0). */\nfunction decimalsOf(n: number): number {\n  if (!Number.isFinite(n)) return 0;\n  const [mantissa, exponent] = String(n).split('e');\n  const decimals = (mantissa.split('.')[1]?.length ?? 0) - (exponent ? Number(exponent) : 0);\n  return Math.max(0, decimals);\n}\n\n/**\n * Reduces raw text to digits, one leading minus and one decimal separator.\n * A comma and a point are both taken as the decimal separator, so a German\n * keyboard layout does not silently lose the fraction; the separator is\n * written as `separator` (the locale's, a point by default).\n */\nfunction sanitizeNumericText(raw: string, separator: '.' | ','): string {\n  let out = '';\n  let seenPoint = false;\n  for (const ch of raw) {\n    if (ch >= '0' && ch <= '9') {\n      out += ch;\n    } else if (ch === '-' && out.length === 0) {\n      out += ch;\n    } else if ((ch === '.' || ch === ',') && !seenPoint) {\n      seenPoint = true;\n      out += separator;\n    }\n  }\n  return out;\n}\n\n/** The decimal separator of `locale`: `,` or `.`; any other separator, `''` and an invalid locale give `.`. */\nfunction decimalSeparatorOf(locale: string): '.' | ',' {\n  if (!locale) return '.';\n  try {\n    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === 'decimal')?.value;\n    return part === ',' ? ',' : '.';\n  } catch {\n    return '.';\n  }\n}\n\n/** Height of `lc-number-input`'s field and steppers: `xs` 24, `sm` 32, `md` 40 (the default), `lg` 44 px. */\nexport type NumberInputSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-number-input',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_PLUS])],\n  templateUrl: './number-input.component.html',\n  styleUrls: ['./number-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NumberInputComponent),\n      multi: true,\n    },\n  ],\n})\n/**\n * Number input component with increment/decrement controls.\n *\n * Features:\n * - Increment and decrement buttons (also ArrowUp / ArrowDown)\n * - Configurable min, max, and step values\n * - Value clamping within bounds; stepping is rounded to the step's precision\n * - Non-numeric characters are rejected as they are typed; a comma and a\n *   point are both accepted as the decimal separator, in every locale\n * - The value is shown in `locale` („7,5“ in `de-DE`), with an optional unit\n *   after it (`suffix`, „7,5 %“), read once (`suffixAriaLabel`)\n * - Sizes `xs`, `sm`, `md` (default), `lg` (44 px touch targets)\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms; the model is\n *   always a `number`, clamped to `min`/`max` on blur\n *\n * @example\n * ```html\n * <lc-number-input label=\"Quantity\" [min]=\"0\" [max]=\"100\" [step]=\"1\" />\n * <lc-number-input label=\"Anteil\" locale=\"de-DE\" suffix=\"%\" suffixAriaLabel=\"Prozent\"\n *                  size=\"lg\" [step]=\"0.5\" [(ngModel)]=\"share\" />\n * ```\n */\nexport class NumberInputComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Minimum value */\n  min = input<number | undefined>(undefined);\n\n  /** Maximum value */\n  max = input<number | undefined>(undefined);\n\n  /** Step increment */\n  step = input<number>(1);\n\n  /** Label text */\n  label = input<string>();\n\n  /** Accessible name for the field when no visible `label` is rendered. */\n  ariaLabel = input<string>();\n\n  /** Placeholder */\n  placeholder = input<string>('0');\n\n  /** Helper text shown below the control (linked via `aria-describedby`). */\n  helperText = input<string>();\n\n  /** Error message shown below the control; marks the field `aria-invalid`. */\n  error = input<string>();\n\n  /** Disabled state */\n  disabled = input<boolean>(false);\n\n  /** Accessible name of the minus button. */\n  decrementAriaLabel = input('Decrease value');\n\n  /** Accessible name of the plus button. */\n  incrementAriaLabel = input('Increase value');\n\n  /**\n   * BCP 47 locale of the shown number (3.29, regeln row 3). Only the decimal\n   * separator follows it: `de-DE` shows „7,5“, `en-US` \"7.5\"; a locale whose\n   * separator is neither `,` nor `.` shows a point. No grouping. `''`: a\n   * point, as before. Typing accepts `,` and `.` in every locale and shows\n   * the locale's separator; the model stays a `number`; blur clamps to\n   * `min`/`max`.\n   * @default ''\n   */\n  locale = input<string>('');\n\n  /**\n   * Unit shown after the value inside the field („7,5 %“, 3.29). Not typed\n   * and not part of the model; with a suffix the value aligns to the end.\n   * Screen readers read `suffixAriaLabel` (or the suffix) once after the value.\n   * @default ''\n   */\n  suffix = input<string>('');\n\n  /**\n   * Spoken unit („Prozent“), read once after the value as the field's\n   * description (before the helper or error text). `''`: the `suffix`.\n   * @default ''\n   */\n  suffixAriaLabel = input<string>('');\n\n  /**\n   * Height of the field and the steppers (3.29, regeln row 4): `xs` 24,\n   * `sm` 32, `md` 40 (as before), `lg` 44 px (touch: field and both\n   * steppers at least 44 × 44 px).\n   * @default 'md'\n   */\n  size = input<NumberInputSize>('md');\n\n  /** Emits value on change */\n  valueChange = output<number>();\n\n  /** Per-instance id wiring the label, hint and error to the field. */\n  readonly inputId = `lc-number-input-${++NumberInputComponent.nextId}`;\n\n  protected value = signal<number | null>(null);\n\n  /**\n   * Text shown in the field. It is re-derived from the model on `writeValue`,\n   * stepping and blur — never while typing — so an in-progress entry such as\n   * \"1.\" or \"-\" is not snapped back to \"1\" under the user's cursor.\n   */\n  protected readonly text = signal('');\n\n  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n  private readonly formDisabled = signal(false);\n\n  /** Disabled by either route — the one flag the template consults. */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n\n  /** Decimals implied by `step` — stepped results are rounded to it so 0.1 + 0.2 does not drift. */\n  private readonly stepPrecision = computed(() => decimalsOf(this.step()));\n\n  /** Fractions need a decimal key on touch keyboards; integers do not. */\n  protected readonly inputMode = computed(() => (this.stepPrecision() > 0 ? 'decimal' : 'numeric'));\n\n  /** The decimal separator shown in the field: the `locale`'s `,` or `.`. */\n  private readonly separator = computed(() => decimalSeparatorOf(this.locale()));\n\n  /** The spoken unit: `suffixAriaLabel`, else the `suffix`; `''` = none. */\n  protected readonly spokenSuffix = computed(() => this.suffixAriaLabel() || this.suffix());\n\n  /** Icon size of the steppers: `xs` (16 px) for the `xs`/`sm` fields, `sm` (20 px) as before. */\n  protected readonly iconSize = computed(() => (this.size() === 'xs' || this.size() === 'sm' ? 'xs' : 'sm'));\n\n  protected readonly describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.spokenSuffix()) ids.push(`${this.inputId}-suffix`);\n    if (this.error()) ids.push(`${this.inputId}-error`);\n    else if (this.helperText()) ids.push(`${this.inputId}-helper`);\n    return ids.length ? ids.join(' ') : null;\n  });\n\n  protected containerClasses = computed(() => {\n    const classes = ['number-input'];\n    // `md` (the default) keeps the base rules: no class.\n    const size = this.size();\n    if (size === 'xs' || size === 'sm' || size === 'lg') classes.push(`number-input--${size}`);\n    if (this.isDisabled()) classes.push('number-input--disabled');\n    if (this.error()) classes.push('number-input--error');\n    return classes.join(' ');\n  });\n\n  protected canDecrement = computed(() => {\n    const val = this.value();\n    const minV = this.min();\n    if (val === null || minV === undefined) return true;\n    return val > minV;\n  });\n\n  protected canIncrement = computed(() => {\n    const val = this.value();\n    const maxV = this.max();\n    if (val === null || maxV === undefined) return true;\n    return val < maxV;\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (val: number | null) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  decrement(): void {\n    this.stepBy(-1);\n  }\n\n  increment(): void {\n    this.stepBy(1);\n  }\n\n  private stepBy(direction: 1 | -1): void {\n    const cur = this.value() ?? 0;\n    // Keep whatever precision the user typed (1.25 + 0.1 → 1.35), but never\n    // less than the step's own — that is what removes the binary drift.\n    const precision = Math.max(this.stepPrecision(), decimalsOf(cur));\n    const next = this.clamp(Number((cur + direction * this.step()).toFixed(precision)));\n    this.setValue(next);\n    this.text.set(this.format(next));\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (this.canIncrement()) this.increment();\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (this.canDecrement()) this.decrement();\n    }\n  }\n\n  onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    const raw = target.value;\n    const text = sanitizeNumericText(raw, this.separator());\n    // Property binding alone would not repaint the field when the model does\n    // not change (typing \"a\" after \"12\" leaves 12 as-is), so the stripped\n    // text is written straight back to the element.\n    if (text !== raw) {\n      const caret = Math.max(0, (target.selectionStart ?? text.length) - (raw.length - text.length));\n      target.value = text;\n      target.setSelectionRange(caret, caret);\n    }\n    this.text.set(text);\n    // \"\" would parse as 0; it and the other in-progress entries (\"-\", \".\")\n    // mean the model has no number yet.\n    const parsed = text === '' ? NaN : Number(text.replace(',', '.'));\n    if (Number.isNaN(parsed)) {\n      if (this.value() !== null) {\n        this.value.set(null);\n        this.onChange(null);\n      }\n      return;\n    }\n    this.setValue(parsed);\n  }\n\n  onBlur(): void {\n    this.onTouched();\n    // Clamp on blur\n    const val = this.value();\n    if (val !== null) {\n      const clamped = this.clamp(val);\n      if (clamped !== val) this.setValue(clamped);\n    }\n    // Whatever half-typed text is left (\"1.\", \"-\", \"007\") is replaced by the\n    // model's canonical form. The element is written directly as well, in\n    // case the DOM drifted from the bound text without an input event.\n    const canonical = this.format(this.value());\n    this.text.set(canonical);\n    const el = this.inputEl()?.nativeElement;\n    if (el) el.value = canonical;\n  }\n\n  /** The model as text: `String(val)` with the locale's decimal separator, no grouping. */\n  private format(val: number | null): string {\n    if (val === null) return '';\n    const text = String(val);\n    return this.separator() === ',' ? text.replace('.', ',') : text;\n  }\n\n  /** A press on the visible unit puts the caret in the field, as a click on the field would. */\n  protected focusField(event: MouseEvent): void {\n    event.preventDefault();\n    if (!this.isDisabled()) this.inputEl()?.nativeElement.focus();\n  }\n\n  private clamp(val: number): number {\n    const minV = this.min();\n    const maxV = this.max();\n    if (minV !== undefined) val = Math.max(minV, val);\n    if (maxV !== undefined) val = Math.min(maxV, val);\n    return val;\n  }\n\n  private setValue(val: number): void {\n    if (val === this.value()) return;\n    this.value.set(val);\n    this.valueChange.emit(val);\n    this.onChange(val);\n  }\n\n  // ControlValueAccessor\n  writeValue(val: number | null): void {\n    this.value.set(val);\n    this.text.set(this.format(val));\n  }\n\n  registerOnChange(fn: (val: number | null) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n","<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"number-input__control\">\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--decrement\"\n      [disabled]=\"isDisabled() || !canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"decrementAriaLabel()\"\n    >\n      <lc-icon name=\"minus\" [size]=\"iconSize()\" [decorative]=\"true\" />\n    </button>\n    <input\n      #inputEl\n      type=\"text\"\n      [id]=\"inputId\"\n      [attr.inputmode]=\"inputMode()\"\n      class=\"number-input__input\"\n      [value]=\"text()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [attr.min]=\"min() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (suffix()) {\n      <!-- The visible unit (3.29): not read; the field's description says it once. A press focuses the field. -->\n      <span class=\"number-input__suffix\" aria-hidden=\"true\" (mousedown)=\"focusField($event)\">{{ suffix() }}</span>\n    }\n    <button\n      type=\"button\"\n      class=\"number-input__button number-input__button--increment\"\n      [disabled]=\"isDisabled() || !canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"incrementAriaLabel()\"\n    >\n      <lc-icon name=\"plus\" [size]=\"iconSize()\" [decorative]=\"true\" />\n    </button>\n  </div>\n  @if (spokenSuffix()) {\n    <span hidden [id]=\"inputId + '-suffix'\">{{ spokenSuffix() }}</span>\n  }\n  @if (error()) {\n    <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n  } @else if (helperText()) {\n    <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-toast.mjs

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, Injectable, PLATFORM_ID, ViewEncaps
 import { isPlatformBrowser } from "@angular/common";
 import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
 import { ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE, ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
+import { OverlayInsetsService } from "@lifecorner/angular-ui-kit/internal/overlay";
 var ToastService = class ToastService {
 	toasts;
 	toastList = signal([], ...ngDevMode ? [{ debugName: "toastList" }] : /* istanbul ignore next */ []);
@@ -279,6 +280,7 @@ var ToastOutletComponent = class ToastOutletComponent {
 	positions = POSITIONS;
 	liveLevels = ["assertive", "polite"];
 	toastService = inject(ToastService);
+	insets = inject(OverlayInsetsService);
 	closeAriaLabel = input("Close notification", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
 	groups = computed(() => {
 		const groups = /* @__PURE__ */ new Map();
@@ -320,9 +322,13 @@ var ToastOutletComponent = class ToastOutletComponent {
 			isRequired: false,
 			transformFunction: null
 		} },
+		host: { properties: {
+			"style.--_lc-toast-outlet-frame-top": "insets.top()",
+			"style.--_lc-toast-outlet-frame-bottom": "insets.bottom()"
+		} },
 		ngImport: i0,
 		template: "@for (position of positions; track position) {\n  <div class=\"lc-toast-outlet__stack\" [class]=\"'lc-toast-outlet__stack lc-toast-outlet__stack--' + position\">\n    <!-- Both regions are always present (even empty) so that toasts inserted\n         later are announced; the toasts themselves do not announce again. -->\n    @for (live of liveLevels; track live) {\n      <div class=\"lc-toast-outlet__region\" [attr.aria-live]=\"live\" aria-atomic=\"false\">\n        @for (toast of toastsFor(position, live); track toast.id) {\n          <lc-toast [toast]=\"toast\" [announce]=\"false\" [closeAriaLabel]=\"closeAriaLabel()\" (closed)=\"onClosed($event)\" />\n        }\n      </div>\n    }\n  </div>\n}\n",
-		styles: [":host{display:contents}.lc-toast-outlet__stack{position:fixed;z-index:1200;display:flex;flex-direction:column;width:100%;max-width:calc(400px + 2 * var(--spacing-4));padding:var(--spacing-4);box-sizing:border-box;pointer-events:none}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--top-right{top:0}.lc-toast-outlet__stack--bottom-left,.lc-toast-outlet__stack--bottom-center,.lc-toast-outlet__stack--bottom-right{bottom:0;flex-direction:column-reverse}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--bottom-left{left:0;align-items:flex-start}.lc-toast-outlet__stack--top-right,.lc-toast-outlet__stack--bottom-right{right:0;align-items:flex-end}.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--bottom-center{left:50%;transform:translate(-50%);align-items:center}.lc-toast-outlet__region{display:flex;flex-direction:inherit;align-items:inherit;width:100%}\n"],
+		styles: [":host{display:contents}@property --_lc-toast-outlet-top{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0px;}@property --_lc-toast-outlet-bottom{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0px;}.lc-toast-outlet__stack{--_lc-toast-outlet-top: var(--lc-toast-outlet-offset-top, var(--_lc-toast-outlet-frame-top, 0px));--_lc-toast-outlet-bottom: var(--lc-toast-outlet-offset-bottom, var(--_lc-toast-outlet-frame-bottom, 0px));position:fixed;z-index:1200;display:flex;flex-direction:column;width:100%;max-width:calc(400px + 2 * var(--spacing-4));padding:var(--spacing-4);box-sizing:border-box;pointer-events:none;max-height:calc(100vh - var(--_lc-toast-outlet-top) - var(--_lc-toast-outlet-bottom));max-height:calc(100dvh - var(--_lc-toast-outlet-top) - var(--_lc-toast-outlet-bottom));overflow-y:auto;overscroll-behavior:contain}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--top-right{top:var(--_lc-toast-outlet-top)}.lc-toast-outlet__stack--bottom-left,.lc-toast-outlet__stack--bottom-center,.lc-toast-outlet__stack--bottom-right{bottom:var(--_lc-toast-outlet-bottom);flex-direction:column-reverse}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--bottom-left{left:0;align-items:flex-start}.lc-toast-outlet__stack--top-right,.lc-toast-outlet__stack--bottom-right{right:0;align-items:flex-end}.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--bottom-center{left:50%;transform:translate(-50%);align-items:center}.lc-toast-outlet__region{display:flex;flex-direction:inherit;align-items:inherit;width:100%}\n"],
 		dependencies: [{
 			kind: "component",
 			type: ToastComponent,
@@ -349,8 +355,12 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [ToastComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.--_lc-toast-outlet-frame-top]": "insets.top()",
+				"[style.--_lc-toast-outlet-frame-bottom]": "insets.bottom()"
+			},
 			template: "@for (position of positions; track position) {\n  <div class=\"lc-toast-outlet__stack\" [class]=\"'lc-toast-outlet__stack lc-toast-outlet__stack--' + position\">\n    <!-- Both regions are always present (even empty) so that toasts inserted\n         later are announced; the toasts themselves do not announce again. -->\n    @for (live of liveLevels; track live) {\n      <div class=\"lc-toast-outlet__region\" [attr.aria-live]=\"live\" aria-atomic=\"false\">\n        @for (toast of toastsFor(position, live); track toast.id) {\n          <lc-toast [toast]=\"toast\" [announce]=\"false\" [closeAriaLabel]=\"closeAriaLabel()\" (closed)=\"onClosed($event)\" />\n        }\n      </div>\n    }\n  </div>\n}\n",
-			styles: [":host{display:contents}.lc-toast-outlet__stack{position:fixed;z-index:1200;display:flex;flex-direction:column;width:100%;max-width:calc(400px + 2 * var(--spacing-4));padding:var(--spacing-4);box-sizing:border-box;pointer-events:none}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--top-right{top:0}.lc-toast-outlet__stack--bottom-left,.lc-toast-outlet__stack--bottom-center,.lc-toast-outlet__stack--bottom-right{bottom:0;flex-direction:column-reverse}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--bottom-left{left:0;align-items:flex-start}.lc-toast-outlet__stack--top-right,.lc-toast-outlet__stack--bottom-right{right:0;align-items:flex-end}.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--bottom-center{left:50%;transform:translate(-50%);align-items:center}.lc-toast-outlet__region{display:flex;flex-direction:inherit;align-items:inherit;width:100%}\n"]
+			styles: [":host{display:contents}@property --_lc-toast-outlet-top{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0px;}@property --_lc-toast-outlet-bottom{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0px;}.lc-toast-outlet__stack{--_lc-toast-outlet-top: var(--lc-toast-outlet-offset-top, var(--_lc-toast-outlet-frame-top, 0px));--_lc-toast-outlet-bottom: var(--lc-toast-outlet-offset-bottom, var(--_lc-toast-outlet-frame-bottom, 0px));position:fixed;z-index:1200;display:flex;flex-direction:column;width:100%;max-width:calc(400px + 2 * var(--spacing-4));padding:var(--spacing-4);box-sizing:border-box;pointer-events:none;max-height:calc(100vh - var(--_lc-toast-outlet-top) - var(--_lc-toast-outlet-bottom));max-height:calc(100dvh - var(--_lc-toast-outlet-top) - var(--_lc-toast-outlet-bottom));overflow-y:auto;overscroll-behavior:contain}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--top-right{top:var(--_lc-toast-outlet-top)}.lc-toast-outlet__stack--bottom-left,.lc-toast-outlet__stack--bottom-center,.lc-toast-outlet__stack--bottom-right{bottom:var(--_lc-toast-outlet-bottom);flex-direction:column-reverse}.lc-toast-outlet__stack--top-left,.lc-toast-outlet__stack--bottom-left{left:0;align-items:flex-start}.lc-toast-outlet__stack--top-right,.lc-toast-outlet__stack--bottom-right{right:0;align-items:flex-end}.lc-toast-outlet__stack--top-center,.lc-toast-outlet__stack--bottom-center{left:50%;transform:translate(-50%);align-items:center}.lc-toast-outlet__region{display:flex;flex-direction:inherit;align-items:inherit;width:100%}\n"]
 		}]
 	}],
 	propDecorators: { closeAriaLabel: [{

package/fesm2022/lifecorner-angular-ui-kit-toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-toast.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/toast/toast.service.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.html","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.html"],"sourcesContent":["import { Injectable, PLATFORM_ID, inject, signal, Signal } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ToastConfig {\n  message: string;\n  variant?: ToastVariant;\n  position?: ToastPosition;\n  duration?: number;\n  showCloseButton?: boolean;\n  action?: ToastAction;\n}\n\nexport interface Toast extends Required<Omit<ToastConfig, 'action'>> {\n  id: string;\n  action?: ToastAction;\n}\n\n/**\n * Toast service for showing ephemeral notifications.\n *\n * The toasts are rendered by `<lc-toast-outlet />`, which the application\n * places once (e.g. in its shell); without it nothing is shown. The options,\n * their defaults, the timing and how a toast is announced to screen readers\n * are documented under *Feedback/Toast Outlet* (3.17).\n *\n * @example\n * ```typescript\n * private readonly toastService = inject(ToastService);\n *\n * showSuccess() {\n *   this.toastService.show({\n *     message: 'Changes saved successfully!',\n *     variant: 'success',\n *     duration: 3000\n *   });\n * }\n * ```\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class ToastService {\n  /**\n   * Public readonly signal for toasts\n   */\n  public readonly toasts: Signal<readonly Toast[]>;\n\n  /**\n   * Internal signal for toast list\n   */\n  private readonly toastList = signal<Toast[]>([]);\n\n  private readonly MAX_TOASTS = 5;\n  private toastIdCounter = 0;\n  private activeTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n  /** Auto-dismiss timers only make sense in the browser (and `window` does not exist on the server). */\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  constructor() {\n    this.toasts = this.toastList.asReadonly();\n  }\n\n  /**\n   * Show a toast notification\n   */\n  show(config: ToastConfig): string {\n    const toast: Toast = {\n      id: this.generateId(),\n      message: config.message,\n      variant: config.variant || 'info',\n      position: config.position || 'top-right',\n      duration: config.duration !== undefined ? config.duration : 3000,\n      showCloseButton: config.showCloseButton !== undefined ? config.showCloseButton : true,\n      action: config.action,\n    };\n\n    // Add toast to list\n    let currentToasts = this.toastList();\n\n    // Remove oldest toast if at max capacity\n    if (currentToasts.length >= this.MAX_TOASTS) {\n      const oldestToast = currentToasts[0];\n      if (oldestToast) {\n        this.clearTimeout(oldestToast.id);\n        currentToasts = currentToasts.slice(1);\n      }\n    }\n\n    this.toastList.set([...currentToasts, toast]);\n\n    // Auto-dismiss if duration > 0\n    if (toast.duration > 0 && this.isBrowser) {\n      const timeoutId = setTimeout(() => {\n        this.close(toast.id);\n      }, toast.duration);\n\n      this.activeTimeouts.set(toast.id, timeoutId);\n    }\n\n    return toast.id;\n  }\n\n  /**\n   * Close a specific toast\n   */\n  close(id: string): void {\n    this.removeToast(id);\n  }\n\n  /**\n   * Close all toasts\n   */\n  closeAll(): void {\n    const currentToasts = this.toastList();\n    currentToasts.forEach((toast) => {\n      this.clearTimeout(toast.id);\n    });\n    this.toastList.set([]);\n  }\n\n  /**\n   * Generate unique toast ID\n   */\n  private generateId(): string {\n    return `toast-${++this.toastIdCounter}-${Date.now()}`;\n  }\n\n  /**\n   * Remove a toast from the list\n   */\n  private removeToast(id: string): void {\n    this.clearTimeout(id);\n    const currentToasts = this.toastList();\n    this.toastList.set(currentToasts.filter((t) => t.id !== id));\n  }\n\n  /**\n   * Clear timeout for a toast\n   */\n  private clearTimeout(id: string): void {\n    const timeoutId = this.activeTimeouts.get(id);\n    if (timeoutId !== undefined) {\n      clearTimeout(timeoutId);\n      this.activeTimeouts.delete(id);\n    }\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n  ICON_CHECK_CIRCLE,\n  ICON_CIRCLE_X,\n  ICON_EXCLAMATION_TRIANGLE,\n  ICON_INFORMATION_CIRCLE,\n  ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\nimport type { Toast, ToastVariant } from './toast.service';\n\n/**\n * Toast component for displaying ephemeral notification messages.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Auto-dismiss with configurable duration\n * - Manual dismiss with close button\n * - Icon display per variant\n * - Stacked toast positioning via ToastService + `<lc-toast-outlet />`\n * - Animated enter/exit transitions\n *\n * Usually rendered by `<lc-toast-outlet />`; can also be placed directly:\n *\n * @example\n * ```html\n * <lc-toast [toast]=\"toast\" (closed)=\"dismiss($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-toast',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [\n    ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n  ],\n  templateUrl: './toast.component.html',\n  styleUrls: ['./toast.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'ariaRole()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-atomic]': 'announce() ? \"true\" : null',\n  },\n})\nexport class ToastComponent {\n  /**\n   * Toast data\n   */\n  toast = input.required<Toast>();\n\n  /**\n   * Whether the toast is its own live region (`role=\"status\"`/`\"alert\"` on the\n   * host). `lc-toast-outlet` sets this to false because its persistent live\n   * regions already announce the toast — announcing twice would be noise.\n   * @default true\n   */\n  announce = input<boolean>(true);\n\n  /** Accessible name of the close button (`toast.showCloseButton`). */\n  closeAriaLabel = input('Close notification');\n\n  /**\n   * Emitted when toast is closed\n   */\n  readonly closed = output<string>();\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const toast = this.toast();\n    return `lc-toast lc-toast--${toast.variant}`;\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-toast__container';\n  });\n\n  /**\n   * Computed ARIA role\n   */\n  protected ariaRole = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'alert' : 'status';\n  });\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'assertive' : 'polite';\n  });\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<ToastVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return icons[this.toast().variant];\n  });\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closed.emit(this.toast().id);\n  }\n\n  /**\n   * Handle action button click\n   */\n  protected onActionClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const action = this.toast().action;\n    if (action) {\n      action.onClick();\n      this.closed.emit(this.toast().id);\n    }\n  }\n}\n","<div [class]=\"containerClasses()\">\n  <div class=\"lc-toast__icon\">\n    <lc-icon [name]=\"defaultIcon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n  \n  <div class=\"lc-toast__message\">\n    {{ toast().message }}\n  </div>\n  \n  @if (toast().action) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__action\"\n      (click)=\"onActionClick($event)\"\n    >\n      {{ toast().action?.label }}\n    </button>\n  }\n  \n  @if (toast().showCloseButton) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__close\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"onCloseClick($event)\"\n    >\n      <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n","import { Component, ChangeDetectionStrategy, computed, inject, input } from '@angular/core';\nimport { ToastComponent } from './toast.component';\nimport { ToastService, type Toast, type ToastPosition } from './toast.service';\n\n/** Politeness of the live region a toast is announced from. */\ntype ToastLive = 'polite' | 'assertive';\n\nconst POSITIONS: readonly ToastPosition[] = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'bottom-left',\n  'bottom-center',\n  'bottom-right',\n];\n\n/**\n * Renders the toasts of {@link ToastService}. Place it once in the application\n * shell; without it `ToastService.show()` has no visible effect.\n *\n * ```html\n * <lc-toast-outlet />\n * ```\n *\n * Toasts are stacked per `position`. Every position owns two live regions that\n * exist from the start — screen readers only announce content that is inserted\n * into an *existing* live region — one `polite` for success/info toasts and one\n * `assertive` for error/warning toasts. Dismissing a toast (close button,\n * action, auto-dismiss) removes it from the service.\n */\n@Component({\n  selector: 'lc-toast-outlet',\n  standalone: true,\n  imports: [ToastComponent],\n  templateUrl: './toast-outlet.component.html',\n  styleUrls: ['./toast-outlet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToastOutletComponent {\n  protected readonly positions = POSITIONS;\n  protected readonly liveLevels: readonly ToastLive[] = ['assertive', 'polite'];\n\n  private readonly toastService = inject(ToastService);\n\n  /** Accessible name of every toast's close button (forwarded to lc-toast). */\n  readonly closeAriaLabel = input('Close notification');\n\n  /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */\n  private readonly groups = computed(() => {\n    const groups = new Map<string, Toast[]>();\n    for (const toast of this.toastService.toasts()) {\n      const key = `${toast.position}:${ToastOutletComponent.liveFor(toast)}`;\n      const group = groups.get(key);\n      if (group) {\n        group.push(toast);\n      } else {\n        groups.set(key, [toast]);\n      }\n    }\n    return groups;\n  });\n\n  protected toastsFor(position: ToastPosition, live: ToastLive): readonly Toast[] {\n    return this.groups().get(`${position}:${live}`) ?? [];\n  }\n\n  protected onClosed(id: string): void {\n    this.toastService.close(id);\n  }\n\n  /** Errors and warnings interrupt (assertive), everything else waits its turn. */\n  private static liveFor(toast: Toast): ToastLive {\n    return toast.variant === 'error' || toast.variant === 'warning' ? 'assertive' : 'polite';\n  }\n}\n","@for (position of positions; track position) {\n  <div class=\"lc-toast-outlet__stack\" [class]=\"'lc-toast-outlet__stack lc-toast-outlet__stack--' + position\">\n    <!-- Both regions are always present (even empty) so that toasts inserted\n         later are announced; the toasts themselves do not announce again. -->\n    @for (live of liveLevels; track live) {\n      <div class=\"lc-toast-outlet__region\" [attr.aria-live]=\"live\" aria-atomic=\"false\">\n        @for (toast of toastsFor(position, live); track toast.id) {\n          <lc-toast [toast]=\"toast\" [announce]=\"false\" [closeAriaLabel]=\"closeAriaLabel()\" (closed)=\"onClosed($event)\" />\n        }\n      </div>\n    }\n  </div>\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-toast.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/toast/toast.service.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.html","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.html"],"sourcesContent":["import { Injectable, PLATFORM_ID, inject, signal, Signal } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ToastConfig {\n  message: string;\n  variant?: ToastVariant;\n  position?: ToastPosition;\n  duration?: number;\n  showCloseButton?: boolean;\n  action?: ToastAction;\n}\n\nexport interface Toast extends Required<Omit<ToastConfig, 'action'>> {\n  id: string;\n  action?: ToastAction;\n}\n\n/**\n * Toast service for showing ephemeral notifications.\n *\n * The toasts are rendered by `<lc-toast-outlet />`, which the application\n * places once (e.g. in its shell); without it nothing is shown. The options,\n * their defaults, the timing and how a toast is announced to screen readers\n * are documented under *Feedback/Toast Outlet* (3.17).\n *\n * @example\n * ```typescript\n * private readonly toastService = inject(ToastService);\n *\n * showSuccess() {\n *   this.toastService.show({\n *     message: 'Changes saved successfully!',\n *     variant: 'success',\n *     duration: 3000\n *   });\n * }\n * ```\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class ToastService {\n  /**\n   * Public readonly signal for toasts\n   */\n  public readonly toasts: Signal<readonly Toast[]>;\n\n  /**\n   * Internal signal for toast list\n   */\n  private readonly toastList = signal<Toast[]>([]);\n\n  private readonly MAX_TOASTS = 5;\n  private toastIdCounter = 0;\n  private activeTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n  /** Auto-dismiss timers only make sense in the browser (and `window` does not exist on the server). */\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  constructor() {\n    this.toasts = this.toastList.asReadonly();\n  }\n\n  /**\n   * Show a toast notification\n   */\n  show(config: ToastConfig): string {\n    const toast: Toast = {\n      id: this.generateId(),\n      message: config.message,\n      variant: config.variant || 'info',\n      position: config.position || 'top-right',\n      duration: config.duration !== undefined ? config.duration : 3000,\n      showCloseButton: config.showCloseButton !== undefined ? config.showCloseButton : true,\n      action: config.action,\n    };\n\n    // Add toast to list\n    let currentToasts = this.toastList();\n\n    // Remove oldest toast if at max capacity\n    if (currentToasts.length >= this.MAX_TOASTS) {\n      const oldestToast = currentToasts[0];\n      if (oldestToast) {\n        this.clearTimeout(oldestToast.id);\n        currentToasts = currentToasts.slice(1);\n      }\n    }\n\n    this.toastList.set([...currentToasts, toast]);\n\n    // Auto-dismiss if duration > 0\n    if (toast.duration > 0 && this.isBrowser) {\n      const timeoutId = setTimeout(() => {\n        this.close(toast.id);\n      }, toast.duration);\n\n      this.activeTimeouts.set(toast.id, timeoutId);\n    }\n\n    return toast.id;\n  }\n\n  /**\n   * Close a specific toast\n   */\n  close(id: string): void {\n    this.removeToast(id);\n  }\n\n  /**\n   * Close all toasts\n   */\n  closeAll(): void {\n    const currentToasts = this.toastList();\n    currentToasts.forEach((toast) => {\n      this.clearTimeout(toast.id);\n    });\n    this.toastList.set([]);\n  }\n\n  /**\n   * Generate unique toast ID\n   */\n  private generateId(): string {\n    return `toast-${++this.toastIdCounter}-${Date.now()}`;\n  }\n\n  /**\n   * Remove a toast from the list\n   */\n  private removeToast(id: string): void {\n    this.clearTimeout(id);\n    const currentToasts = this.toastList();\n    this.toastList.set(currentToasts.filter((t) => t.id !== id));\n  }\n\n  /**\n   * Clear timeout for a toast\n   */\n  private clearTimeout(id: string): void {\n    const timeoutId = this.activeTimeouts.get(id);\n    if (timeoutId !== undefined) {\n      clearTimeout(timeoutId);\n      this.activeTimeouts.delete(id);\n    }\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n  ICON_CHECK_CIRCLE,\n  ICON_CIRCLE_X,\n  ICON_EXCLAMATION_TRIANGLE,\n  ICON_INFORMATION_CIRCLE,\n  ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\nimport type { Toast, ToastVariant } from './toast.service';\n\n/**\n * Toast component for displaying ephemeral notification messages.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Auto-dismiss with configurable duration\n * - Manual dismiss with close button\n * - Icon display per variant\n * - Stacked toast positioning via ToastService + `<lc-toast-outlet />`\n * - Animated enter/exit transitions\n *\n * Usually rendered by `<lc-toast-outlet />`; can also be placed directly:\n *\n * @example\n * ```html\n * <lc-toast [toast]=\"toast\" (closed)=\"dismiss($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-toast',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [\n    ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n  ],\n  templateUrl: './toast.component.html',\n  styleUrls: ['./toast.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'ariaRole()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-atomic]': 'announce() ? \"true\" : null',\n  },\n})\nexport class ToastComponent {\n  /**\n   * Toast data\n   */\n  toast = input.required<Toast>();\n\n  /**\n   * Whether the toast is its own live region (`role=\"status\"`/`\"alert\"` on the\n   * host). `lc-toast-outlet` sets this to false because its persistent live\n   * regions already announce the toast — announcing twice would be noise.\n   * @default true\n   */\n  announce = input<boolean>(true);\n\n  /** Accessible name of the close button (`toast.showCloseButton`). */\n  closeAriaLabel = input('Close notification');\n\n  /**\n   * Emitted when toast is closed\n   */\n  readonly closed = output<string>();\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const toast = this.toast();\n    return `lc-toast lc-toast--${toast.variant}`;\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-toast__container';\n  });\n\n  /**\n   * Computed ARIA role\n   */\n  protected ariaRole = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'alert' : 'status';\n  });\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'assertive' : 'polite';\n  });\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<ToastVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return icons[this.toast().variant];\n  });\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closed.emit(this.toast().id);\n  }\n\n  /**\n   * Handle action button click\n   */\n  protected onActionClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const action = this.toast().action;\n    if (action) {\n      action.onClick();\n      this.closed.emit(this.toast().id);\n    }\n  }\n}\n","<div [class]=\"containerClasses()\">\n  <div class=\"lc-toast__icon\">\n    <lc-icon [name]=\"defaultIcon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n  \n  <div class=\"lc-toast__message\">\n    {{ toast().message }}\n  </div>\n  \n  @if (toast().action) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__action\"\n      (click)=\"onActionClick($event)\"\n    >\n      {{ toast().action?.label }}\n    </button>\n  }\n  \n  @if (toast().showCloseButton) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__close\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"onCloseClick($event)\"\n    >\n      <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n","import { Component, ChangeDetectionStrategy, computed, inject, input } from '@angular/core';\nimport { OverlayInsetsService } from '@lifecorner/angular-ui-kit/internal/overlay';\nimport { ToastComponent } from './toast.component';\nimport { ToastService, type Toast, type ToastPosition } from './toast.service';\n\n/** Politeness of the live region a toast is announced from. */\ntype ToastLive = 'polite' | 'assertive';\n\nconst POSITIONS: readonly ToastPosition[] = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'bottom-left',\n  'bottom-center',\n  'bottom-right',\n];\n\n/**\n * Renders the toasts of {@link ToastService}. Place it once in the application\n * shell; without it `ToastService.show()` has no visible effect.\n *\n * ```html\n * <lc-toast-outlet />\n * ```\n *\n * Toasts are stacked per `position`. Every position owns two live regions that\n * exist from the start — screen readers only announce content that is inserted\n * into an *existing* live region — one `polite` for success/info toasts and one\n * `assertive` for error/warning toasts. Dismissing a toast (close button,\n * action, auto-dismiss) removes it from the service.\n *\n * Offsets (3.28, AS-34): with `lc-app-shell` in the app (the outlet may sit\n * before or after it), the `top-*` stacks start below the shell's header and\n * the `bottom-*` stacks end above its bottom bar, each with the stack's 16 px\n * padding as the gap. The shell measures both in the browser (the header's\n * bottom edge with the top inset; the shown bar's top edge, from the\n * viewport's bottom, with the bottom inset). From 1024 px, where the bar is\n * hidden, the bottom offset is the safe-area inset. Without a shell, and in\n * prerendered HTML, both are `0px`, as before. Every stack is at most as high\n * as the space between the offsets and scrolls when its toasts need more\n * (200 % text), so each toast stays reachable. In the shell, prefer the\n * `bottom-*` positions: a top toast can still cover a page title placed\n * right under the header.\n *\n * CSS hooks (set them on `lc-toast-outlet` or any ancestor, e.g. `:root`;\n * each wins over the shell's value; write lengths, `0px` rather than `0`):\n * - `--lc-toast-outlet-offset-top` — the space kept free above the `top-*`\n *   stacks. Default `0px`; with `lc-app-shell`: its header's bottom edge, or\n *   `env(safe-area-inset-top, 0px)` without a header.\n * - `--lc-toast-outlet-offset-bottom` — the space kept free below the\n *   `bottom-*` stacks. Default `0px`; with `lc-app-shell`: the shown bottom\n *   bar's top edge, measured from the viewport's bottom, or\n *   `env(safe-area-inset-bottom, 0px)` when no bar shows.\n */\n@Component({\n  selector: 'lc-toast-outlet',\n  standalone: true,\n  imports: [ToastComponent],\n  templateUrl: './toast-outlet.component.html',\n  styleUrls: ['./toast-outlet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The shell's measured offsets (AS-34), private; `null` without a shell,\n    // so the host gets no style attribute. The public hooks win in the CSS.\n    '[style.--_lc-toast-outlet-frame-top]': 'insets.top()',\n    '[style.--_lc-toast-outlet-frame-bottom]': 'insets.bottom()',\n  },\n})\nexport class ToastOutletComponent {\n  protected readonly positions = POSITIONS;\n  protected readonly liveLevels: readonly ToastLive[] = ['assertive', 'polite'];\n\n  private readonly toastService = inject(ToastService);\n  protected readonly insets = inject(OverlayInsetsService);\n\n  /** Accessible name of every toast's close button (forwarded to lc-toast). */\n  readonly closeAriaLabel = input('Close notification');\n\n  /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */\n  private readonly groups = computed(() => {\n    const groups = new Map<string, Toast[]>();\n    for (const toast of this.toastService.toasts()) {\n      const key = `${toast.position}:${ToastOutletComponent.liveFor(toast)}`;\n      const group = groups.get(key);\n      if (group) {\n        group.push(toast);\n      } else {\n        groups.set(key, [toast]);\n      }\n    }\n    return groups;\n  });\n\n  protected toastsFor(position: ToastPosition, live: ToastLive): readonly Toast[] {\n    return this.groups().get(`${position}:${live}`) ?? [];\n  }\n\n  protected onClosed(id: string): void {\n    this.toastService.close(id);\n  }\n\n  /** Errors and warnings interrupt (assertive), everything else waits its turn. */\n  private static liveFor(toast: Toast): ToastLive {\n    return toast.variant === 'error' || toast.variant === 'warning' ? 'assertive' : 'polite';\n  }\n}\n","@for (position of positions; track position) {\n  <div class=\"lc-toast-outlet__stack\" [class]=\"'lc-toast-outlet__stack lc-toast-outlet__stack--' + position\">\n    <!-- Both regions are always present (even empty) so that toasts inserted\n         later are announced; the toasts themselves do not announce again. -->\n    @for (live of liveLevels; track live) {\n      <div class=\"lc-toast-outlet__region\" [attr.aria-live]=\"live\" aria-atomic=\"false\">\n        @for (toast of toastsFor(position, live); track toast.id) {\n          <lc-toast [toast]=\"toast\" [announce]=\"false\" [closeAriaLabel]=\"closeAriaLabel()\" (closed)=\"onClosed($event)\" />\n        }\n      </div>\n    }\n  </div>\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.27.2",
+  "version": "3.29.0",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit-app-shell.d.ts

@@ -52,6 +52,12 @@ export type AppShellNavPlacement = 'below-header' | 'full-height';
  * content). The land and the footer run under the nav; the footer's content
  * starts at the nav width.
  *
+ * Toasts (3.28, AS-34): in the browser the shell tells `lc-toast-outlet` —
+ * wherever the app puts it, also after `</lc-app-shell>` — where its header
+ * ends and where the shown bar starts, so top toasts sit below the header and
+ * bottom toasts 16 px above the bar (from 1024 px: above the safe-area
+ * inset). `--lc-toast-outlet-offset-top` / `-bottom` override both.
+ *
  * CSS hooks (set them on `lc-app-shell` or any ancestor):
  * - `--lc-app-shell-nav-width` — the nav column from 1024 px. Default
  *   `240px` (`248px` from 1440, `280px` from 1920).
@@ -104,6 +110,7 @@ export declare class AppShellComponent {
   readonly navPlacement: import("@angular/core").InputSignal<AppShellNavPlacement>;
   protected readonly shellClasses: import("@angular/core").Signal<string>;
   private readonly shell;
+  private readonly headerSlot;
   private readonly barSlot;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<AppShellComponent, never>;
@@ -133,6 +140,14 @@ export type AppPagePaddingX = 'default' | 'header';
  * - `none` 0, `sm` 8 px, `md` 16 px at every width.
  */
 export type AppPagePaddingTop = 'default' | 'none' | 'sm' | 'md';
+/**
+ * Width of `lc-app-page`'s content from 1280 px (3.28, AS-36).
+ * - `default`: the content column, centred, capped at `contentMaxWidth`.
+ * - `wide`: the standard column of a page with a right column, the right
+ *   column left empty, and `[page-wide]` children running over it, up to
+ *   928 px. Below 1280 px, and next to a named right column, as `default`.
+ */
+export type AppPageContentWidth = 'default' | 'wide';
 /**
  * A page inside `lc-app-shell`: the `<main>` landmark with the page's content
  * centred at a reading width, and an optional right column docked to the
@@ -150,6 +165,16 @@ export type AppPagePaddingTop = 'default' | 'none' | 'sm' | 'md';
  *   inside main instead (e.g. a member row). It renders only with an
  *   accessible name — `asideLabelledby` (the id of its heading) or
  *   `asideAriaLabel`.
+ * - `reserveAside` keeps that column from 1280 px — width, tint and hairline —
+ *   with no content and no landmark (`aria-hidden="true"`), so a page without
+ *   right-column content keeps the same column as a page with one (3.28,
+ *   AS-35). A named aside wins.
+ * - `contentWidth="wide"` (3.28, AS-36) lays the page out like a page with a
+ *   right column, leaves the column empty and untinted, and lets children
+ *   marked `[page-wide]` (e.g. a table's wrapper) run over it, up to 928 px;
+ *   the other children (the page header, the next-step card) keep the
+ *   standard column, so the title doesn't move between pages. Next to a named
+ *   aside, and below 1280 px, it renders like `'default'`.
  * - `busy` marks the page as loading: `aria-busy="true"` on `<main>` while a
  *   skeleton stands in for the content (AS-12). No visual change.
  * - `paddingX="header"` lines the content up with `lc-header` (3.15): its
@@ -220,8 +245,37 @@ export declare class AppPageComponent {
    * @default 'default'
    */
   readonly paddingTop: import("@angular/core").InputSignal<AppPagePaddingTop>;
+  /**
+   * Keeps the right column from 1280 px (360 · 400 · 460 px,
+   * `--lc-app-page-aside-width`) with its tint and hairline but no content
+   * and no landmark (`aria-hidden="true"`, no role), so pages without
+   * right-column content share one column with pages that have one. A named
+   * aside (`asideLabelledby` / `asideAriaLabel`) wins; `contentWidth="wide"`
+   * leaves the column empty and untinted. Below 1280 px nothing shows.
+   * @default false
+   */
+  readonly reserveAside: import("@angular/core").InputSignal<boolean>;
+  /**
+   * `'wide'`, from 1280 px: the page keeps the standard column of a page with
+   * a right column, the column stays empty and untinted, and `[page-wide]`
+   * children run over it, up to 928 px (or `contentMaxWidth` when it is not
+   * `880px`; `none` means the whole column). The other children keep the
+   * standard column. With a named aside, `'wide'` has no effect. Below
+   * 1280 px `'wide'` renders like `'default'`.
+   * @default 'default'
+   */
+  readonly contentWidth: import("@angular/core").InputSignal<AppPageContentWidth>;
   /** The right column renders only when it has an accessible name. */
   protected readonly hasAside: import("@angular/core").Signal<boolean>;
+  /** `contentWidth="wide"` takes effect only without a named aside, which it yields to. */
+  protected readonly wide: import("@angular/core").Signal<boolean>;
+  /** The empty, unnamed column (`reserveAside`), unless a named aside or `wide` takes the space. */
+  protected readonly reserved: import("@angular/core").Signal<boolean>;
+  /**
+   * The cap of `[page-wide]` children: `null` keeps the CSS's 928 px (also
+   * for the default `contentMaxWidth`), `none` means the whole column.
+   */
+  protected readonly wideMax: import("@angular/core").Signal<string | null>;
   protected readonly pageClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<AppPageComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AppPageComponent, "lc-app-page", never, {
@@ -260,5 +314,15 @@ export declare class AppPageComponent {
       "required": false;
       "isSignal": true;
     };
+    "reserveAside": {
+      "alias": "reserveAside";
+      "required": false;
+      "isSignal": true;
+    };
+    "contentWidth": {
+      "alias": "contentWidth";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*", "[page-aside]"], true, never>;
 }