@angular-bootstrap/ngbootstrap 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-bootstrap/ngbootstrap",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Angular UI for data-heavy apps with DataGrid grouping, Angular-native Form Builder, drag-and-drop workflows, pagination, typeahead, tree, splitter, stepper, and chips.",
   "author": {
     "name": "Harmeet Singh"
@@ -55,11 +55,15 @@
     "@angular/core": ">=21.0.0 <23.0.0",
     "@angular/forms": ">=21.0.0 <23.0.0",
     "chart.js": ">=4.4.0 <5.0.0",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.0",
+    "tailwindcss": ">=4.0.0 <5.0.0"
   },
   "peerDependenciesMeta": {
     "chart.js": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -71,12 +75,16 @@
       "@jest/reporters>glob": "^13.0.6",
       "babel-plugin-istanbul>test-exclude": "^8.0.0",
       "jest-config>glob": "^13.0.6",
-      "jest-runtime>glob": "^13.0.6"
+      "jest-runtime>glob": "^13.0.6",
+      "fast-uri@>=3.0.0 <3.1.6": "^3.1.6",
+      "brace-expansion@>=4.0.0 <5.0.9": "^5.0.9",
+      "js-yaml@>=3.0.0 <3.15.2": "^3.15.2",
+      "nanoid@<3.3.18": "^3.3.18"
     }
   },
-  "module": "fesm2022/angular-bootstrap-ngbootstrap.mjs",
-  "typings": "types/angular-bootstrap-ngbootstrap.d.ts",
   "exports": {
+    "./styles/tailwind.css": "./src/styles/integrations/tailwind.css",
+    "./src/styles/*": "./src/styles/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -85,5 +93,7 @@
       "default": "./fesm2022/angular-bootstrap-ngbootstrap.mjs"
     }
   },
+  "module": "fesm2022/angular-bootstrap-ngbootstrap.mjs",
+  "typings": "types/angular-bootstrap-ngbootstrap.d.ts",
   "type": "module"
 }

package/src/ai/README.md

