npm - apex-grid - Versions diffs - 3.1.0 → 3.2.0 - Mend

apex-grid 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/CHANGELOG.md +23 -0
package/README.md +1 -1
package/components/grid.d.ts +9 -2
package/components/grid.js.map +1 -1
package/components/header.js +1 -1
package/components/header.js.map +1 -1
package/controllers/sort.d.ts +1 -1
package/controllers/sort.js +2 -2
package/controllers/sort.js.map +1 -1
package/custom-elements.json +16 -1
package/docs/classes/ApexGrid.html +27 -21
package/docs/index.html +1 -1
package/docs/media/_tokens.scss +98 -0
package/docs/media/package.json +1 -1
package/package.json +1 -1
package/styles/_tokens.css.js +1 -1
package/styles/_tokens.css.js.map +1 -1
package/styles/grid/_grid.base.css.js +1 -1
package/styles/grid/_grid.base.css.js.map +1 -1
package/styles/grid/grid.css.js +1 -1
package/styles/grid/grid.css.js.map +1 -1
package/styles/paginator/paginator.css.js +1 -1
package/styles/paginator/paginator.css.js.map +1 -1

package/controllers/sort.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAuB,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAO5F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,MAAM,OAAO,cAAc;IACzB,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAIhC,UAAK,GAAiB,IAAI,GAAG,EAAE,CAAC;QAHrC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAID,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAED,mBAAmB,CAAC,OAA8C;QAChE,MAAM,IAAI,GAA0D;YAClE,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,SAAS;SACpB,CAAC;QAEF,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,SAAS,EAAE,CAAC;YAC7C,OAAO,IAAkC,CAAC;QAC5C,CAAC;QAED,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;YACzB,aAAa,EAAE,OAAO,CAAC,aAAa;YACpC,QAAQ,EAAE,OAAO,CAAC,QAAQ;SAC3B,CAA+B,CAAC;IACnC,CAAC;IAED,wBAAwB,CAAC,GAAY;QACnC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC;QAE/C,OAAO;YACL,GAAG;YACH,SAAS,EAAE,WAAW;YACtB,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC;SAChB,CAAC;IACzB,CAAC;IAED,QAAQ,CAAC,GAAsB;QAC7B,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,GAAG,KAAK,WAAW;gBACnB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,GAAG,KAAK,YAAY;oBACpB,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,WAAW;YACjB,CAAC,CAAC,GAAG,KAAK,WAAW;gBACnB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,WAAW,CAAC;IACpB,CAAC;IAED,iBAAiB,CAAC,MAAyB;QACzC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACtE,CAAC;IAED,gBAAgB,CAAC,MAAyB;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,cAAc,CAAC,UAA6B;QAC1C,UAAU,CAAC,SAAS,KAAK,MAAM;YAC7B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;IACxD,CAAC;IAEM,KAAK,CAAC,mBAAmB,CAAC,MAA8B;QAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAElD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;QAMD,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEvB,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAI/B,MAAM,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC;IAED,SAAS,CAAC,UAA6B,EAAE,MAA8B;QACrE,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtD,MAAM,OAAO,GACX,UAAU,CAAC,SAAS,KAAK,MAAM;YAC7B,CAAC,CAAC,mBAAmB,KAAK,EAAE;YAC5B,CAAC,CAAC,aAAa,KAAK,IAAI,UAAU,CAAC,SAAS,EAAE,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAED,gBAAgB;QACd,MAAM,OAAO,GAAwB,EAAE,CAAC;QACxC,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,MAAM,EAAE,GAAG,GAA6B,CAAC;YACzC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QACpE,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,YAAY,CAAC,MAAwC;QAGnD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAC5B,MAAM,MAAM,GAAG,IAAI,GAAG,EAAkB,CAAC;QACzC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,GAA6B,CAAC,CAAC;QACtD,CAAC;QACD,aAAa,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,CAAC,CAAC;IACjE,CAAC;IAEM,iBAAiB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAA0B;QACrE,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC;YAElC,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;gBACzB,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;gBACxC,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC;aACrC,CAAC,CAAC;QACL,CAAC;QAGD,OAAO,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC;IAC5C,CAAC;IAEM,KAAK,CAAC,GAAa;QACxB,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACpD,CAAC;IAES,KAAK,CAAC,WAAoD;QAClE,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC;IAEM,IAAI,CAAC,WAAoD;QAC9D,IAAI,CAAC,KAAK,CACR,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAChC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CACzF,CACF,CAAC;IACJ,CAAC;IAEM,aAAa,KAAI,CAAC;CAC1B","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport { awaitChildUpdates, type KeyedFlipEntry, playKeyedFlip } from '../internal/flip.js';\nimport type {\n ColumnConfiguration,\n ColumnSortConfiguration,\n GridHost,\n Keys,\n} from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortExpression, SortingDirection, SortState } from '../operations/sort/types.js';\n\nexport class SortController<T extends object> implements ReactiveController {\n constructor(protected host: GridHost<T>) {\n this.host.addController(this);\n }\n\n public state: SortState<T> = new Map();\n\n get #isMultipleSort() {\n return this.host.sortConfiguration.multiple;\n }\n\n get #isTriStateSort() {\n return this.host.sortConfiguration.triState;\n }\n\n #resolveSortOptions(options?: boolean \| ColumnSortConfiguration<T>) {\n const expr: Pick<SortExpression<T>, 'caseSensitive' \| 'comparer'> = {\n caseSensitive: false,\n comparer: undefined,\n };\n\n if (!options \|\| typeof options === 'boolean') {\n return expr as Partial<SortExpression<T>>;\n }\n\n return Object.assign(expr, {\n caseSensitive: options.caseSensitive,\n comparer: options.comparer,\n }) as Partial<SortExpression<T>>;\n }\n\n #createDefaultExpression(key: Keys<T>) {\n const options = this.host.getColumn(key)?.sort;\n\n return {\n key,\n direction: 'ascending',\n ...this.#resolveSortOptions(options),\n } as SortExpression<T>;\n }\n\n #orderBy(dir?: SortingDirection): SortingDirection {\n return this.#isTriStateSort\n ? dir === 'ascending'\n ? 'descending'\n : dir === 'descending'\n ? 'none'\n : 'ascending'\n : dir === 'ascending'\n ? 'descending'\n : 'ascending';\n }\n\n #emitSortingEvent(detail: SortExpression<T>) {\n return this.host.emitEvent('sorting', { detail, cancelable: true });\n }\n\n #emitSortedEvent(detail: SortExpression<T>) {\n return this.host.emitEvent('sorted', { detail });\n }\n\n #setExpression(expression: SortExpression<T>) {\n expression.direction === 'none'\n ? this.reset(expression.key)\n : this.state.set(expression.key, { ...expression });\n }\n\n public async sortFromHeaderClick(column: ColumnConfiguration<T>) {\n const expression = this.prepareExpression(column);\n\n if (!this.#emitSortingEvent(expression)) {\n return;\n }\n\n if (!this.#isMultipleSort) {\n this.reset();\n }\n\n // Capture visible-row rects keyed by data identity BEFORE the pipeline\n // runs. After the new render the virtualizer will have repositioned\n // rows; we use those captured rects as the \"First\" of a FLIP and\n // animate each row from its old viewport position back to identity.\n const beforeRects = this.#captureRowRects();\n\n this._sort(expression);\n\n await this.host.updateComplete;\n // Wait for body row updates so the new data is committed to each row\n // element before measuring the \"Last\" rect — otherwise the captured-\n // before and measured-after rects match and the animation no-ops.\n await awaitChildUpdates(this.host.rows);\n this.#playRowFlip(beforeRects);\n this.#announce(expression, column);\n this.#emitSortedEvent(expression);\n }\n\n #announce(expression: SortExpression<T>, column: ColumnConfiguration<T>) {\n const label = column.headerText ?? String(column.key);\n const message =\n expression.direction === 'none'\n ? `Sort cleared on ${label}`\n : `Sorted by ${label} ${expression.direction}`;\n this.host.announce(message);\n }\n\n #captureRowRects(): KeyedFlipEntry<T>[] {\n const entries: KeyedFlipEntry<T>[] = [];\n for (const row of this.host.rows) {\n const el = row as unknown as HTMLElement;\n entries.push({ key: row.data, rect: el.getBoundingClientRect() });\n }\n return entries;\n }\n\n #playRowFlip(before: ReadonlyArray<KeyedFlipEntry<T>>) {\n // After sort, the same data may be rendered by a different `<apex-grid-row>`\n // DOM element (virtualizer recycles rows). Resolve by data identity.\n const rows = this.host.rows;\n const byData = new Map<T, HTMLElement>();\n for (const row of rows) {\n byData.set(row.data, row as unknown as HTMLElement);\n }\n playKeyedFlip(before, (data) => byData.get(data) ?? null, 'y');\n }\n\n public prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T> {\n if (this.state.has(key)) {\n const expr = this.state.get(key)!;\n\n return Object.assign(expr, {\n direction: this.#orderBy(expr.direction),\n ...this.#resolveSortOptions(options),\n });\n }\n\n // Initial state\n return this.#createDefaultExpression(key);\n }\n\n public reset(key?: Keys<T>) {\n key ? this.state.delete(key) : this.state.clear();\n }\n\n protected _sort(expressions: SortExpression<T> \| SortExpression<T>[]) {\n for (const expr of asArray(expressions)) {\n this.#setExpression(expr);\n }\n\n this.host.requestUpdate(PIPELINE);\n }\n\n public sort(expressions: SortExpression<T> \| SortExpression<T>[]) {\n this._sort(\n asArray(expressions).map((expr) =>\n Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)\n )\n );\n }\n\n public hostConnected() {}\n}\n"]}
1	+ {"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport { awaitChildUpdates, type KeyedFlipEntry, playKeyedFlip } from '../internal/flip.js';\nimport type {\n ColumnConfiguration,\n ColumnSortConfiguration,\n GridHost,\n Keys,\n} from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortExpression, SortingDirection, SortState } from '../operations/sort/types.js';\n\nexport class SortController<T extends object> implements ReactiveController {\n constructor(protected host: GridHost<T>) {\n this.host.addController(this);\n }\n\n public state: SortState<T> = new Map();\n\n get #isMultipleSort() {\n return this.host.sortConfiguration.multiple;\n }\n\n get #isTriStateSort() {\n return this.host.sortConfiguration.triState;\n }\n\n #resolveSortOptions(options?: boolean \| ColumnSortConfiguration<T>) {\n const expr: Pick<SortExpression<T>, 'caseSensitive' \| 'comparer'> = {\n caseSensitive: false,\n comparer: undefined,\n };\n\n if (!options \|\| typeof options === 'boolean') {\n return expr as Partial<SortExpression<T>>;\n }\n\n return Object.assign(expr, {\n caseSensitive: options.caseSensitive,\n comparer: options.comparer,\n }) as Partial<SortExpression<T>>;\n }\n\n #createDefaultExpression(key: Keys<T>) {\n const options = this.host.getColumn(key)?.sort;\n\n return {\n key,\n direction: 'ascending',\n ...this.#resolveSortOptions(options),\n } as SortExpression<T>;\n }\n\n #orderBy(dir?: SortingDirection): SortingDirection {\n return this.#isTriStateSort\n ? dir === 'ascending'\n ? 'descending'\n : dir === 'descending'\n ? 'none'\n : 'ascending'\n : dir === 'ascending'\n ? 'descending'\n : 'ascending';\n }\n\n #emitSortingEvent(detail: SortExpression<T>) {\n return this.host.emitEvent('sorting', { detail, cancelable: true });\n }\n\n #emitSortedEvent(detail: SortExpression<T>) {\n return this.host.emitEvent('sorted', { detail });\n }\n\n #setExpression(expression: SortExpression<T>) {\n expression.direction === 'none'\n ? this.reset(expression.key)\n : this.state.set(expression.key, { ...expression });\n }\n\n public async sortFromHeaderClick(column: ColumnConfiguration<T>, additive = false) {\n const expression = this.prepareExpression(column);\n\n if (!this.#emitSortingEvent(expression)) {\n return;\n }\n\n // A plain click sorts by this column alone, clearing any other sorted\n // columns. Only a Ctrl/Cmd+click while multi-sort is enabled keeps the\n // existing sort keys and appends this column as an additional, lower-\n // priority sort. Without this gate every plain click would accumulate a\n // key, so a second column added behind a unique primary column would not\n // change the visible order at all.\n if (!this.#isMultipleSort \|\| !additive) {\n this.reset();\n }\n\n // Capture visible-row rects keyed by data identity BEFORE the pipeline\n // runs. After the new render the virtualizer will have repositioned\n // rows; we use those captured rects as the \"First\" of a FLIP and\n // animate each row from its old viewport position back to identity.\n const beforeRects = this.#captureRowRects();\n\n this._sort(expression);\n\n await this.host.updateComplete;\n // Wait for body row updates so the new data is committed to each row\n // element before measuring the \"Last\" rect — otherwise the captured-\n // before and measured-after rects match and the animation no-ops.\n await awaitChildUpdates(this.host.rows);\n this.#playRowFlip(beforeRects);\n this.#announce(expression, column);\n this.#emitSortedEvent(expression);\n }\n\n #announce(expression: SortExpression<T>, column: ColumnConfiguration<T>) {\n const label = column.headerText ?? String(column.key);\n const message =\n expression.direction === 'none'\n ? `Sort cleared on ${label}`\n : `Sorted by ${label} ${expression.direction}`;\n this.host.announce(message);\n }\n\n #captureRowRects(): KeyedFlipEntry<T>[] {\n const entries: KeyedFlipEntry<T>[] = [];\n for (const row of this.host.rows) {\n const el = row as unknown as HTMLElement;\n entries.push({ key: row.data, rect: el.getBoundingClientRect() });\n }\n return entries;\n }\n\n #playRowFlip(before: ReadonlyArray<KeyedFlipEntry<T>>) {\n // After sort, the same data may be rendered by a different `<apex-grid-row>`\n // DOM element (virtualizer recycles rows). Resolve by data identity.\n const rows = this.host.rows;\n const byData = new Map<T, HTMLElement>();\n for (const row of rows) {\n byData.set(row.data, row as unknown as HTMLElement);\n }\n playKeyedFlip(before, (data) => byData.get(data) ?? null, 'y');\n }\n\n public prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T> {\n if (this.state.has(key)) {\n const expr = this.state.get(key)!;\n\n return Object.assign(expr, {\n direction: this.#orderBy(expr.direction),\n ...this.#resolveSortOptions(options),\n });\n }\n\n // Initial state\n return this.#createDefaultExpression(key);\n }\n\n public reset(key?: Keys<T>) {\n key ? this.state.delete(key) : this.state.clear();\n }\n\n protected _sort(expressions: SortExpression<T> \| SortExpression<T>[]) {\n for (const expr of asArray(expressions)) {\n this.#setExpression(expr);\n }\n\n this.host.requestUpdate(PIPELINE);\n }\n\n public sort(expressions: SortExpression<T> \| SortExpression<T>[]) {\n this._sort(\n asArray(expressions).map((expr) =>\n Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)\n )\n );\n }\n\n public hostConnected() {}\n}\n"]}

