@nexterajs/ui 0.0.1

package/fesm2022/nexterajs-ui-validation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nexterajs-ui-validation.mjs","sources":["../../../projects/nextera-ui/validation/src/lib/validation/nxe-validation-rule.component.ts","../../../projects/nextera-ui/validation/src/lib/validation/nxe-validator.component.ts","../../../projects/nextera-ui/validation/src/lib/validation/nxe-validators.ts","../../../projects/nextera-ui/validation/src/public-api.ts","../../../projects/nextera-ui/validation/src/nexterajs-ui-validation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\r\n\r\n/** DevExtreme validation rule type (the codebase uses `required`, `compare`, and `range`). */\r\nexport type NxeValidationRuleType = 'required' | 'compare' | 'custom' | 'pattern' | 'email' | 'range';\r\n\r\n/**\r\n * The message shown when a rule fails and the caller gave none.\r\n *\r\n * These are DevExtreme's own defaults, verbatim from its `validation-*` message keys. Without\r\n * them a rule with no `message` blocks its group and displays nothing at all, because every\r\n * editor renders its error bubble under `@if (validationError())` — falsy for the empty string.\r\n */\r\nexport const NXE_DEFAULT_VALIDATION_MESSAGES: Readonly<Record<NxeValidationRuleType, string>> = {\r\n    required: 'Required',\r\n    email: 'Email is invalid',\r\n    pattern: 'Value does not match pattern',\r\n    range: 'Value is out of range',\r\n    compare: 'Values do not match',\r\n    custom: 'Value is invalid',\r\n};\r\n\r\n/** Payload passed to a `custom` rule's `validationCallback` (mirrors DevExtreme). */\r\nexport interface NxeCustomRuleData {\r\n    value: unknown;\r\n    rule: NxeValidationRuleComponent;\r\n}\r\n\r\n/**\r\n * `nxe-validation-rule` — drop-in for DevExtreme `dxi-validation-rule`.\r\n *\r\n * A no-template configuration child of `nxe-validator`. The codebase uses the universal element\r\n * with a `type` attribute (overwhelmingly `type=\"required\"`), so a single component with a\r\n * `type` input covers 100% of usage.\r\n */\r\n@Component({\r\n    selector: 'nxe-validation-rule',\r\n    standalone: true,\r\n    template: '',\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class NxeValidationRuleComponent {\r\n    readonly type = input<NxeValidationRuleType>('required');\r\n    readonly message = input<string>('');\r\n\r\n    /** `compare` rule: returns the value to compare against. Mirrors `comparisonTarget`. */\r\n    readonly comparisonTarget = input<(() => unknown) | undefined>(undefined);\r\n    /** `compare` rule comparison operator (default `==`). */\r\n    readonly comparisonType = input<'==' | '===' | '!=' | '!==' | '>' | '<' | '>=' | '<='>('==');\r\n\r\n    /** `custom` rule: returns true when valid. Mirrors `validationCallback`. */\r\n    readonly validationCallback = input<((data: NxeCustomRuleData) => boolean) | undefined>(undefined);\r\n\r\n    /** `pattern` rule. */\r\n    readonly pattern = input<string | RegExp | undefined>(undefined);\r\n\r\n    /** `range` rule bounds (DevExtreme RangeRule: empty values pass, bounds are inclusive). */\r\n    readonly min = input<number | undefined>(undefined);\r\n    readonly max = input<number | undefined>(undefined);\r\n\r\n    /**\r\n     * The message to show when this rule fails: the caller's, or DevExtreme's default for the\r\n     * rule type. Whitespace counts as absent — a message of spaces is still an empty bubble.\r\n     */\r\n    readonly resolvedMessage = computed(\r\n        () => this.message().trim() || NXE_DEFAULT_VALIDATION_MESSAGES[this.type()] || '',\r\n    );\r\n\r\n    /** Whether `value` satisfies this rule. */\r\n    evaluate(value: unknown): boolean {\r\n        switch (this.type()) {\r\n            case 'required':\r\n                return !this.isEmpty(value);\r\n            case 'compare':\r\n                return this.compare(value);\r\n            case 'range':\r\n                return this.isEmpty(value) || this.inRange(value);\r\n            case 'pattern':\r\n                return this.isEmpty(value) || this.matchesPattern(value);\r\n            case 'email':\r\n                return this.isEmpty(value) || /^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$/.test(String(value));\r\n            case 'custom':\r\n                return this.validationCallback()?.({ value, rule: this }) ?? true;\r\n            default:\r\n                return true;\r\n        }\r\n    }\r\n\r\n    /** DevExtreme RequiredRule semantics: null/undefined/''/false are \"not specified\". */\r\n    private isEmpty(value: unknown): boolean {\r\n        return (\r\n            value === null ||\r\n            value === undefined ||\r\n            value === '' ||\r\n            value === false ||\r\n            (Array.isArray(value) && value.length === 0)\r\n        );\r\n    }\r\n\r\n    private compare(value: unknown): boolean {\r\n        const target = this.comparisonTarget()?.();\r\n        switch (this.comparisonType()) {\r\n            case '===':\r\n                return value === target;\r\n            case '!=':\r\n                // eslint-disable-next-line eqeqeq\r\n                return value != target;\r\n            case '!==':\r\n                return value !== target;\r\n            case '>':\r\n                return (value as number) > (target as number);\r\n            case '<':\r\n                return (value as number) < (target as number);\r\n            case '>=':\r\n                return (value as number) >= (target as number);\r\n            case '<=':\r\n                return (value as number) <= (target as number);\r\n            case '==':\r\n            default:\r\n                // eslint-disable-next-line eqeqeq\r\n                return value == target;\r\n        }\r\n    }\r\n\r\n    private inRange(value: unknown): boolean {\r\n        const num = Number(value);\r\n        if (Number.isNaN(num)) {\r\n            return false;\r\n        }\r\n        const min = this.min();\r\n        const max = this.max();\r\n        return (min === undefined || num >= min) && (max === undefined || num <= max);\r\n    }\r\n\r\n    private matchesPattern(value: unknown): boolean {\r\n        const pattern = this.pattern();\r\n        if (!pattern) {\r\n            return true;\r\n        }\r\n        const regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern;\r\n        return regex.test(String(value));\r\n    }\r\n}\r\n","import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    computed,\r\n    contentChildren,\r\n    DestroyRef,\r\n    inject,\r\n    Injector,\r\n    input,\r\n    signal,\r\n    ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { distinctUntilChanged, pairwise, startWith } from 'rxjs';\r\nimport { NxeValidationGroupRegistry } from '@nexterajs/ui/core';\r\nimport {\r\n    NXE_VALIDATION_TARGET,\r\n    NxeValidationResult,\r\n} from '@nexterajs/ui/core';\r\nimport { NxeValidationRuleComponent } from './nxe-validation-rule.component';\r\n\r\n/**\r\n * `nxe-validator` — drop-in for DevExtreme `dx-validator`.\r\n *\r\n * Placed inside an editor (`<nxe-text-box><nxe-validator><nxe-validation-rule .../></nxe-validator></nxe-text-box>`),\r\n * it adapts the editor via {@link NXE_VALIDATION_TARGET}, collects its `nxe-validation-rule`\r\n * children, and registers into the {@link NxeValidationGroupRegistry} under the editor's\r\n * `validationGroup`. Validation is on-demand (matching DevExtreme: not auto-run on change) —\r\n * `validate()` is invoked by `nxe-button[validationGroup]` (group-level) or directly.\r\n */\r\n@Component({\r\n    selector: 'nxe-validator',\r\n    standalone: true,\r\n    template: '<ng-content />',\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class NxeValidatorComponent {\r\n    private readonly target = inject(NXE_VALIDATION_TARGET, { optional: true });\r\n    private readonly registry = inject(NxeValidationGroupRegistry);\r\n\r\n    readonly rules = contentChildren(NxeValidationRuleComponent);\r\n\r\n    /** Explicit group; otherwise inherited from the wrapped editor's `validationGroup`. */\r\n    readonly validationGroupInput = input<string | undefined>(undefined, { alias: 'validationGroup' });\r\n    // Bare validators (no group) join the implicit default group `''` — mirroring DevExtreme's\r\n    // global default group — so a groupless `nxe-button` validates them.\r\n    private readonly group = computed(\r\n        () => this.validationGroupInput() ?? this.target?.validationGroup() ?? '',\r\n    );\r\n\r\n    /** Last validation outcome (false once a rule has failed, until re-validated). */\r\n    readonly isValid = signal(true);\r\n\r\n    /** DevExtreme parity: existing code calls `validator.instance.validate()` via `@ViewChild`. */\r\n    get instance(): NxeValidatorComponent {\r\n        return this;\r\n    }\r\n\r\n    private readonly member = { validate: () => this.validate() };\r\n\r\n    constructor() {\r\n        // Register/unregister into the named group reactively (handles dynamic group changes).\r\n        /* ⚠ NOT an effect - UI-48. The registration follows ONE signal, and the unregister that\r\n           `onCleanup` used to run is the pairwise step below: a group change unregisters the old\r\n           one before registering the new, and destruction unregisters the last. */\r\n        toObservable(this.group, { injector: inject(Injector) })\r\n            .pipe(\r\n                distinctUntilChanged(),\r\n                startWith(undefined as string | undefined),\r\n                pairwise(),\r\n                takeUntilDestroyed(),\r\n            )\r\n            .subscribe(([ previous, group ]) => {\r\n                if (previous !== undefined) {\r\n                    this.registry.unregister(previous, this.member);\r\n                }\r\n\r\n                this.registry.register(group, this.member);\r\n            });\r\n\r\n        inject(DestroyRef).onDestroy(() => this.registry.unregister(this.group(), this.member));\r\n    }\r\n\r\n    /** Run all rules against the editor's current value; pushes the first failing message. */\r\n    validate(): NxeValidationResult {\r\n        const value = this.target?.getValue();\r\n        for (const rule of this.rules()) {\r\n            if (!rule.evaluate(value)) {\r\n                // resolvedMessage(), not message(): a rule declared without one would otherwise\r\n                // push the empty string, and every editor guards its bubble with\r\n                // `@if (validationError())` — so the field would block the group in silence.\r\n                const message = rule.resolvedMessage();\r\n                this.isValid.set(false);\r\n                this.target?.setValidationError(message);\r\n                return {\r\n                    isValid: false,\r\n                    brokenRules: [{ type: rule.type(), message }],\r\n                    status: 'invalid',\r\n                };\r\n            }\r\n        }\r\n        this.isValid.set(true);\r\n        this.target?.setValidationError(null);\r\n        return { isValid: true, brokenRules: [], status: 'valid' };\r\n    }\r\n}\r\n","import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\r\n\r\nexport class NxeValidators {\r\n    /**\r\n     * Check for empty (optional fields) values\r\n     *\r\n     * @param value\r\n     */\r\n    static isEmptyInputValue(value: any): boolean {\r\n        return value == null || value.length === 0;\r\n    }\r\n\r\n    /**\r\n     * Must match validator\r\n     *\r\n     * @param controlPath A dot-delimited string values that define the path to the control.\r\n     * @param matchingControlPath A dot-delimited string values that define the path to the matching control.\r\n     */\r\n    static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn {\r\n        return (formGroup: AbstractControl): ValidationErrors | null => {\r\n            // Get the control and matching control\r\n            const control = formGroup.get(controlPath);\r\n            const matchingControl = formGroup.get(matchingControlPath);\r\n\r\n            // Return if control or matching control doesn't exist\r\n            if (!control || !matchingControl) {\r\n                return null;\r\n            }\r\n\r\n            // Delete the mustMatch error to reset the error on the matching control\r\n            if (matchingControl.hasError('mustMatch')) {\r\n                delete matchingControl.errors.mustMatch;\r\n                matchingControl.updateValueAndValidity();\r\n            }\r\n\r\n            // Don't validate empty values on the matching control\r\n            // Don't validate if values are matching\r\n            if (this.isEmptyInputValue(matchingControl.value) || control.value === matchingControl.value) {\r\n                return null;\r\n            }\r\n\r\n            // Prepare the validation errors\r\n            const errors = { mustMatch: true };\r\n\r\n            // Set the validation error on the matching control\r\n            matchingControl.setErrors(errors);\r\n\r\n            // Return the errors\r\n            return errors;\r\n        };\r\n    }\r\n}\r\n","// @nexterajs/ui/validation — public API.\r\nexport * from './lib/validation/nxe-validation-rule.component';\r\nexport * from './lib/validation/nxe-validator.component';\r\nexport * from './lib/validation/nxe-validators';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/nexterajs-ui.mjs

@@ -0,0 +1,23 @@
+export * from '@nexterajs/ui/animations';
+export * from '@nexterajs/ui/core';
+export * from '@nexterajs/ui/dropdowns';
+export * from '@nexterajs/ui/excel';
+export * from '@nexterajs/ui/file-uploader';
+export * from '@nexterajs/ui/forms';
+export * from '@nexterajs/ui/grid';
+export * from '@nexterajs/ui/intl';
+export * from '@nexterajs/ui/pivot';
+export * from '@nexterajs/ui/styling';
+export * from '@nexterajs/ui/tree-view';
+export * from '@nexterajs/ui/validation';
+
+// @nexterajs/ui — compatibility barrel.
+//
+// Re-exports every secondary entry point so importing from the bare specifier keeps working.
+// Prefer the specific entry point (@nexterajs/ui/grid) in new code: it keeps the pivot engine
+// and the xlsx writer out of your bundle and out of your dev-server rebuilds.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=nexterajs-ui.mjs.map

package/fesm2022/nexterajs-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nexterajs-ui.mjs","sources":["../../../projects/nextera-ui/src/public-api.ts","../../../projects/nextera-ui/src/nexterajs-ui.ts"],"sourcesContent":["// @nexterajs/ui — compatibility barrel.\r\n//\r\n// Re-exports every secondary entry point so importing from the bare specifier keeps working.\r\n// Prefer the specific entry point (@nexterajs/ui/grid) in new code: it keeps the pivot engine\r\n// and the xlsx writer out of your bundle and out of your dev-server rebuilds.\r\nexport * from '@nexterajs/ui/animations';\r\nexport * from '@nexterajs/ui/core';\r\nexport * from '@nexterajs/ui/dropdowns';\r\nexport * from '@nexterajs/ui/excel';\r\nexport * from '@nexterajs/ui/file-uploader';\r\nexport * from '@nexterajs/ui/forms';\r\nexport * from '@nexterajs/ui/grid';\r\nexport * from '@nexterajs/ui/intl';\r\nexport * from '@nexterajs/ui/pivot';\r\nexport * from '@nexterajs/ui/styling';\r\nexport * from '@nexterajs/ui/tree-view';\r\nexport * from '@nexterajs/ui/validation';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;;ACJA;;AAEG"}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@nexterajs/ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/animations": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "luxon": "^3.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./styles/*": {
+      "sass": "./styles/*",
+      "default": "./styles/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/nexterajs-ui.d.ts",
+      "default": "./fesm2022/nexterajs-ui.mjs"
+    },
+    "./animations": {
+      "types": "./types/nexterajs-ui-animations.d.ts",
+      "default": "./fesm2022/nexterajs-ui-animations.mjs"
+    },
+    "./core": {
+      "types": "./types/nexterajs-ui-core.d.ts",
+      "default": "./fesm2022/nexterajs-ui-core.mjs"
+    },
+    "./dropdowns": {
+      "types": "./types/nexterajs-ui-dropdowns.d.ts",
+      "default": "./fesm2022/nexterajs-ui-dropdowns.mjs"
+    },
+    "./excel": {
+      "types": "./types/nexterajs-ui-excel.d.ts",
+      "default": "./fesm2022/nexterajs-ui-excel.mjs"
+    },
+    "./file-uploader": {
+      "types": "./types/nexterajs-ui-file-uploader.d.ts",
+      "default": "./fesm2022/nexterajs-ui-file-uploader.mjs"
+    },
+    "./forms": {
+      "types": "./types/nexterajs-ui-forms.d.ts",
+      "default": "./fesm2022/nexterajs-ui-forms.mjs"
+    },
+    "./grid": {
+      "types": "./types/nexterajs-ui-grid.d.ts",
+      "default": "./fesm2022/nexterajs-ui-grid.mjs"
+    },
+    "./intl": {
+      "types": "./types/nexterajs-ui-intl.d.ts",
+      "default": "./fesm2022/nexterajs-ui-intl.mjs"
+    },
+    "./pivot": {
+      "types": "./types/nexterajs-ui-pivot.d.ts",
+      "default": "./fesm2022/nexterajs-ui-pivot.mjs"
+    },
+    "./styling": {
+      "types": "./types/nexterajs-ui-styling.d.ts",
+      "default": "./fesm2022/nexterajs-ui-styling.mjs"
+    },
+    "./tree-view": {
+      "types": "./types/nexterajs-ui-tree-view.d.ts",
+      "default": "./fesm2022/nexterajs-ui-tree-view.mjs"
+    },
+    "./validation": {
+      "types": "./types/nexterajs-ui-validation.d.ts",
+      "default": "./fesm2022/nexterajs-ui-validation.mjs"
+    }
+  },
+  "license": "Apache-2.0",
+  "author": "Nextera",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+  },
+  "description": "Angular 22 component library replacing DevExtreme: data grid, pivot grid, editors, pickers and a zero-dependency XLSX engine, in twelve tree-shakeable entry points.",
+  "keywords": [
+    "angular",
+    "angular-components",
+    "devextreme",
+    "data-grid",
+    "pivot-grid",
+    "xlsx",
+    "ui-library",
+    "signals"
+  ],
+  "module": "fesm2022/nexterajs-ui.mjs",
+  "typings": "types/nexterajs-ui.d.ts",
+  "type": "module"
+}

package/styles/_button-directives.scss

@@ -0,0 +1,39 @@
+// Hover/focus overlay for the nxe-mat-button directives. Material draws this via a
+// `.mat-mdc-button-persistent-ripple` span, which an attribute directive can't inject — so we
+// reproduce it with a `::after` overlay. The base sizing/color/radius still come from Material's
+// loaded `.mat-mdc-*-button` theme CSS (we emit those classes).
+
+@mixin nxe-button-directives {
+    .nxe-mat-button,
+    .nxe-mat-icon-button {
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background: currentColor;
+            opacity: 0;
+            transition: opacity 80ms ease;
+            pointer-events: none;
+        }
+
+        &:hover::after {
+            opacity: 0.08;
+        }
+
+        &:active::after {
+            opacity: 0.16;
+        }
+
+        &:disabled,
+        &[disabled] {
+            cursor: default;
+
+            &::after {
+                opacity: 0;
+            }
+        }
+    }
+}