@@ -0,0 +1,134 @@
+# AI UI components
+
+Provider-independent Angular controls for operational assistant workflows.
+These components render supplied data and emit typed events. They do not call
+an AI provider, execute generated actions, read the clipboard automatically,
+or persist conversation history.
+
+```ts
+import {
+  NgbPromptBoxComponent,
+  NgbAiChatComponent,
+  NgbAiPromptComponent,
+  NgbInlineAiPromptComponent,
+  NgbSmartPasteComponent,
+} from '@angular-bootstrap/ngbootstrap';
+```
+
+Add the standalone components to your application's component imports.
+Bootstrap 5 CSS is required. For scoped themes, load the library global
+`src/styles/themes.scss` entry and use any supported `data-ngb-theme` wrapper.
+No model SDK or AI provider dependency is installed.
+
+| Component | Use case | Application event |
+| --- | --- | --- |
+| `ngb-prompt-box` | Ask a question or collect a generation instruction | `promptSubmit: string`, `stop: void` |
+| `ngb-ai-chat` | Conversation with a workspace assistant | `promptSubmit`, `stop`, `retry: string`, `feedback: NgbAiFeedback` |
+| `ngb-ai-prompt` | Generate and review multiple drafts | `promptSubmit`, `stop`, `responseApply`, `regenerate`, `responseDismiss` |
+| `ngb-inline-ai-prompt` | Propose a contextual text replacement | `promptSubmit: NgbInlineAiRequest`, `responseApply: string`, `stop`, `closed` |
+| `ngb-smart-paste` | Review field values extracted from pasted notes | `mappingRequest: NgbSmartPasteRequest`, `valuesApply: readonly NgbSmartPasteSuggestion[]`, `stop` |
+
+## Prompt Box
+
+```html
+<ngb-prompt-box [(value)]="instruction" [busy]="pending()"
+  [suggestions]="['Summarize open orders', 'Draft a delivery update']"
+  (promptSubmit)="send($event)" (stop)="cancel()" />
+```
+
+`value` supports two-way binding. Set `maxLength` (default 4000),
+`submitOnEnter` (default true), and `clearOnSubmit` (default true).
+Empty, whitespace-only, over-limit, disabled, or busy submissions are rejected.
+Shift+Enter inserts a line and composition events do not submit.
+Suggestions populate the draft without sending it. The composer has
+`label`, `placeholder`, `submitLabel`, and `stopLabel` string inputs.
+
+## Chat
+
+```html
+<ngb-ai-chat [messages]="messages()" [busy]="pending()" [error]="error()"
+  (promptSubmit)="send($event)" (stop)="cancel()"
+  (retry)="retryMessage($event)" (feedback)="recordFeedback($event)" />
+```
+
+Each `NgbAiMessage` has a unique `id`, a `role` (`user`, `assistant`, or
+`system`), and plain-text `content`. Optional `status` is `complete`,
+`streaming`, or `error`; optional `error` supplies per-message failure text.
+Replace messages immutably as chunks arrive. Retry emits the failed ID;
+the application decides which request to replay. Feedback emits the ID and
+`helpful`, `unhelpful`, or `null` when cleared. The component manages visual
+feedback selection, but the application owns its persistence.
+
+`label`, `userLabel`, `assistantLabel`, `emptyText`, and `suggestions` configure
+basic conversation copy. Busy locks the composer and exposes Stop.
+User messages align to the end of the transcript; assistant responses stay at
+the start, with feedback below the response. There is no forced autoscroll: users can continue reading earlier messages.
+
+## Draft workspace
+
+The workspace places the instruction brief beside reviewable drafts and stacks
+them on small screens. Provide `responses: readonly NgbAiResponse[]`, each with `id`, `prompt`, and
+`text`. Array order determines display order. `responseApply` and `regenerate`
+emit the selected response; `responseDismiss` emits its ID. These events do
+not change the input history. Supply `label`, `promptLabel`, `emptyText`, and
+`suggestions` as needed. The request text remains available after submission.
+
+## Inline edits
+
+Provide `context` and a separately generated `response`. The `promptSubmit`
+event contains `{ instruction, context }`. Only explicit Apply emits
+`responseApply`; the original context is never changed by the library.
+Closing with the trigger, Close, or Escape emits `closed`, restores trigger
+focus, and emits `stop` if work is pending. The expanded region stays in the
+page flow, and normal Tab navigation reaches its controls.
+
+## Reviewed paste
+
+Provide `fields` as `{ key, label, value? }[]`; field values are strings.
+`source` is an optional two-way input for the pasted text. The user pastes
+into a normal textarea; the component does not request clipboard permission.
+`mappingRequest` emits the text and a copied field schema. Your extraction
+service returns `suggestions` as `{ field, value }[]`.
+
+Only keys present in `fields` can be reviewed. The first valid suggestion for
+a field is used; unknown fields are ignored. Users can edit proposed text and
+exclude fields. `valuesApply` emits only the selected proposals. The application
+must validate them and explicitly update its form. New fields or suggestions
+reset the review selection and temporary edits.
+
+## Request lifecycle and boundaries
+
+All panels expose `busy`, `disabled`, and (except Prompt Box) `error` inputs.
+Set busy immediately when a request starts. On Stop, abort the application
+request, clear busy, and ignore results from older request IDs. Cancel pending
+work on destruction. Clear stale proposals when the source or context changes.
+Keep provider credentials on the server and validate response data before
+passing it to components or applying it to domain records.
+
+Content is interpolated as text. HTML, Markdown rendering, attachments, voice,
+model transports, persistence, AI Grid features, and WebMCP are not included.
+Inputs with labels support basic copy customization; this first version does
+not yet expose a full translation dictionary for every built-in action label.
+
+Tests cover submission guards, composition/keyboard input, cancellation,
+streaming updates, error/retry, feedback, explicit draft/edit application,
+field allowlisting, review edits, and escaped content.
+
+## Accessibility and keyboard support
+
+Native buttons support Tab/Shift+Tab navigation and Enter/Space activation.
+Prompt inputs have visible labels and associated keyboard/length guidance.
+Enter submits when enabled; Shift+Enter and IME composition are preserved.
+During processing, the textarea stays focusable and read-only, and the same
+button changes from Send to Stop without replacing the focused DOM node.
+Explicitly disabled controls remain disabled.
+
+Chat exposes a named live log and pressed feedback states. Drafts use a named,
+focusable scroll region. Inline Prompt uses an expanded trigger linked to its
+panel, Escape closes it, and closure restores trigger focus. New inline proposals
+and Smart Paste fields have persistent live status regions. Smart Paste uses
+labeled native checkboxes and inputs inside a fieldset.
+
+These contracts have automated coverage and browser keyboard checks. They are
+not a WCAG certification; perform assistive-technology testing in the consuming
+application, especially for custom themes, content, and surrounding focus flows.