package/custom-elements.json CHANGED Viewed

@@ -1350,6 +1350,10 @@
               "description": "Grid edge/shadow override. Default is a flat 1px hairline edge; set to `var(--ag-shadow-card)` for the elevated card look, or `none` to remove it.",
               "name": "--ag-grid-shadow"
             },
+            {
+              "description": "Host card background. Defaults to a subtle light gradient; override with a flat color (or use `theme=\"dark\"`) for dark themes.",
+              "name": "--ag-grid-bg"
+            },
             {
               "description": "Grid card background (must be opaque).",
               "name": "--ag-surface"
@@ -2836,6 +2840,13 @@
               "description": "Enables drag-and-drop column reordering on the column headers.",
               "fieldName": "columnReordering",
               "attribute": "column-reordering"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "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\"`.",
+              "name": "theme"
             }
           ],
           "superclass": {
@@ -3074,7 +3085,7 @@
                 {
                   "name": "e",
                   "type": {
-                    "text": "Event"
+                    "text": "MouseEvent"
                   }
                 }
               ]
@@ -6222,6 +6233,10 @@
                   "type": {
                     "text": "ColumnConfiguration<T>"
                   }
+                },
+                {
+                  "name": "additive",
+                  "default": "false"
                 }
               ]
             },

package/docs/classes/ApexGrid.html CHANGED Viewed