package/styles/_dropdown.scss

@@ -0,0 +1,113 @@
+// Shared dropdown list panel for the nxe select family (select-box, tag-box, drop-down-box).
+// Reproduces the DevExtreme `.dx-dropdownlist-popup`. Global (loaded via styling/index.scss) so it
+// applies inside the CDK overlay regardless of which component opened it.
+//
+// Every value below is checked against the reference deployment's bundle
+// (tools/visual-parity/reference/bright-styles.css); the source rule is named in a comment.
+// Typography deliberately comes from `.nxe-widget` on the PANE (styling/_widget.scss) — the panel
+// must NOT declare its own font-size. Declaring one here is what made options render 14px in an
+// app whose every other text surface is 12.24px.
+
+@mixin nxe-dropdown {
+    .nxe-select-panel {
+        box-sizing: border-box;
+        max-height: 320px;
+        // dx: `.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled)
+        //      { min-height: 33.0001px }` — an empty panel never collapses below one row.
+        min-height: 33px;
+        // dx: `.dx-overlay-content { min-width: 400px !important }` in the dx-era app stylesheet.
+        // Library default is 0; the host app opts in via the token.
+        min-width: var(--nxe-ui-overlay-min-width);
+        overflow-y: auto;
+        // dx: `.dx-popup-wrapper > .dx-overlay-content { border:1px solid #ddd; background:#fff;
+        //      box-shadow:0 6px 12px rgba(0,0,0,.175); border-radius:6px }`
+        background: var(--nxe-ui-surface);
+        border: 1px solid var(--nxe-ui-border);
+        border-radius: var(--nxe-ui-popup-radius);
+        box-shadow: var(--nxe-ui-popup-shadow);
+        color: var(--nxe-ui-text);
+        // dx: `.dx-dropdownlist-popup-wrapper.dx-popup-wrapper .dx-overlay-content
+        //      { border-top-width: 0 }` — the panel sits flush against the editor it drops from.
+        border-top-width: 0;
+        // dx: `.dx-dropdownlist-popup-wrapper .dx-popup-content { padding: 1px }`
+        padding: 1px;
+    }
+
+    // dx flips the popup above the editor when there is no room below; the flush edge flips too.
+    // dx: `.dx-overlay-content.dx-dropdowneditor-overlay-flipped
+    //      { border-top-width:1px; border-bottom-width:0 }`
+    // The marker class is applied by trackPaneFlip() in styling/nxe-overlay.ts (CDK has no hook).
+    .nxe-pane-flipped .nxe-select-panel {
+        border-top-width: 1px;
+        border-bottom-width: 0;
+    }
+
+    .nxe-list-item {
+        box-sizing: border-box;
+        // dx: `.dx-dropdownlist-popup-wrapper .dx-list… .dx-list-item-content { padding: 7px 9px }`
+        padding: var(--nxe-ui-item-padding);
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        // NB: no `::before` spacer here. dx-compat.css carries one
+        // (`.dx-list-item-content::before{content:"_";width:0}`) but that rule comes from a NEWER
+        // DevExtreme than the reference runs — the reference bundle has no such rule, and adding it
+        // inflates the row from dx's 30.59px to 35.19px because an inline-block reserves descender
+        // space. Verified against tools/visual-parity/reference/bright-styles.css.
+
+        // dx: `.dx-list-item.dx-state-hover { background-color: rgba(0,0,0,.04); color: #333 }`
+        &:hover {
+            background-color: var(--nxe-ui-hover-bg);
+            color: var(--nxe-ui-text);
+        }
+
+        // dx: `.dx-list-item.dx-list-item-selected { background-color: rgba(0,0,0,.1); color:#333 }`
+        &.nxe-list-item-selected {
+            background-color: var(--nxe-ui-selected-bg);
+            color: var(--nxe-ui-text);
+        }
+
+        // dx: `.dx-list-item-selected.dx-state-hover:not(.dx-state-focused)
+        //      { background-color: rgba(0,0,0,.07) }` — hovering an already-selected row must not
+        // fall back to the lighter plain-hover layer.
+        &.nxe-list-item-selected:hover:not(.nxe-list-item-active) {
+            background-color: var(--nxe-ui-selected-hover-bg);
+        }
+
+        // The keyboard cursor. dx calls it `dx-state-focused` (there is no `dx-list-item-focused`).
+        // dx: `.dx-list-item.dx-state-focused { background-color:#337ab7; color:#fff }`
+        &.nxe-list-item-active {
+            background-color: var(--nxe-ui-accent);
+            color: var(--nxe-ui-accent-contrast);
+        }
+
+        // dx: `.dx-state-focused.dx-list-item-selected
+        //      { background-color: rgba(51,122,183,.7); color:#fff }`
+        &.nxe-list-item-active.nxe-list-item-selected {
+            background-color: var(--nxe-ui-focus-selected-bg);
+        }
+
+        // dx: `.dx-list-item.dx-state-active { background-color:#337ab7; color:#fff }` (mouse-down)
+        &:active {
+            background-color: var(--nxe-ui-accent);
+            color: var(--nxe-ui-accent-contrast);
+        }
+    }
+
+    // dx: `.dx-state-disabled .dx-list-item { background-color: transparent; opacity: .6 }`
+    .nxe-list-item[aria-disabled='true'] {
+        background-color: transparent;
+        opacity: 0.6;
+        cursor: default;
+    }
+
+    // dx: the empty message is NOT re-padded by the dropdown rule — it keeps the base
+    // `.dx-list .dx-empty-message { padding: 10px }` plus `min-height: 3em`.
+    .nxe-list-empty {
+        padding: var(--nxe-ui-list-padding);
+        min-height: 3em;
+        color: var(--nxe-ui-text-muted);
+    }
+}

