@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-display.mjs

@@ -0,0 +1,1142 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, numberAttribute, computed, inject, contentChild, viewChild, contentChildren, InjectionToken, linkedSignal, forwardRef, TemplateRef, model } from '@angular/core';
+import { NxeMessageService } from '@nexterajs/ui/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { DateTime } from 'luxon';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/** Every family, in catalogue order. For demos, specs and pickers. */
+const NXE_STATUS_FAMILIES = [
+    'neutral',
+    'info',
+    'attention',
+    'success',
+    'danger',
+    'muted',
+];
+/**
+ * `nxe-tag` renders one status, with colour from the status family rather than ad hoc:
+ *
+ * ```html
+ * <nxe-tag family="success">Disetujui</nxe-tag>
+ * <nxe-tag family="attention" dot>Perlu tindakan</nxe-tag>
+ * <nxe-tag family="info"><svg nxeTagIcon>...</svg> Terkirim</nxe-tag>
+ * ```
+ *
+ * Colour is never the only carrier of meaning: the label is the status. The dot is decorative
+ * (`aria-hidden`). All six families keep their text at >= 4.5:1 on their fill, in light and dark.
+ */
+class NxeTagComponent {
+    /** Status family: sets the colours. */
+    family = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "family" }] : /* istanbul ignore next */ []));
+    /** `subtle` (default), `solid` or `outlined`. */
+    stylingMode = input('subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stylingMode" }] : /* istanbul ignore next */ []));
+    /** `md` (default) or `sm`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Leading status dot, in the tag's text colour. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTagComponent, isStandalone: true, selector: "nxe-tag", inputs: { family: { classPropertyName: "family", publicName: "family", isSignal: true, isRequired: false, transformFunction: null }, stylingMode: { classPropertyName: "stylingMode", publicName: "stylingMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'nxe-tag-' + family() + ' nxe-tag-mode-' + stylingMode() + ' nxe-tag-size-' + size()", "class.nxe-tag-has-dot": "dot()" }, classAttribute: "nxe-tag" }, ngImport: i0, template: "@if (dot()) {\r\n    <span class=\"nxe-tag-dot\" aria-hidden=\"true\"></span>\r\n}\r\n<ng-content select=\"[nxeTagIcon], [nxeIcon]\" />\r\n<span class=\"nxe-tag-label\"><ng-content /></span>\r\n", styles: ["nxe-tag.nxe-tag{--nxe-status-border-style: solid;display:inline-flex;align-items:center;gap:var(--nxe-ui-space-1);box-sizing:border-box;max-width:100%;vertical-align:middle;padding:1px var(--nxe-ui-space-2);border:1px var(--nxe-status-border-style) var(--nxe-status-border);border-radius:var(--nxe-ui-radius-sm);background-color:var(--nxe-status-bg);color:var(--nxe-status-fg);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-sm);font-weight:var(--nxe-ui-font-weight-medium);line-height:var(--nxe-ui-line-height-sm);white-space:nowrap}nxe-tag.nxe-tag.nxe-tag-size-sm{padding-block:0;padding-inline:calc(var(--nxe-ui-space-1) + 2px);font-size:var(--nxe-ui-font-size-xs);line-height:var(--nxe-ui-line-height-xs)}nxe-tag.nxe-tag.nxe-tag-mode-solid{border-color:var(--nxe-status-fg);background-color:var(--nxe-status-fg);color:var(--nxe-status-bg)}nxe-tag.nxe-tag.nxe-tag-mode-outlined{border-color:var(--nxe-status-fg);background-color:transparent;color:var(--nxe-status-fg)}nxe-tag.nxe-tag .nxe-tag-label{overflow:hidden;text-overflow:ellipsis}nxe-tag.nxe-tag .nxe-tag-dot{flex:none;width:6px;height:6px;border-radius:50%;background-color:currentColor}nxe-tag.nxe-tag>svg,nxe-tag.nxe-tag>.nxe-icon{flex:none;width:1em;height:1em;fill:currentColor}nxe-tag.nxe-tag-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-tag.nxe-tag-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-tag.nxe-tag-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-tag.nxe-tag-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-tag.nxe-tag-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-tag.nxe-tag-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-tag.nxe-tag-muted{--nxe-status-border-style: dashed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-tag', host: {
+                        class: 'nxe-tag',
+                        '[class]': "'nxe-tag-' + family() + ' nxe-tag-mode-' + stylingMode() + ' nxe-tag-size-' + size()",
+                        '[class.nxe-tag-has-dot]': 'dot()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (dot()) {\r\n    <span class=\"nxe-tag-dot\" aria-hidden=\"true\"></span>\r\n}\r\n<ng-content select=\"[nxeTagIcon], [nxeIcon]\" />\r\n<span class=\"nxe-tag-label\"><ng-content /></span>\r\n", styles: ["nxe-tag.nxe-tag{--nxe-status-border-style: solid;display:inline-flex;align-items:center;gap:var(--nxe-ui-space-1);box-sizing:border-box;max-width:100%;vertical-align:middle;padding:1px var(--nxe-ui-space-2);border:1px var(--nxe-status-border-style) var(--nxe-status-border);border-radius:var(--nxe-ui-radius-sm);background-color:var(--nxe-status-bg);color:var(--nxe-status-fg);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-sm);font-weight:var(--nxe-ui-font-weight-medium);line-height:var(--nxe-ui-line-height-sm);white-space:nowrap}nxe-tag.nxe-tag.nxe-tag-size-sm{padding-block:0;padding-inline:calc(var(--nxe-ui-space-1) + 2px);font-size:var(--nxe-ui-font-size-xs);line-height:var(--nxe-ui-line-height-xs)}nxe-tag.nxe-tag.nxe-tag-mode-solid{border-color:var(--nxe-status-fg);background-color:var(--nxe-status-fg);color:var(--nxe-status-bg)}nxe-tag.nxe-tag.nxe-tag-mode-outlined{border-color:var(--nxe-status-fg);background-color:transparent;color:var(--nxe-status-fg)}nxe-tag.nxe-tag .nxe-tag-label{overflow:hidden;text-overflow:ellipsis}nxe-tag.nxe-tag .nxe-tag-dot{flex:none;width:6px;height:6px;border-radius:50%;background-color:currentColor}nxe-tag.nxe-tag>svg,nxe-tag.nxe-tag>.nxe-icon{flex:none;width:1em;height:1em;fill:currentColor}nxe-tag.nxe-tag-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-tag.nxe-tag-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-tag.nxe-tag-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-tag.nxe-tag-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-tag.nxe-tag-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-tag.nxe-tag-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-tag.nxe-tag-muted{--nxe-status-border-style: dashed}\n"] }]
+        }], propDecorators: { family: [{ type: i0.Input, args: [{ isSignal: true, alias: "family", required: false }] }], stylingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "stylingMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+
+/**
+ * Marks the element a badge is attached to. It becomes the positioning context, so a child
+ * `<nxe-badge overlay>` sits on its top-right corner without being clipped by the element it
+ * decorates (`nxe-button` clips its overflow, so the badge goes beside it, not inside it):
+ *
+ * ```html
+ * <span nxeBadgeAnchor>
+ *     <nxe-button text="Inbox"></nxe-button>
+ *     <nxe-badge overlay [value]="unread()" label="unread messages"></nxe-badge>
+ * </span>
+ * ```
+ */
+class NxeBadgeAnchorDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBadgeAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeBadgeAnchorDirective, isStandalone: true, selector: "[nxeBadgeAnchor]", host: { classAttribute: "nxe-badge-anchor" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBadgeAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeBadgeAnchor]',
+                    host: { class: 'nxe-badge-anchor' },
+                }]
+        }] });
+/**
+ * `nxe-badge` shows a count, or a bare dot, in a status family colour (default `danger`, solid).
+ *
+ * - **Count** (`[value]`): a number, capped at `max` (`99+`). Hidden when 0 unless `showZero`, and
+ *   hidden when `value` is not set.
+ * - **Dot** (`dot`): no number, just "something is new". Shown unless `value` is 0 (and not
+ *   `showZero`).
+ * - **Standalone** it is inline, so it can follow a label (`Perlu tindakan <nxe-badge [value]="5">`),
+ *   which is how tab and nav counts are written. With `overlay` and a {@link NxeBadgeAnchorDirective}
+ *   parent it pins to that element's top-right corner.
+ *
+ * The visible number is the accessible name unless `label` is given, which is read instead
+ * ("5 unread messages"). A dot has no text, so it is `aria-hidden` unless it has a `label`.
+ */
+class NxeBadgeComponent {
+    /** The count. */
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: (v) => (v === null || v === undefined || v === '' ? undefined : numberAttribute(v, NaN)) });
+    /** Largest number shown whole; above it the badge reads `<max>+`. */
+    max = input(99, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => numberAttribute(v, 99) });
+    /** A dot instead of a number. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show the badge when the count is 0. */
+    showZero = input(false, { ...(ngDevMode ? { debugName: "showZero" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Status family; `danger` by default. Always drawn solid. */
+    family = input('danger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "family" }] : /* istanbul ignore next */ []));
+    /** Pin to the top-right corner of the nearest `nxeBadgeAnchor` ancestor. */
+    overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name; replaces the number for assistive tech ("5 unread messages"). */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** What the badge says: the number, or `<max>+`. Empty in dot mode. */
+    text = computed(() => {
+        const value = this.value();
+        if (this.dot() || value == null || Number.isNaN(value)) {
+            return '';
+        }
+        return value > this.max() ? `${this.max()}+` : String(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        const value = this.value();
+        if (value == null || Number.isNaN(value)) {
+            return this.dot();
+        }
+        return value > 0 || this.showZero();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeBadgeComponent, isStandalone: true, selector: "nxe-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, family: { classPropertyName: "family", publicName: "family", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'nxe-badge-' + family()", "class.nxe-badge-dot": "dot()", "class.nxe-badge-overlay": "overlay()", "hidden": "!visible()", "attr.role": "dot() ? (label() ? 'img' : null) : 'status'", "attr.aria-label": "label() || null", "attr.aria-hidden": "dot() && !label() ? true : null" }, classAttribute: "nxe-badge" }, ngImport: i0, template: "{{ text() }}\r\n", styles: ["nxe-badge.nxe-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--nxe-ui-line-height-xs) + 2px);height:calc(var(--nxe-ui-line-height-xs) + 2px);padding-inline:5px;border-radius:var(--nxe-ui-radius-pill);background-color:var(--nxe-status-fg);color:var(--nxe-status-bg);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-xs);font-weight:var(--nxe-ui-font-weight-semibold);font-variant-numeric:tabular-nums;line-height:var(--nxe-ui-line-height-xs);vertical-align:middle;white-space:nowrap}nxe-badge.nxe-badge[hidden]{display:none}nxe-badge.nxe-badge.nxe-badge-dot{min-width:0;width:8px;height:8px;padding:0}nxe-badge.nxe-badge.nxe-badge-overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(50%,-50%);box-shadow:0 0 0 2px var(--nxe-ui-surface)}nxe-badge.nxe-badge.nxe-badge-overlay:dir(rtl){transform:translate(-50%,-50%)}.nxe-badge-anchor{position:relative;display:inline-flex;vertical-align:middle}nxe-badge.nxe-badge-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-badge.nxe-badge-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-badge.nxe-badge-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-badge.nxe-badge-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-badge.nxe-badge-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-badge.nxe-badge-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-badge.nxe-badge-muted{--nxe-status-border-style: dashed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-badge', host: {
+                        class: 'nxe-badge',
+                        '[class]': "'nxe-badge-' + family()",
+                        '[class.nxe-badge-dot]': 'dot()',
+                        '[class.nxe-badge-overlay]': 'overlay()',
+                        '[hidden]': '!visible()',
+                        '[attr.role]': "dot() ? (label() ? 'img' : null) : 'status'",
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-hidden]': 'dot() && !label() ? true : null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "{{ text() }}\r\n", styles: ["nxe-badge.nxe-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--nxe-ui-line-height-xs) + 2px);height:calc(var(--nxe-ui-line-height-xs) + 2px);padding-inline:5px;border-radius:var(--nxe-ui-radius-pill);background-color:var(--nxe-status-fg);color:var(--nxe-status-bg);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-xs);font-weight:var(--nxe-ui-font-weight-semibold);font-variant-numeric:tabular-nums;line-height:var(--nxe-ui-line-height-xs);vertical-align:middle;white-space:nowrap}nxe-badge.nxe-badge[hidden]{display:none}nxe-badge.nxe-badge.nxe-badge-dot{min-width:0;width:8px;height:8px;padding:0}nxe-badge.nxe-badge.nxe-badge-overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(50%,-50%);box-shadow:0 0 0 2px var(--nxe-ui-surface)}nxe-badge.nxe-badge.nxe-badge-overlay:dir(rtl){transform:translate(-50%,-50%)}.nxe-badge-anchor{position:relative;display:inline-flex;vertical-align:middle}nxe-badge.nxe-badge-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-badge.nxe-badge-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-badge.nxe-badge-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-badge.nxe-badge-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-badge.nxe-badge-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-badge.nxe-badge-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-badge.nxe-badge-muted{--nxe-status-border-style: dashed}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], family: [{ type: i0.Input, args: [{ isSignal: true, alias: "family", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * `nxe-spinner` is the inline "working" indicator: a ring that turns, announced as a polite live
+ * status.
+ *
+ * ```html
+ * <nxe-spinner size="sm" label="Menyimpan" />
+ * ```
+ *
+ * The ring takes the text colour set by `--nxe-ui-ink-strong` over the `--nxe-ui-spinner-track`
+ * track; set `color` on it (or a parent, via `--nxe-spinner-color`) to recolour. Under
+ * `prefers-reduced-motion: reduce` the ring turns slowly instead of at speed, so it still reads as
+ * "in progress" without the vestibular cost. Use `nxe-skeleton` for the first load of a page and
+ * this for a pending action or a region that is refreshing.
+ */
+class NxeSpinnerComponent {
+    /** `sm` (16px), `md` (24px, default) or `lg` (40px). */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** What is happening, for assistive tech. Translate it; the default is English. */
+    label = input('Loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeSpinnerComponent, isStandalone: true, selector: "nxe-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "label()", "class.nxe-spinner-sm": "size() === 'sm'", "class.nxe-spinner-md": "size() === 'md'", "class.nxe-spinner-lg": "size() === 'lg'" }, classAttribute: "nxe-spinner" }, ngImport: i0, template: "<span class=\"nxe-spinner-ring\" aria-hidden=\"true\"></span>\r\n", styles: ["nxe-spinner.nxe-spinner{--nxe-spinner-size: var(--nxe-ui-space-6);display:inline-flex;flex:none;width:var(--nxe-spinner-size);height:var(--nxe-spinner-size);vertical-align:middle;color:var(--nxe-spinner-color, var(--nxe-ui-ink-strong))}nxe-spinner.nxe-spinner.nxe-spinner-sm{--nxe-spinner-size: var(--nxe-ui-space-4)}nxe-spinner.nxe-spinner.nxe-spinner-lg{--nxe-spinner-size: calc(var(--nxe-ui-space-7) + var(--nxe-ui-space-2))}nxe-spinner.nxe-spinner .nxe-spinner-ring{box-sizing:border-box;width:100%;height:100%;border:max(2px,var(--nxe-spinner-size) / 10) solid var(--nxe-ui-spinner-track);border-top-color:currentColor;border-radius:50%;animation:nxe-spinner-turn .8s linear infinite}@keyframes nxe-spinner-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){nxe-spinner.nxe-spinner .nxe-spinner-ring{animation-duration:3s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-spinner', host: {
+                        class: 'nxe-spinner',
+                        role: 'status',
+                        '[attr.aria-label]': 'label()',
+                        '[class.nxe-spinner-sm]': "size() === 'sm'",
+                        '[class.nxe-spinner-md]': "size() === 'md'",
+                        '[class.nxe-spinner-lg]': "size() === 'lg'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span class=\"nxe-spinner-ring\" aria-hidden=\"true\"></span>\r\n", styles: ["nxe-spinner.nxe-spinner{--nxe-spinner-size: var(--nxe-ui-space-6);display:inline-flex;flex:none;width:var(--nxe-spinner-size);height:var(--nxe-spinner-size);vertical-align:middle;color:var(--nxe-spinner-color, var(--nxe-ui-ink-strong))}nxe-spinner.nxe-spinner.nxe-spinner-sm{--nxe-spinner-size: var(--nxe-ui-space-4)}nxe-spinner.nxe-spinner.nxe-spinner-lg{--nxe-spinner-size: calc(var(--nxe-ui-space-7) + var(--nxe-ui-space-2))}nxe-spinner.nxe-spinner .nxe-spinner-ring{box-sizing:border-box;width:100%;height:100%;border:max(2px,var(--nxe-spinner-size) / 10) solid var(--nxe-ui-spinner-track);border-top-color:currentColor;border-radius:50%;animation:nxe-spinner-turn .8s linear infinite}@keyframes nxe-spinner-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){nxe-spinner.nxe-spinner .nxe-spinner-ring{animation-duration:3s}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/** A bare number (or numeric string) means CSS px; anything else (`'50%'`, `'12em'`) passes through. */
+function cssSize(value) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    return /^-?\d+(\.\d+)?$/.test(String(value)) ? `${value}px` : String(value);
+}
+/**
+ * `nxe-skeleton` is a grey placeholder in the shape of content that has not arrived yet, for the
+ * first load of a page:
+ *
+ * ```html
+ * <nxe-skeleton variant="text" [lines]="3" />
+ * <nxe-skeleton variant="rect" width="100%" [height]="120" />
+ * <nxe-skeleton variant="circle" [width]="40" />
+ * ```
+ *
+ * It is `aria-hidden`: a placeholder says nothing. Put `aria-busy="true"` on the region that is
+ * loading (and drop it when the content lands) so assistive tech knows to wait. The shimmer stops
+ * under `prefers-reduced-motion: reduce`, leaving a still grey block. Colours come from the neutral
+ * ramp, so it follows light and dark.
+ */
+class NxeSkeletonComponent {
+    /** `text` (default), `rect` or `circle`. */
+    variant = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** CSS width: a number is px. `text`: of the whole block (default 100%). `circle`: the diameter (default 40). */
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** CSS height: a number is px. `text`: of one line (default 12). `rect`: the block (default 48). `circle`: defaults to the width. */
+    height = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Number of lines, for `text`. The last of several is shorter, as a paragraph ends. */
+    lines = input(1, { ...(ngDevMode ? { debugName: "lines" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, Math.floor(Number(v)) || 1) });
+    /** Shimmer. Off for a still placeholder; always off under reduced motion. */
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    lineIndexes = computed(() => Array.from({ length: this.lines() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineIndexes" }] : /* istanbul ignore next */ []));
+    /** `text` applies the height to each line, not to the block, so the block sizes itself. */
+    widthStyle = computed(() => {
+        const width = cssSize(this.width());
+        return this.variant() === 'circle' ? (width ?? '40px') : width;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
+    heightStyle = computed(() => {
+        const variant = this.variant();
+        if (variant === 'text') {
+            return null;
+        }
+        const height = cssSize(this.height());
+        if (variant === 'circle') {
+            return height ?? this.widthStyle();
+        }
+        return height;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heightStyle" }] : /* istanbul ignore next */ []));
+    lineHeight = computed(() => cssSize(this.height()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineHeight" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSkeletonComponent, isStandalone: true, selector: "nxe-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.nxe-skeleton-text": "variant() === 'text'", "class.nxe-skeleton-rect": "variant() === 'rect'", "class.nxe-skeleton-circle": "variant() === 'circle'", "class.nxe-skeleton-static": "!animated()", "style.width": "widthStyle()", "style.height": "heightStyle()" }, classAttribute: "nxe-skeleton" }, ngImport: i0, template: "@if (variant() === 'text') {\r\n    @for (line of lineIndexes(); track line) {\r\n        <span\r\n            class=\"nxe-skeleton-line\"\r\n            [class.nxe-skeleton-line-last]=\"lineIndexes().length > 1 && line === lineIndexes().length - 1\"\r\n            [style.height]=\"lineHeight()\"></span>\r\n    }\r\n}\r\n", styles: ["nxe-skeleton.nxe-skeleton{--nxe-skeleton-base: var(--nxe-ui-neutral-100);--nxe-skeleton-highlight: var(--nxe-ui-neutral-150);display:block;box-sizing:border-box;max-width:100%}nxe-skeleton.nxe-skeleton.nxe-skeleton-rect,nxe-skeleton.nxe-skeleton.nxe-skeleton-circle,nxe-skeleton.nxe-skeleton .nxe-skeleton-line{background-color:var(--nxe-skeleton-base);background-image:linear-gradient(90deg,var(--nxe-skeleton-base) 0%,var(--nxe-skeleton-highlight) 50%,var(--nxe-skeleton-base) 100%);background-repeat:no-repeat;background-size:200% 100%;animation:nxe-skeleton-shimmer 1.4s ease-in-out infinite}nxe-skeleton.nxe-skeleton.nxe-skeleton-static.nxe-skeleton-rect,nxe-skeleton.nxe-skeleton.nxe-skeleton-static.nxe-skeleton-circle,nxe-skeleton.nxe-skeleton.nxe-skeleton-static .nxe-skeleton-line{background-image:none;animation:none}nxe-skeleton.nxe-skeleton.nxe-skeleton-rect{width:100%;height:var(--nxe-ui-space-8);border-radius:var(--nxe-ui-radius-sm)}nxe-skeleton.nxe-skeleton.nxe-skeleton-circle{flex:none;border-radius:50%}nxe-skeleton.nxe-skeleton.nxe-skeleton-text{width:100%}nxe-skeleton.nxe-skeleton .nxe-skeleton-line{display:block;height:var(--nxe-ui-space-3);border-radius:var(--nxe-ui-radius-sm)}nxe-skeleton.nxe-skeleton .nxe-skeleton-line+.nxe-skeleton-line{margin-top:var(--nxe-ui-space-2)}nxe-skeleton.nxe-skeleton .nxe-skeleton-line-last{width:60%}@keyframes nxe-skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){nxe-skeleton.nxe-skeleton.nxe-skeleton-rect,nxe-skeleton.nxe-skeleton.nxe-skeleton-circle,nxe-skeleton.nxe-skeleton .nxe-skeleton-line{background-image:none;animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-skeleton', host: {
+                        class: 'nxe-skeleton',
+                        'aria-hidden': 'true',
+                        '[class.nxe-skeleton-text]': "variant() === 'text'",
+                        '[class.nxe-skeleton-rect]': "variant() === 'rect'",
+                        '[class.nxe-skeleton-circle]': "variant() === 'circle'",
+                        '[class.nxe-skeleton-static]': '!animated()',
+                        '[style.width]': 'widthStyle()',
+                        '[style.height]': 'heightStyle()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (variant() === 'text') {\r\n    @for (line of lineIndexes(); track line) {\r\n        <span\r\n            class=\"nxe-skeleton-line\"\r\n            [class.nxe-skeleton-line-last]=\"lineIndexes().length > 1 && line === lineIndexes().length - 1\"\r\n            [style.height]=\"lineHeight()\"></span>\r\n    }\r\n}\r\n", styles: ["nxe-skeleton.nxe-skeleton{--nxe-skeleton-base: var(--nxe-ui-neutral-100);--nxe-skeleton-highlight: var(--nxe-ui-neutral-150);display:block;box-sizing:border-box;max-width:100%}nxe-skeleton.nxe-skeleton.nxe-skeleton-rect,nxe-skeleton.nxe-skeleton.nxe-skeleton-circle,nxe-skeleton.nxe-skeleton .nxe-skeleton-line{background-color:var(--nxe-skeleton-base);background-image:linear-gradient(90deg,var(--nxe-skeleton-base) 0%,var(--nxe-skeleton-highlight) 50%,var(--nxe-skeleton-base) 100%);background-repeat:no-repeat;background-size:200% 100%;animation:nxe-skeleton-shimmer 1.4s ease-in-out infinite}nxe-skeleton.nxe-skeleton.nxe-skeleton-static.nxe-skeleton-rect,nxe-skeleton.nxe-skeleton.nxe-skeleton-static.nxe-skeleton-circle,nxe-skeleton.nxe-skeleton.nxe-skeleton-static .nxe-skeleton-line{background-image:none;animation:none}nxe-skeleton.nxe-skeleton.nxe-skeleton-rect{width:100%;height:var(--nxe-ui-space-8);border-radius:var(--nxe-ui-radius-sm)}nxe-skeleton.nxe-skeleton.nxe-skeleton-circle{flex:none;border-radius:50%}nxe-skeleton.nxe-skeleton.nxe-skeleton-text{width:100%}nxe-skeleton.nxe-skeleton .nxe-skeleton-line{display:block;height:var(--nxe-ui-space-3);border-radius:var(--nxe-ui-radius-sm)}nxe-skeleton.nxe-skeleton .nxe-skeleton-line+.nxe-skeleton-line{margin-top:var(--nxe-ui-space-2)}nxe-skeleton.nxe-skeleton .nxe-skeleton-line-last{width:60%}@keyframes nxe-skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){nxe-skeleton.nxe-skeleton.nxe-skeleton-rect,nxe-skeleton.nxe-skeleton.nxe-skeleton-circle,nxe-skeleton.nxe-skeleton .nxe-skeleton-line{background-image:none;animation:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
+
+/**
+ * `nxe-empty-state` invites the next action when there is nothing to show: an icon, a heading, one
+ * sentence, and the action.
+ *
+ * ```html
+ * <nxe-empty-state heading="Belum ada PO" description="Buat PO dari daftar harga pemasok.">
+ *     <svg nxeEmptyStateIcon viewBox="0 0 24 24">...</svg>
+ *     <nxe-button nxeEmptyStateActions type="default" text="Buat PO" />
+ * </nxe-empty-state>
+ * ```
+ *
+ * Slots, by content projection: `[nxeEmptyStateIcon]` above the heading, any other content under the
+ * description, and `[nxeEmptyStateActions]` (one or more buttons, laid out in a row) last. The
+ * heading input is `heading` rather than `title` so it does not also become a native tooltip on the
+ * host. It is exposed as a heading at `headingLevel` (3 by default), so set the level that fits the
+ * page's outline.
+ */
+class NxeEmptyStateComponent {
+    /** The headline: what is missing. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** One sentence on why, or what to do about it. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** `aria-level` of the heading, 1 to 6. */
+    headingLevel = input(3, { ...(ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {}), transform: (v) => Math.min(6, Math.max(1, Math.floor(Number(v)) || 3)) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeEmptyStateComponent, isStandalone: true, selector: "nxe-empty-state", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-empty-state" }, ngImport: i0, template: "<div class=\"nxe-empty-state-icon\"><ng-content select=\"[nxeEmptyStateIcon]\" /></div>\r\n@if (heading()) {\r\n    <div class=\"nxe-empty-state-heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">{{ heading() }}</div>\r\n}\r\n@if (description()) {\r\n    <p class=\"nxe-empty-state-description\">{{ description() }}</p>\r\n}\r\n<div class=\"nxe-empty-state-body\"><ng-content /></div>\r\n<div class=\"nxe-empty-state-actions\"><ng-content select=\"[nxeEmptyStateActions]\" /></div>\r\n", styles: ["nxe-empty-state.nxe-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--nxe-ui-space-2);box-sizing:border-box;padding:var(--nxe-ui-space-8) var(--nxe-ui-space-4);text-align:center;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-empty-state.nxe-empty-state .nxe-empty-state-icon:empty,nxe-empty-state.nxe-empty-state .nxe-empty-state-body:empty,nxe-empty-state.nxe-empty-state .nxe-empty-state-actions:empty{display:none}nxe-empty-state.nxe-empty-state .nxe-empty-state-icon{display:flex;color:var(--nxe-ui-neutral-450)}nxe-empty-state.nxe-empty-state .nxe-empty-state-icon>svg,nxe-empty-state.nxe-empty-state .nxe-empty-state-icon>.nxe-icon{width:var(--nxe-ui-space-8);height:var(--nxe-ui-space-8);fill:currentColor}nxe-empty-state.nxe-empty-state .nxe-empty-state-heading{font-size:var(--nxe-ui-font-size-lg);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-lg)}nxe-empty-state.nxe-empty-state .nxe-empty-state-description{max-width:44ch;margin:0;color:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-empty-state.nxe-empty-state .nxe-empty-state-body{max-width:44ch}nxe-empty-state.nxe-empty-state .nxe-empty-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--nxe-ui-space-2);margin-top:var(--nxe-ui-space-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-empty-state', host: { class: 'nxe-empty-state' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-empty-state-icon\"><ng-content select=\"[nxeEmptyStateIcon]\" /></div>\r\n@if (heading()) {\r\n    <div class=\"nxe-empty-state-heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">{{ heading() }}</div>\r\n}\r\n@if (description()) {\r\n    <p class=\"nxe-empty-state-description\">{{ description() }}</p>\r\n}\r\n<div class=\"nxe-empty-state-body\"><ng-content /></div>\r\n<div class=\"nxe-empty-state-actions\"><ng-content select=\"[nxeEmptyStateActions]\" /></div>\r\n", styles: ["nxe-empty-state.nxe-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--nxe-ui-space-2);box-sizing:border-box;padding:var(--nxe-ui-space-8) var(--nxe-ui-space-4);text-align:center;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-empty-state.nxe-empty-state .nxe-empty-state-icon:empty,nxe-empty-state.nxe-empty-state .nxe-empty-state-body:empty,nxe-empty-state.nxe-empty-state .nxe-empty-state-actions:empty{display:none}nxe-empty-state.nxe-empty-state .nxe-empty-state-icon{display:flex;color:var(--nxe-ui-neutral-450)}nxe-empty-state.nxe-empty-state .nxe-empty-state-icon>svg,nxe-empty-state.nxe-empty-state .nxe-empty-state-icon>.nxe-icon{width:var(--nxe-ui-space-8);height:var(--nxe-ui-space-8);fill:currentColor}nxe-empty-state.nxe-empty-state .nxe-empty-state-heading{font-size:var(--nxe-ui-font-size-lg);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-lg)}nxe-empty-state.nxe-empty-state .nxe-empty-state-description{max-width:44ch;margin:0;color:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-empty-state.nxe-empty-state .nxe-empty-state-body{max-width:44ch}nxe-empty-state.nxe-empty-state .nxe-empty-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--nxe-ui-space-2);margin-top:var(--nxe-ui-space-2)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+
+/**
+ * `nxe-card` groups related content on a surface: an optional header, the body, an optional footer.
+ *
+ * ```html
+ * <nxe-card heading="PO-2026-0412" subheading="Diterbitkan 12 Okt 2026">
+ *     <nxe-tag nxeCardActions family="attention" dot>Menunggu konfirmasi</nxe-tag>
+ *     <nxe-button nxeCardActions text="Setujui" type="default" />
+ *
+ *     Body content goes here.
+ *
+ *     <div nxeCardFooter>Total: Rp 12.500.000</div>
+ * </nxe-card>
+ * ```
+ *
+ * Slots, by content projection: `heading` and `subheading` inputs (or `[nxeCardTitle]` and
+ * `[nxeCardSubtitle]` for markup), `[nxeCardActions]` at the end of the header, anything else as the
+ * body and `[nxeCardFooter]` last. A header or footer with nothing in it draws nothing. The heading
+ * input is `heading`, not `title`, so it does not also become a native tooltip, and it is exposed as a
+ * heading at `headingLevel` (3 by default).
+ *
+ * Padding is half the control height, so it tightens under `.nxe-density-compact` with the controls;
+ * set `--nxe-card-padding` on the card to override.
+ */
+class NxeCardComponent {
+    /** `outlined` (default) or `elevated`. */
+    variant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** The card's title. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** A line under the title. */
+    subheading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subheading" }] : /* istanbul ignore next */ []));
+    /** `aria-level` of the heading, 1 to 6. */
+    headingLevel = input(3, { ...(ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {}), transform: (v) => Math.min(6, Math.max(1, Math.floor(Number(v)) || 3)) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeCardComponent, isStandalone: true, selector: "nxe-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'nxe-card-' + variant()" }, classAttribute: "nxe-card" }, ngImport: i0, template: "<div class=\"nxe-card-header\">\r\n    <div class=\"nxe-card-titles\">\r\n        @if (heading()) {\r\n            <div class=\"nxe-card-heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">{{ heading() }}</div>\r\n        }\r\n        <div class=\"nxe-card-title-slot\"><ng-content select=\"[nxeCardTitle]\" /></div>\r\n        @if (subheading()) {\r\n            <div class=\"nxe-card-subheading\">{{ subheading() }}</div>\r\n        }\r\n        <div class=\"nxe-card-subtitle-slot\"><ng-content select=\"[nxeCardSubtitle]\" /></div>\r\n    </div>\r\n    <div class=\"nxe-card-actions\"><ng-content select=\"[nxeCardActions]\" /></div>\r\n</div>\r\n<div class=\"nxe-card-body\"><ng-content /></div>\r\n<div class=\"nxe-card-footer\"><ng-content select=\"[nxeCardFooter]\" /></div>\r\n", styles: ["nxe-card.nxe-card{--nxe-card-pad: var(--nxe-card-padding, calc(var(--nxe-ui-control-min-height) / 2));display:block;box-sizing:border-box;border-radius:var(--nxe-ui-radius-lg);background-color:var(--nxe-ui-surface);color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-card.nxe-card.nxe-card-outlined{border:1px solid var(--nxe-ui-border)}nxe-card.nxe-card.nxe-card-elevated{border:1px solid transparent;box-shadow:var(--nxe-ui-shadow-sm)}nxe-card.nxe-card .nxe-card-title-slot:empty,nxe-card.nxe-card .nxe-card-subtitle-slot:empty,nxe-card.nxe-card .nxe-card-actions:empty,nxe-card.nxe-card .nxe-card-body:empty,nxe-card.nxe-card .nxe-card-footer:empty{display:none}nxe-card.nxe-card .nxe-card-header:not(:has(.nxe-card-heading,.nxe-card-subheading,.nxe-card-title-slot:not(:empty),.nxe-card-subtitle-slot:not(:empty),.nxe-card-actions:not(:empty))){display:none}nxe-card.nxe-card .nxe-card-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--nxe-ui-space-2) var(--nxe-ui-space-4);padding:var(--nxe-card-pad);border-bottom:1px solid var(--nxe-ui-border)}nxe-card.nxe-card .nxe-card-titles{display:flex;flex-direction:column;gap:2px;min-width:0}nxe-card.nxe-card .nxe-card-heading,nxe-card.nxe-card .nxe-card-title-slot{font-size:var(--nxe-ui-font-size-lg);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-lg)}nxe-card.nxe-card .nxe-card-subheading,nxe-card.nxe-card .nxe-card-subtitle-slot{color:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-card.nxe-card .nxe-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2);margin-inline-start:auto}nxe-card.nxe-card .nxe-card-body{padding:var(--nxe-card-pad)}nxe-card.nxe-card .nxe-card-footer{padding:var(--nxe-card-pad);border-top:1px solid var(--nxe-ui-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-card', host: {
+                        class: 'nxe-card',
+                        '[class]': "'nxe-card-' + variant()",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-card-header\">\r\n    <div class=\"nxe-card-titles\">\r\n        @if (heading()) {\r\n            <div class=\"nxe-card-heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">{{ heading() }}</div>\r\n        }\r\n        <div class=\"nxe-card-title-slot\"><ng-content select=\"[nxeCardTitle]\" /></div>\r\n        @if (subheading()) {\r\n            <div class=\"nxe-card-subheading\">{{ subheading() }}</div>\r\n        }\r\n        <div class=\"nxe-card-subtitle-slot\"><ng-content select=\"[nxeCardSubtitle]\" /></div>\r\n    </div>\r\n    <div class=\"nxe-card-actions\"><ng-content select=\"[nxeCardActions]\" /></div>\r\n</div>\r\n<div class=\"nxe-card-body\"><ng-content /></div>\r\n<div class=\"nxe-card-footer\"><ng-content select=\"[nxeCardFooter]\" /></div>\r\n", styles: ["nxe-card.nxe-card{--nxe-card-pad: var(--nxe-card-padding, calc(var(--nxe-ui-control-min-height) / 2));display:block;box-sizing:border-box;border-radius:var(--nxe-ui-radius-lg);background-color:var(--nxe-ui-surface);color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-card.nxe-card.nxe-card-outlined{border:1px solid var(--nxe-ui-border)}nxe-card.nxe-card.nxe-card-elevated{border:1px solid transparent;box-shadow:var(--nxe-ui-shadow-sm)}nxe-card.nxe-card .nxe-card-title-slot:empty,nxe-card.nxe-card .nxe-card-subtitle-slot:empty,nxe-card.nxe-card .nxe-card-actions:empty,nxe-card.nxe-card .nxe-card-body:empty,nxe-card.nxe-card .nxe-card-footer:empty{display:none}nxe-card.nxe-card .nxe-card-header:not(:has(.nxe-card-heading,.nxe-card-subheading,.nxe-card-title-slot:not(:empty),.nxe-card-subtitle-slot:not(:empty),.nxe-card-actions:not(:empty))){display:none}nxe-card.nxe-card .nxe-card-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--nxe-ui-space-2) var(--nxe-ui-space-4);padding:var(--nxe-card-pad);border-bottom:1px solid var(--nxe-ui-border)}nxe-card.nxe-card .nxe-card-titles{display:flex;flex-direction:column;gap:2px;min-width:0}nxe-card.nxe-card .nxe-card-heading,nxe-card.nxe-card .nxe-card-title-slot{font-size:var(--nxe-ui-font-size-lg);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-lg)}nxe-card.nxe-card .nxe-card-subheading,nxe-card.nxe-card .nxe-card-subtitle-slot{color:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-card.nxe-card .nxe-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2);margin-inline-start:auto}nxe-card.nxe-card .nxe-card-body{padding:var(--nxe-card-pad)}nxe-card.nxe-card .nxe-card-footer{padding:var(--nxe-card-pad);border-top:1px solid var(--nxe-ui-border)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+
+/** Clamps to an integer in `[min, max]`; `fallback` when it is not a number. */
+function clampInt(value, min, max, fallback) {
+    const n = Math.floor(Number(value));
+    return Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : fallback;
+}
+/**
+ * `nxe-description-list` shows label and value pairs, the way a document's details read: PO number,
+ * supplier, dates. It is a real `<dl>` with a `<dt>` and `<dd>` per pair.
+ *
+ * ```html
+ * <nxe-description-list [columns]="3">
+ *     <nxe-description-item label="PO number">PO-2026-0412</nxe-description-item>
+ *     <nxe-description-item label="Supplier">PT Sinar Jaya</nxe-description-item>
+ *     <nxe-description-item label="Notes" [span]="3">{{ po.notes }}</nxe-description-item>
+ * </nxe-description-list>
+ *
+ * <nxe-description-list [items]="[{ label: 'PO number', value: po.number }]" />
+ * ```
+ *
+ * - **Columns** 1 to 4 (`columns`, default 2). The list answers to its own width, not the window's:
+ *   under 48rem three and four columns fall to two, under 28rem everything is one column, so the same
+ *   list works in a wide page, a narrow card or a drawer.
+ * - **Layout** `horizontal` (default) puts the label in a `labelWidth` column (default `10rem`) beside
+ *   the value; `vertical` stacks them.
+ * - **Empty values** show the `placeholder` (default an em dash), which reads as "No value" to a
+ *   screen reader instead of "em dash". An item is empty when it has no content at all, so project
+ *   `{{ value }}` with nothing around it.
+ * - **Content.** Use `nxe-description-item` for a value that is markup (a tag, a link) and `items` for
+ *   plain text. They can be mixed; `items` come first.
+ */
+class NxeDescriptionListComponent {
+    messages = inject(NxeMessageService);
+    /** Label and value pairs; rendered before any projected `nxe-description-item`. */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Columns, 1 to 4. */
+    columns = input(2, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: (v) => clampInt(v, 1, 4, 2) });
+    /** `horizontal` (default) or `vertical`. */
+    layout = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Width of the label column in the horizontal layout: a number is px, a string any CSS length. */
+    labelWidth = input('10rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    /** Shown for an empty value. */
+    placeholder = input('—', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    labelWidthCss = computed(() => {
+        const width = this.labelWidth();
+        return typeof width === 'number' ? `${width}px` : width;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidthCss" }] : /* istanbul ignore next */ []));
+    /** What assistive tech reads in place of the placeholder glyph. */
+    placeholderLabel = computed(() => this.messages.t('display.noValue'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
+    text(entry) {
+        const value = entry.value;
+        return value === null || value === undefined ? '' : String(value).trim();
+    }
+    span(entry) {
+        return clampInt(entry.span, 1, 4, 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDescriptionListComponent, isStandalone: true, selector: "nxe-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-description-list" }, ngImport: i0, template: "<dl\r\n    class=\"nxe-dl\"\r\n    [class]=\"'nxe-dl nxe-dl-cols-' + columns() + ' nxe-dl-' + layout()\"\r\n    [style.--nxe-dl-label-width]=\"labelWidthCss()\">\r\n    @for (entry of items(); track $index) {\r\n        <div class=\"nxe-dl-row\" [class]=\"'nxe-dl-row nxe-dl-span-' + span(entry)\">\r\n            <dt class=\"nxe-dl-label\">{{ entry.label }}</dt>\r\n            <dd\r\n                class=\"nxe-dl-value\"\r\n                [attr.data-placeholder]=\"placeholder()\"\r\n                [attr.data-placeholder-label]=\"placeholderLabel()\">{{ text(entry) }}</dd>\r\n        </div>\r\n    }\r\n    <ng-content />\r\n</dl>\r\n", styles: ["nxe-description-list.nxe-description-list{display:block;container:nxe-dl/inline-size;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-description-list.nxe-description-list .nxe-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nxe-ui-space-3) var(--nxe-ui-space-6);margin:0}nxe-description-list.nxe-description-list .nxe-dl-row{display:grid;gap:var(--nxe-ui-space-1) var(--nxe-ui-space-3);min-width:0}nxe-description-list.nxe-description-list .nxe-dl-horizontal .nxe-dl-row{grid-template-columns:var(--nxe-dl-label-width, 10rem) minmax(0,1fr)}nxe-description-list.nxe-description-list .nxe-dl-vertical .nxe-dl-row{grid-template-columns:minmax(0,1fr)}nxe-description-list.nxe-description-list .nxe-dl-label{margin:0;color:var(--nxe-ui-neutral-600)}nxe-description-list.nxe-description-list .nxe-dl-value{margin:0;min-width:0;overflow-wrap:anywhere}nxe-description-list.nxe-description-list .nxe-dl-value:empty:before{content:attr(data-placeholder);content:attr(data-placeholder)/attr(data-placeholder-label);color:var(--nxe-ui-neutral-600)}nxe-description-list.nxe-description-list .nxe-dl-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-1{grid-column:span 1}nxe-description-list.nxe-description-list .nxe-dl-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-2{grid-column:span 2}nxe-description-list.nxe-description-list .nxe-dl-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-3{grid-column:span 3}nxe-description-list.nxe-description-list .nxe-dl-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-4{grid-column:span 4}nxe-description-list.nxe-description-list nxe-description-item{display:contents}@container nxe-dl (max-width: 48rem){nxe-description-list.nxe-description-list .nxe-dl-cols-3,nxe-description-list.nxe-description-list .nxe-dl-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-3,nxe-description-list.nxe-description-list .nxe-dl-span-4{grid-column:span 2}}@container nxe-dl (max-width: 28rem){nxe-description-list.nxe-description-list .nxe-dl-cols-2,nxe-description-list.nxe-description-list .nxe-dl-cols-3,nxe-description-list.nxe-description-list .nxe-dl-cols-4{grid-template-columns:minmax(0,1fr)}nxe-description-list.nxe-description-list .nxe-dl-span-2,nxe-description-list.nxe-description-list .nxe-dl-span-3,nxe-description-list.nxe-description-list .nxe-dl-span-4{grid-column:auto}nxe-description-list.nxe-description-list .nxe-dl-horizontal .nxe-dl-row{grid-template-columns:minmax(0,1fr)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDescriptionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-description-list', host: { class: 'nxe-description-list' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl\r\n    class=\"nxe-dl\"\r\n    [class]=\"'nxe-dl nxe-dl-cols-' + columns() + ' nxe-dl-' + layout()\"\r\n    [style.--nxe-dl-label-width]=\"labelWidthCss()\">\r\n    @for (entry of items(); track $index) {\r\n        <div class=\"nxe-dl-row\" [class]=\"'nxe-dl-row nxe-dl-span-' + span(entry)\">\r\n            <dt class=\"nxe-dl-label\">{{ entry.label }}</dt>\r\n            <dd\r\n                class=\"nxe-dl-value\"\r\n                [attr.data-placeholder]=\"placeholder()\"\r\n                [attr.data-placeholder-label]=\"placeholderLabel()\">{{ text(entry) }}</dd>\r\n        </div>\r\n    }\r\n    <ng-content />\r\n</dl>\r\n", styles: ["nxe-description-list.nxe-description-list{display:block;container:nxe-dl/inline-size;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-description-list.nxe-description-list .nxe-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nxe-ui-space-3) var(--nxe-ui-space-6);margin:0}nxe-description-list.nxe-description-list .nxe-dl-row{display:grid;gap:var(--nxe-ui-space-1) var(--nxe-ui-space-3);min-width:0}nxe-description-list.nxe-description-list .nxe-dl-horizontal .nxe-dl-row{grid-template-columns:var(--nxe-dl-label-width, 10rem) minmax(0,1fr)}nxe-description-list.nxe-description-list .nxe-dl-vertical .nxe-dl-row{grid-template-columns:minmax(0,1fr)}nxe-description-list.nxe-description-list .nxe-dl-label{margin:0;color:var(--nxe-ui-neutral-600)}nxe-description-list.nxe-description-list .nxe-dl-value{margin:0;min-width:0;overflow-wrap:anywhere}nxe-description-list.nxe-description-list .nxe-dl-value:empty:before{content:attr(data-placeholder);content:attr(data-placeholder)/attr(data-placeholder-label);color:var(--nxe-ui-neutral-600)}nxe-description-list.nxe-description-list .nxe-dl-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-1{grid-column:span 1}nxe-description-list.nxe-description-list .nxe-dl-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-2{grid-column:span 2}nxe-description-list.nxe-description-list .nxe-dl-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-3{grid-column:span 3}nxe-description-list.nxe-description-list .nxe-dl-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-4{grid-column:span 4}nxe-description-list.nxe-description-list nxe-description-item{display:contents}@container nxe-dl (max-width: 48rem){nxe-description-list.nxe-description-list .nxe-dl-cols-3,nxe-description-list.nxe-description-list .nxe-dl-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}nxe-description-list.nxe-description-list .nxe-dl-span-3,nxe-description-list.nxe-description-list .nxe-dl-span-4{grid-column:span 2}}@container nxe-dl (max-width: 28rem){nxe-description-list.nxe-description-list .nxe-dl-cols-2,nxe-description-list.nxe-description-list .nxe-dl-cols-3,nxe-description-list.nxe-description-list .nxe-dl-cols-4{grid-template-columns:minmax(0,1fr)}nxe-description-list.nxe-description-list .nxe-dl-span-2,nxe-description-list.nxe-description-list .nxe-dl-span-3,nxe-description-list.nxe-description-list .nxe-dl-span-4{grid-column:auto}nxe-description-list.nxe-description-list .nxe-dl-horizontal .nxe-dl-row{grid-template-columns:minmax(0,1fr)}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * One label and value of an {@link NxeDescriptionListComponent}; the projected content is the value.
+ * It draws a `<dt>` and `<dd>` inside the list's `<dl>` and takes no box of its own.
+ *
+ * ```html
+ * <nxe-description-item label="Status"><nxe-tag family="success">Disetujui</nxe-tag></nxe-description-item>
+ * ```
+ *
+ * With nothing projected the list's placeholder shows instead.
+ */
+class NxeDescriptionItemComponent {
+    list = inject(NxeDescriptionListComponent, { optional: true });
+    /** The term. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Columns the pair spans, 1 to 4. */
+    span = input(1, { ...(ngDevMode ? { debugName: "span" } : /* istanbul ignore next */ {}), transform: (v) => {
+            const n = Math.floor(Number(v));
+            return Number.isFinite(n) ? Math.min(4, Math.max(1, n)) : 1;
+        } });
+    placeholder = computed(() => this.list?.placeholder() ?? '—', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholderLabel = computed(() => this.list?.placeholderLabel() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDescriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeDescriptionItemComponent, isStandalone: true, selector: "nxe-description-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "none" }, classAttribute: "nxe-description-item" }, ngImport: i0, template: "<div class=\"nxe-dl-row\" [class]=\"'nxe-dl-row nxe-dl-span-' + span()\">\r\n    <dt class=\"nxe-dl-label\">{{ label() }}</dt>\r\n    <dd\r\n        class=\"nxe-dl-value\"\r\n        [attr.data-placeholder]=\"placeholder()\"\r\n        [attr.data-placeholder-label]=\"placeholderLabel()\"><ng-content /></dd>\r\n</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDescriptionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-description-item', host: { class: 'nxe-description-item', role: 'none' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-dl-row\" [class]=\"'nxe-dl-row nxe-dl-span-' + span()\">\r\n    <dt class=\"nxe-dl-label\">{{ label() }}</dt>\r\n    <dd\r\n        class=\"nxe-dl-value\"\r\n        [attr.data-placeholder]=\"placeholder()\"\r\n        [attr.data-placeholder-label]=\"placeholderLabel()\"><ng-content /></dd>\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }] } });
+
+/**
+ * Marks an element (an inline `<svg>`, an `<i>`) as the icon inside a timeline item's dot, in place of
+ * the plain dot. It is decorative: the title says what happened.
+ *
+ * ```html
+ * <nxe-timeline-item title="Approved" family="success">
+ *     <svg nxeTimelineIcon viewBox="0 0 16 16"><path d="M3 8.5l3 3L13 5" /></svg>
+ * </nxe-timeline-item>
+ * ```
+ */
+class NxeTimelineIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTimelineIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeTimelineIconDirective, isStandalone: true, selector: "[nxeTimelineIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTimelineIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeTimelineIcon]',
+                }]
+        }] });
+
+/** Any accepted time as a valid Luxon `DateTime`, or `null` when it is missing or unparseable. */
+function toTimelineDateTime(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    let parsed;
+    if (DateTime.isDateTime(value)) {
+        parsed = value;
+    }
+    else if (value instanceof Date) {
+        parsed = DateTime.fromJSDate(value);
+    }
+    else if (typeof value === 'number') {
+        parsed = DateTime.fromMillis(value);
+    }
+    else {
+        parsed = DateTime.fromISO(value);
+        if (!parsed.isValid) {
+            parsed = DateTime.fromJSDate(new Date(value));
+        }
+    }
+    return parsed.isValid ? parsed : null;
+}
+/**
+ * One entry of an {@link NxeTimelineComponent}. It draws nothing itself: the timeline renders the
+ * `<li>` from the inputs and content declared here, so the list stays a real `<ol>` of `<li>`s.
+ *
+ * ```html
+ * <nxe-timeline-item
+ *     title="PO confirmed"
+ *     actor="CV Pagoda Jaya"
+ *     [time]="event.at"
+ *     family="success"
+ *     description="Delivery set for 9 Oct">
+ *     <a href="/pos/42">PO-HWG-2610-0042</a>
+ * </nxe-timeline-item>
+ * <nxe-timeline-item title="Delivery" pending />
+ * ```
+ *
+ * Projected content is the item's body under the description; `[nxeTimelineIcon]` is the dot's icon.
+ */
+class NxeTimelineItemComponent {
+    /** What happened. */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** A line under the title. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Who did it: a person, a company or "System". */
+    actor = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actor" }] : /* istanbul ignore next */ []));
+    /** When it happened. */
+    time = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    /** Status family of the dot (and of the status tag, when `statusLabel` is set). */
+    family = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "family" }] : /* istanbul ignore next */ []));
+    /** Shown as a status tag beside the title, so the status is words and not only a colour. */
+    statusLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusLabel" }] : /* istanbul ignore next */ []));
+    /** Something still to come: a dashed, hollow dot and "Pending" for assistive technology. */
+    pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    iconDirective = contentChild(NxeTimelineIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconDirective" }] : /* istanbul ignore next */ []));
+    iconTemplate = viewChild.required('icon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    bodyTemplate = viewChild.required('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : /* istanbul ignore next */ []));
+    /** The time as a Luxon `DateTime`, or `null`. */
+    dateTime = computed(() => toTimelineDateTime(this.time()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTime" }] : /* istanbul ignore next */ []));
+    /** True when an `[nxeTimelineIcon]` was projected. */
+    hasIcon = computed(() => this.iconDirective() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    /** The icon slot, to stamp into the dot. */
+    icon = computed(() => this.iconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** The body slot, to stamp under the description. */
+    body = computed(() => this.bodyTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeTimelineItemComponent, isStandalone: true, selector: "nxe-timeline-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actor: { classPropertyName: "actor", publicName: "actor", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, family: { classPropertyName: "family", publicName: "family", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-timeline-item-def" }, queries: [{ propertyName: "iconDirective", first: true, predicate: NxeTimelineIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template #icon><ng-content select="[nxeTimelineIcon]" /></ng-template>
+        <ng-template #body><ng-content /></ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-timeline-item',
+                    template: `
+        <ng-template #icon><ng-content select="[nxeTimelineIcon]" /></ng-template>
+        <ng-template #body><ng-content /></ng-template>
+    `,
+                    host: { class: 'nxe-timeline-item-def' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actor: [{ type: i0.Input, args: [{ isSignal: true, alias: "actor", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], family: [{ type: i0.Input, args: [{ isSignal: true, alias: "family", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], iconDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeTimelineIconDirective), { isSignal: true }] }], iconTemplate: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }], bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
+
+/**
+ * `nxe-timeline` lists what happened to something, newest or oldest first as you give it: a document's
+ * status history, an approval trail, an activity log.
+ *
+ * ```html
+ * <nxe-timeline label="Activity" timeFormat="auto">
+ *     <nxe-timeline-item title="PO confirmed" actor="CV Pagoda Jaya" [time]="at" family="success" />
+ *     <nxe-timeline-item title="PO sent" actor="Siti A." [time]="earlier" family="info" />
+ *     <nxe-timeline-item title="Delivery" pending />
+ * </nxe-timeline>
+ * ```
+ *
+ * It is a real `<ol>` of `<li>`, each time is a `<time datetime>`, and the dot is decorative: the title (and
+ * `statusLabel`, which adds a status tag) carries the meaning, and a `pending` entry is announced as pending.
+ * Time text follows the active locale (`NxeMessageService`, through Luxon), so it switches language with the rest.
+ *
+ * `layout="alternate"` puts the entries on both sides of a centre rail once the timeline is 520px wide or
+ * more, and falls back to the left layout below that.
+ */
+class NxeTimelineComponent {
+    /** `left` (default) or `alternate`. */
+    layout = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** `comfortable` (default) or `compact`. */
+    density = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    /** `absolute` (default), `relative` or `auto`. */
+    timeFormat = input('absolute', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** Luxon format string for absolute times (`'dd MMM yyyy HH:mm'`); unset uses the locale's medium date and time. */
+    absoluteFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "absoluteFormat" }] : /* istanbul ignore next */ []));
+    /** What "now" is for relative times. Unset, the moment each time is formatted. */
+    now = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the list. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    items = contentChildren(NxeTimelineItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    messages = inject(NxeMessageService);
+    pendingText = computed(() => this.messages.t('timeline.pending'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingText" }] : /* istanbul ignore next */ []));
+    views = computed(() => {
+        const locale = this.messages.locale();
+        const mode = this.timeFormat();
+        const absoluteFormat = this.absoluteFormat();
+        const now = toTimelineDateTime(this.now()) ?? DateTime.now();
+        return this.items().map((item) => {
+            const dt = item.dateTime()?.setLocale(locale) ?? null;
+            if (!dt) {
+                return { item, iso: null, text: '', tooltip: null };
+            }
+            const absolute = absoluteFormat ? dt.toFormat(absoluteFormat) : dt.toLocaleString(DateTime.DATETIME_MED);
+            const relative = mode === 'absolute' || (mode === 'auto' && Math.abs(dt.diff(now, 'days').days) >= 7)
+                ? null
+                : dt.toRelative({ base: now });
+            return {
+                item,
+                iso: dt.toISO(),
+                text: relative ?? absolute,
+                tooltip: relative ? absolute : null,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTimelineComponent, isStandalone: true, selector: "nxe-timeline", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, absoluteFormat: { classPropertyName: "absoluteFormat", publicName: "absoluteFormat", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'nxe-timeline-layout-' + layout() + ' nxe-timeline-density-' + density()" }, classAttribute: "nxe-timeline" }, queries: [{ propertyName: "items", predicate: NxeTimelineItemComponent, isSignal: true }], ngImport: i0, template: "<ol class=\"nxe-timeline-list\" [attr.aria-label]=\"label() || null\">\r\n    @for (view of views(); track view.item) {\r\n        <li\r\n            class=\"nxe-timeline-entry nxe-timeline-family-{{ view.item.family() }}\"\r\n            [class.nxe-timeline-pending]=\"view.item.pending()\"\r\n            [class.nxe-timeline-has-icon]=\"view.item.hasIcon()\">\r\n            <div class=\"nxe-timeline-rail\" aria-hidden=\"true\">\r\n                <span class=\"nxe-timeline-dot\">\r\n                    @if (view.item.hasIcon()) {\r\n                        <ng-container [ngTemplateOutlet]=\"view.item.icon()\" />\r\n                    }\r\n                </span>\r\n            </div>\r\n            <div class=\"nxe-timeline-body\">\r\n                <div class=\"nxe-timeline-head\">\r\n                    @if (view.item.pending()) {\r\n                        <span class=\"nxe-timeline-hidden\">{{ pendingText() }}: </span>\r\n                    }\r\n                    <span class=\"nxe-timeline-title\">{{ view.item.title() }}</span>\r\n                    @if (view.item.statusLabel()) {\r\n                        <nxe-tag size=\"sm\" [family]=\"view.item.family()\" dot>{{ view.item.statusLabel() }}</nxe-tag>\r\n                    }\r\n                </div>\r\n                @if (view.iso || view.item.actor()) {\r\n                    <div class=\"nxe-timeline-meta\">\r\n                        @if (view.iso) {\r\n                            <time class=\"nxe-timeline-time\" [attr.datetime]=\"view.iso\" [attr.title]=\"view.tooltip\">{{ view.text }}</time>\r\n                        }\r\n                        @if (view.iso && view.item.actor()) {\r\n                            <span class=\"nxe-timeline-sep\" aria-hidden=\"true\">&middot;</span>\r\n                        }\r\n                        @if (view.item.actor()) {\r\n                            <span class=\"nxe-timeline-actor\">{{ view.item.actor() }}</span>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (view.item.description()) {\r\n                    <p class=\"nxe-timeline-description\">{{ view.item.description() }}</p>\r\n                }\r\n                <div class=\"nxe-timeline-content\"><ng-container [ngTemplateOutlet]=\"view.item.body()\" /></div>\r\n            </div>\r\n        </li>\r\n    }\r\n</ol>\r\n", styles: ["nxe-timeline.nxe-timeline{--nxe-timeline-dot: var(--nxe-ui-space-3);--nxe-timeline-rail: var(--nxe-ui-space-6);--nxe-timeline-gap: var(--nxe-ui-space-5);--nxe-status-border-style: solid;display:block;container-type:inline-size;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-timeline.nxe-timeline.nxe-timeline-density-compact{--nxe-timeline-gap: var(--nxe-ui-space-2)}nxe-timeline.nxe-timeline .nxe-timeline-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-timeline.nxe-timeline .nxe-timeline-list{margin:0;padding:0;list-style:none}nxe-timeline.nxe-timeline .nxe-timeline-family-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-muted{--nxe-status-border-style: dashed}nxe-timeline.nxe-timeline .nxe-timeline-entry{display:grid;grid-template-columns:var(--nxe-timeline-rail) minmax(0,1fr);column-gap:var(--nxe-ui-space-2)}nxe-timeline.nxe-timeline .nxe-timeline-rail{position:relative;grid-column:1;grid-row:1;display:flex;justify-content:center}nxe-timeline.nxe-timeline .nxe-timeline-rail:after{content:\"\";position:absolute;inset-block:calc(var(--nxe-timeline-dot) + var(--nxe-ui-space-2) + var(--nxe-ui-space-1)) 0;inset-inline-start:50%;border-inline-start:1px solid var(--nxe-ui-border)}nxe-timeline.nxe-timeline .nxe-timeline-entry:last-child .nxe-timeline-rail:after{display:none}nxe-timeline.nxe-timeline .nxe-timeline-dot{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-timeline-dot);height:var(--nxe-timeline-dot);margin-top:var(--nxe-ui-space-1);border-radius:var(--nxe-ui-radius-pill);background:var(--nxe-status-fg);box-shadow:0 0 0 var(--nxe-ui-space-1) var(--nxe-ui-surface);color:var(--nxe-status-fg)}nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-dot{width:calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1));height:calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1));margin-top:0;border:1px solid var(--nxe-status-border);background:var(--nxe-status-bg)}nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-dot svg,nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-dot i{width:var(--nxe-ui-font-size-md);height:var(--nxe-ui-font-size-md);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-rail:after{inset-block-start:calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1) + var(--nxe-ui-space-1))}nxe-timeline.nxe-timeline .nxe-timeline-pending .nxe-timeline-dot{border:2px dashed var(--nxe-status-fg);background:var(--nxe-ui-surface)}nxe-timeline.nxe-timeline .nxe-timeline-pending .nxe-timeline-rail:after{border-inline-start-style:dashed}nxe-timeline.nxe-timeline .nxe-timeline-pending .nxe-timeline-title{color:var(--nxe-ui-text-muted);font-weight:var(--nxe-ui-font-weight)}nxe-timeline.nxe-timeline .nxe-timeline-body{grid-column:2;grid-row:1;min-width:0;padding-bottom:var(--nxe-timeline-gap)}nxe-timeline.nxe-timeline .nxe-timeline-entry:last-child .nxe-timeline-body{padding-bottom:0}nxe-timeline.nxe-timeline .nxe-timeline-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2)}nxe-timeline.nxe-timeline .nxe-timeline-title{font-weight:var(--nxe-ui-font-weight-semibold)}nxe-timeline.nxe-timeline .nxe-timeline-meta{display:flex;flex-wrap:wrap;gap:var(--nxe-ui-space-1) var(--nxe-ui-space-2);color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-sm)}nxe-timeline.nxe-timeline .nxe-timeline-time{font-variant-numeric:tabular-nums}nxe-timeline.nxe-timeline .nxe-timeline-description{margin:var(--nxe-ui-space-1) 0 0;font-size:var(--nxe-ui-font-size-sm)}nxe-timeline.nxe-timeline .nxe-timeline-content{margin-top:var(--nxe-ui-space-2);font-size:var(--nxe-ui-font-size-sm)}nxe-timeline.nxe-timeline .nxe-timeline-content:empty{display:none}@container (min-width: 520px){nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry{grid-template-columns:minmax(0,1fr) var(--nxe-timeline-rail) minmax(0,1fr)}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-rail{grid-column:2}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(odd) .nxe-timeline-body{grid-column:1;text-align:end}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(odd) .nxe-timeline-body .nxe-timeline-head,nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(odd) .nxe-timeline-body .nxe-timeline-meta{justify-content:flex-end}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(2n) .nxe-timeline-body{grid-column:3}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxeTagComponent, selector: "nxe-tag", inputs: ["family", "stylingMode", "size", "dot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-timeline', imports: [NgTemplateOutlet, NxeTagComponent], host: {
+                        class: 'nxe-timeline',
+                        '[class]': "'nxe-timeline-layout-' + layout() + ' nxe-timeline-density-' + density()",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ol class=\"nxe-timeline-list\" [attr.aria-label]=\"label() || null\">\r\n    @for (view of views(); track view.item) {\r\n        <li\r\n            class=\"nxe-timeline-entry nxe-timeline-family-{{ view.item.family() }}\"\r\n            [class.nxe-timeline-pending]=\"view.item.pending()\"\r\n            [class.nxe-timeline-has-icon]=\"view.item.hasIcon()\">\r\n            <div class=\"nxe-timeline-rail\" aria-hidden=\"true\">\r\n                <span class=\"nxe-timeline-dot\">\r\n                    @if (view.item.hasIcon()) {\r\n                        <ng-container [ngTemplateOutlet]=\"view.item.icon()\" />\r\n                    }\r\n                </span>\r\n            </div>\r\n            <div class=\"nxe-timeline-body\">\r\n                <div class=\"nxe-timeline-head\">\r\n                    @if (view.item.pending()) {\r\n                        <span class=\"nxe-timeline-hidden\">{{ pendingText() }}: </span>\r\n                    }\r\n                    <span class=\"nxe-timeline-title\">{{ view.item.title() }}</span>\r\n                    @if (view.item.statusLabel()) {\r\n                        <nxe-tag size=\"sm\" [family]=\"view.item.family()\" dot>{{ view.item.statusLabel() }}</nxe-tag>\r\n                    }\r\n                </div>\r\n                @if (view.iso || view.item.actor()) {\r\n                    <div class=\"nxe-timeline-meta\">\r\n                        @if (view.iso) {\r\n                            <time class=\"nxe-timeline-time\" [attr.datetime]=\"view.iso\" [attr.title]=\"view.tooltip\">{{ view.text }}</time>\r\n                        }\r\n                        @if (view.iso && view.item.actor()) {\r\n                            <span class=\"nxe-timeline-sep\" aria-hidden=\"true\">&middot;</span>\r\n                        }\r\n                        @if (view.item.actor()) {\r\n                            <span class=\"nxe-timeline-actor\">{{ view.item.actor() }}</span>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (view.item.description()) {\r\n                    <p class=\"nxe-timeline-description\">{{ view.item.description() }}</p>\r\n                }\r\n                <div class=\"nxe-timeline-content\"><ng-container [ngTemplateOutlet]=\"view.item.body()\" /></div>\r\n            </div>\r\n        </li>\r\n    }\r\n</ol>\r\n", styles: ["nxe-timeline.nxe-timeline{--nxe-timeline-dot: var(--nxe-ui-space-3);--nxe-timeline-rail: var(--nxe-ui-space-6);--nxe-timeline-gap: var(--nxe-ui-space-5);--nxe-status-border-style: solid;display:block;container-type:inline-size;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}nxe-timeline.nxe-timeline.nxe-timeline-density-compact{--nxe-timeline-gap: var(--nxe-ui-space-2)}nxe-timeline.nxe-timeline .nxe-timeline-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-timeline.nxe-timeline .nxe-timeline-list{margin:0;padding:0;list-style:none}nxe-timeline.nxe-timeline .nxe-timeline-family-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-timeline.nxe-timeline .nxe-timeline-family-muted{--nxe-status-border-style: dashed}nxe-timeline.nxe-timeline .nxe-timeline-entry{display:grid;grid-template-columns:var(--nxe-timeline-rail) minmax(0,1fr);column-gap:var(--nxe-ui-space-2)}nxe-timeline.nxe-timeline .nxe-timeline-rail{position:relative;grid-column:1;grid-row:1;display:flex;justify-content:center}nxe-timeline.nxe-timeline .nxe-timeline-rail:after{content:\"\";position:absolute;inset-block:calc(var(--nxe-timeline-dot) + var(--nxe-ui-space-2) + var(--nxe-ui-space-1)) 0;inset-inline-start:50%;border-inline-start:1px solid var(--nxe-ui-border)}nxe-timeline.nxe-timeline .nxe-timeline-entry:last-child .nxe-timeline-rail:after{display:none}nxe-timeline.nxe-timeline .nxe-timeline-dot{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-timeline-dot);height:var(--nxe-timeline-dot);margin-top:var(--nxe-ui-space-1);border-radius:var(--nxe-ui-radius-pill);background:var(--nxe-status-fg);box-shadow:0 0 0 var(--nxe-ui-space-1) var(--nxe-ui-surface);color:var(--nxe-status-fg)}nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-dot{width:calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1));height:calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1));margin-top:0;border:1px solid var(--nxe-status-border);background:var(--nxe-status-bg)}nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-dot svg,nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-dot i{width:var(--nxe-ui-font-size-md);height:var(--nxe-ui-font-size-md);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}nxe-timeline.nxe-timeline .nxe-timeline-has-icon .nxe-timeline-rail:after{inset-block-start:calc(var(--nxe-ui-space-5) + var(--nxe-ui-space-1) + var(--nxe-ui-space-1))}nxe-timeline.nxe-timeline .nxe-timeline-pending .nxe-timeline-dot{border:2px dashed var(--nxe-status-fg);background:var(--nxe-ui-surface)}nxe-timeline.nxe-timeline .nxe-timeline-pending .nxe-timeline-rail:after{border-inline-start-style:dashed}nxe-timeline.nxe-timeline .nxe-timeline-pending .nxe-timeline-title{color:var(--nxe-ui-text-muted);font-weight:var(--nxe-ui-font-weight)}nxe-timeline.nxe-timeline .nxe-timeline-body{grid-column:2;grid-row:1;min-width:0;padding-bottom:var(--nxe-timeline-gap)}nxe-timeline.nxe-timeline .nxe-timeline-entry:last-child .nxe-timeline-body{padding-bottom:0}nxe-timeline.nxe-timeline .nxe-timeline-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2)}nxe-timeline.nxe-timeline .nxe-timeline-title{font-weight:var(--nxe-ui-font-weight-semibold)}nxe-timeline.nxe-timeline .nxe-timeline-meta{display:flex;flex-wrap:wrap;gap:var(--nxe-ui-space-1) var(--nxe-ui-space-2);color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-sm)}nxe-timeline.nxe-timeline .nxe-timeline-time{font-variant-numeric:tabular-nums}nxe-timeline.nxe-timeline .nxe-timeline-description{margin:var(--nxe-ui-space-1) 0 0;font-size:var(--nxe-ui-font-size-sm)}nxe-timeline.nxe-timeline .nxe-timeline-content{margin-top:var(--nxe-ui-space-2);font-size:var(--nxe-ui-font-size-sm)}nxe-timeline.nxe-timeline .nxe-timeline-content:empty{display:none}@container (min-width: 520px){nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry{grid-template-columns:minmax(0,1fr) var(--nxe-timeline-rail) minmax(0,1fr)}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-rail{grid-column:2}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(odd) .nxe-timeline-body{grid-column:1;text-align:end}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(odd) .nxe-timeline-body .nxe-timeline-head,nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(odd) .nxe-timeline-body .nxe-timeline-meta{justify-content:flex-end}nxe-timeline.nxe-timeline-layout-alternate .nxe-timeline-entry:nth-child(2n) .nxe-timeline-body{grid-column:3}}\n"] }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], absoluteFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteFormat", required: false }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTimelineItemComponent), { isSignal: true }] }] } });
+
+/** @internal */
+const NXE_AVATAR_GROUP = new InjectionToken('NXE_AVATAR_GROUP');
+
+/**
+ * Words that are a form of address or a legal form rather than part of the name: Indonesian and
+ * English honorifics (`Bapak`, `Ibu`, `Dr.`, `Ir.`, `H.`, `Hj.`, `Prof.`, `Drs.`) and company prefixes
+ * (`PT`, `CV`, `UD`, `PD`). `PT Maju Jaya` is "MJ", not "PM".
+ */
+const NOISE = new Set([
+    'bapak', 'bpk', 'ibu', 'sdr', 'sdri', 'tn', 'ny', 'nn',
+    'dr', 'drs', 'dra', 'ir', 'prof', 'h', 'hj', 'kh', 'mr', 'mrs', 'ms', 'mx',
+    'pt', 'cv', 'ud', 'pd', 'yayasan', 'tbk',
+]);
+/** First letter or digit of a word, upper-cased; `''` when there is none. */
+function firstGlyph(word) {
+    const match = word.match(/[\p{L}\p{N}]/u);
+    return match ? match[0].toLocaleUpperCase() : '';
+}
+/**
+ * Up to two initials for a person's or company's name.
+ *
+ * - First and last word: `Siti Nur Aisyah` is "SA".
+ * - **A single name** (common in Indonesia: `Suharto`, `Megawati`) gives its first two letters,
+ *   "SU", because one letter tells a list of avatars nothing apart. A one-letter name gives one.
+ * - A title or legal form is skipped (`Dr. Ir. H. Budi Santoso` is "BS", `PT Maju Jaya` is "MJ"),
+ *   and so is everything after the first comma (`Budi Santoso, S.Kom., M.T.` is "BS").
+ * - Letters from any script are kept (`李雷` is "李雷"); characters outside the BMP are not split.
+ *
+ * Returns `''` for an empty or symbol-only name, where the avatar draws a person glyph instead.
+ */
+function nxeAvatarInitials(name) {
+    const head = (name ?? '').split(',')[0];
+    const words = head
+        .split(/[\s._]+/u)
+        .map((word) => word.replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu, ''))
+        .filter((word) => word !== '' && /[\p{L}\p{N}]/u.test(word));
+    const meaningful = words.filter((word) => !NOISE.has(word.toLocaleLowerCase()));
+    const used = meaningful.length > 0 ? meaningful : words;
+    if (used.length === 0) {
+        return '';
+    }
+    if (used.length === 1) {
+        const letters = Array.from(used[0]).filter((glyph) => /[\p{L}\p{N}]/u.test(glyph));
+        return letters.slice(0, 2).join('').toLocaleUpperCase();
+    }
+    return firstGlyph(used[0]) + firstGlyph(used[used.length - 1]);
+}
+/**
+ * The twelve avatar colours: the six status families, each subtle and solid, interleaved so that
+ * neighbouring hash values differ in hue. Both modes pair a family's `fg` with its `bg` (swapped for
+ * solid), the same pairs `nxe-tag` ships, so every entry keeps its initials at 4.5:1 or more in the
+ * light and the dark theme (`nxe-avatar-contrast.spec.ts` measures all twelve).
+ */
+const NXE_AVATAR_TONES = [
+    { family: 'info', mode: 'solid' },
+    { family: 'success', mode: 'subtle' },
+    { family: 'attention', mode: 'solid' },
+    { family: 'neutral', mode: 'subtle' },
+    { family: 'danger', mode: 'solid' },
+    { family: 'info', mode: 'subtle' },
+    { family: 'success', mode: 'solid' },
+    { family: 'attention', mode: 'subtle' },
+    { family: 'muted', mode: 'solid' },
+    { family: 'danger', mode: 'subtle' },
+    { family: 'neutral', mode: 'solid' },
+    { family: 'muted', mode: 'subtle' },
+];
+/**
+ * Which of {@link NXE_AVATAR_TONES} a name gets: a 32-bit FNV-1a hash of the trimmed, case-folded
+ * name, modulo twelve. The same name always gives the same colour, in every session and on every
+ * device, and `Siti` and `siti ` agree.
+ */
+function nxeAvatarToneIndex(name) {
+    const text = (name ?? '').trim().toLocaleLowerCase();
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < text.length; i++) {
+        hash ^= text.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return hash % NXE_AVATAR_TONES.length;
+}
+
+const STATUS_FAMILY = {
+    online: 'success',
+    away: 'attention',
+    busy: 'danger',
+    offline: 'muted',
+};
+/**
+ * `nxe-avatar` shows who or what something belongs to: a picture, or when there is none (or it fails
+ * to load) the initials of the name on a colour the name always gets.
+ *
+ * ```html
+ * <nxe-avatar name="Siti Nur Aisyah" src="/photos/siti.jpg" />
+ * <nxe-avatar name="PT Maju Jaya" shape="square" size="lg" />
+ * <nxe-avatar name="Budi" status="online" />
+ * ```
+ *
+ * **Initials.** From `name`: first and last word, skipping titles and company forms (`Dr. Ir. H. Budi
+ * Santoso, M.T.` is "BS", `PT Maju Jaya` is "MJ"); a single name, common in Indonesia, gives its first
+ * two letters (`Suharto` is "SU"). `initials` overrides. With no name it draws a person glyph.
+ *
+ * **Colour.** The name picks one of twelve status-family pairs (six families, tinted or inverted) by a
+ * stable hash, so a person is the same colour everywhere. Every pair keeps the initials at 4.5:1 or
+ * more in both themes. `color` fixes a family instead. No colour carries meaning: the name does.
+ *
+ * **Accessibility.** The avatar is a labelled image, `role="img"`, named by `alt`, else by `name`
+ * (plus the status, if any: "Siti Nur Aisyah, Online"). Next to the person's name in text it adds
+ * nothing, so set `decorative` (or `alt=""`) and it is hidden from assistive technology. With neither
+ * a label nor a name it is hidden too. The picture itself is always presentational.
+ */
+class NxeAvatarComponent {
+    messages = inject(NxeMessageService);
+    group = inject(NXE_AVATAR_GROUP, { optional: true });
+    /** The person's or company's name: source of the initials, the colour and the accessible name. */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Picture URL. When it is empty or fails to load, the initials show. */
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Accessible name. Default: `name`. `''` makes the avatar decorative. */
+    alt = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Hide from assistive technology: use beside the name written out as text. */
+    decorative = input(false, { ...(ngDevMode ? { debugName: "decorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Initials to show instead of those derived from `name`. */
+    initials = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    /** `xs`, `sm`, `md` (default), `lg`, `xl`. In an `nxe-avatar-group` the group's size. */
+    sizeInput = input(undefined, { ...(ngDevMode ? { debugName: "sizeInput" } : /* istanbul ignore next */ {}), alias: 'size' });
+    /** `circle` (default) or `square`. In an `nxe-avatar-group` the group's shape. */
+    shapeInput = input(undefined, { ...(ngDevMode ? { debugName: "shapeInput" } : /* istanbul ignore next */ {}), alias: 'shape' });
+    /** Presence dot at the bottom corner. Its word joins the accessible name. */
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** `auto` (default) derives the colour from the name; a status family fixes it. */
+    color = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = computed(() => this.sizeInput() ?? this.group?.size() ?? 'md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = computed(() => this.shapeInput() ?? this.group?.shape() ?? 'circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** True once the picture failed to load; a new `src` gets a fresh try. */
+    failed = linkedSignal({ ...(ngDevMode ? { debugName: "failed" } : /* istanbul ignore next */ {}), source: this.src,
+        computation: () => false });
+    showImage = computed(() => !!this.src() && !this.failed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
+    text = computed(() => {
+        const given = this.initials();
+        return given ? given : nxeAvatarInitials(this.name());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Beyond the group's `max`: not drawn. */
+    overflow = computed(() => !!this.group?.isOverflow(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    toneClass = computed(() => {
+        const color = this.color();
+        if (color !== 'auto') {
+            return `nxe-avatar-${color} nxe-avatar-mode-subtle`;
+        }
+        const tone = NXE_AVATAR_TONES[nxeAvatarToneIndex(this.name())];
+        return `nxe-avatar-${tone.family} nxe-avatar-mode-${tone.mode}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
+    statusFamily = computed(() => {
+        const status = this.status();
+        return status ? STATUS_FAMILY[status] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusFamily" }] : /* istanbul ignore next */ []));
+    /** What assistive technology reads, or `''` when the avatar is decorative or unnamed. */
+    label = computed(() => {
+        if (this.decorative()) {
+            return '';
+        }
+        const alt = this.alt();
+        const base = (alt ?? this.name() ?? '').trim();
+        if (alt === '' || base === '') {
+            return '';
+        }
+        const status = this.status();
+        return status ? `${base}, ${this.messages.t(`avatar.status.${status}`)}` : base;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeAvatarComponent, isStandalone: true, selector: "nxe-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shapeInput: { classPropertyName: "shapeInput", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "toneClass()", "class.nxe-avatar-circle": "shape() === 'circle'", "class.nxe-avatar-square": "shape() === 'square'", "class.nxe-avatar-overflow": "overflow()", "attr.data-size": "size()", "attr.role": "label() ? 'img' : null", "attr.aria-label": "label() || null", "attr.aria-hidden": "label() ? null : 'true'" }, classAttribute: "nxe-avatar" }, exportAs: ["nxeAvatar"], ngImport: i0, template: "@if (text(); as letters) {\r\n    <span class=\"nxe-avatar-initials\" aria-hidden=\"true\">{{ letters }}</span>\r\n} @else {\r\n    <svg class=\"nxe-avatar-glyph\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n        <circle cx=\"12\" cy=\"8.5\" r=\"4\" />\r\n        <path d=\"M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z\" />\r\n    </svg>\r\n}\r\n@if (showImage()) {\r\n    <img class=\"nxe-avatar-image\" alt=\"\" [src]=\"src()\" (error)=\"failed.set(true)\" />\r\n}\r\n@if (statusFamily(); as family) {\r\n    <span class=\"nxe-avatar-status nxe-avatar-status-{{ family }}\" aria-hidden=\"true\"></span>\r\n}\r\n", styles: ["nxe-avatar.nxe-avatar{--nxe-avatar-size: 40px;position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-avatar-size);height:var(--nxe-avatar-size);vertical-align:middle;border:1px solid var(--nxe-status-border);background-color:var(--nxe-status-bg);color:var(--nxe-status-fg);font-family:var(--nxe-ui-font-family);font-size:calc(var(--nxe-avatar-size) * .4);font-weight:var(--nxe-ui-font-weight-semibold);line-height:1;letter-spacing:.02em;-webkit-user-select:none;user-select:none}nxe-avatar.nxe-avatar[data-size=xs]{--nxe-avatar-size: 24px}nxe-avatar.nxe-avatar[data-size=sm]{--nxe-avatar-size: 32px}nxe-avatar.nxe-avatar[data-size=md]{--nxe-avatar-size: 40px}nxe-avatar.nxe-avatar[data-size=lg]{--nxe-avatar-size: 56px}nxe-avatar.nxe-avatar[data-size=xl]{--nxe-avatar-size: 80px}nxe-avatar.nxe-avatar.nxe-avatar-circle{border-radius:50%}nxe-avatar.nxe-avatar.nxe-avatar-square{border-radius:var(--nxe-ui-radius-md)}nxe-avatar.nxe-avatar.nxe-avatar-mode-solid{border-color:var(--nxe-status-fg);background-color:var(--nxe-status-fg);color:var(--nxe-status-bg)}nxe-avatar.nxe-avatar.nxe-avatar-overflow{display:none}nxe-avatar.nxe-avatar .nxe-avatar-initials{text-transform:uppercase;white-space:nowrap}nxe-avatar.nxe-avatar .nxe-avatar-glyph{width:62%;height:62%;fill:currentColor}nxe-avatar.nxe-avatar .nxe-avatar-image{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;background-color:var(--nxe-ui-surface)}nxe-avatar.nxe-avatar .nxe-avatar-status{position:absolute;inset-block-end:-1px;inset-inline-end:-1px;box-sizing:border-box;width:max(8px,var(--nxe-avatar-size) * .28);height:max(8px,var(--nxe-avatar-size) * .28);border:2px solid var(--nxe-ui-surface);border-radius:50%}nxe-avatar.nxe-avatar.nxe-avatar-square .nxe-avatar-status{inset-block-end:-3px;inset-inline-end:-3px}nxe-avatar.nxe-avatar-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-avatar.nxe-avatar-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-avatar.nxe-avatar-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-avatar.nxe-avatar-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-avatar.nxe-avatar-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-avatar.nxe-avatar-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-avatar.nxe-avatar-muted{--nxe-status-border-style: dashed}nxe-avatar.nxe-avatar .nxe-avatar-status-success{background-color:var(--nxe-ui-status-success-fg)}nxe-avatar.nxe-avatar .nxe-avatar-status-attention{background-color:var(--nxe-ui-status-attention-fg)}nxe-avatar.nxe-avatar .nxe-avatar-status-danger{background-color:var(--nxe-ui-status-danger-fg)}nxe-avatar.nxe-avatar .nxe-avatar-status-muted{background-color:var(--nxe-ui-status-muted-fg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-avatar', exportAs: 'nxeAvatar', host: {
+                        class: 'nxe-avatar',
+                        '[class]': 'toneClass()',
+                        '[class.nxe-avatar-circle]': "shape() === 'circle'",
+                        '[class.nxe-avatar-square]': "shape() === 'square'",
+                        '[class.nxe-avatar-overflow]': 'overflow()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.role]': "label() ? 'img' : null",
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-hidden]': "label() ? null : 'true'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (text(); as letters) {\r\n    <span class=\"nxe-avatar-initials\" aria-hidden=\"true\">{{ letters }}</span>\r\n} @else {\r\n    <svg class=\"nxe-avatar-glyph\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n        <circle cx=\"12\" cy=\"8.5\" r=\"4\" />\r\n        <path d=\"M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z\" />\r\n    </svg>\r\n}\r\n@if (showImage()) {\r\n    <img class=\"nxe-avatar-image\" alt=\"\" [src]=\"src()\" (error)=\"failed.set(true)\" />\r\n}\r\n@if (statusFamily(); as family) {\r\n    <span class=\"nxe-avatar-status nxe-avatar-status-{{ family }}\" aria-hidden=\"true\"></span>\r\n}\r\n", styles: ["nxe-avatar.nxe-avatar{--nxe-avatar-size: 40px;position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-avatar-size);height:var(--nxe-avatar-size);vertical-align:middle;border:1px solid var(--nxe-status-border);background-color:var(--nxe-status-bg);color:var(--nxe-status-fg);font-family:var(--nxe-ui-font-family);font-size:calc(var(--nxe-avatar-size) * .4);font-weight:var(--nxe-ui-font-weight-semibold);line-height:1;letter-spacing:.02em;-webkit-user-select:none;user-select:none}nxe-avatar.nxe-avatar[data-size=xs]{--nxe-avatar-size: 24px}nxe-avatar.nxe-avatar[data-size=sm]{--nxe-avatar-size: 32px}nxe-avatar.nxe-avatar[data-size=md]{--nxe-avatar-size: 40px}nxe-avatar.nxe-avatar[data-size=lg]{--nxe-avatar-size: 56px}nxe-avatar.nxe-avatar[data-size=xl]{--nxe-avatar-size: 80px}nxe-avatar.nxe-avatar.nxe-avatar-circle{border-radius:50%}nxe-avatar.nxe-avatar.nxe-avatar-square{border-radius:var(--nxe-ui-radius-md)}nxe-avatar.nxe-avatar.nxe-avatar-mode-solid{border-color:var(--nxe-status-fg);background-color:var(--nxe-status-fg);color:var(--nxe-status-bg)}nxe-avatar.nxe-avatar.nxe-avatar-overflow{display:none}nxe-avatar.nxe-avatar .nxe-avatar-initials{text-transform:uppercase;white-space:nowrap}nxe-avatar.nxe-avatar .nxe-avatar-glyph{width:62%;height:62%;fill:currentColor}nxe-avatar.nxe-avatar .nxe-avatar-image{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;background-color:var(--nxe-ui-surface)}nxe-avatar.nxe-avatar .nxe-avatar-status{position:absolute;inset-block-end:-1px;inset-inline-end:-1px;box-sizing:border-box;width:max(8px,var(--nxe-avatar-size) * .28);height:max(8px,var(--nxe-avatar-size) * .28);border:2px solid var(--nxe-ui-surface);border-radius:50%}nxe-avatar.nxe-avatar.nxe-avatar-square .nxe-avatar-status{inset-block-end:-3px;inset-inline-end:-3px}nxe-avatar.nxe-avatar-neutral{--nxe-status-fg: var(--nxe-ui-status-neutral-fg);--nxe-status-bg: var(--nxe-ui-status-neutral-bg);--nxe-status-border: var(--nxe-ui-status-neutral-border)}nxe-avatar.nxe-avatar-info{--nxe-status-fg: var(--nxe-ui-status-info-fg);--nxe-status-bg: var(--nxe-ui-status-info-bg);--nxe-status-border: var(--nxe-ui-status-info-border)}nxe-avatar.nxe-avatar-attention{--nxe-status-fg: var(--nxe-ui-status-attention-fg);--nxe-status-bg: var(--nxe-ui-status-attention-bg);--nxe-status-border: var(--nxe-ui-status-attention-border)}nxe-avatar.nxe-avatar-success{--nxe-status-fg: var(--nxe-ui-status-success-fg);--nxe-status-bg: var(--nxe-ui-status-success-bg);--nxe-status-border: var(--nxe-ui-status-success-border)}nxe-avatar.nxe-avatar-danger{--nxe-status-fg: var(--nxe-ui-status-danger-fg);--nxe-status-bg: var(--nxe-ui-status-danger-bg);--nxe-status-border: var(--nxe-ui-status-danger-border)}nxe-avatar.nxe-avatar-muted{--nxe-status-fg: var(--nxe-ui-status-muted-fg);--nxe-status-bg: var(--nxe-ui-status-muted-bg);--nxe-status-border: var(--nxe-ui-status-muted-border)}nxe-avatar.nxe-avatar-muted{--nxe-status-border-style: dashed}nxe-avatar.nxe-avatar .nxe-avatar-status-success{background-color:var(--nxe-ui-status-success-fg)}nxe-avatar.nxe-avatar .nxe-avatar-status-attention{background-color:var(--nxe-ui-status-attention-fg)}nxe-avatar.nxe-avatar .nxe-avatar-status-danger{background-color:var(--nxe-ui-status-danger-fg)}nxe-avatar.nxe-avatar .nxe-avatar-status-muted{background-color:var(--nxe-ui-status-muted-fg)}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shapeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/**
+ * `nxe-avatar-group` overlaps a row of avatars and, past `max`, folds the rest into a "+N" chip.
+ *
+ * ```html
+ * <nxe-avatar-group [max]="3" size="sm" aria-label="Penyetuju">
+ *     @for (person of approvers(); track person.id) {
+ *         <nxe-avatar [name]="person.name" [src]="person.photo" />
+ *     }
+ * </nxe-avatar-group>
+ * ```
+ *
+ * `max` is how many avatars are drawn (default 5; `null` draws all), so `max=3` over five avatars
+ * shows three and "+2". `size` and `shape` apply to every avatar that does not set its own. The
+ * avatars past `max` are hidden from everyone, not only from the eye. The group is a labelled
+ * `role="group"` when it has an `aria-label`, and the chip reads "2 more".
+ */
+class NxeAvatarGroupComponent {
+    messages = inject(NxeMessageService);
+    /** Avatars drawn before the "+N" chip. Default 5; `null` draws every avatar. */
+    max = input(5, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined || value === '' ? null : numberAttribute(value, 5)) });
+    /** Size of every avatar in the group that has none of its own. Default `md`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Shape of every avatar that has none of its own. Default `circle`. */
+    shape = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the group, such as "Penyetuju". */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    avatars = contentChildren(NxeAvatarComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatars" }] : /* istanbul ignore next */ []));
+    /** How many avatars are folded into the chip. */
+    hidden = computed(() => {
+        const max = this.max();
+        return max === null ? 0 : Math.max(0, this.avatars().length - Math.max(0, max));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    moreLabel = computed(() => this.messages.t('avatar.more', this.hidden()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []));
+    isOverflow(avatar) {
+        const max = this.max();
+        return max !== null && this.avatars().indexOf(avatar) >= Math.max(0, max);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeAvatarGroupComponent, isStandalone: true, selector: "nxe-avatar-group", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "ariaLabel() ? \"group\" : null", "attr.aria-label": "ariaLabel() || null", "attr.data-size": "size()" }, classAttribute: "nxe-avatar-group" }, providers: [{ provide: NXE_AVATAR_GROUP, useExisting: forwardRef(() => NxeAvatarGroupComponent) }], queries: [{ propertyName: "avatars", predicate: NxeAvatarComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\r\n@if (hidden() > 0) {\r\n    <span class=\"nxe-avatar-more\" role=\"img\" [attr.aria-label]=\"moreLabel()\">+{{ hidden() }}</span>\r\n}\r\n", styles: ["nxe-avatar-group.nxe-avatar-group{--nxe-avatar-size: 40px;--nxe-avatar-overlap: calc(var(--nxe-avatar-size) * -.25);display:inline-flex;align-items:center;vertical-align:middle}nxe-avatar-group.nxe-avatar-group[data-size=xs]{--nxe-avatar-size: 24px}nxe-avatar-group.nxe-avatar-group[data-size=sm]{--nxe-avatar-size: 32px}nxe-avatar-group.nxe-avatar-group[data-size=md]{--nxe-avatar-size: 40px}nxe-avatar-group.nxe-avatar-group[data-size=lg]{--nxe-avatar-size: 56px}nxe-avatar-group.nxe-avatar-group[data-size=xl]{--nxe-avatar-size: 80px}nxe-avatar-group.nxe-avatar-group>nxe-avatar.nxe-avatar,nxe-avatar-group.nxe-avatar-group>.nxe-avatar-more{box-shadow:0 0 0 2px var(--nxe-ui-surface)}nxe-avatar-group.nxe-avatar-group>nxe-avatar.nxe-avatar:not(:first-child),nxe-avatar-group.nxe-avatar-group>.nxe-avatar-more{margin-inline-start:var(--nxe-avatar-overlap)}nxe-avatar-group.nxe-avatar-group>.nxe-avatar-more{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-avatar-size);height:var(--nxe-avatar-size);border:1px solid var(--nxe-ui-status-neutral-border);border-radius:50%;background-color:var(--nxe-ui-status-neutral-bg);color:var(--nxe-ui-status-neutral-fg);font-family:var(--nxe-ui-font-family);font-size:calc(var(--nxe-avatar-size) * .34);font-weight:var(--nxe-ui-font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-avatar-group', providers: [{ provide: NXE_AVATAR_GROUP, useExisting: forwardRef(() => NxeAvatarGroupComponent) }], host: {
+                        class: 'nxe-avatar-group',
+                        '[attr.role]': 'ariaLabel() ? "group" : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-size]': 'size()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content />\r\n@if (hidden() > 0) {\r\n    <span class=\"nxe-avatar-more\" role=\"img\" [attr.aria-label]=\"moreLabel()\">+{{ hidden() }}</span>\r\n}\r\n", styles: ["nxe-avatar-group.nxe-avatar-group{--nxe-avatar-size: 40px;--nxe-avatar-overlap: calc(var(--nxe-avatar-size) * -.25);display:inline-flex;align-items:center;vertical-align:middle}nxe-avatar-group.nxe-avatar-group[data-size=xs]{--nxe-avatar-size: 24px}nxe-avatar-group.nxe-avatar-group[data-size=sm]{--nxe-avatar-size: 32px}nxe-avatar-group.nxe-avatar-group[data-size=md]{--nxe-avatar-size: 40px}nxe-avatar-group.nxe-avatar-group[data-size=lg]{--nxe-avatar-size: 56px}nxe-avatar-group.nxe-avatar-group[data-size=xl]{--nxe-avatar-size: 80px}nxe-avatar-group.nxe-avatar-group>nxe-avatar.nxe-avatar,nxe-avatar-group.nxe-avatar-group>.nxe-avatar-more{box-shadow:0 0 0 2px var(--nxe-ui-surface)}nxe-avatar-group.nxe-avatar-group>nxe-avatar.nxe-avatar:not(:first-child),nxe-avatar-group.nxe-avatar-group>.nxe-avatar-more{margin-inline-start:var(--nxe-avatar-overlap)}nxe-avatar-group.nxe-avatar-group>.nxe-avatar-more{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--nxe-avatar-size);height:var(--nxe-avatar-size);border:1px solid var(--nxe-ui-status-neutral-border);border-radius:50%;background-color:var(--nxe-ui-status-neutral-bg);color:var(--nxe-ui-status-neutral-fg);font-family:var(--nxe-ui-font-family);font-size:calc(var(--nxe-avatar-size) * .34);font-weight:var(--nxe-ui-font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeAvatarComponent), { isSignal: true }] }] } });
+
+/** @internal */
+const NXE_ACCORDION = new InjectionToken('NXE_ACCORDION');
+
+/**
+ * Marks the `<ng-template>` that holds an accordion item's lazy content. The template is stamped out
+ * the first time the item is opened, not before, so a heavy panel (a grid, a chart, a request in its
+ * constructor) costs nothing until someone asks for it:
+ *
+ * ```html
+ * <nxe-accordion-item heading="Riwayat">
+ *     <ng-template nxeAccordionContent><app-history /></ng-template>
+ * </nxe-accordion-item>
+ * ```
+ *
+ * Whether it is destroyed again when the item closes is `keepAlive` on the item or the accordion.
+ */
+class NxeAccordionContentDirective {
+    /** The template to render. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeAccordionContentDirective, isStandalone: true, selector: "ng-template[nxeAccordionContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAccordionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[nxeAccordionContent]',
+                }]
+        }] });
+
+let itemSequence = 0;
+/**
+ * One section of an {@link NxeAccordionComponent}: a heading that is a button, and the panel it
+ * opens.
+ *
+ * ```html
+ * <nxe-accordion-item heading="Pengiriman" [(expanded)]="shippingOpen">
+ *     Alamat dan jadwal pengiriman.
+ * </nxe-accordion-item>
+ *
+ * <nxe-accordion-item heading="Riwayat" [disabled]="!hasHistory()">
+ *     <ng-template nxeAccordionContent><app-history /></ng-template>
+ * </nxe-accordion-item>
+ *
+ * <nxe-accordion-item>
+ *     <span nxeAccordionHeading>Lampiran <nxe-badge [value]="3" /></span>
+ *     ...
+ * </nxe-accordion-item>
+ * ```
+ *
+ * The heading is `role="heading"` at the accordion's `headingLevel`, and holds one `<button
+ * aria-expanded aria-controls>`. The panel is a `role="region"` labelled by that button, hidden from
+ * keyboard and screen reader while closed.
+ */
+class NxeAccordionItemComponent {
+    accordion = inject(NXE_ACCORDION, { optional: true });
+    /** The heading text. For markup, project an element with `nxeAccordionHeading` instead. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is open. Two-way: `[(expanded)]`. */
+    expanded = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** The heading is not a control: not focusable, skipped by the arrow keys. A disabled open item stays open. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Heading level of this item, 1 to 6. Default: the accordion's. */
+    headingLevel = input(undefined, { ...(ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {}), transform: (value) => {
+            const level = numberAttribute(value, 0);
+            return level >= 1 && level <= 6 ? level : undefined;
+        } });
+    /** Keep lazy content after the item closes. Default: the accordion's (`true`). Plain content is always kept. */
+    keepAlive = input(undefined, { ...(ngDevMode ? { debugName: "keepAlive" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined || value === null || value === '' ? undefined : booleanAttribute(value)) });
+    lazy = contentChild(NxeAccordionContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    uid = `nxe-accordion-item-${++itemSequence}`;
+    /** @internal */
+    triggerId = `${this.uid}-header`;
+    /** @internal */
+    panelId = `${this.uid}-panel`;
+    level = computed(() => this.headingLevel() ?? this.accordion?.headingLevel() ?? 3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    region = computed(() => this.accordion?.regions() ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+    lazyTemplate = computed(() => this.lazy()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyTemplate" }] : /* istanbul ignore next */ []));
+    /** True once the item has been opened, for lazy content that stays after closing. */
+    visited = linkedSignal({ ...(ngDevMode ? { debugName: "visited" } : /* istanbul ignore next */ {}), source: this.expanded,
+        computation: (open, previous) => open || !!previous?.value });
+    /** Whether the lazy template exists right now: open, or opened before and kept. */
+    renderLazy = computed(() => {
+        // Read first, not short-circuited: a linkedSignal only starts remembering once something reads it.
+        const visited = this.visited();
+        return this.expanded() || (visited && (this.keepAlive() ?? this.accordion?.keepAlive() ?? true));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderLazy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // However an item comes to be open (a click, a binding, `expand()`), a single-open accordion hears about it.
+        toObservable(this.expanded)
+            .pipe(takeUntilDestroyed())
+            .subscribe((open) => open && this.accordion?.itemExpanded(this));
+    }
+    /** Opens or closes the panel. A disabled item ignores it. */
+    toggle() {
+        if (!this.disabled()) {
+            this.expanded.update((open) => !open);
+        }
+    }
+    expand() {
+        this.expanded.set(true);
+    }
+    collapse() {
+        this.expanded.set(false);
+    }
+    /** Moves focus to the heading button. */
+    focus() {
+        this.trigger().nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeAccordionItemComponent, isStandalone: true, selector: "nxe-accordion-item", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.nxe-accordion-item-open": "expanded()", "class.nxe-accordion-item-disabled": "disabled()" }, classAttribute: "nxe-accordion-item" }, queries: [{ propertyName: "lazy", first: true, predicate: NxeAccordionContentDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], exportAs: ["nxeAccordionItem"], ngImport: i0, template: "<div class=\"nxe-accordion-heading\" role=\"heading\" [attr.aria-level]=\"level()\">\r\n    <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"nxe-accordion-trigger\"\r\n        [id]=\"triggerId\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.aria-expanded]=\"expanded()\"\r\n        [attr.aria-controls]=\"panelId\"\r\n        (click)=\"toggle()\">\r\n        <span class=\"nxe-accordion-title\">{{ heading() }}<ng-content select=\"[nxeAccordionHeading]\" /></span>\r\n        <svg class=\"nxe-accordion-chevron\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n            <path d=\"M3.5 6l4.5 4.5L12.5 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n</div>\r\n<div\r\n    class=\"nxe-accordion-panel\"\r\n    [id]=\"panelId\"\r\n    [attr.role]=\"region() ? 'region' : null\"\r\n    [attr.aria-labelledby]=\"region() ? triggerId : null\">\r\n    <div class=\"nxe-accordion-panel-clip\">\r\n        <div class=\"nxe-accordion-body\">\r\n            @if (lazyTemplate(); as template) {\r\n                @if (renderLazy()) {\r\n                    <ng-container *ngTemplateOutlet=\"template\" />\r\n                }\r\n            }\r\n            <ng-content />\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["nxe-accordion-item.nxe-accordion-item{display:block;border-bottom:1px solid var(--nxe-ui-border);color:var(--nxe-ui-text)}nxe-accordion-item.nxe-accordion-item:last-child{border-bottom:0}nxe-accordion-item.nxe-accordion-item .nxe-accordion-heading{margin:0;font-size:inherit;font-weight:inherit}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--nxe-ui-space-3);box-sizing:border-box;width:100%;margin:0;padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:var(--nxe-ui-font-size-md);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-md);text-align:start;cursor:pointer}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger:hover:not(:disabled){background:var(--nxe-ui-surface-alt)}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger:focus-visible{outline:none;box-shadow:inset var(--nxe-ui-focus-ring)}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger:disabled{cursor:not-allowed;opacity:.5}nxe-accordion-item.nxe-accordion-item .nxe-accordion-title{display:inline-flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2);min-width:0}nxe-accordion-item.nxe-accordion-item .nxe-accordion-chevron{flex:none;width:16px;height:16px;color:var(--nxe-ui-neutral-600)}nxe-accordion-item.nxe-accordion-item .nxe-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden}nxe-accordion-item.nxe-accordion-item .nxe-accordion-panel-clip{min-height:0;overflow:hidden}nxe-accordion-item.nxe-accordion-item .nxe-accordion-body{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-4) var(--nxe-ui-space-4);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-accordion-item.nxe-accordion-item.nxe-accordion-item-open .nxe-accordion-panel{grid-template-rows:1fr;visibility:visible}nxe-accordion-item.nxe-accordion-item.nxe-accordion-item-open .nxe-accordion-chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:no-preference){nxe-accordion-item.nxe-accordion-item .nxe-accordion-panel{transition:grid-template-rows .2s ease,visibility 0s linear .2s}nxe-accordion-item.nxe-accordion-item.nxe-accordion-item-open .nxe-accordion-panel{transition:grid-template-rows .2s ease,visibility 0s linear 0s}nxe-accordion-item.nxe-accordion-item .nxe-accordion-chevron{transition:transform .2s ease}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-accordion-item', exportAs: 'nxeAccordionItem', imports: [NgTemplateOutlet], host: {
+                        class: 'nxe-accordion-item',
+                        '[class.nxe-accordion-item-open]': 'expanded()',
+                        '[class.nxe-accordion-item-disabled]': 'disabled()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-accordion-heading\" role=\"heading\" [attr.aria-level]=\"level()\">\r\n    <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"nxe-accordion-trigger\"\r\n        [id]=\"triggerId\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.aria-expanded]=\"expanded()\"\r\n        [attr.aria-controls]=\"panelId\"\r\n        (click)=\"toggle()\">\r\n        <span class=\"nxe-accordion-title\">{{ heading() }}<ng-content select=\"[nxeAccordionHeading]\" /></span>\r\n        <svg class=\"nxe-accordion-chevron\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n            <path d=\"M3.5 6l4.5 4.5L12.5 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n</div>\r\n<div\r\n    class=\"nxe-accordion-panel\"\r\n    [id]=\"panelId\"\r\n    [attr.role]=\"region() ? 'region' : null\"\r\n    [attr.aria-labelledby]=\"region() ? triggerId : null\">\r\n    <div class=\"nxe-accordion-panel-clip\">\r\n        <div class=\"nxe-accordion-body\">\r\n            @if (lazyTemplate(); as template) {\r\n                @if (renderLazy()) {\r\n                    <ng-container *ngTemplateOutlet=\"template\" />\r\n                }\r\n            }\r\n            <ng-content />\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["nxe-accordion-item.nxe-accordion-item{display:block;border-bottom:1px solid var(--nxe-ui-border);color:var(--nxe-ui-text)}nxe-accordion-item.nxe-accordion-item:last-child{border-bottom:0}nxe-accordion-item.nxe-accordion-item .nxe-accordion-heading{margin:0;font-size:inherit;font-weight:inherit}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--nxe-ui-space-3);box-sizing:border-box;width:100%;margin:0;padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:var(--nxe-ui-font-size-md);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-md);text-align:start;cursor:pointer}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger:hover:not(:disabled){background:var(--nxe-ui-surface-alt)}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger:focus-visible{outline:none;box-shadow:inset var(--nxe-ui-focus-ring)}nxe-accordion-item.nxe-accordion-item .nxe-accordion-trigger:disabled{cursor:not-allowed;opacity:.5}nxe-accordion-item.nxe-accordion-item .nxe-accordion-title{display:inline-flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2);min-width:0}nxe-accordion-item.nxe-accordion-item .nxe-accordion-chevron{flex:none;width:16px;height:16px;color:var(--nxe-ui-neutral-600)}nxe-accordion-item.nxe-accordion-item .nxe-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden}nxe-accordion-item.nxe-accordion-item .nxe-accordion-panel-clip{min-height:0;overflow:hidden}nxe-accordion-item.nxe-accordion-item .nxe-accordion-body{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-4) var(--nxe-ui-space-4);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-accordion-item.nxe-accordion-item.nxe-accordion-item-open .nxe-accordion-panel{grid-template-rows:1fr;visibility:visible}nxe-accordion-item.nxe-accordion-item.nxe-accordion-item-open .nxe-accordion-chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:no-preference){nxe-accordion-item.nxe-accordion-item .nxe-accordion-panel{transition:grid-template-rows .2s ease,visibility 0s linear .2s}nxe-accordion-item.nxe-accordion-item.nxe-accordion-item-open .nxe-accordion-panel{transition:grid-template-rows .2s ease,visibility 0s linear 0s}nxe-accordion-item.nxe-accordion-item .nxe-accordion-chevron{transition:transform .2s ease}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }], lazy: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeAccordionContentDirective), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+/** Past this many items that can be open together, panels stop being landmark regions (WAI-ARIA APG). */
+const MAX_REGIONS = 6;
+/**
+ * `nxe-accordion` stacks sections that open and close: grouped settings, an FAQ, a long form in parts.
+ *
+ * ```html
+ * <nxe-accordion [multi]="true" [headingLevel]="2">
+ *     <nxe-accordion-item heading="Umum" [expanded]="true">...</nxe-accordion-item>
+ *     <nxe-accordion-item heading="Pengiriman">...</nxe-accordion-item>
+ *     <nxe-accordion-item heading="Riwayat" [disabled]="!hasHistory()">
+ *         <ng-template nxeAccordionContent><app-history /></ng-template>
+ *     </nxe-accordion-item>
+ * </nxe-accordion>
+ * ```
+ *
+ * **One open or many.** By default opening an item closes the others. `multi` lets any number stay open.
+ * Each item's `expanded` is a two-way model, so a binding, a click and `expand()` all agree. If bindings
+ * open several items of a single-open accordion at once, the first in order stays open.
+ *
+ * **Lazy content.** Content in an `<ng-template nxeAccordionContent>` is created the first time its item
+ * opens; `keepAlive` (default `true`) keeps it after closing, `false` destroys it.
+ *
+ * **Keyboard and screen readers** follow the WAI-ARIA accordion pattern. Every heading is a `button` inside
+ * an element with `role="heading"` and `aria-level` (`headingLevel`, default 3: pick the level under the
+ * page's own heading). The button has `aria-expanded` and `aria-controls`; the panel is a `role="region"`
+ * labelled by the button. Enter and Space toggle; ArrowDown and ArrowUp move to the next and previous
+ * heading (wrapping), Home and End to the first and last; disabled headings are skipped. In a `multi`
+ * accordion of more than six items the panels drop `role="region"`, as the pattern advises, so as not to
+ * flood the landmark list.
+ *
+ * The panel animates its height over 0.2s, and not at all under `prefers-reduced-motion: reduce`.
+ */
+class NxeAccordionComponent {
+    /** Let several items stay open. Default: opening one closes the others. */
+    multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `aria-level` of the headings, 1 to 6. Default 3. An item can set its own. */
+    headingLevel = input(3, { ...(ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {}), transform: (value) => {
+            const level = numberAttribute(value, 3);
+            return (level >= 1 && level <= 6 ? level : 3);
+        } });
+    /** Keep lazy content after its item closes. Default `true`; an item can override. */
+    keepAlive = input(true, { ...(ngDevMode ? { debugName: "keepAlive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    items = contentChildren(NxeAccordionItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    regions = computed(() => !this.multi() || this.items().length <= MAX_REGIONS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "regions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Going from many open to one open leaves the first.
+        toObservable(this.multi)
+            .pipe(takeUntilDestroyed())
+            .subscribe((multi) => {
+            if (!multi) {
+                const [keep] = this.items().filter((item) => item.expanded());
+                this.collapseOthers(keep);
+            }
+        });
+    }
+    /** @internal */
+    itemExpanded(item) {
+        if (!this.multi()) {
+            this.collapseOthers(item);
+        }
+    }
+    /** Opens every enabled item. Only a `multi` accordion can have them all open. */
+    expandAll() {
+        if (this.multi()) {
+            this.items().filter((item) => !item.disabled()).forEach((item) => item.expand());
+        }
+    }
+    collapseAll() {
+        this.items().forEach((item) => item.collapse());
+    }
+    collapseOthers(keep) {
+        for (const item of this.items()) {
+            if (item !== keep && item.expanded()) {
+                item.collapse();
+            }
+        }
+    }
+    onKeydown(event) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+        const headings = this.items().filter((item) => !item.disabled());
+        const current = headings.findIndex((item) => event.target?.id === item.triggerId);
+        if (current < 0) {
+            // A key typed in a panel (or in a nested accordion) is not ours.
+            return;
+        }
+        let target;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = (current + 1) % headings.length;
+                break;
+            case 'ArrowUp':
+                target = (current - 1 + headings.length) % headings.length;
+                break;
+            case 'Home':
+                target = 0;
+                break;
+            case 'End':
+                target = headings.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        headings[target].focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeAccordionComponent, isStandalone: true, selector: "nxe-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, keepAlive: { classPropertyName: "keepAlive", publicName: "keepAlive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "nxe-accordion" }, providers: [{ provide: NXE_ACCORDION, useExisting: forwardRef(() => NxeAccordionComponent) }], queries: [{ propertyName: "items", predicate: NxeAccordionItemComponent, isSignal: true }], exportAs: ["nxeAccordion"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["nxe-accordion.nxe-accordion{display:block;overflow:hidden;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md);background:var(--nxe-ui-surface);font-family:var(--nxe-ui-font-family)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-accordion', exportAs: 'nxeAccordion', template: '<ng-content />', providers: [{ provide: NXE_ACCORDION, useExisting: forwardRef(() => NxeAccordionComponent) }], host: {
+                        class: 'nxe-accordion',
+                        '(keydown)': 'onKeydown($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-accordion.nxe-accordion{display:block;overflow:hidden;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md);background:var(--nxe-ui-surface);font-family:var(--nxe-ui-font-family)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeAccordionItemComponent), { isSignal: true }] }] } });
+
+// @nexterajs/ui/display — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_ACCORDION, NXE_AVATAR_GROUP, NXE_AVATAR_TONES, NXE_STATUS_FAMILIES, NxeAccordionComponent, NxeAccordionContentDirective, NxeAccordionItemComponent, NxeAvatarComponent, NxeAvatarGroupComponent, NxeBadgeAnchorDirective, NxeBadgeComponent, NxeCardComponent, NxeDescriptionItemComponent, NxeDescriptionListComponent, NxeEmptyStateComponent, NxeSkeletonComponent, NxeSpinnerComponent, NxeTagComponent, NxeTimelineComponent, NxeTimelineIconDirective, NxeTimelineItemComponent, nxeAvatarInitials, nxeAvatarToneIndex, toTimelineDateTime };
+//# sourceMappingURL=nexterajs-ui-display.mjs.map