apex-grid 3.3.0 → 3.5.0

package/docs/interfaces/GridRowReorderingConfiguration.html

@@ -2,10 +2,10 @@
 </div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">GridRowReorderingConfiguration</span> <span class="tsd-signature-symbol">{</span><br/>    <a class="tsd-kind-property" href="#applytodata">applyToData</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#enabled">enabled</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#handle">handle</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><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">Properties</h3><div class="tsd-index-list"><a href="#applytodata" 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>apply<wbr/>To<wbr/>Data?</span></a>
 <a href="#enabled" 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>enabled</span></a>
 <a href="#handle" 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>handle?</span></a>
-</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="applytodata"><code class="tsd-tag">Optional</code><span>apply<wbr/>To<wbr/>Data</span><a href="#applytodata" 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">applyToData</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>When <code>true</code>, a reorder also splices ApexGrid.data in place so the
+</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="applytodata"><code class="tsd-tag">Optional</code><span>apply<wbr/>To<wbr/>Data</span><a href="#applytodata" 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">applyToData</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>When <code>true</code>, a reorder also splices <a href="../classes/ApexGrid.html#data" class="tsd-kind-property">ApexGrid.data</a> in place so the
 source array reflects the new order. Defaults to <code>false</code>: the order lives in
 the grid and the app persists it via the <code>rowMoved</code> event.</p>
-</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enabled"><span>enabled</span><a href="#enabled" 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">enabled</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Whether rows can be reordered by drag, keyboard, or ApexGrid.moveRow.
+</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enabled"><span>enabled</span><a href="#enabled" 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">enabled</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Whether rows can be reordered by drag, keyboard, or <a href="../classes/ApexGrid.html#moverow" class="tsd-kind-method">ApexGrid.moveRow</a>.
 A manual order, once set, is mutually exclusive with column sorting
 (applying a sort clears it). Disabled when omitted.</p>
 </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="handle"><code class="tsd-tag">Optional</code><span>handle</span><a href="#handle" 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">handle</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Controls how a pointer drag is initiated.</p>

package/docs/interfaces/PaginationConfiguration.html

@@ -7,7 +7,7 @@
 <a href="#totalitems" 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>total<wbr/>Items?</span></a>
 </div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enabled"><code class="tsd-tag">Optional</code><span>enabled</span><a href="#enabled" 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">enabled</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Whether pagination is enabled.</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks">Remarks<a href="#remarks" 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 <code>false</code>, the grid renders no paginator and applies no slicing — the full
-ApexGrid.dataView is virtualized as usual.</p>
+<a href="../classes/ApexGrid.html#dataview" class="tsd-kind-accessor">ApexGrid.dataView</a> is virtualized as usual.</p>
 </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mode"><code class="tsd-tag">Optional</code><span>mode</span><a href="#mode" 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">mode</span><span class="tsd-signature-symbol">?:</span> <a href="../types/PaginationMode.html" class="tsd-signature-type tsd-kind-type-alias">PaginationMode</a></div><div class="tsd-comment tsd-typography"><p>The pagination mode. Defaults to <code>'local'</code>.</p>
 </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="page"><code class="tsd-tag">Optional</code><span>page</span><a href="#page" 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">page</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The current page (zero-based). Defaults to <code>0</code>.</p>
 </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="pagesize"><code class="tsd-tag">Optional</code><span>page<wbr/>Size</span><a href="#pagesize" 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">pageSize</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The number of records per page. Defaults to <code>25</code>.</p>

package/docs/interfaces/PaginationState.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>PaginationState | apex-grid</title><meta name="description" content="Documentation for apex-grid"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">apex-grid</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">PaginationState</a></li></ul><h1>Interface PaginationState</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Resolved pagination state passed to controllers and event payloads.</p>
-</div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">PaginationState</span> <span class="tsd-signature-symbol">{</span><br/>    <a class="tsd-kind-property" href="#page">page</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#pagecount">pageCount</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#pagesize">pageSize</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#totalitems">totalItems</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><section class="tsd-panel tsd-hierarchy" data-refl="939"><h4>Hierarchy (<a href="../hierarchy.html#PaginationState">View Summary</a>)</h4><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-hierarchy-target">PaginationState</span><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><a href="ApexPageChangedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexPageChangedEvent</a></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">Properties</h3><div class="tsd-index-list"><a href="#page" 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>page</span></a>
+</div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">PaginationState</span> <span class="tsd-signature-symbol">{</span><br/>    <a class="tsd-kind-property" href="#page">page</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#pagecount">pageCount</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#pagesize">pageSize</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#totalitems">totalItems</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><section class="tsd-panel tsd-hierarchy" data-refl="1172"><h4>Hierarchy (<a href="../hierarchy.html#PaginationState">View Summary</a>)</h4><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-hierarchy-target">PaginationState</span><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><a href="ApexPageChangedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexPageChangedEvent</a></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">Properties</h3><div class="tsd-index-list"><a href="#page" 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>page</span></a>
 <a href="#pagecount" 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>page<wbr/>Count</span></a>
 <a href="#pagesize" 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>page<wbr/>Size</span></a>
 <a href="#totalitems" 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>total<wbr/>Items</span></a>