package/styles/_editor.scss

@@ -0,0 +1,146 @@
+// Shared chrome for nxe text editors (text-box, text-area, number-box, date-box),
+// reproducing DevExtreme `.dx-texteditor` (outlined stylingMode, light theme).
+//
+// Typography is NOT set here — it comes from `.nxe-widget` on the host (styling/_widget.scss), so
+// it resolves per host app instead of assuming orbit's 14.4px root.
+
+@mixin nxe-editor-chrome {
+    // Base box at ZERO specificity (`:where`) so per-instance Tailwind utilities applied on the
+    // host (`border-0`, `bg-transparent`, `text-right`, …) override it — dx.light.css got this for
+    // free by loading before Tailwind; this stylesheet loads after, so neutralise specificity.
+    :where(.nxe-editor) {
+        position: relative;
+        display: block;
+        box-sizing: border-box;
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        color: #333;
+        line-height: 1.35715;
+    }
+
+    .nxe-editor {
+        &:hover {
+            border-color: rgba(51, 122, 183, 0.4); // faded primary blue
+        }
+
+        &.nxe-focused {
+            border-color: #337ab7; // solid primary blue
+        }
+
+        &.nxe-readonly {
+            border-style: dashed;
+        }
+
+        &.nxe-disabled {
+            opacity: 0.5;
+            cursor: default;
+        }
+
+        // invalid: solid red, and thicker than the 1px resting box so a required field reads as
+        // required across a form of them. It used to rest at 40% opacity and only go solid on
+        // focus/hover, which put the strongest signal on the one field the user was already looking
+        // at and left the rest looking merely tinted (14-Aug review).
+        //
+        // The width is compensated with an inset shadow rather than a 2px border: growing the border
+        // would shift the input inside it by a pixel and jog the text as the field goes valid.
+        &.nxe-invalid {
+            border-color: rgba(217, 83, 79, 0.4);
+
+            &.nxe-focused,
+            &:hover {
+                border-color: #d9534f;
+            }
+
+            // Invalid badge — dx `.dx-invalid.dx-texteditor.dx-editor-outlined.dx-show-invalid-badge
+            // .dx-texteditor-input-container:after`: an 18px red disc with a bold white "!",
+            // vertically centred and inset 4px from the trailing edge. It flags the broken field at a
+            // glance, without waiting for the message bubble (which only shows while focused).
+            //
+            // Editors with a trailing button (chevron, calendar icon, clear ×) push the badge left of
+            // it with `--nxe-invalid-badge-inset`, mirroring dx's
+            // `.dx-invalid.dx-dropdowneditor .dx-texteditor-container:after { inset-inline-end: 38px }`.
+            > .nxe-editor-container::after {
+                content: '!';
+                pointer-events: none;
+                position: absolute;
+                top: 50%;
+                inset-inline-end: var(--nxe-invalid-badge-inset, 4px);
+                margin-top: -9px;
+                width: 18px;
+                height: 18px;
+                border-radius: 50%;
+                background-color: #d9534f;
+                color: #fff;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 18px;
+                text-align: center;
+            }
+
+            // dx `.dx-texteditor.dx-invalid .dx-texteditor-input { padding-inline-end: 34px }` — keeps
+            // a long value from running under the badge. Only for a container holding nothing but the
+            // input: where a trailing button exists the value already stops short of it, and dx leaves
+            // those inputs unpadded too (`.dx-dropdowneditor-button-visible` keeps padding-end 0).
+            > .nxe-editor-container:not(:has(> :not(.nxe-editor-input))) .nxe-editor-input {
+                padding-inline-end: 34px;
+            }
+        }
+    }
+
+    .nxe-editor-container {
+        display: flex;
+        position: relative;
+        align-items: center;
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .nxe-editor-input {
+        -webkit-appearance: none;
+        appearance: none;
+        flex: 1 1 auto;
+        margin: 0;
+        width: 100%;
+        min-height: 34px;
+        padding: 7px 9px 8px;
+        border: 0;
+        outline: 0;
+        background: transparent;
+        color: #333;
+        // dx `.dx-texteditor-input { max-width: 100%; text-overflow: ellipsis }` — a value longer
+        // than the field is truncated with an ellipsis rather than clipped mid-glyph.
+        max-width: 100%;
+        text-overflow: ellipsis;
+        font: inherit;
+        border-radius: 4px;
+
+        &::placeholder {
+            color: #999;
+        }
+
+        &:disabled {
+            // dx keeps the input itself opaque; the host `.nxe-disabled` dims the whole editor
+            opacity: 1;
+            color: #333;
+            -webkit-text-fill-color: #333;
+        }
+    }
+
+    // Validation message bubble — solid red, white text (shown on focus, like dx).
+    .nxe-invalid-message {
+        position: absolute;
+        z-index: 10;
+        top: 100%;
+        inset-inline-start: 0;
+        margin-top: 1px;
+        max-width: 100%;
+        padding: 10px;
+        border-radius: 4px;
+        background-color: #d9534f;
+        color: #fff;
+        font-size: 0.85em;
+        line-height: normal;
+        word-wrap: break-word;
+    }
+}

package/styles/_mixins.scss

@@ -0,0 +1,2 @@
+// @nexterajs/ui — shared SCSS mixins.
+// Grows as components are added (e.g. form-control framing, grid theming). Empty for now.

package/styles/_tokens.scss

@@ -0,0 +1,77 @@
+// @nexterajs/ui — design tokens
+//
+// Self-contained CSS custom properties that reproduce the legacy theme/DevExtreme/Material visual
+// values, so nxe components match without depending on Material/DevExtreme variables.
+//
+// PORTABILITY CONTRACT
+// -------------------
+// This library is consumed by more than one host app, and those apps do not share a root
+// font-size (orbit sets `html { font-size: 14.4px }`; psak does not). Therefore:
+//
+//   * The library NEVER uses `rem`  — rem binds to the host app's root, so the same declaration
+//     renders at a different size in each app.
+//   * The library NEVER uses a bare `px` font-size — px binds to nothing at all, which is how
+//     `.nxe-select-panel { font-size: 14px }` ended up 14% larger than every other text surface
+//     in orbit (the CDK-portaled panel escapes the host app's editor font rule; see _widget.scss).
+//
+// Instead, absolute values live here as `--nxe-ui-*` custom properties whose DEFAULTS are
+// DevExtreme dx.light's own. A host app overrides only the properties its own dx-era cascade
+// changed. Sizes derived from the widget scale use `em`.
+//
+// Values are sourced from the reference deployment's real bundle
+// (tools/visual-parity/reference/bright-styles.css), NOT from src/styles/dx-compat.css — that
+// file was extracted from a newer DevExtreme release and disagrees with the reference.
+//
+// NAMESPACE: `--nxe-ui-*`, not `--nxe-*`. The host app's Tailwind theming plugin already emits
+// `--nxe-border`, `--nxe-divider`, … dynamically; colliding with those would be silent and awful.
+
+// `:where(:root)` — NOT `:root`. This sheet is the LAST entry in the host app's angular.json
+// `styles` array, so a plain `:root` here would load after (and therefore beat) the host app's own
+// `:root` overrides — defaults silently winning over the app that is trying to configure them.
+// `:where()` pins these to zero specificity, so any host declaration always wins.
+:where(:root) {
+    // Typography — reference `.dx-widget`
+    --nxe-ui-font-family: Helvetica Neue, Segoe UI, helvetica, verdana, sans-serif;
+    --nxe-ui-font-size: 14px; // dx default. orbit overrides -> 0.85rem (= 12.24px @ 14.4px root)
+    --nxe-ui-font-weight: 400;
+    --nxe-ui-line-height: 1.35715;
+
+    // Palette — reference dx.light
+    --nxe-ui-text: #333;
+    --nxe-ui-text-muted: #999;
+    --nxe-ui-border: #ddd;
+    --nxe-ui-surface: #fff;
+    --nxe-ui-accent: #337ab7;
+    --nxe-ui-accent-contrast: #fff;
+    --nxe-ui-danger: #d9534f;
+    --nxe-ui-success: #5cb85c;
+
+    // State layers — reference dx.light list/menu states
+    --nxe-ui-hover-bg: rgba(0, 0, 0, 0.04);
+    --nxe-ui-selected-bg: rgba(0, 0, 0, 0.1);
+    --nxe-ui-selected-hover-bg: rgba(0, 0, 0, 0.07);
+    --nxe-ui-focus-selected-bg: rgba(51, 122, 183, 0.7);
+    --nxe-ui-disabled-opacity: 0.5;
+
+    // Metrics
+    --nxe-ui-radius: 4px;
+    --nxe-ui-popup-radius: 6px;
+    --nxe-ui-popup-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    --nxe-ui-item-padding: 7px 9px;
+    --nxe-ui-list-padding: 10px;
+
+    // Overlay geometry — host apps that skinned dx popups override these.
+    // 0 keeps a dropdown panel exactly as wide as the editor it drops from (the components set
+    // `width` inline from the trigger's offsetWidth; a non-zero floor here overrides that). Orbit
+    // carried the dx-era `.dx-overlay-content { min-width: 400px !important }` here until
+    // 2026-07-29 and dropped it — see nxe-ui/DEFAULTS.md.
+    --nxe-ui-overlay-min-width: 0px;
+
+    // foreground.divider — slate.200
+    --nxe-divider-color: #e2e8f0;
+}
+
+:where(.dark) {
+    // slate.100 @ 12%
+    --nxe-divider-color: rgba(241, 245, 249, 0.12);
+}

package/styles/_widget.scss

@@ -0,0 +1,58 @@
+// @nexterajs/ui — the widget base, i.e. the nxe counterpart of dx.light's `.dx-widget`.
+//
+// WHY THIS EXISTS
+// ---------------
+// DevExtreme gave every widget its typography from one rule on `.dx-widget`, and orbit's dx-era
+// stylesheet resized all of them with a single `.dx-widget { font-size: .85rem !important }`.
+// The nxe components dropped that base class, so each one had to re-declare its own font — and
+// the ones rendered through a CDK overlay had no way to inherit anything sensible at all.
+//
+// A CDK pane is appended to <body> (`@angular/cdk` overlay container), so a portaled dropdown
+// inherits `html`/`body`, never the editor that opened it. Concretely, in orbit:
+//
+//     `font: inherit`                -> body's 0.8rem = 11.52px, and the page font stack   (wrong)
+//     hard-coded `font-size: 14px`   -> 14px while every sibling surface is 12.24px        (wrong)
+//     `.nxe-widget` on the PANE      -> the widget contract crosses the portal boundary    (right)
+//
+// So: every component host AND every overlay pane the library opens carries `nxe-widget`. Use the
+// `nxePane()` helper (styling/nxe-overlay.ts) when creating an overlay so this cannot be forgotten.
+//
+// `:where()` holds specificity at 0 so per-instance Tailwind utilities on a host still win —
+// dx.light got that for free by loading before Tailwind; this sheet loads after.
+
+@mixin nxe-widget {
+    :where(.nxe-widget) {
+        font-family: var(--nxe-ui-font-family);
+        font-size: var(--nxe-ui-font-size);
+        font-weight: var(--nxe-ui-font-weight);
+        line-height: var(--nxe-ui-line-height);
+    }
+
+    // Form controls do not inherit font by default (UA stylesheet wins), so they need it
+    // explicitly — as dx did with `.dx-widget input, .dx-widget textarea`.
+    .nxe-widget input,
+    .nxe-widget textarea,
+    .nxe-widget select,
+    .nxe-widget button {
+        font-family: var(--nxe-ui-font-family);
+        line-height: var(--nxe-ui-line-height);
+    }
+}
+
+// Deliberately NOT part of nxe-widget yet. dx also put `color` and `box-sizing` on `.dx-widget`,
+// but adopting `color` here would newly repaint nxe-tree-view / nxe-list / nxe-file-uploader, and
+// the host app renders its sidebar inside a `.dark` container. Land it only after a visual pass.
+@mixin nxe-widget-chrome {
+    :where(.nxe-widget) {
+        color: var(--nxe-ui-text);
+    }
+
+    .nxe-widget,
+    .nxe-widget *,
+    .nxe-widget ::before,
+    .nxe-widget ::after,
+    .nxe-widget::before,
+    .nxe-widget::after {
+        box-sizing: border-box;
+    }
+}