@@ -12,9 +12,14 @@ internally and any override breaks the track layout.</li>
 <p>The grid is styled out of the box through <code>--ag-*</code> CSS custom properties —
 there is no theme to import and no <code>configureTheme()</code> call. Override <code>--ag-*</code>
 tokens on the host (or any ancestor) to rebrand; when <code>igniteui-webcomponents</code>
-is present, the brand tokens auto-tint from its palette. See the README
-&quot;Getting Started&quot; and &quot;Theming&quot; sections for the full example and token list.</p>
+is present, the brand tokens auto-tint from its palette. For dark mode, set
+the <code>theme=&quot;dark&quot;</code> attribute on the host for the built-in slate dark palette
+(further <code>--ag-*</code> overrides still compose on top). Add <code>tinted</code> (e.g.
+<code>theme=&quot;tinted&quot;</code> or <code>theme=&quot;dark tinted&quot;</code>) to mix the brand into the chrome
+so the grid wears its brand even at rest. See the README &quot;Getting Started&quot;
+and &quot;Theming&quot; sections for the full example and token list.</p>
 </div><div class="tsd-tag-element"><h4 class="tsd-anchor-link" id="element">Element<a href="#element" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>apex-grid</p>
+</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr">Attr<a href="#attr" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>theme - Space-separated theme flags. <code>dark</code> opts into the built-in dark palette; <code>tinted</code> mixes <code>--ag-brand</code> into the chrome surfaces. Combine as <code>theme=&quot;dark tinted&quot;</code>.</p>
 </div><div class="tsd-tag-fires"><h4 class="tsd-anchor-link" id="fires">Fires<a href="#fires" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>sorting - Emitted when sorting is initiated through the UI.</p>
 </div><div class="tsd-tag-fires"><h4 class="tsd-anchor-link" id="fires-1">Fires<a href="#fires-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>sorted - Emitted when a sort operation initiated through the UI has completed.</p>
 </div><div class="tsd-tag-fires"><h4 class="tsd-anchor-link" id="fires-2">Fires<a href="#fires-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>filtering - Emitted when filtering is initiated through the UI.</p>
@@ -41,20 +46,21 @@ is present, the brand tokens auto-tint from its palette. See the README
 </div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop">Cssprop<a href="#cssprop" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-brand] - Brand color for selection, focus rings, and accents. Auto-tints from <code>--ig-primary-500</code> when igniteui is present.</p>
 </div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-1">Cssprop<a href="#cssprop-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-brand-strong] - Brand color for hover / pressed states.</p>
 </div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-2">Cssprop<a href="#cssprop-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-grid-shadow] - Grid edge/shadow override. Default is a flat 1px hairline edge; set to <code>var(--ag-shadow-card)</code> for the elevated card look, or <code>none</code> to remove it.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-3">Cssprop<a href="#cssprop-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-surface] - Grid card background (must be opaque).</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-4">Cssprop<a href="#cssprop-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-surface-alt] - Alternating row tint.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-5">Cssprop<a href="#cssprop-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-surface-elevated] - Header background.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-6">Cssprop<a href="#cssprop-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-hairline] - Header / structural gridline color.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-7">Cssprop<a href="#cssprop-7" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-border] - Row separator color.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-8">Cssprop<a href="#cssprop-8" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-text] - Primary text color.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-9">Cssprop<a href="#cssprop-9" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-text-body] - Row text color.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-10">Cssprop<a href="#cssprop-10" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-text-muted] - Muted text (roles, labels).</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-11">Cssprop<a href="#cssprop-11" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-row-hover] - Row hover wash.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-12">Cssprop<a href="#cssprop-12" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-row-h] - Row height.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-13">Cssprop<a href="#cssprop-13" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-header-h] - Header height.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-14">Cssprop<a href="#cssprop-14" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-radius] - Outer card corner radius.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-15">Cssprop<a href="#cssprop-15" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-font] - Grid font family.</p>
