@nexterajs/ui 0.0.1 → 0.1.0

package/fesm2022/nexterajs-ui.mjs.map

@@ -1 +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"}
+{"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/charts';\r\nexport * from '@nexterajs/ui/core';\r\nexport * from '@nexterajs/ui/display';\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/navigation';\r\nexport * from '@nexterajs/ui/notify';\r\nexport * from '@nexterajs/ui/overlay';\r\nexport * from '@nexterajs/ui/pivot';\r\nexport * from '@nexterajs/ui/shell';\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

@@ -1,20 +1,31 @@
 {
   "name": "@nexterajs/ui",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "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",
+    "@angular/router": "^22.0.0",
     "luxon": "^3.0.0",
     "rxjs": "^7.8.0"
   },
+  "peerDependenciesMeta": {
+    "@angular/router": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "sass": "styles/index.scss",
   "exports": {
+    "./styles": {
+      "sass": "./styles/index.scss",
+      "default": "./styles/index.scss"
+    },
     "./styles/*": {
       "sass": "./styles/*",
       "default": "./styles/*"
@@ -30,10 +41,18 @@
       "types": "./types/nexterajs-ui-animations.d.ts",
       "default": "./fesm2022/nexterajs-ui-animations.mjs"
     },
+    "./charts": {
+      "types": "./types/nexterajs-ui-charts.d.ts",
+      "default": "./fesm2022/nexterajs-ui-charts.mjs"
+    },
     "./core": {
       "types": "./types/nexterajs-ui-core.d.ts",
       "default": "./fesm2022/nexterajs-ui-core.mjs"
     },
+    "./display": {
+      "types": "./types/nexterajs-ui-display.d.ts",
+      "default": "./fesm2022/nexterajs-ui-display.mjs"
+    },
     "./dropdowns": {
       "types": "./types/nexterajs-ui-dropdowns.d.ts",
       "default": "./fesm2022/nexterajs-ui-dropdowns.mjs"
@@ -58,10 +77,26 @@
       "types": "./types/nexterajs-ui-intl.d.ts",
       "default": "./fesm2022/nexterajs-ui-intl.mjs"
     },
+    "./navigation": {
+      "types": "./types/nexterajs-ui-navigation.d.ts",
+      "default": "./fesm2022/nexterajs-ui-navigation.mjs"
+    },
+    "./notify": {
+      "types": "./types/nexterajs-ui-notify.d.ts",
+      "default": "./fesm2022/nexterajs-ui-notify.mjs"
+    },
+    "./overlay": {
+      "types": "./types/nexterajs-ui-overlay.d.ts",
+      "default": "./fesm2022/nexterajs-ui-overlay.mjs"
+    },
     "./pivot": {
       "types": "./types/nexterajs-ui-pivot.d.ts",
       "default": "./fesm2022/nexterajs-ui-pivot.mjs"
     },
+    "./shell": {
+      "types": "./types/nexterajs-ui-shell.d.ts",
+      "default": "./fesm2022/nexterajs-ui-shell.mjs"
+    },
     "./styling": {
       "types": "./types/nexterajs-ui-styling.d.ts",
       "default": "./fesm2022/nexterajs-ui-styling.mjs"
@@ -83,7 +118,7 @@
   "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.",
+  "description": "Angular 22 component library replacing DevExtreme: data grid, pivot grid, editors, pickers and a zero-dependency XLSX engine, in eighteen tree-shakeable entry points, with one global style bundle.",
   "keywords": [
     "angular",
     "angular-components",

package/styles/_dropdown.scss

@@ -1,7 +1,10 @@
 // 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
+// Reproduces the DevExtreme `.dx-dropdownlist-popup`. Global (part of the styles/index.scss bundle) so it
 // applies inside the CDK overlay regardless of which component opened it.
 //
+// The file also holds the editors' trailing-button rule set (`nxe-dropdown-editor-buttons`, below),
+// which is NOT global: each dropdown editor includes it in its own component stylesheet.
+//
 // 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
@@ -110,4 +113,150 @@
         min-height: 3em;
         color: var(--nxe-ui-text-muted);
     }
+
+    // The panes that replace DevExtreme popups sit flush against their editor (dx measures the
+    // overlay at the editor's bottom edge). Host apps migrated from broker carry
+    // `.cdk-overlay-pane { margin-top: 5px }` (styles/material/_menu.scss), which was written for
+    // mat-menu — dx popups were never CDK panes, so it never reached them. At (0,2,0) this beats it.
+    // `.nxe-autocomplete-pane` is deliberately absent: it replaces mat-autocomplete, which did get
+    // the 5px, and so did the mat-menu panes that host nxe-list action menus.
+    .cdk-overlay-pane.nxe-select-pane,
+    .cdk-overlay-pane.nxe-dropdownbox-pane,
+    .cdk-overlay-pane.nxe-autocomplete-box-pane,
+    .cdk-overlay-pane.nxe-datebox-pane {
+        margin-top: 0;
+    }
+}
+
+// ------------------------------------------------------------------------------------------------
+// Trailing buttons of the dropdown editors — one rule set for select-box, tag-box, drop-down-box
+// and auto-complete. Include it INSIDE the component's host selector:
+//
+//     nxe-select-box { @include dropdown.nxe-dropdown-editor-buttons; }
+//
+// so every selector starts with the host element. That keeps them in component styles (present in
+// karma, and loaded after the app's global sheet) while staying LOW enough for an app to recolour:
+// `nxe-select-box .nxe-select-arrow` is (0,1,1), so e.g. a sign-in screen's
+// `.sign-in-company .nxe-select-arrow { color }` at (0,2,0) still wins.
+//
+// Colours are dx.light literals, like the rest of the editor chrome (styles/_editor.scss) — there
+// are no dark editor tokens to route them through.
+// ------------------------------------------------------------------------------------------------
+
+// The 34px drop button box, shared with the date box's calendar button.
+// dx: `.dx-dropdowneditor-button { width:34px; min-width:34px; padding:1px; border-radius:4px;
+//      height:100% }` around `.dx-dropdowneditor-icon { width:32px; height:100%;
+//      border:1px solid transparent; border-radius:3px }`. The state fill is painted on that 32px
+// inner icon, never on the button — which is why measuring `.dx-dropdowneditor-button` found it
+// transparent. `background-clip: content-box` paints the same 32px box (corner radius 4 - 1 = 3px)
+// without an extra element.
+@mixin nxe-drop-button {
+    box-sizing: border-box;
+    position: relative;
+    flex: 0 0 34px;
+    // Full editor height rather than a fixed 34px: in a grid cell whose editor is shorter the fill
+    // becomes 32 x (height - 2), as dx's does, and the glyph stays centred.
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    min-width: 34px;
+    padding: 1px;
+    border-radius: 4px;
+    background-clip: content-box;
+    color: var(--nxe-ui-text, #333);
+    cursor: pointer;
+
+    svg {
+        display: block;
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+    }
+}
+
+// dx: `.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
+//      .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon
+//      { background-color:#e6e6e6 }` and
+//     `.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon
+//      { background-color:#b3b3b3; opacity:1 }`.
+//
+// PRECEDENCE — do not reorder, do not add !important. dx's hover selector is (0,4,0) (the :not()
+// counts as a class) and beats the open one at (0,3,0), so an open editor under the pointer shows
+// #e6e6e6 and turns #b3b3b3 only once the pointer leaves. Here hover/active is (0,3,1) against open
+// at (0,2,1) — the same relationship, so source order does not decide it and must not be made to.
+// (The library's panes open with a transparent CDK backdrop, so the host stops matching :hover
+// while open and the fill reads #b3b3b3 for the whole open period. That residual is known.)
+@mixin nxe-drop-button-states($button, $open) {
+    &:hover:not(.nxe-disabled) #{$button},
+    &:active:not(.nxe-disabled) #{$button} {
+        background-color: var(--nxe-ui-neutral-150, #e6e6e6);
+    }
+
+    #{$open} {
+        background-color: var(--nxe-ui-neutral-350, #b3b3b3);
+    }
+}
+
+// The clear (×) area — one definition for the dropdown editors' `.nxe-select-clear` (below) and the
+// text editors' `.nxe-clear-button-area` (styles/_editor.scss: text-box, number-box, date-box).
+// dx: `.dx-show-clear-button .dx-clear-button-area { width:34px; min-width:34px; height:100% }`
+// holding `.dx-icon-clear { color:#999; top:50%; margin-top:-17px; padding:8px; width:34px;
+// height:34px; font-size:18px }` — an 18px glyph box centred in the area. #999 in every state: dx
+// has no hover colour for it.
+@mixin nxe-clear-button {
+    box-sizing: border-box;
+    flex: 0 0 34px;
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    min-width: 34px;
+    padding: 0;
+    color: var(--nxe-ui-text-muted, #999);
+    cursor: pointer;
+
+    svg {
+        display: block;
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+    }
+}
+
+@mixin nxe-dropdown-editor-buttons {
+    // Clear (×).
+    .nxe-select-clear {
+        @include nxe-clear-button;
+    }
+
+    // Drop-down arrow: an 8x4 #333 triangle centred in its 18px box.
+    .nxe-select-arrow {
+        @include nxe-drop-button;
+    }
+
+    @include nxe-drop-button-states('.nxe-select-arrow', '&.nxe-open .nxe-select-arrow');
+
+    // dx: `.dx-dropdowneditor-button-visible .dx-texteditor-input { padding-inline-end: 0 }` — the
+    // arrow supplies the trailing gap. Descendant, not child, so the tag box's input (inside its
+    // tag container) is covered too.
+    .nxe-editor-container:has(> .nxe-select-arrow) .nxe-editor-input {
+        padding-inline-end: 0;
+    }
+
+    // Invalid badge (styles/_editor.scss) clears the trailing buttons. dx draws it 4px inside
+    // `.dx-texteditor-input-container` (`.dx-texteditor.dx-invalid .dx-texteditor-input-container
+    // ::after { inset-inline-end:4px }`), and that container ends where the 34px buttons begin:
+    // 34 + 4 with one button, 34 + 34 + 4 with both. (dx's own 38px/68px rules target a
+    // `.dx-texteditor-container::after` that has no content, so they never paint.)
+    .nxe-editor-container:has(> .nxe-select-clear),
+    .nxe-editor-container:has(> .nxe-select-arrow) {
+        --nxe-invalid-badge-inset: 38px;
+    }
+
+    .nxe-editor-container:has(> .nxe-select-clear):has(> .nxe-select-arrow) {
+        --nxe-invalid-badge-inset: 72px;
+    }
 }

package/styles/_editor.scss

@@ -3,6 +3,7 @@
 //
 // 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.
+@use 'dropdown';
 
 @mixin nxe-editor-chrome {
     // Base box at ZERO specificity (`:where`) so per-instance Tailwind utilities applied on the
@@ -12,20 +13,20 @@
         position: relative;
         display: block;
         box-sizing: border-box;
-        background: #fff;
-        border: 1px solid #ddd;
+        background: var(--nxe-ui-surface, #fff);
+        border: 1px solid var(--nxe-ui-border, #ddd);
         border-radius: 4px;
-        color: #333;
+        color: var(--nxe-ui-text, #333);
         line-height: 1.35715;
     }
 
     .nxe-editor {
         &:hover {
-            border-color: rgba(51, 122, 183, 0.4); // faded primary blue
+            border-color: var(--nxe-ui-accent-faded, rgba(51, 122, 183, 0.4)); // faded primary blue
         }
 
         &.nxe-focused {
-            border-color: #337ab7; // solid primary blue
+            border-color: var(--nxe-ui-accent, #337ab7); // solid primary blue
         }
 
         &.nxe-readonly {
@@ -45,11 +46,11 @@
         // 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);
+            border-color: var(--nxe-ui-invalid-faded, rgba(217, 83, 79, 0.4));
 
             &.nxe-focused,
             &:hover {
-                border-color: #d9534f;
+                border-color: var(--nxe-ui-invalid, #d9534f);
             }
 
             // Invalid badge — dx `.dx-invalid.dx-texteditor.dx-editor-outlined.dx-show-invalid-badge
@@ -70,8 +71,8 @@
                 width: 18px;
                 height: 18px;
                 border-radius: 50%;
-                background-color: #d9534f;
-                color: #fff;
+                background-color: var(--nxe-ui-invalid, #d9534f);
+                color: var(--nxe-ui-invalid-contrast, #fff);
                 font-weight: 700;
                 font-size: 13px;
                 line-height: 18px;
@@ -79,10 +80,12 @@
             }
 
             // 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 {
+            // a long value from running under the badge. For a container holding the input alone or
+            // with the text editors' clear area: the badge sits inside the input's own box in both
+            // (a dx text or number box with its clear button shown keeps the 34px — probed). The
+            // dropdown editors' buttons are left to their own rules.
+            > .nxe-editor-container:not(:has(> :not(.nxe-editor-input, .nxe-clear-button-area)))
+                .nxe-editor-input {
                 padding-inline-end: 34px;
             }
         }
@@ -96,18 +99,69 @@
         width: 100%;
     }
 
+    // `showClearButton` on the text editors (text-box, number-box, date-box): the same 34px area and
+    // #999 glyph as the dropdown editors' clear (styles/_dropdown.scss), after the input.
+    .nxe-clear-button-area {
+        @include dropdown.nxe-clear-button;
+    }
+
+    // The badge moves off the clear area: dx draws it 4px inside `.dx-texteditor-input-container`,
+    // which ends where the 34px area begins (38px). The date box adds its own 72px case for the
+    // clear area plus its calendar button.
+    .nxe-editor-container:has(> .nxe-clear-button-area) {
+        --nxe-invalid-badge-inset: 38px;
+    }
+
+    // `showPasswordToggle` on the text box: a real <button> (so it is a tab stop with a name and
+    // aria-pressed) in the clear button's 34px area, after the input and the clear button. The
+    // badge clears it the same way it clears the clear area, and both together make 72px.
+    .nxe-password-toggle {
+        @include dropdown.nxe-clear-button;
+        appearance: none;
+        border: 0;
+        background: transparent;
+        font: inherit;
+
+        &:hover {
+            color: var(--nxe-ui-text, #333);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--nxe-ui-focus-ring-color, #5c95c5);
+            outline-offset: -2px;
+            border-radius: 4px;
+        }
+
+        .nxe-password-toggle-slash {
+            fill: currentColor;
+            stroke: var(--nxe-ui-surface, #fff);
+            stroke-width: 1px;
+        }
+    }
+
+    .nxe-editor-container:has(> .nxe-password-toggle) {
+        --nxe-invalid-badge-inset: 38px;
+    }
+
+    .nxe-editor-container:has(> .nxe-password-toggle):has(> .nxe-clear-button-area) {
+        --nxe-invalid-badge-inset: 72px;
+    }
+
     .nxe-editor-input {
         -webkit-appearance: none;
         appearance: none;
+        // dx: `.dx-widget * { box-sizing: border-box }`. Without it, a host with no preflight grew the
+        // 34px min-height by the 15px of padding and every editor rendered 51px tall, not 36px.
+        box-sizing: border-box;
         flex: 1 1 auto;
         margin: 0;
         width: 100%;
-        min-height: 34px;
-        padding: 7px 9px 8px;
+        min-height: var(--nxe-ui-control-min-height, 34px);
+        padding: var(--nxe-ui-editor-padding, 7px 9px 8px);
         border: 0;
         outline: 0;
         background: transparent;
-        color: #333;
+        color: var(--nxe-ui-text, #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%;
@@ -116,14 +170,14 @@
         border-radius: 4px;
 
         &::placeholder {
-            color: #999;
+            color: var(--nxe-ui-text-muted, #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;
+            color: var(--nxe-ui-text, #333);
+            -webkit-text-fill-color: var(--nxe-ui-text, #333);
         }
     }
 
@@ -137,8 +191,8 @@
         max-width: 100%;
         padding: 10px;
         border-radius: 4px;
-        background-color: #d9534f;
-        color: #fff;
+        background-color: var(--nxe-ui-invalid, #d9534f);
+        color: var(--nxe-ui-invalid-contrast, #fff);
         font-size: 0.85em;
         line-height: normal;
         word-wrap: break-word;

package/styles/_icons.scss

@@ -0,0 +1,92 @@
+// @nexterajs/ui — the icon layer: `<i class="nxe-icon nxe-icon-NAME">`, the element nxe-button's
+// `icon` input renders in place of dx's `<i class="dx-icon dx-icon-NAME">`.
+//
+// dx draws these from its DXIcons font. The library does not ship or reference that font
+// (DevExtreme is not Apache-licensed), so each glyph below is redrawn: an 18-unit SVG (1 unit =
+// 1px, unless a glyph shares another box's geometry and says so) of rectangles and straight-edged
+// polygons laid out from the metrics measured off dx's rendering (ink box, wall and stroke widths,
+// position), and used as a MASK painted in `currentColor`, so it
+// takes the button's text colour as dx's glyphs do. Where two shapes meet they overlap, so no
+// anti-aliased seam shows at a fractional position.
+//
+// An unknown name draws nothing in its 18x18 box, as dx does (`caret-down`, which DXIcons lacks,
+// measures 18x18 with no ink). That is what the transparent default mask is for: `mask:
+// var(--nxe-icon)` with the property unset is invalid at computed-value time, the mask drops to
+// `none`, and the box paints as a solid square of `currentColor`.
+//
+// Scoped to <i>. The grid's filter-row `<span class="nxe-icon …">` text glyphs and the pivot field
+// chooser's `<span class="nxe-area-icon nxe-icon-filter">` draw themselves and must not match.
+
+// $box is the viewBox side: 18 draws in px, a smaller one scales that glyph up to the 18px box.
+@function nxe-icon-mask($body, $box: 18) {
+    @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$box} #{$box}'%3E#{$body}%3C/svg%3E");
+}
+
+@mixin nxe-icons {
+    // dx: `.dx-icon { display:inline-block }`, `.dx-button .dx-icon { width:18px; height:18px;
+    //      vertical-align:middle; margin-inline:0 }`.
+    i.nxe-icon {
+        --nxe-icon: linear-gradient(transparent, transparent);
+        display: inline-block;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: 18px;
+        height: 18px;
+        vertical-align: middle;
+        background-color: currentColor;
+        -webkit-mask: var(--nxe-icon) center / 18px 18px no-repeat;
+        mask: var(--nxe-icon) center / 18px 18px no-repeat;
+    }
+
+    // `filter` (dx U+F050): the grid header's funnel (nxe-data-grid.component.scss
+    // `.nxe-grid-hf-icon`), the same geometry every funnel in the library uses, drawn in its 14-unit
+    // box and scaled to fill the 18px one: a band 3/14 deep across the full width whose lower
+    // corners run in 45° shoulders down to a 4/14 waist, and a 4/14 stem rect standing inside the
+    // shoulders from the band down to the bottom edge.
+    i.nxe-icon.nxe-icon-filter {
+        --nxe-icon: #{nxe-icon-mask(
+                "%3Cpolygon points='0 0 14 0 14 3 9 8 5 8 0 3'/%3E"
+                    + "%3Crect x='5' y='3' width='4' height='11'/%3E",
+                14
+            )};
+    }
+
+    // `columnchooser` (dx U+F04D): a 16x15 ink box, 1px in and 2px down. A 12x12 frame of 2px walls
+    // (x 1-13, y 2-14) whose lower right corner is covered by an 8x11 panel (x 9-17, y 6-17) with
+    // three 4x1 slots through it (x 11-15, every third row from y 8). All rects: the frame's four
+    // walls, stopped where the panel starts; the panel's two 2px stiles and its four 2px rails.
+    i.nxe-icon.nxe-icon-columnchooser {
+        --nxe-icon: #{nxe-icon-mask(
+                "%3Crect x='1' y='2' width='12' height='2'/%3E"
+                    + "%3Crect x='1' y='2' width='2' height='12'/%3E"
+                    + "%3Crect x='1' y='12' width='9' height='2'/%3E"
+                    + "%3Crect x='11' y='2' width='2' height='5'/%3E"
+                    + "%3Crect x='9' y='6' width='2' height='11'/%3E"
+                    + "%3Crect x='15' y='6' width='2' height='11'/%3E"
+                    + "%3Crect x='9' y='6' width='8' height='2'/%3E"
+                    + "%3Crect x='9' y='9' width='8' height='2'/%3E"
+                    + "%3Crect x='9' y='12' width='8' height='2'/%3E"
+                    + "%3Crect x='9' y='15' width='8' height='2'/%3E"
+            )};
+    }
+
+    // Forced colours (Windows high contrast) replace every background-color with Canvas — the colour
+    // behind the icon — so the masked glyph would vanish. `preserve-parent-color` opts the icon out
+    // of that forcing while its `color` still takes the parent's forced text colour (CanvasText on
+    // nxe-button's host, ButtonText in a native button), so the glyph matches the label beside it.
+    // Where that value is unknown, `none` with CanvasText: plain `none` alone would leave
+    // currentColor at the author's unforced colour (#333 on a black canvas).
+    @media (forced-colors: active) {
+        i.nxe-icon {
+            forced-color-adjust: none;
+            background-color: CanvasText;
+        }
+
+        @supports (forced-color-adjust: preserve-parent-color) {
+            i.nxe-icon {
+                forced-color-adjust: preserve-parent-color;
+                background-color: currentColor;
+            }
+        }
+    }
+}

package/styles/_mixins.scss

@@ -1,2 +1,105 @@
 // @nexterajs/ui — shared SCSS mixins.
-// Grows as components are added (e.g. form-control framing, grid theming). Empty for now.
+@use 'sass:math';
+
+// Keeps a mark drawn as a background visible under forced colours (Windows high contrast). There
+// the UA replaces every background-color with Canvas, the colour behind the mark, so the tick and
+// the square would vanish and a checked box would read as unchecked (dx's font tick is text and
+// survives). The pseudo-element opts out of the forcing and paints in CanvasText — the colour the
+// box's border is forced to — so the mark keeps the user's contrast.
+@mixin nxe-forced-colors-mark {
+    @media (forced-colors: active) {
+        forced-color-adjust: none;
+        background-color: CanvasText;
+    }
+}
+
+// The checked glyph of a dx 22px check box (`.dx-checkbox-checked .dx-checkbox-icon::before`, the
+// DXIcons check at 16px), for a pseudo-element of a 22px border-box box with a 1px border.
+//
+// Redrawn, not taken from the font: a 2px stroke bent through a right angle — the short arm falling
+// 5.4px, the long arm rising 9.6px — written as the outline of that stroke, which gives a 15x11 ink
+// box. It is placed 3.5px in and 6px down from the box's outer edge, where dx's measured tick sits
+// (15x11 at +3.5/+6.2, its centre 0.5px below the box's). Every length is stated, so the glyph does
+// not move with the host's box-sizing. Not mirrored under RTL, like dx's: 2.5px from either inline
+// edge is the same place in the 20px padding box.
+@mixin nxe-checkmark($color: var(--nxe-ui-accent, #337ab7)) {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    top: 5px;
+    inset-inline-start: 2.5px;
+    width: 15px;
+    height: 11px;
+    background-color: $color;
+    clip-path: polygon(
+        0 5.586px,
+        5.414px 11px,
+        15px 1.414px,
+        13.586px 0,
+        5.414px 8.172px,
+        1.414px 4.172px
+    );
+
+    @include nxe-forced-colors-mark;
+}
+
+// The indeterminate mark of the same box — dx: `.dx-checkbox-indeterminate .dx-checkbox-icon::before
+// { width:.545455em; height:.545455em (12px at 22px); top:50%; margin-top:-.2727275em;
+// inset-inline-start:50%; margin-inline-start:-.2727275em; background-color:#337ab7;
+// border-radius:2px }` — a 12px square centred in the box.
+@mixin nxe-check-indeterminate($color: var(--nxe-ui-accent, #337ab7)) {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    top: 50%;
+    inset-inline-start: 50%;
+    width: 12px;
+    height: 12px;
+    margin-top: -6px;
+    margin-inline-start: -6px;
+    border-radius: 2px;
+    background-color: $color;
+
+    @include nxe-forced-colors-mark;
+}
+
+// A thin, unobtrusive scrollbar on a natively-scrolling element.
+//
+// Read this before adding `::-webkit-scrollbar` rules anywhere else. From Chrome 121, setting
+// either standard property (`scrollbar-width` / `scrollbar-color`) makes Chromium ignore the
+// webkit pseudo-elements **on that same element**. The two do not compose: an element that sets
+// both gets the standard rendering and the webkit block becomes dead code that still reads as
+// live, which is the worst of both — it looks maintained and changes nothing.
+//
+// So the pseudo-elements live behind `@supports not (scrollbar-width: thin)`, which is true only
+// on the engines that never implemented the standard properties (Chrome < 121, Safari < 18.2).
+// Exactly one of the two branches applies anywhere.
+@mixin nxe-thin-scrollbar(
+    $thumb: var(--nxe-ui-scrollbar-thumb, rgba(0, 0, 0, 0.5)),
+    $track: transparent,
+    $size: 8px,
+    $thumb-hover: $thumb
+) {
+    scrollbar-width: thin;
+    scrollbar-color: $thumb $track;
+
+    @supports not (scrollbar-width: thin) {
+        &::-webkit-scrollbar {
+            width: $size;
+            height: $size;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: $track;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: $thumb;
+            border-radius: math.div($size, 2);
+        }
+
+        &:hover::-webkit-scrollbar-thumb {
+            background-color: $thumb-hover;
+        }
+    }
+}