package/docs/media/_tokens.scss

@@ -7,16 +7,18 @@
 // This is the single rebrand surface: override ~12 values on `apex-grid` and
 // the whole grid re-skins. Values fall back to self-contained literals, so a
 // grid mounted with zero consumer CSS already looks premium; the brand tokens
-// additionally re-tint from the igniteui palette when it is present.
+// additionally re-tint from an Ignite UI palette when one is present.
 // No `!important`, no downstream hardcoded numerics — every rule resolves here.
 // ─────────────────────────────────────────────────────────────────────────
 
 :host {
     // ── Brand ────────────────────────────────────────────────────────────
-    // Re-tints from the igniteui palette when its CSS is loaded (so the grid
-    // auto-matches an igniteui host app), and falls back to the self-contained
-    // premium blue otherwise. This igniteui hook used to live in the per-theme
-    // files; folding it here keeps that integration without named themes.
+    // Re-tints from an Ignite UI palette when its CSS is loaded (so the grid
+    // auto-matches such a host app), and falls back to the self-contained
+    // premium blue otherwise. `--ig-primary-*` is the whole integration: it is
+    // what an Ignite UI theme actually defines, and reading it costs nothing
+    // when absent. This hook used to live in the per-theme files; folding it
+    // here keeps the integration without named themes.
     --ag-brand: var(--ig-primary-500, #0d6fd3); /* primary blue */
     --ag-brand-strong: var(--ig-primary-700, #0a56b8); /* hover / pressed */
 
@@ -111,14 +113,14 @@
 // 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.
+// Ignite UI 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.
+    // still re-tints from an Ignite UI palette first when it is present.
     --ag-brand: var(--ig-primary-500, #3b82f6);
     --ag-brand-strong: var(--ig-primary-400, #60a5fa);
 
@@ -169,7 +171,7 @@
 // little brand into the surfaces/gridlines so the grid wears its brand even
 // at rest, a brand-tinted variant. 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.
+// Ignite UI 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.
@@ -191,3 +193,22 @@
     --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);
 }
+
+// ─────────────────────────────────────────────────────────────────────────
+// Reduced motion. Every transition in the grid is declared with one of the
+// three `--ag-dur-*` tokens (nothing hardcodes a duration, and there are no
+// keyframe animations), so zeroing them here is the whole opt-out: hover
+// washes, focus rings, chevron rotation and bar fills all become instant while
+// the end states stay identical. `prefers-reduced-motion` is a user request,
+// not a preference we can override, hence no `--ag-*` escape hatch.
+// A consumer that adds its own transitions inside the grid should either use
+// these tokens or guard them the same way. Row reorder / expansion animations
+// live in JS and already bail out (`internal/flip.ts`).
+// ─────────────────────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+    :host {
+        --ag-dur-fast: 0ms;
+        --ag-dur-med: 0ms;
+        --ag-dur-slow: 0ms;
+    }
+}

package/docs/media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-grid",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "Web component data grid following open-wc recommendations",
   "keywords": [
     "lit",
@@ -30,7 +30,8 @@
   },
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"src/**/*.{js,ts}\" --exclude \"src/styles/**/*\"",
-    "build": "npm run analyze && node scripts/build.js && npm run typedoc",
+    "cem:check": "node scripts/check-cem-drift.js",
+    "build": "npm run analyze && npm run cem:check && node scripts/build.js && npm run typedoc",
     "build:tsc": "tsc",
     "dev:vite": "vite build",
     "format": "biome check --fix && npm run format:stylelint",
@@ -52,8 +53,6 @@
   "dependencies": {
     "@lit-labs/virtualizer": "^2.1.0",
     "@lit/context": "^1.1.5",
-    "igniteui-theming": "~19.1.0",
-    "igniteui-webcomponents": "~6.1.0",
     "lit": "^3.3.0"
   },
   "devDependencies": {
@@ -82,4 +81,4 @@
     "vite": "^7.0.2"
   },
   "customElements": "custom-elements.json"
-}
+}

package/docs/media/state-persistence.html

@@ -54,7 +54,6 @@
       }
       apex-grid {
         min-height: 420px;
-        --ig-size: 2;
       }
       .snapshot {
         margin: 0;
@@ -79,15 +78,6 @@
         letter-spacing: 0.04em;
       }
     </style>
-    <script type="module">
-      try {
-        const resp = await fetch('https://cdn.jsdelivr.net/npm/igniteui-webcomponents@5/themes/light/bootstrap.css');
-        const css = await resp.text();
-        const style = document.createElement('style');
-        style.textContent = css.replaceAll(':root', 'apex-grid');
-        document.head.appendChild(style);
-      } catch (e) { /* theme is cosmetic */ }
-    </script>
   </head>
   <body>
     <h2>State Persistence — getState / setState</h2>