-</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-16">Cssprop<a href="#cssprop-16" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-fs-cell] - Cell font size.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-3">Cssprop<a href="#cssprop-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-grid-bg] - Host card background. Defaults to a subtle light gradient; override with a flat color (or use <code>theme=&quot;dark&quot;</code>) for dark themes.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-4">Cssprop<a href="#cssprop-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-surface] - Grid card background (must be opaque).</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-5">Cssprop<a href="#cssprop-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-surface-alt] - Alternating row tint.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-6">Cssprop<a href="#cssprop-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-surface-elevated] - Header background.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-7">Cssprop<a href="#cssprop-7" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-hairline] - Header / structural gridline color.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-8">Cssprop<a href="#cssprop-8" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-border] - Row separator color.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-9">Cssprop<a href="#cssprop-9" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-text] - Primary text color.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-10">Cssprop<a href="#cssprop-10" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-text-body] - Row text color.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-11">Cssprop<a href="#cssprop-11" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-text-muted] - Muted text (roles, labels).</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-12">Cssprop<a href="#cssprop-12" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-row-hover] - Row hover wash.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-13">Cssprop<a href="#cssprop-13" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-row-h] - Row height.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-14">Cssprop<a href="#cssprop-14" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-header-h] - Header height.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-15">Cssprop<a href="#cssprop-15" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-radius] - Outer card corner radius.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-16">Cssprop<a href="#cssprop-16" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-font] - Grid font family.</p>
+</div><div class="tsd-tag-cssprop"><h4 class="tsd-anchor-link" id="cssprop-17">Cssprop<a href="#cssprop-17" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>[--ag-fs-cell] - Cell font size.</p>
 </div><div class="tsd-tag-see"><h4 class="tsd-anchor-link" id="see">See<a href="#see" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p><a href="https://github.com/apexcharts/apex-grid/blob/main/packages/core/src/styles/_tokens.scss">_tokens.scss</a> for the complete <code>--ag-*</code> token list.</p>
 </div></div></section><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="t"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><section class="tsd-panel tsd-hierarchy" data-refl="121"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-signature-type">EventEmitterBase</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/ApexGridEventMap.html" class="tsd-signature-type tsd-kind-interface">ApexGridEventMap</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-hierarchy-target">ApexGrid</span></li></ul></li></ul></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Other</h3><div class="tsd-index-list"><a href="#autogenerate" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>auto<wbr/>Generate</span></a>
 <a href="#columnreordering" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>column<wbr/>Reordering</span></a>
@@ -140,13 +146,13 @@ make sure to reset the column collection of the grid before passing in the new d
 </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-15">// assuming autoGenerate is set to true</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">columns</span><span class="hl-1"> = [];</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">data</span><span class="hl-1"> = [...];</span>
 </code><button type="button">Copy</button></pre>
-</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr">Attr<a href="#attr" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>auto-generate</p>
+</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-1">Attr<a href="#attr-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>auto-generate</p>
 </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="columnreordering"><span>column<wbr/>Reordering</span><a href="#columnreordering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">columnReordering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div><div class="tsd-comment tsd-typography"><p>Enables drag-and-drop column reordering on the column headers.</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-2">Remarks<a href="#remarks-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Per-column opt-out is available through <a href="../interfaces/BaseColumnConfiguration.html#reorderable" class="tsd-kind-property">BaseColumnConfiguration.reorderable</a>.
 Reordering is constrained to a column's own pinning group — start-pinned
 columns can only swap with start-pinned, unpinned with unpinned, and
 end-pinned with end-pinned.</p>
-</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-1">Attr<a href="#attr-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>column-reordering</p>
+</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-2">Attr<a href="#attr-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>column-reordering</p>
 </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="columns"><span>columns</span><a href="#columns" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">columns</span><span class="tsd-signature-symbol">:</span> <a href="../types/ColumnConfiguration.html" class="tsd-signature-type tsd-kind-type-alias">ColumnConfiguration</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = []</span></div><div class="tsd-comment tsd-typography"><p>Column configuration for the grid.</p>
 </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="data"><span>data</span><a href="#data" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = []</span></div><div class="tsd-comment tsd-typography"><p>The data source for the grid.</p>
 </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="datapipelineconfiguration"><span>data<wbr/>Pipeline<wbr/>Configuration</span><a href="#datapipelineconfiguration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">dataPipelineConfiguration</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/DataPipelineConfiguration.html" class="tsd-signature-type tsd-kind-interface">DataPipelineConfiguration</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">&gt;</span></div><div class="tsd-comment tsd-typography"><p>Configuration object which controls remote data operations for the grid.</p>
@@ -178,7 +184,7 @@ emits the cancellable <code>pageChanging</code> event before applying a change a
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-6">Remarks<a href="#remarks-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>When non-empty, the grid filters records whose visible-column values contain
 the term (case-insensitive substring match). Customise by providing
 <a href="../interfaces/DataPipelineConfiguration.html#quickfilter" class="tsd-kind-property">DataPipelineConfiguration.quickFilter</a>.</p>
-</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-2">Attr<a href="#attr-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>quick-filter</p>
+</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-3">Attr<a href="#attr-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>quick-filter</p>
 </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="selection"><code class="tsd-tag">Optional</code><span>selection</span><a href="#selection" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">selection</span><span class="tsd-signature-symbol">?:</span> <a href="../interfaces/GridSelectionConfiguration.html" class="tsd-signature-type tsd-kind-interface">GridSelectionConfiguration</a></div><div class="tsd-comment tsd-typography"><p>Row selection configuration for the grid.</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-7">Remarks<a href="#remarks-7" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Selection is disabled by default. Set <code>enabled: true</code> and (optionally)
 <code>mode</code> (<code>'single' | 'multiple'</code>) and <code>showCheckboxColumn</code> to opt in.</p>
@@ -191,11 +197,11 @@ clicking it opens a menu with one entry per <a href="#exportformats" class="tsd-
 (CSV in the community grid) that calls <a href="#exportas" class="tsd-kind-method">ApexGrid.exportAs</a>.
 <a href="#exporttocsv" class="tsd-kind-method">ApexGrid.exportToCSV</a> remains callable programmatically regardless
 of this flag.</p>
-</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-3">Attr<a href="#attr-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>show-export</p>
+</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-4">Attr<a href="#attr-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>show-export</p>
 </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="showquickfilter"><span>show<wbr/>Quick<wbr/>Filter</span><a href="#showquickfilter" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">showQuickFilter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div><div class="tsd-comment tsd-typography"><p>Whether the built-in quick-filter input is rendered in the toolbar.</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-9">Remarks<a href="#remarks-9" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>The <a href="#quickfilter" class="tsd-kind-property">ApexGrid.quickFilter</a> value can be controlled programmatically
 regardless of this flag; this only controls the toolbar input UI.</p>
-</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-4">Attr<a href="#attr-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>show-quick-filter</p>
+</div><div class="tsd-tag-attr"><h4 class="tsd-anchor-link" id="attr-5">Attr<a href="#attr-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>show-quick-filter</p>
 </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="sortconfiguration"><span>sort<wbr/>Configuration</span><a href="#sortconfiguration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">sortConfiguration</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/GridSortConfiguration.html" class="tsd-signature-type tsd-kind-interface">GridSortConfiguration</a><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>Sort configuration property for the grid.</p>
 </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="tree"><code class="tsd-tag">Optional</code><span>tree</span><a href="#tree" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">tree</span><span class="tsd-signature-symbol">?:</span> <a href="../interfaces/GridTreeConfiguration.html" class="tsd-signature-type tsd-kind-interface">GridTreeConfiguration</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">&gt;</span></div><div class="tsd-comment tsd-typography"><p>Tree-data (nested rows) configuration for the grid.</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-10">Remarks<a href="#remarks-10" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Tree mode keeps <a href="#data" class="tsd-kind-property">ApexGrid.data</a> flat; the grid derives the