package/src/styles/_controls.scss

@@ -0,0 +1,86 @@
+// Component-local Bootstrap bridges. No selectors escape Angular encapsulation.
+:host {
+  font-family: var(--ngb-font-family, inherit);
+  color: var(--ngb-on-surface, inherit);
+}
+.btn {
+  --bs-btn-color: var(--ngb-on-surface, var(--bs-body-color, #212529));
+  --bs-btn-hover-color: var(--ngb-on-surface, var(--bs-body-color, #212529));
+  --bs-btn-border-radius: var(--ngb-radius-md, var(--bs-border-radius, 0.375rem));
+  --bs-btn-disabled-opacity: var(--ngb-disabled-opacity, 0.65);
+}
+.btn-primary {
+  --bs-btn-bg: var(--ngb-primary, #0d6efd);
+  --bs-btn-border-color: var(--ngb-primary, #0d6efd);
+  --bs-btn-color: var(--ngb-on-primary, #fff);
+  --bs-btn-hover-bg: var(--ngb-primary-hover, #0b5ed7);
+  --bs-btn-hover-border-color: var(--ngb-primary-hover, #0a58ca);
+  --bs-btn-hover-color: var(--ngb-on-primary, #fff);
+  --bs-btn-active-bg: var(--ngb-primary-hover, #0a58ca);
+  --bs-btn-active-border-color: var(--ngb-primary-hover, #0a53be);
+  --bs-btn-active-color: var(--ngb-on-primary, #fff);
+  --bs-btn-disabled-bg: var(--ngb-primary, #0d6efd);
+  --bs-btn-disabled-border-color: var(--ngb-primary, #0d6efd);
+  --bs-btn-disabled-color: var(--ngb-on-primary, #fff);
+}
+.btn-outline-secondary {
+  --bs-btn-color: var(--ngb-on-surface-variant, #6c757d);
+  --bs-btn-border-color: var(--ngb-border-color, #6c757d);
+  --bs-btn-hover-bg: var(--ngb-hover-bg, #6c757d);
+  --bs-btn-hover-color: var(--ngb-on-surface, #fff);
+  --bs-btn-hover-border-color: var(--ngb-border-color, #6c757d);
+  --bs-btn-active-bg: var(--ngb-selected-bg, #6c757d);
+  --bs-btn-active-color: var(--ngb-on-surface, #fff);
+  --bs-btn-active-border-color: var(--ngb-border-color, #6c757d);
+  --bs-btn-disabled-color: var(--ngb-on-surface-variant, #6c757d);
+  --bs-btn-disabled-border-color: var(--ngb-border-color, #6c757d);
+}
+.form-control, .form-select {
+  color: var(--ngb-on-surface, var(--bs-body-color, #212529));
+  background-color: var(--ngb-surface, var(--bs-body-bg, #fff));
+  border-color: var(--ngb-border-color, var(--bs-border-color, #dee2e6));
+  border-radius: var(--ngb-radius-md, var(--bs-border-radius, 0.375rem));
+}
+.form-control::placeholder {
+  color: var(--ngb-on-surface-variant, var(--bs-secondary-color, #6c757d));
+}
+.form-control:disabled, .form-select:disabled {
+  background-color: var(--ngb-surface-variant, var(--bs-secondary-bg, #e9ecef));
+  opacity: var(--ngb-disabled-opacity, 1);
+}
+.form-check-input {
+  background-color: var(--ngb-surface, var(--bs-body-bg, #fff));
+  border-color: var(--ngb-border-color, var(--bs-border-color, #dee2e6));
+}
+.form-check-input:checked, .form-check-input:indeterminate {
+  background-color: var(--ngb-primary, #0d6efd);
+  border-color: var(--ngb-primary, #0d6efd);
+}
+.form-control:focus, .form-select:focus, .form-check-input:focus {
+  border-color: var(--ngb-primary, #86b7fe);
+  box-shadow: 0 0 0 0.25rem var(--ngb-focus-ring, rgba(13, 110, 253, 0.25));
+}
+.btn:focus-visible, .page-link:focus-visible {
+  outline: 2px solid var(--ngb-focus-ring, #86b7fe);
+  outline-offset: 2px;
+}
+.dropdown-menu {
+  --bs-dropdown-color: var(--ngb-on-surface, var(--bs-body-color, #212529));
+  --bs-dropdown-bg: var(--ngb-surface, var(--bs-body-bg, #fff));
+  --bs-dropdown-border-color: var(--ngb-border-color, var(--bs-border-color-translucent, rgba(0,0,0,.175)));
+  --bs-dropdown-border-radius: var(--ngb-radius-md, var(--bs-border-radius, 0.375rem));
+  --bs-dropdown-link-color: var(--ngb-on-surface, var(--bs-body-color, #212529));
+  --bs-dropdown-link-hover-bg: var(--ngb-hover-bg, var(--bs-tertiary-bg, #f8f9fa));
+  --bs-dropdown-link-hover-color: var(--ngb-on-surface, var(--bs-body-color, #212529));
+  --bs-dropdown-link-active-bg: var(--ngb-primary, #0d6efd);
+  --bs-dropdown-link-active-color: var(--ngb-on-primary, #fff);
+  --bs-dropdown-link-disabled-color: var(--ngb-on-surface-variant, var(--bs-tertiary-color, #adb5bd));
+  box-shadow: var(--ngb-elevation-2, none);
+}
+
+.form-select { background-image: var(--ngb-select-icon, var(--bs-form-select-bg-img)); }
+
+.form-check-input:disabled { opacity: var(--ngb-disabled-opacity, 0.5); }
+
+.btn-sm { --bs-btn-border-radius: var(--ngb-radius-sm, var(--bs-border-radius-sm, 0.25rem)); }
+.form-control-sm, .form-select-sm { border-radius: var(--ngb-radius-sm, var(--bs-border-radius-sm, 0.25rem)); }

package/src/styles/_drag-drop.scss

@@ -0,0 +1,3 @@
+// Same optional drag/drop skin used by the legacy CSS entry point.
+@use "sass:meta";
+@include meta.load-css("./styles.css");

package/src/styles/_tokens.scss

@@ -0,0 +1,6 @@
+// Public scoped themes. No :root aliases: local framework variables must resolve
+// on the wrapper, including nested light/dark scopes.
+@use './themes/bootstrap';
+@use './themes/material';
+@use './themes/tailwind';
+@use './themes/presets';

package/src/styles/integrations/tailwind.css

@@ -0,0 +1,37 @@
+/* Optional Tailwind CSS v4 preset. Import in your Tailwind CSS entry, not Sass.
+ * Requires the ngbootstrap global theme stylesheet and a data-ngb-theme scope.
+ * The ngb namespace preserves Tailwind defaults and avoids circular mappings
+ * when the Tailwind-to-ngbootstrap bridge is also used.
+ * Inline references resolve on each utility element, including nested themes.
+ */
+@theme inline {
+  --color-ngb-primary: var(--ngb-primary);
+  --color-ngb-on-primary: var(--ngb-on-primary);
+  --color-ngb-primary-hover: var(--ngb-primary-hover);
+  --color-ngb-primary-container: var(--ngb-primary-container);
+  --color-ngb-surface: var(--ngb-surface);
+  --color-ngb-surface-container: var(--ngb-surface-container);
+  --color-ngb-surface-variant: var(--ngb-surface-variant);
+  --color-ngb-on-surface: var(--ngb-on-surface);
+  --color-ngb-on-surface-variant: var(--ngb-on-surface-variant);
+  --color-ngb-border: var(--ngb-border-color);
+  --color-ngb-focus: var(--ngb-focus-ring);
+  --color-ngb-hover: var(--ngb-hover-bg);
+  --color-ngb-selected: var(--ngb-selected-bg);
+  --color-ngb-success: var(--ngb-success);
+  --color-ngb-on-success: var(--ngb-on-success);
+  --color-ngb-danger: var(--ngb-danger);
+  --color-ngb-on-danger: var(--ngb-on-danger);
+  --radius-ngb-sm: var(--ngb-radius-sm);
+  --radius-ngb-md: var(--ngb-radius-md);
+  --radius-ngb-lg: var(--ngb-radius-lg);
+  --font-ngb: var(--ngb-font-family);
+  --text-ngb-sm: var(--ngb-font-size-sm);
+  --spacing-ngb-1: var(--ngb-space-1);
+  --spacing-ngb-2: var(--ngb-space-2);
+  --spacing-ngb-3: var(--ngb-space-3);
+  --spacing-ngb-4: var(--ngb-space-4);
+  --spacing-ngb-row: var(--ngb-density-row-height);
+  --shadow-ngb-1: var(--ngb-elevation-1);
+  --shadow-ngb-2: var(--ngb-elevation-2);
+}

package/src/styles/styles.css

@@ -3,37 +3,30 @@
 
 /* Base list appearance (you likely have this already) */
 .ngb-dnd-list {
-  border: 2px dashed var(--bs-border-color);
-  border-radius: .5rem;
+  border: 2px dashed var(--ngb-border-color, var(--bs-border-color, #dee2e6));
+  border-radius: var(--ngb-radius-lg, .5rem);
   transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
 }
 
 /* Hover highlight (compatible drop) */
 .ngb-dnd-list.ngb-dnd-over[data-drop-valid="true"] {
-  border-color: var(--bs-primary);
-  background-color: rgba(var(--bs-primary-rgb), .04);
-  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
+  border-color: var(--ngb-primary, var(--bs-primary, #0d6efd));
+  background-color: color-mix(in srgb, var(--ngb-primary, var(--bs-primary)) 4%, transparent);
+  box-shadow: 0 0 0 .2rem var(--ngb-focus-ring, rgba(var(--bs-primary-rgb), .15));
 }
 
 /* Hover highlight (NOT compatible) */
 .ngb-dnd-list.ngb-dnd-over[data-drop-valid="false"] {
-  border-color: var(--bs-danger);
-  background-color: rgba(var(--bs-danger-rgb), .04);
-  box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .12);
+  border-color: var(--ngb-danger, var(--bs-danger, #dc3545));
+  background-color: color-mix(in srgb, var(--ngb-danger, var(--bs-danger)) 4%, transparent);
+  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ngb-danger, var(--bs-danger)) 12%, transparent);
 }
 
 /* Make the insertion placeholder more obvious */
 .ngb-dnd-placeholder {
-  border: 2px dashed var(--bs-primary);
-  background: rgba(var(--bs-primary-rgb), .06);
-  border-radius: .5rem;
-  min-height: 40px;
+  border: 2px dashed var(--ngb-primary, var(--bs-primary, #0d6efd));
+  background: color-mix(in srgb, var(--ngb-primary, var(--bs-primary)) 6%, transparent);
+  border-radius: var(--ngb-radius-lg, .5rem);
+  min-height: var(--ngb-density-row-height, 40px);
   margin: .25rem 0;
 }
-
-table button.btn {
-    border-color: transparent !important;
-    text-decoration: none;
-    color: #000;
-    font-weight: bold;
-  }

package/src/styles/themes/_bootstrap.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+// Public tokens for an explicitly scoped bootstrap theme.
+@mixin tokens($overrides: ()) {
+  $values: (
+    select-icon: var(--_ngb-bootstrap-select-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")),
+    primary: var(--bs-primary, #0d6efd),
+    on-primary: #ffffff,
+    surface: var(--bs-body-bg, #ffffff),
+    surface-container: var(--bs-tertiary-bg, #f8f9fa),
+    surface-variant: var(--bs-secondary-bg, #e9ecef),
+    on-surface: var(--bs-body-color, #212529),
+    on-surface-variant: var(--bs-secondary-color, #6c757d),
+    border-color: var(--bs-border-color, #dee2e6),
+    primary-hover: var(--bs-link-hover-color, #0a58ca),
+    primary-container: var(--bs-primary-bg-subtle, #cfe2ff),
+    focus-ring: var(--bs-focus-ring-color, rgba(13, 110, 253, 0.25)),
+    radius-sm: var(--bs-border-radius-sm, 0.25rem),
+    radius-md: var(--bs-border-radius, 0.375rem),
+    radius-lg: var(--bs-border-radius-lg, 0.5rem),
+    font-family: var(--bs-body-font-family, system-ui, sans-serif),
+    font-size-sm: 0.84rem,
+    density-row-height: 40px,
+    elevation-1: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)),
+    elevation-2: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)),
+    disabled-opacity: 0.45,
+    hover-bg: var(--bs-tertiary-bg, #f8f9fa),
+    selected-bg: var(--bs-primary-bg-subtle, #cfe2ff),
+    success: var(--bs-success, #198754),
+    on-success: #ffffff,
+    danger: var(--bs-danger, #dc3545),
+    on-danger: #ffffff,
+    space-1: 0.25rem,
+    space-2: 0.5rem,
+    space-3: 0.75rem,
+    space-4: 1rem,
+  );
+  @each $name, $value in map.merge($values, $overrides) {
+    --ngb-#{$name}: #{$value};
+  }
+}
+
+[data-ngb-theme="bootstrap"] {
+  @include tokens();
+}
+
+// Inherit the nearest Bootstrap color mode, including a nested light reset.
+[data-bs-theme="light"] { --_ngb-bootstrap-select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
+[data-bs-theme="dark"] { --_ngb-bootstrap-select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

package/src/styles/themes/_material.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+// Public tokens for an explicitly scoped material theme.
+@mixin tokens($overrides: ()) {
+  $values: (
+    select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
+    primary: var(--mat-sys-primary, #6750a4),
+    on-primary: var(--mat-sys-on-primary, #ffffff),
+    surface: var(--mat-sys-surface, #fffbfe),
+    surface-container: var(--mat-sys-surface-container, #f3edf7),
+    surface-variant: var(--mat-sys-surface-container-high, #ece6f0),
+    on-surface: var(--mat-sys-on-surface, #1d1b20),
+    on-surface-variant: var(--mat-sys-on-surface-variant, #49454f),
+    border-color: var(--mat-sys-outline-variant, #cac4d0),
+    primary-hover: color-mix(in srgb, var(--mat-sys-primary, #6750a4) 88%, var(--mat-sys-on-surface, #1d1b20)),
+    primary-container: var(--mat-sys-primary-container, #eaddff),
+    focus-ring: var(--mat-sys-primary, #6750a4),
+    radius-sm: 4px,
+    radius-md: 12px,
+    radius-lg: 16px,
+    font-family: var(--mat-sys-body-medium-font, Roboto, Arial, sans-serif),
+    font-size-sm: var(--mat-sys-body-medium-size, 0.875rem),
+    density-row-height: 48px,
+    elevation-1: var(--mat-sys-level1, 0 1px 3px rgba(0, 0, 0, 0.2)),
+    elevation-2: var(--mat-sys-level2, 0 2px 6px rgba(0, 0, 0, 0.2)),
+    disabled-opacity: 0.38,
+    hover-bg: color-mix(in srgb, var(--mat-sys-on-surface, #1d1b20) 8%, var(--mat-sys-surface, #fffbfe)),
+    selected-bg: var(--mat-sys-secondary-container, #e8def8),
+    success: #198754,
+    on-success: #ffffff,
+    danger: var(--mat-sys-error, #b3261e),
+    on-danger: var(--mat-sys-on-error, #ffffff),
+    space-1: 0.25rem,
+    space-2: 0.5rem,
+    space-3: 0.75rem,
+    space-4: 1rem,
+  );
+  @each $name, $value in map.merge($values, $overrides) {
+    --ngb-#{$name}: #{$value};
+  }
+}
+
+[data-ngb-theme="material"] {
+  @include tokens();
+}