apex-grid 4.0.0-beta.1 → 4.0.0-beta.2

package/CHANGELOG.md

@@ -6,6 +6,72 @@ and the format is based on [Keep a Changelog](https://keepachangelog.com/).
 
 ## [Unreleased]
 
+## [4.0.0-beta.2] - 2026-11-08
+
+A second pre-release of 4.0.0, under the `next` npm tag. It adds opt-in
+Ignite UI theming (`apex-grid/ignite-ui`) and the family `--apx-*` tokens.
+Breaking against 4.0.0-beta.1 and 3.x: an Ignite UI stylesheet no longer
+re-tints the brand or replaces the font until you import the add-on, and
+`--ag-font` has no root default any more (see Changed and Fixed).
+
+### Added
+- **`apex-grid/ignite-ui`, the Ignite UI add-on.** `import 'apex-grid/ignite-ui'`
+  once and every grid on the page follows the Ignite UI theme the page loads:
+  brand, text and muted text, gridlines and the pinned-column edge, the header
+  (`--ig-surface-raised`, Ignite UI 7.5 and later), state colours, font and the
+  enterprise popups (`--ig-surface-overlay` on 7.5 and later). A grid without
+  `theme="dark"` or `theme="light"` follows the Ignite UI variant, live, with
+  a JS fallback where the browser has no container style queries;
+  `theme="light"` keeps a grid light. Ranking: an `--ag-*` token you set, then
+  the family `--apx-*` tokens, then Ignite UI, then the built-in values. Per
+  grid, `design-system="off"` turns the Ignite UI colours and font off (the
+  variant still picks the mode) and `tokens="off"` turns off the family tokens
+  and Ignite UI, variant included (both also as the reflected `designSystem`
+  and `tokens` properties). It registers on a shared `globalThis` slot, so it
+  reaches the grids of a separately built bundle too. While the add-on is
+  loaded, the tokens that follow Ignite UI (text, lines, surfaces, header,
+  state colours, pinned edge) leave the root defaults, so page CSS that reads
+  one needs its own fallback. It adds about 2.5 KB gzip to an app, and only
+  where it is imported.
+- **The family `--apx-*` tokens** shared by every Apex product: `--apx-accent`
+  (brand), `--apx-fore` (text), `--apx-grid` (gridlines, row borders, header
+  separator), `--apx-surface` (card and row background), `--apx-font-family`
+  and `--apx-radius-factor`, each ranked below the matching `--ag-*` token.
+  The text, line and surface root defaults are now written as their family
+  chain (`--ag-text: var(--apx-fore, #111827)` in `:where(:root)` and
+  `apex-grid/tokens.css`), so they follow a family token set on `:root`.
+- `--apx-radius-factor` scales `--ag-radius`, `--ag-radius-sm` and
+  `--ag-radius-xs` while it is set. Unset or 1, every radius is unchanged
+  (a multi-value radius too, without a factor); the pill stays round.
+- `tokens="off"` (or `grid.tokens = false`) keeps one grid, and the content it
+  renders, off the family tokens, with or without the add-on. Without the
+  add-on, an `--apx-fore`, `--apx-grid` or `--apx-surface` set on `:root` still
+  reaches that grid through the root defaults, which resolve there.
+- `--ag-overlay` and `--ag-overlay-text` (dark grids: `--ag-dark-overlay`,
+  `--ag-dark-overlay-text`) colour the `apex-grid-enterprise` popups. They have
+  no default: unset, each popup keeps its built-in colours.
+
+### Changed
+- **Breaking: the grid no longer reads Ignite UI tokens by itself.** Before,
+  an Ignite UI theme on the page re-tinted the brand (`--ig-primary-500`,
+  `--ig-primary-700`) and replaced the font (`--ig-font-family`) with no
+  import. Now an Ignite UI stylesheet changes nothing until you import
+  `apex-grid/ignite-ui`, which brings the brand and font back along with the
+  rest of the theme.
+- The grid now follows the family `--apx-*` tokens (above). A page that sets
+  them for its charts, on `:root` for example, sees the grid follow them too.
+  Set the matching `--ag-*` tokens to keep the grid as it was, or set the
+  family tokens on the elements they are meant for.
+
+### Fixed
+- An explicit `--ag-font` now wins over the family and Ignite UI fonts, the
+  same order the brand tokens use. Before, an Ignite UI theme on the page
+  replaced the grid font even when `--ag-font` was set on the grid itself. The
+  default Inter stack is unchanged. To keep the family and Ignite UI fonts
+  reachable, `--ag-font` no longer has a root default (it is gone from
+  `:where(:root)` and `apex-grid/tokens.css`), so page CSS that reads
+  `var(--ag-font)` needs its own fallback, as with `--ag-brand`.
+
 ## [4.0.0-beta.1] - 2026-10-29
 
 A pre-release of 4.0.0, published under the `next` npm tag for trying out

package/LICENSE.md

@@ -85,10 +85,11 @@ Required if you are **embedding ApexGrid into a product or platform used by othe
 ✅ What's included:
 
 - Redistribution rights for **one application or product**
-- **Unlimited developer seats** on that application, with no separate per-developer license to buy
 - **Every licensed feature**, at the highest tier
 - 12-month subscription with updates & support
 
+⚠️ **Developer licenses are purchased separately.** The OEM License grants redistribution rights and carries no developer seats. Each developer who works with ApexGrid in that application also needs a **Community + Commercial** license of their own. That is the tier whatever features your product uses, because the license key comes from the OEM License and already renders every licensed feature.
+
 Your end users need no license of their own. A second application needs a second OEM license. White-label, resale, and affiliate arrangements are quoted separately.
 
 ✅ OEM **not required** if your app simply renders static grids and users **cannot** configure or interact with them.

package/README.md

@@ -29,7 +29,7 @@ A Lit-based, framework-agnostic web component data grid. Ships as a single custo
 - **CSV export**: programmatic method plus an optional toolbar dropdown. (Excel/XLSX export is in `apex-grid-enterprise`.)
 - **Toolbar**: opt-in `<apex-grid-toolbar>` with debounced quick filter and export menu.
 - **Templating**: slot-based templates for cells, headers, editors, and detail panels.
-- **Theming**: styled out-of-the-box; fully customizable through `--ag-*` CSS custom properties (no theme import or build step). Auto-tints to an Ignite UI host app's palette when one is present, with no dependency on it.
+- **Theming**: styled out-of-the-box; fully customizable through `--ag-*` CSS custom properties (no theme import or build step), and follows the `--apx-*` tokens shared by every Apex product. One import (`apex-grid/ignite-ui`) makes it follow an Ignite UI theme, light or dark.
 - **Accessibility**: WCAG 2.2 AA semantics (`role="grid"` / `role="treegrid"`, `aria-rowcount`, `aria-colcount`, focus + keyboard navigation).
 - **Provenance-signed npm releases** with OIDC trusted publishing.
 
@@ -130,11 +130,15 @@ See [`src/styles/_token-values.scss`](src/styles/_token-values.scss) for the ful
 import 'apex-grid/tokens.css';
 ```
 
-The grid renders the same without the sheet; it carries the defaults as fallbacks. Three groups have no root default, so page CSS reading them needs its own fallback:
+The grid renders the same without the sheet; it carries the defaults as fallbacks. Four groups have no root default, so page CSS reading them needs its own fallback:
 
-- `--ag-brand` and `--ag-brand-strong`, so an Ignite UI palette set on any ancestor keeps tinting the grid (see below).
+- `--ag-brand` and `--ag-brand-strong`, so a family `--apx-accent` (or, with the Ignite UI add-on, an Ignite UI palette) set on any ancestor still reaches the grid (see below).
+- `--ag-font`, for the same reason (`--apx-font-family`, an Ignite UI font).
+- `--ag-overlay` and `--ag-overlay-text` (and `--ag-dark-overlay`, `--ag-dark-overlay-text`): unset, the enterprise popups keep their own colours (see below).
 - The derived washes `--ag-brand-soft`, `--ag-brand-softer`, `--ag-brand-line`, `--ag-row-hover` and `--ag-surface-alt`. The grid mixes them from the brand and surface in effect, so they follow a brand set on an ancestor. Set them only to override the mix.
 
+The root defaults of the text, line and surface tokens are written as their family chain (`--ag-text: var(--apx-fore, #111827)`), so they follow a family token set on `:root` (see below).
+
 **Dark mode.** `theme="dark"` reads its own colour inputs, `--ag-dark-*` (`--ag-dark-surface`, `--ag-dark-text`, `--ag-dark-hairline`, `--ag-dark-shadow-card`, and so on), so a light palette set on a shared ancestor never puts a white surface under the dark theme's light text. Sizing, typography, motion, the brand and the base state colours are shared by both modes. To theme both from one place, set both palettes:
 
 ```css
@@ -155,7 +159,34 @@ apex-grid[theme~='dark'] { --ag-grid-shadow: var(--ag-dark-shadow-card); } /* th
 apex-grid { --ag-grid-shadow: none; }                                      /* remove the edge entirely */
 ```
 
-If you embed the grid in an Ignite UI app, the brand tokens automatically re-tint from its palette, wherever it is declared: they read `--ig-primary-500` with the grid's own default as the fallback. That is a plain CSS variable lookup, so the grid neither depends on nor bundles Ignite UI.
+**Enterprise popups.** `--ag-overlay` and `--ag-overlay-text` colour the popups of `apex-grid-enterprise` (filter builder, set filter, AI panel, tool panel, status bar); dark grids read `--ag-dark-overlay` and `--ag-dark-overlay-text`. Set both: the popup lines, muted text and hover wash are mixed from the two. Unset, each popup keeps its built-in colours.
+
+**Family tokens (`--apx-*`).** The grid also reads the tokens every Apex product shares, ranked below its own: `--apx-accent` (brand), `--apx-fore` (text), `--apx-grid` (gridlines, row borders, header separator), `--apx-surface` (card and row background), `--apx-font-family` and `--apx-radius-factor`. An `--ag-*` or `--ag-dark-*` token you set wins over them, and they apply to light and dark grids alike. The brand, font and radius factor reach the grid from any ancestor. Text, lines and surface have root defaults, which resolve on `:root`: they follow a family token set on `:root` (or, with the Ignite UI add-on, which lifts those defaults, on any ancestor). `--apx-radius-factor` scales `--ag-radius`, `--ag-radius-sm` and `--ag-radius-xs` while it is set; at 1 nothing changes, the pill shape stays round, and a multi-value radius (`--ag-radius: 12px 12px 0 0`) works only without a factor.
+
+`tokens="off"` on a grid (or `grid.tokens = false`) keeps it off the family tokens and the content it renders too. One limit without the Ignite UI add-on: an `--apx-fore`, `--apx-grid` or `--apx-surface` set on `:root` has already resolved into the text, line and surface root defaults there, which every grid reads, so that grid still shows it; set the matching `--ag-*` tokens on it, or set the family tokens on the elements they are meant for.
+
+```css
+:root {
+  --apx-accent: #7c3aed;
+  --apx-font-family: 'Source Sans 3', sans-serif;
+  --apx-radius-factor: 0.5;
+}
+```
+
+**Ignite UI.** To follow an Ignite UI theme, import the add-on once:
+
+```ts
+import 'apex-grid/ignite-ui';
+```
+
+Every grid on the page, in the document or in any shadow root, then follows the Ignite UI theme the page loads, including grids that connected before the import: the brand (`--ig-primary-*`), text and muted text, gridlines and the pinned-column edge (the gray ramp), the header (`--ig-surface-raised`, Ignite UI 7.5 and later), the state colours, the font, and the enterprise popups (`--ig-surface-overlay` on 7.5 and later, else the grid's own popup colours). The card and row surfaces keep the grid's own light or dark background. Without the add-on the grid reads no `--ig-*` token, and an Ignite UI stylesheet changes nothing.
+
+- **Ranking:** an `--ag-*` token you set, then the family `--apx-*` tokens, then Ignite UI, then the built-in values.
+- **Mode:** a grid without `theme="dark"` or `theme="light"` follows the Ignite UI variant (`--ig-theme-variant`) declared on `:root` or any ancestor (as Ignite UI themes do), and a theme swap live. `theme="light"` keeps a grid light (text and lines then keep the built-in values, since a dark theme's grays are light) and `theme="dark"` keeps it dark. Where the browser has no container style queries, grids follow the document's variant.
+- **Per grid:** `design-system="off"` (the `designSystem` property set to `false`) turns the Ignite UI colours and font off (the variant still picks the mode); `tokens="off"` (`tokens = false`) turns off the family tokens and Ignite UI, the variant included, for the grid and the content it renders.
+- **Root defaults:** while the add-on is loaded, the tokens that follow Ignite UI (text, lines, surfaces, header, state colours, pinned edge) leave the root defaults, as `--ag-brand` and `--ag-font` always have, so page CSS that reads one gives its own fallback: `var(--ag-text, #111827)`.
+- **Other products:** each takes its own add-on. For the `apex-grid-enterprise` chart panel to read the theme itself, also import `apexcharts/features/ignite-ui` (ApexCharts releases that ship it); the grid never loads it, since it themes every chart on the page. Without it the panel chart takes the grid's colours, which follow the theme.
+- **Bundles:** the add-on registers on a shared `globalThis` slot, so it reaches every grid even when the grid and the add-on come from separately built bundles.
 
 ### 4. Size the host
 
@@ -589,7 +620,7 @@ Search input has a `debounce` attribute (default `200`ms).
 
 ### Theming
 
-The grid styles itself through `--ag-*` CSS custom properties; override them on `apex-grid` or any ancestor (shadow hosts included) to rebrand, and use `--ag-dark-*` for dark grids. See [Customize the look](#3-optional-customize-the-look) and [`src/styles/_token-values.scss`](src/styles/_token-values.scss) for the full list. Where an Ignite UI palette is present, the brand tokens auto-tint from `--ig-primary-500`.
+The grid styles itself through `--ag-*` CSS custom properties; override them on `apex-grid` or any ancestor (shadow hosts included) to rebrand, and use `--ag-dark-*` for dark grids. See [Customize the look](#3-optional-customize-the-look) and [`src/styles/_token-values.scss`](src/styles/_token-values.scss) for the full list. The grid also follows the family `--apx-*` tokens, and an Ignite UI theme with the opt-in `apex-grid/ignite-ui` add-on (both under Customize the look).
 
 Style with CSS parts on the grid, paginator, and toolbar:
 
@@ -727,6 +758,8 @@ See [`demo/state-persistence.html`](../../demo/state-persistence.html) for a sav
 | `coordinateHints` | `boolean` | `false` | Show a row-number gutter + A / B / C header chips (spreadsheet look). Attr `coordinate-hints` |
 | `columnMenu` | `boolean` | `true` | Show the always-visible column-menu (kebab) button on headers; `false` hides it |
 | `showHeader` | `boolean` | `true` | `false` hides the header rows (kept for screen readers). Attr `show-header="false"` |
+| `designSystem` | `boolean` | `true` | With the `apex-grid/ignite-ui` add-on, `false` turns the Ignite UI colours and font off for this grid (the variant still picks the mode). Reflected as `design-system="off"` |
+| `tokens` | `boolean` | `true` | `false` turns the family `--apx-*` tokens (and, with the add-on, Ignite UI) off for this grid and its content. Reflected as `tokens="off"` |
 | `rowRecycling` | `boolean` | `true` | Re-binds body row elements across records on scroll, sort and filter; `false` restores record-keyed rows. See [Row recycling](#row-recycling). Attr `row-recycling="false"` |
 | `rowId` | `(row: T) => string \| number` |  | Durable row identity for `getState` / `setState` |
 | `localeText` | `GridLocaleText` |  | Override map for built-in strings (e.g. `esLocale`) |
@@ -817,7 +850,7 @@ Programmatic `sort()` / `filter()` calls are silent; only UI-initiated changes e
 
 ### Attributes
 
-`auto-generate`, `quick-filter`, `show-quick-filter`, `show-export`, `column-reordering`, `coordinate-hints`, `show-header`, `row-recycling`.
+`auto-generate`, `quick-filter`, `show-quick-filter`, `show-export`, `column-reordering`, `coordinate-hints`, `show-header`, `row-recycling`. Theming: `theme` (`dark`, `light`, `tinted`), `tokens="off"` and, with the `apex-grid/ignite-ui` add-on, `design-system="off"` (see [Customize the look](#3-optional-customize-the-look)).
 
 ### CSS parts
 

package/components/grid.d.ts

@@ -692,17 +692,19 @@ export interface ApexGridEventMap<T extends object> {
  *
  * The grid is styled out of the box through `--ag-*` CSS custom properties —
  * there is no theme to import and no `configureTheme()` call. Override `--ag-*`
- * tokens on the host (or any ancestor) to rebrand; where an Ignite UI palette is
- * present, the brand tokens auto-tint from it. For dark mode, set
- * the `theme="dark"` attribute on the host for the built-in slate dark palette
- * (further `--ag-*` overrides still compose on top). Add `tinted` (e.g.
- * `theme="tinted"` or `theme="dark tinted"`) to mix the brand into the chrome
- * so the grid wears its brand even at rest. See the README "Getting Started"
- * and "Theming" sections for the full example and token list.
+ * tokens on the host (or any ancestor) to rebrand; the family `--apx-*` tokens
+ * (`--apx-accent`, `--apx-fore`, `--apx-grid`, `--apx-surface`,
+ * `--apx-font-family`, `--apx-radius-factor`) apply where no `--ag-*` token is
+ * set. To follow an Ignite UI theme, import the `apex-grid/ignite-ui` add-on.
+ * For dark mode, set the `theme="dark"` attribute on the host for the built-in
+ * slate dark palette (further `--ag-*` overrides still compose on top). Add
+ * `tinted` (e.g. `theme="tinted"` or `theme="dark tinted"`) to mix the brand
+ * into the chrome so the grid wears its brand even at rest. See the README
+ * "Getting Started" and "Theming" sections for the full example and token list.
  *
  * @element apex-grid
  *
- * @attr {string} theme - Space-separated theme flags. `dark` opts into the built-in dark palette; `tinted` mixes `--ag-brand` into the chrome surfaces. Combine as `theme="dark tinted"`.
+ * @attr {string} theme - Space-separated theme flags. `dark` opts into the built-in dark palette; `tinted` mixes `--ag-brand` into the chrome surfaces. Combine as `theme="dark tinted"`. With the `apex-grid/ignite-ui` add-on a grid without `dark` or `light` follows the Ignite UI variant, and `light` keeps it light.
  *
  * @fires sorting - Emitted when sorting is initiated through the UI.
  * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
@@ -755,7 +757,7 @@ export interface ApexGridEventMap<T extends object> {
  * @csspart export-menu - The export dropdown menu.
  * @csspart export-menu-item - An item in the export menu.
  *
- * @cssprop [--ag-brand] - Brand color for selection, focus rings, and accents. Auto-tints from `--ig-primary-500` where an Ignite UI palette is present.
+ * @cssprop [--ag-brand] - Brand color for selection, focus rings, and accents. Falls back to `--apx-accent`, then (with the `apex-grid/ignite-ui` add-on) the Ignite UI primary.
  * @cssprop [--ag-brand-strong] - Brand color for hover / pressed states.
  * @cssprop [--ag-grid-shadow] - Grid edge/shadow override. Default is a flat 1px hairline edge; set to `var(--ag-shadow-card)` (`var(--ag-dark-shadow-card)` on a dark grid) for the elevated card look, or `none` to remove it.
  * @cssprop [--ag-grid-bg] - Host card background. Defaults to a subtle light gradient; override with a flat color (or use `theme="dark"`) for dark themes.
@@ -781,8 +783,12 @@ export interface ApexGridEventMap<T extends object> {
  * @cssprop [--ag-dark-shadow-card] - Elevated card shadow for dark grids (see `--ag-grid-shadow`).
  * @cssprop [--ag-row-h] - Row height.
  * @cssprop [--ag-header-h] - Header height.
- * @cssprop [--ag-radius] - Outer card corner radius.
- * @cssprop [--ag-font] - Grid font family.
+ * @cssprop [--ag-radius] - Outer card corner radius. The radii (`--ag-radius`, `-sm`, `-xs`, not the pill) scale with `--apx-radius-factor` while it is set (single lengths only).
+ * @cssprop [--ag-font] - Grid font family. Falls back to `--apx-font-family`, then (with the `apex-grid/ignite-ui` add-on) the Ignite UI `--ig-font-family`.
+ * @cssprop [--ag-overlay] - Background of the enterprise popups (filter builder, set filter, AI panel, tool panel, status bar). Unset, each keeps its built-in colour; set it with `--ag-overlay-text`.
+ * @cssprop [--ag-overlay-text] - Text color of the enterprise popups; their lines, muted text and hover wash are mixed from the two.
+ * @cssprop [--ag-dark-overlay] - Popup background on dark grids.
+ * @cssprop [--ag-dark-overlay-text] - Popup text color on dark grids.
  * @cssprop [--ag-fs-cell] - Cell font size.
  *
  * @see {@link https://github.com/apexcharts/apex-grid/blob/main/packages/core/src/styles/_tokens.scss | _tokens.scss} for the complete `--ag-*` token list.
@@ -812,10 +818,10 @@ export declare class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
      * registry. Idempotent — safe to call more than once.
      *
      * @remarks
-     * Registering the element is only step one of four required for a visible, styled
-     * grid. You must also configure an Ignite UI theme + CSS, give the host a bounded
-     * height, and avoid overriding `display` on the host. See the README
-     * "Getting Started" section for the full setup.
+     * Registering the element is only step one of three required for a visible, styled
+     * grid. You must also give the host a bounded height and avoid overriding
+     * `display` on the host. See the README "Getting Started" section for the
+     * full setup.
      */
     static register(): void;
     protected stateController: StateController<T>;
@@ -1189,6 +1195,24 @@ export declare class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
      * @attr show-header
      */
     showHeader: boolean;
+    /**
+     * Whether this grid follows the design-system add-on (`apex-grid/ignite-ui`).
+     * `false`, reflected as `design-system="off"`, turns the Ignite UI colours
+     * and font off for this grid; the Ignite UI variant still picks its mode.
+     * Without the add-on it changes nothing.
+     *
+     * @attr design-system
+     */
+    designSystem: boolean;
+    /**
+     * Whether this grid reads the family `--apx-*` tokens and, with the
+     * `apex-grid/ignite-ui` add-on, Ignite UI (the variant included). `false`,
+     * reflected as `tokens="off"`, turns them off for the grid and the content
+     * it renders, so it keeps the built-in look and the `--ag-*` tokens you set.
+     *
+     * @attr tokens
+     */
+    tokens: boolean;
     /**
      * Column groups rendered as spanning headers above the column header row.
      *
@@ -1419,6 +1443,7 @@ export declare class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
     addEventListener<K extends keyof M, M extends ApexGridEventMap<T> & HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: M[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
     removeEventListener<K extends keyof M, M extends ApexGridEventMap<T> & HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: M[K]) => unknown, options?: boolean | EventListenerOptions): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(): void;
     /**
      * Performs a filter operation in the grid based on the passed expression(s).

package/components/grid.js

@@ -16,6 +16,7 @@ import { DEFAULT_PAGINATION } from '../controllers/pagination.js';
 import { gridStateContext, StateController } from '../controllers/state.js';
 import { localize as resolveLocaleText, } from '../i18n/index.js';
 import { DEFAULT_COLUMN_CONFIG, PIPELINE, SENTINEL_NODE } from '../internal/constants.js';
+import { connectDesignSystem, disconnectDesignSystem } from '../internal/design-system.js';
 import { adoptGridDocumentStyles } from '../internal/document-styles.js';
 import { buildCSV, downloadBlob, } from '../internal/export.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
@@ -61,6 +62,10 @@ function viewShapeChanged(fields, before, after) {
 function keyChanged(key, previous) {
     return key.some((value, i) => value !== previous[i]);
 }
+const OFF_SWITCH = {
+    fromAttribute: (value) => value !== 'off',
+    toAttribute: (value) => (value ? null : 'off'),
+};
 function warnDropped(message) {
     console.warn(`[apex-grid] ${message}`);
 }
@@ -92,6 +97,8 @@ export class ApexGrid extends EventEmitterBase {
         this.coordinateHints = false;
         this.columnMenu = true;
         this.showHeader = true;
+        this.designSystem = true;
+        this.tokens = true;
         this.#bodyKey = [];
         this.#bodyRows = [];
         this.#pageKey = [];
@@ -571,11 +578,16 @@ export class ApexGrid extends EventEmitterBase {
     connectedCallback() {
         super.connectedCallback();
         adoptGridDocumentStyles(this);
+        connectDesignSystem(this);
         quietResizeObserverLoopNotice();
         this.#labelObserver.observe(this, {
             attributeFilter: ['aria-label', 'aria-labelledby', 'aria-describedby'],
         });
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        disconnectDesignSystem(this);
+    }
     #labelObserver;
     firstUpdated() {
         if (typeof getComputedStyle === 'function' && getComputedStyle(this).display !== 'grid') {
@@ -1463,6 +1475,12 @@ __decorate([
 __decorate([
     property({ attribute: 'show-header', converter: (value) => value !== 'false' })
 ], ApexGrid.prototype, "showHeader", void 0);
+__decorate([
+    property({ attribute: 'design-system', reflect: true, converter: OFF_SWITCH })
+], ApexGrid.prototype, "designSystem", void 0);
+__decorate([
+    property({ attribute: 'tokens', reflect: true, converter: OFF_SWITCH })
+], ApexGrid.prototype, "tokens", void 0);
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "columnGroups", void 0);