package/docs/index.html CHANGED Viewed

@@ -119,7 +119,7 @@
 <pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1">  { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },                            </span><span class="hl-15">// UI sort + tri-state</span><br/><span class="hl-1">  { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;age&#39;</span><span class="hl-1">,  </span><span class="hl-2">sort:</span><span class="hl-1"> { </span><span class="hl-2">direction:</span><span class="hl-1"> </span><span class="hl-3">&#39;desc&#39;</span><span class="hl-1"> } },           </span><span class="hl-15">// initial state</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">sortConfiguration</span><span class="hl-1"> = { </span><span class="hl-2">multiple:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">triState:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> };</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">sort</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;age&#39;</span><span class="hl-1">, </span><span class="hl-2">direction:</span><span class="hl-1"> </span><span class="hl-3">&#39;asc&#39;</span><span class="hl-1"> });</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">clearSort</span><span class="hl-1">();                                          </span><span class="hl-15">// or grid.clearSort(&#39;age&#39;)</span>
 </code><button type="button">Copy</button></pre>
-<p>Events: <code>sorting</code> (cancellable), <code>sorted</code>.</p>
+<p>When <code>multiple</code> is enabled, a plain header click sorts by that column alone; hold Ctrl/Cmd and click to append additional columns as lower-priority sort keys. Events: <code>sorting</code> (cancellable), <code>sorted</code>.</p>
 <h3 id="filtering" class="tsd-anchor-link">Filtering<a href="#filtering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1">  { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },                          </span><span class="hl-15">// UI filter chip</span><br/><span class="hl-1">  { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;age&#39;</span><span class="hl-1">,  </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;number&#39;</span><span class="hl-1"> },          </span><span class="hl-15">// operands by type</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">StringOperands</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;apex-grid&#39;</span><span class="hl-1">;</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">filter</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-2">condition:</span><span class="hl-1"> </span><span class="hl-2">StringOperands</span><span class="hl-1">.</span><span class="hl-2">contains</span><span class="hl-1">, </span><span class="hl-2">searchTerm:</span><span class="hl-1"> </span><span class="hl-3">&#39;Ada&#39;</span><span class="hl-1"> });</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">clearFilter</span><span class="hl-1">();</span>
 </code><button type="button">Copy</button></pre>

package/docs/media/_tokens.scss CHANGED Viewed

@@ -42,6 +42,17 @@
     // paint `background: inherit` to mask content scrolling underneath, so they
     // MUST be opaque — a translucent surface lets the scrolled content bleed
     // through.
+    // Host card background. Kept as its own token (rather than reusing
+    // `--ag-surface`) so the default can carry the subtle premium light
+    // gradient while sticky surfaces stay flat/opaque. Dark themes override it
+    // with a flat color. The host paints THIS, so dark mode is impossible
+    // without it being a token.
+    --ag-grid-bg: linear-gradient(
+        155deg,
+        rgba(255, 255, 255, 0.96) 0%,
+        rgba(252, 253, 255, 0.92) 50%,
+        rgba(248, 250, 254, 0.94) 100%
+    );
     --ag-surface: #fff; // grid card background
     --ag-surface-alt: #f9fafb; // alternating row tint (neutral, opaque)
     --ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%); // header bg (neutral, opaque)
@@ -104,3 +115,90 @@
     --ag-dur-med: 180ms; // chevron rotate
     --ag-dur-slow: 240ms; // health bar fill
 }
+// ─────────────────────────────────────────────────────────────────────────
+// Built-in dark theme. Opt in with `<apex-grid theme="dark">`.
+//
+// Only color/surface tokens are flipped to a neutral slate palette; geometry,
+// typography, motion, and the brand hue (which still auto-tints from the
+// igniteui palette when present) are inherited from the light block above.
+// `theme~='dark'` matches a space-separated word so `theme="dark compact"`
+// style stacking keeps working. These tokens inherit across the shadow
+// boundary to every child component, so the whole grid re-skins from here.
+// ─────────────────────────────────────────────────────────────────────────
+:host([theme~='dark']) {
+    // ── Brand ── brighter fallbacks so the accent reads on a dark surface;
+    // still re-tints from the igniteui palette first when it is present.
+    --ag-brand: var(--ig-primary-500, #3b82f6);
+    --ag-brand-strong: var(--ig-primary-400, #60a5fa);
+    // ── Surfaces ── flat, opaque slate (sticky regions paint these).
+    --ag-grid-bg: #0f172a; // host card (flat in dark)
+    --ag-surface: #0f172a; // grid body / row bg
+    --ag-surface-alt: #172033; // alternating row tint (subtle lift)
+    --ag-surface-elevated: #1e293b; // header / footer / toolbar
+    // ── Chrome ── light-on-dark gridlines + a hover wash that mixes toward
+    // white (the light default mixes toward #0f172a, which is invisible here).
+    --ag-hairline: rgba(255, 255, 255, 0.12); // structural gridlines
+    --ag-border: rgba(255, 255, 255, 0.07); // row separators
+    --ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));
+    // ── Text ──
+    --ag-text: #f1f5f9; // primary
+    --ag-text-body: #e2e8f0; // row text
+    --ag-text-muted: #94a3b8; // roles, labels
+    --ag-text-subtle: #64748b; // placeholder, ellipsis
+    // ── State ── brighter text + slightly stronger washes for legibility on
+    // the dark surface.
+    --ag-good-text: #34d399;
+    --ag-good-soft: rgba(16, 185, 129, 0.18);
+    --ag-watch-text: #fbbf24;
+    --ag-watch-soft: rgba(245, 158, 11, 0.18);
+    --ag-risk-text: #f87171;
+    --ag-risk-soft: rgba(239, 68, 68, 0.18);
+    --ag-gold: rgba(245, 158, 11, 0.16); // Enterprise pill bg (dark amber wash)
+    --ag-gold-line: rgba(245, 158, 11, 0.35);
+    --ag-gold-text: #fcd34d;
+    // Drop the light-mode white inset highlight; deepen the drop shadow.
+    --ag-shadow-card:
+        0 16px 38px rgba(0, 0, 0, 0.55),
+        0 0 0 1px rgba(255, 255, 255, 0.06),
+        0 1px 0 rgba(255, 255, 255, 0.04) inset;
+}
+// ─────────────────────────────────────────────────────────────────────────
+// Optional brand-tinted chrome. Opt in with `theme="tinted"` (composes with
+// dark as `theme="dark tinted"`).
+//
+// By default the chrome is neutral grayscale and `--ag-brand` only shows on
+// interactive state (selection, focus, active sort). This variant mixes a
+// little brand into the surfaces/gridlines so the grid wears its brand even
+// at rest, AG-Grid-Alpine style. Because every value is `color-mix(... var
+// (--ag-brand) ...)`, it follows whatever brand is in effect (including the
+// igniteui auto-tint) with no per-brand CSS.
+//
+// The light variant mixes into the white neutrals; the dark variant (higher
+// specificity, so it wins under `theme="dark tinted"`) mixes the SAME token
+// set into the slate neutrals. Body row surface stays untinted for legibility.
+// ─────────────────────────────────────────────────────────────────────────
+:host([theme~='tinted']) {
+    --ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff); // zebra
+    --ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd); // header / footer / toolbar
+    --ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07)); // gridlines
+    --ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent); // row separators
+    --ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));
+    --ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280); // header labels pick up the brand
+}
+:host([theme~='dark'][theme~='tinted']) {
+    --ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);
+    --ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);
+    --ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));
+    --ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));
+    --ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));
+    --ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8);
+}

package/docs/media/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "apex-grid",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Web component data grid following open-wc recommendations",
   "keywords": [
     "lit",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "apex-grid",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Web component data grid following open-wc recommendations",
   "keywords": [
     "lit",

package/styles/_tokens.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}`;
+export const styles = css `:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-grid-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100% );--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host([theme~=dark]){--ag-brand: var(--ig-primary-500, #3b82f6);--ag-brand-strong: var(--ig-primary-400, #60a5fa);--ag-grid-bg: #0f172a;--ag-surface: #0f172a;--ag-surface-alt: #172033;--ag-surface-elevated: #1e293b;--ag-hairline: rgba(255, 255, 255, 0.12);--ag-border: rgba(255, 255, 255, 0.07);--ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));--ag-text: #f1f5f9;--ag-text-body: #e2e8f0;--ag-text-muted: #94a3b8;--ag-text-subtle: #64748b;--ag-good-text: #34d399;--ag-good-soft: rgba(16, 185, 129, 0.18);--ag-watch-text: #fbbf24;--ag-watch-soft: rgba(245, 158, 11, 0.18);--ag-risk-text: #f87171;--ag-risk-soft: rgba(239, 68, 68, 0.18);--ag-gold: rgba(245, 158, 11, 0.16);--ag-gold-line: rgba(245, 158, 11, 0.35);--ag-gold-text: #fcd34d;--ag-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset}:host([theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd);--ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07));--ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent);--ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280)}:host([theme~=dark][theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);--ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));--ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));--ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8)}`;
 //# sourceMappingURL=_tokens.css.js.map

package/styles/_tokens.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_tokens.css.js","sourceRoot":"","sources":["../../src/styles/_tokens.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~0qDAA0qD~~,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}`;"]}
1	+ {"version":3,"file":"_tokens.css.js","sourceRoot":"","sources":["../../src/styles/_tokens.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wjHAAwjH,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-grid-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100% );--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host([theme~=dark]){--ag-brand: var(--ig-primary-500, #3b82f6);--ag-brand-strong: var(--ig-primary-400, #60a5fa);--ag-grid-bg: #0f172a;--ag-surface: #0f172a;--ag-surface-alt: #172033;--ag-surface-elevated: #1e293b;--ag-hairline: rgba(255, 255, 255, 0.12);--ag-border: rgba(255, 255, 255, 0.07);--ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));--ag-text: #f1f5f9;--ag-text-body: #e2e8f0;--ag-text-muted: #94a3b8;--ag-text-subtle: #64748b;--ag-good-text: #34d399;--ag-good-soft: rgba(16, 185, 129, 0.18);--ag-watch-text: #fbbf24;--ag-watch-soft: rgba(245, 158, 11, 0.18);--ag-risk-text: #f87171;--ag-risk-soft: rgba(239, 68, 68, 0.18);--ag-gold: rgba(245, 158, 11, 0.16);--ag-gold-line: rgba(245, 158, 11, 0.35);--ag-gold-text: #fcd34d;--ag-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset}:host([theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd);--ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07));--ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent);--ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280)}:host([theme~=dark][theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);--ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));--ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));--ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8)}`;"]}

package/styles/grid/_grid.base.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host{display:grid;height:100%;position:relative;box-sizing:border-box;font-family:var(--ig-font-family, var(--ag-font));font-size:var(--ag-fs-cell);line-height:var(--ag-leading);color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)));border-radius:var(--ag-radius);background:linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100%);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-grid-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100% );--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host([theme~=dark]){--ag-brand: var(--ig-primary-500, #3b82f6);--ag-brand-strong: var(--ig-primary-400, #60a5fa);--ag-grid-bg: #0f172a;--ag-surface: #0f172a;--ag-surface-alt: #172033;--ag-surface-elevated: #1e293b;--ag-hairline: rgba(255, 255, 255, 0.12);--ag-border: rgba(255, 255, 255, 0.07);--ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));--ag-text: #f1f5f9;--ag-text-body: #e2e8f0;--ag-text-muted: #94a3b8;--ag-text-subtle: #64748b;--ag-good-text: #34d399;--ag-good-soft: rgba(16, 185, 129, 0.18);--ag-watch-text: #fbbf24;--ag-watch-soft: rgba(245, 158, 11, 0.18);--ag-risk-text: #f87171;--ag-risk-soft: rgba(239, 68, 68, 0.18);--ag-gold: rgba(245, 158, 11, 0.16);--ag-gold-line: rgba(245, 158, 11, 0.35);--ag-gold-text: #fcd34d;--ag-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset}:host([theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd);--ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07));--ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent);--ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280)}:host([theme~=dark][theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);--ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));--ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));--ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8)}:host{display:grid;height:100%;position:relative;box-sizing:border-box;font-family:var(--ig-font-family, var(--ag-font));font-size:var(--ag-fs-cell);line-height:var(--ag-leading);color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)));border-radius:var(--ag-radius);background:var(--ag-grid-bg);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;
 //# sourceMappingURL=_grid.base.css.js.map

package/styles/grid/_grid.base.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_grid.base.css.js","sourceRoot":"","sources":["../../../src/styles/grid/_grid.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~4rGAA4rG~~,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host{~~display~~:grid~~;height~~:~~100%;position~~:~~relative;box~~-~~sizing~~:border-~~box;font~~-~~family~~:var(--ig-~~font~~-~~family~~, var(--ag-~~font~~))~~;font~~-~~size~~:var(--ag-~~fs-cell~~)~~;line~~-~~height~~:var(--ag-~~leading~~);color:var(--~~igx~~-~~content~~-~~text~~-color, var(--~~content~~-text-color, var(--ag-~~text-body~~)))~~;border~~-~~radius~~:var(--ag-~~radius~~)~~;background~~:~~linear~~-~~gradient~~(~~155deg~~, rgba(255, 255, 255, 0.96) 0%, rgba(~~252~~, ~~253~~, 255, 0.92) 50%, ~~rgba~~(~~248,~~ ~~250,~~ ~~254~~, ~~0.94~~) 100%);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;"]}
1	+ {"version":3,"file":"_grid.base.css.js","sourceRoot":"","sources":["../../../src/styles/grid/_grid.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u+JAAu+J,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-grid-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100% );--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host([theme~=dark]){--ag-brand: var(--ig-primary-500, #3b82f6);--ag-brand-strong: var(--ig-primary-400, #60a5fa);--ag-grid-bg: #0f172a;--ag-surface: #0f172a;--ag-surface-alt: #172033;--ag-surface-elevated: #1e293b;--ag-hairline: rgba(255, 255, 255, 0.12);--ag-border: rgba(255, 255, 255, 0.07);--ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));--ag-text: #f1f5f9;--ag-text-body: #e2e8f0;--ag-text-muted: #94a3b8;--ag-text-subtle: #64748b;--ag-good-text: #34d399;--ag-good-soft: rgba(16, 185, 129, 0.18);--ag-watch-text: #fbbf24;--ag-watch-soft: rgba(245, 158, 11, 0.18);--ag-risk-text: #f87171;--ag-risk-soft: rgba(239, 68, 68, 0.18);--ag-gold: rgba(245, 158, 11, 0.16);--ag-gold-line: rgba(245, 158, 11, 0.35);--ag-gold-text: #fcd34d;--ag-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset}:host([theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd);--ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07));--ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent);--ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280)}:host([theme~=dark][theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);--ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));--ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));--ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8)}:host{display:grid;height:100%;position:relative;box-sizing:border-box;font-family:var(--ig-font-family, var(--ag-font));font-size:var(--ag-fs-cell);line-height:var(--ag-leading);color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)));border-radius:var(--ag-radius);background:var(--ag-grid-bg);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;"]}

package/styles/grid/grid.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host{display:grid;height:100%;position:relative;box-sizing:border-box;font-family:var(--ig-font-family, var(--ag-font));font-size:var(--ag-fs-cell);line-height:var(--ag-leading);color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)));border-radius:var(--ag-radius);background:linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100%);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-grid-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100% );--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host([theme~=dark]){--ag-brand: var(--ig-primary-500, #3b82f6);--ag-brand-strong: var(--ig-primary-400, #60a5fa);--ag-grid-bg: #0f172a;--ag-surface: #0f172a;--ag-surface-alt: #172033;--ag-surface-elevated: #1e293b;--ag-hairline: rgba(255, 255, 255, 0.12);--ag-border: rgba(255, 255, 255, 0.07);--ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));--ag-text: #f1f5f9;--ag-text-body: #e2e8f0;--ag-text-muted: #94a3b8;--ag-text-subtle: #64748b;--ag-good-text: #34d399;--ag-good-soft: rgba(16, 185, 129, 0.18);--ag-watch-text: #fbbf24;--ag-watch-soft: rgba(245, 158, 11, 0.18);--ag-risk-text: #f87171;--ag-risk-soft: rgba(239, 68, 68, 0.18);--ag-gold: rgba(245, 158, 11, 0.16);--ag-gold-line: rgba(245, 158, 11, 0.35);--ag-gold-text: #fcd34d;--ag-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset}:host([theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd);--ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07));--ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent);--ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280)}:host([theme~=dark][theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);--ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));--ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));--ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8)}:host{display:grid;height:100%;position:relative;box-sizing:border-box;font-family:var(--ig-font-family, var(--ag-font));font-size:var(--ag-fs-cell);line-height:var(--ag-leading);color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)));border-radius:var(--ag-radius);background:var(--ag-grid-bg);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;
 //# sourceMappingURL=grid.css.js.map

package/styles/grid/grid.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.css.js","sourceRoot":"","sources":["../../../src/styles/grid/grid.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~4rGAA4rG~~,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host{~~display~~:grid~~;height~~:~~100%;position~~:~~relative;box~~-~~sizing~~:border-~~box;font~~-~~family~~:var(--ig-~~font~~-~~family~~, var(--ag-~~font~~))~~;font~~-~~size~~:var(--ag-~~fs-cell~~)~~;line~~-~~height~~:var(--ag-~~leading~~);color:var(--~~igx~~-~~content~~-~~text~~-color, var(--~~content~~-text-color, var(--ag-~~text-body~~)))~~;border~~-~~radius~~:var(--ag-~~radius~~)~~;background~~:~~linear~~-~~gradient~~(~~155deg~~, rgba(255, 255, 255, 0.96) 0%, rgba(~~252~~, ~~253~~, 255, 0.92) 50%, ~~rgba~~(~~248,~~ ~~250,~~ ~~254~~, ~~0.94~~) 100%);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;"]}
1	+ {"version":3,"file":"grid.css.js","sourceRoot":"","sources":["../../../src/styles/grid/grid.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u+JAAu+J,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ag-brand: var(--ig-primary-500, #0d6fd3);--ag-brand-strong: var(--ig-primary-700, #0a56b8);--ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent);--ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent);--ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent);--ag-hairline: rgba(15, 23, 42, 0.08);--ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface));--ag-grid-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 255, 0.92) 50%, rgba(248, 250, 254, 0.94) 100% );--ag-surface: #fff;--ag-surface-alt: #f9fafb;--ag-surface-elevated: linear-gradient(180deg, #fbfcfd 0%, #f6f7f8 100%);--ag-text: #111827;--ag-text-body: #1f2937;--ag-text-muted: #6b7280;--ag-text-subtle: #9ca3af;--ag-text-on-brand: #fff;--ag-border: rgba(15, 23, 42, 0.05);--ag-good: #10b981;--ag-good-text: #047857;--ag-good-soft: rgba(16, 185, 129, 0.1);--ag-watch: #f59e0b;--ag-watch-text: #b45309;--ag-watch-soft: rgba(245, 158, 11, 0.1);--ag-risk: #ef4444;--ag-risk-text: #b91c1c;--ag-risk-soft: rgba(239, 68, 68, 0.1);--ag-gold: #fef3c7;--ag-gold-line: #fde68a;--ag-gold-text: #92400e;--ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;--ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;--ag-fs-cell: 12px;--ag-fs-cell-secondary: 10.5px;--ag-fs-tiny: 10px;--ag-fw-regular: 500;--ag-fw-semibold: 600;--ag-fw-bold: 700;--ag-tracking-tight: -0.005em;--ag-tracking-header: 0.05em;--ag-leading: 1.4;--ag-cell-pad-x: 10px;--ag-row-h: 36px;--ag-header-h: 36px;--ag-toolbar-pad: 12px 14px;--ag-footer-pad: 10px 14px;--ag-radius: 18px;--ag-radius-sm: 6px;--ag-radius-xs: 4px;--ag-radius-pill: 20px;--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);--ag-dur-fast: 120ms;--ag-dur-med: 180ms;--ag-dur-slow: 240ms}:host([theme~=dark]){--ag-brand: var(--ig-primary-500, #3b82f6);--ag-brand-strong: var(--ig-primary-400, #60a5fa);--ag-grid-bg: #0f172a;--ag-surface: #0f172a;--ag-surface-alt: #172033;--ag-surface-elevated: #1e293b;--ag-hairline: rgba(255, 255, 255, 0.12);--ag-border: rgba(255, 255, 255, 0.07);--ag-row-hover: color-mix(in srgb, #ffffff 7%, var(--ag-surface));--ag-text: #f1f5f9;--ag-text-body: #e2e8f0;--ag-text-muted: #94a3b8;--ag-text-subtle: #64748b;--ag-good-text: #34d399;--ag-good-soft: rgba(16, 185, 129, 0.18);--ag-watch-text: #fbbf24;--ag-watch-soft: rgba(245, 158, 11, 0.18);--ag-risk-text: #f87171;--ag-risk-soft: rgba(239, 68, 68, 0.18);--ag-gold: rgba(245, 158, 11, 0.16);--ag-gold-line: rgba(245, 158, 11, 0.35);--ag-gold-text: #fcd34d;--ag-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset}:host([theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd);--ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgba(15, 23, 42, 0.07));--ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent);--ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280)}:host([theme~=dark][theme~=tinted]){--ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);--ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);--ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgba(255, 255, 255, 0.12));--ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgba(255, 255, 255, 0.07));--ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));--ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8)}:host{display:grid;height:100%;position:relative;box-sizing:border-box;font-family:var(--ig-font-family, var(--ag-font));font-size:var(--ag-fs-cell);line-height:var(--ag-leading);color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)));border-radius:var(--ag-radius);background:var(--ag-grid-bg);box-shadow:var(--ag-grid-shadow, 0 0 0 1px var(--ag-hairline));overflow:auto;grid-template-rows:[toolbar-row] max-content [header-row] max-content [filter-row] max-content [virtualized-container] auto [paginator-row] max-content;--scrollbar-offset: 0;--z-index-base: 1}apex-virtualizer{grid-row:virtualized-container;display:flex;flex-flow:column;flex:1;background:var(--igx-content-background, var(--content-background, var(--ag-surface)));color:var(--igx-content-text-color, var(--content-text-color, var(--ag-text-body)))}apex-virtualizer:focus{outline:none}[part~=resize-indicator]{position:absolute;height:100%;background-color:var(--igx-grid-resize-line-color, var(--grid-resize-line-color, var(--ag-brand)));width:.125rem;inset-inline-start:0;top:0;z-index:calc(var(--z-index-base) + 1)}`;"]}

package/styles/paginator/paginator.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ig-size: 1;grid-row:paginator-row;display:block;background:linear-gradient(0deg, #fbfcfd 0%, #f6f7f8 100%);color:var(--igx-header-text-color, var(--header-text-color, var(--ag-text-muted)));border-block-start:1px solid var(--igx-header-border-color, var(--header-border-color, var(--ag-hairline)));font-size:11.5px;z-index:calc(var(--z-index-base) + 4);position:sticky;inset-block-end:0;inset-inline-start:0;box-sizing:border-box;width:var(--apex-host-width, 100%);max-width:var(--apex-host-width, 100%)}[part=paginator]{display:flex;align-items:center;gap:.75rem;padding:var(--ag-footer-pad);min-height:2rem}[part=paginator-size]{display:inline-flex;align-items:center}[part=paginator-size] select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;padding:.125rem .375rem;font:inherit;font-size:11.5px;color:var(--ag-text-body);background:var(--ag-surface);border:1px solid var(--ag-hairline);border-radius:var(--ag-radius-sm);line-height:1;cursor:pointer}[part=paginator-size] select:focus-visible{outline:.125rem solid color-mix(in srgb, var(--ag-brand) 50%, transparent);outline-offset:.0625rem}[part=paginator-info]{flex:1;text-align:center;white-space:nowrap;color:var(--igx-header-text-color, var(--header-text-color, var(--ag-text-muted)));font-variant-numeric:tabular-nums}[part=paginator-controls]{display:inline-flex;align-items:center;gap:.125rem}[part=paginator-page]{padding:0 .375rem;min-width:3rem;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:var(--ag-fw-semibold);color:var(--ag-text)}[part=paginator-button]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:var(--ag-text-body);border:0;padding:.125rem;margin:0;width:1.375rem;height:1.375rem;min-width:1.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ag-radius-sm);cursor:pointer;line-height:0;transition:background-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease)}[part=paginator-button] svg{display:block;inline-size:1rem;block-size:1rem;color:currentcolor}[part=paginator-button]:hover:not(:disabled){background:hsl(from currentcolor h s l/8%);color:var(--ag-text)}[part=paginator-button]:focus-visible{outline:.125rem solid color-mix(in srgb, var(--ag-brand) 50%, transparent);outline-offset:-0.125rem}[part=paginator-button]:disabled{color:var(--ag-text-subtle);cursor:not-allowed}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ig-size: 1;grid-row:paginator-row;display:block;background:var(--ag-surface-elevated);color:var(--igx-header-text-color, var(--header-text-color, var(--ag-text-muted)));border-block-start:1px solid var(--igx-header-border-color, var(--header-border-color, var(--ag-hairline)));font-size:11.5px;z-index:calc(var(--z-index-base) + 4);position:sticky;inset-block-end:0;inset-inline-start:0;box-sizing:border-box;width:var(--apex-host-width, 100%);max-width:var(--apex-host-width, 100%)}[part=paginator]{display:flex;align-items:center;gap:.75rem;padding:var(--ag-footer-pad);min-height:2rem}[part=paginator-size]{display:inline-flex;align-items:center}[part=paginator-size] select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;padding:.125rem .375rem;font:inherit;font-size:11.5px;color:var(--ag-text-body);background:var(--ag-surface);border:1px solid var(--ag-hairline);border-radius:var(--ag-radius-sm);line-height:1;cursor:pointer}[part=paginator-size] select:focus-visible{outline:.125rem solid color-mix(in srgb, var(--ag-brand) 50%, transparent);outline-offset:.0625rem}[part=paginator-info]{flex:1;text-align:center;white-space:nowrap;color:var(--igx-header-text-color, var(--header-text-color, var(--ag-text-muted)));font-variant-numeric:tabular-nums}[part=paginator-controls]{display:inline-flex;align-items:center;gap:.125rem}[part=paginator-page]{padding:0 .375rem;min-width:3rem;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:var(--ag-fw-semibold);color:var(--ag-text)}[part=paginator-button]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:var(--ag-text-body);border:0;padding:.125rem;margin:0;width:1.375rem;height:1.375rem;min-width:1.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ag-radius-sm);cursor:pointer;line-height:0;transition:background-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease)}[part=paginator-button] svg{display:block;inline-size:1rem;block-size:1rem;color:currentcolor}[part=paginator-button]:hover:not(:disabled){background:hsl(from currentcolor h s l/8%);color:var(--ag-text)}[part=paginator-button]:focus-visible{outline:.125rem solid color-mix(in srgb, var(--ag-brand) 50%, transparent);outline-offset:-0.125rem}[part=paginator-button]:disabled{color:var(--ag-text-subtle);cursor:not-allowed}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
 //# sourceMappingURL=paginator.css.js.map