@kubex/zinc 1.1.132 → 1.1.134

package/dist/custom-elements.json

@@ -56,6 +56,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -250,79 +323,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -8856,6 +8856,16 @@
               "default": "false",
               "attribute": "no-initial-load"
             },
+            {
+              "kind": "field",
+              "name": "sharable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, the table's non-default state (search, filter, sort, page, per-page and field values)\nis mirrored to the URL query string and restored from it on load, so the view is shareable.",
+              "attribute": "sharable"
+            },
             {
               "kind": "field",
               "name": "groupBy",
@@ -8926,6 +8936,31 @@
               "privacy": "private",
               "default": "html``"
             },
+            {
+              "kind": "field",
+              "name": "_sharableInitialised",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_sharableDefaults",
+              "type": {
+                "text": "Record<string, string> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_urlManagedKeys",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>(['search', 'filter', 'sortColumn', 'sortDirection', 'page', 'perPage'])"
+            },
             {
               "kind": "field",
               "name": "resizeObserver",
@@ -9013,7 +9048,7 @@
               "kind": "field",
               "name": "_dataTask",
               "privacy": "private",
-              "default": "new Task(this, { task: async ([dataUri, requestParams], {signal}) => { if (dataUri === undefined || this.noInitialLoad && this._initialLoad) { return {rows: [], page: 1, perPage: this.itemsPerPage, total: 0}; } if (this.groupBy) { // we want to load all the data possible so we can group and show multiple tables this.itemsPerPage = 1000; } const requestData: DataRequest = { page: this.page, perPage: this.itemsPerPage, sortColumn: this.sortColumn, sortDirection: this.sortDirection, filter: this.filter, search: this.search, }; // get all inputs that are in the inputs slot and add them to the const inputs = this.hasSlotController.getSlots(ActionSlots.inputs.valueOf()); const params: Record<string, any> = {}; if (inputs) { inputs.forEach((input) => { const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea']; if (allowedInputs.includes(input.tagName.toLowerCase())) { const value = (input as AllowedInputElement).value as string || input.getAttribute('value'); const name = (input as AllowedInputElement).name || input.getAttribute('name'); if (name) { params[name] = value; } } }); Object.assign(requestData, params); } // Add any extra request params if (requestParams && typeof requestParams === 'object') { Object.assign(requestData, requestParams); } // This is also used for Rubix, so it may not work for your application. const response = await fetch(dataUri, { method: this.method, headers: { 'x-kx-fetch-style': 'zn-data-table', }, signal, credentials: 'same-origin', body: this.method === 'POST' ? JSON.stringify(requestData) : undefined }); if (!response.ok) throw new Error(response.statusText); return response.json(); }, args: () => [this.dataUri, this.requestParams] })"
+              "default": "new Task(this, { task: async ([dataUri, requestParams], {signal}) => { // Every request path funnels through the task, so this is the single place to mirror the // current (non-default) state to the URL when `sharable` is set. this._updateSharableUrl(); if (dataUri === undefined || this.noInitialLoad && this._initialLoad) { return {rows: [], page: 1, perPage: this.itemsPerPage, total: 0}; } if (this.groupBy) { // we want to load all the data possible so we can group and show multiple tables this.itemsPerPage = 1000; } const requestData: DataRequest = { page: this.page, perPage: this.itemsPerPage, sortColumn: this.sortColumn, sortDirection: this.sortDirection, filter: this.filter, search: this.search, }; // Inputs-slot values are context/system params (e.g. csrf token, package name) sent with // every request - they stay at the root of the payload. const inputs = this.hasSlotController.getSlots(ActionSlots.inputs.valueOf()); const params: Record<string, any> = {}; if (inputs) { inputs.forEach((input) => { const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea']; if (allowedInputs.includes(input.tagName.toLowerCase())) { const value = (input as AllowedInputElement).value as string || input.getAttribute('value'); const name = (input as AllowedInputElement).name || input.getAttribute('name'); if (name) { params[name] = value; } } }); Object.assign(requestData, params); } // Search-related fields (from <zn-data-table-search>'s `fields` slot, delivered via // requestParams) are wrapped under `searchFields` so the backend can bind them to a single // map rather than arbitrary root-level keys. `q` mirrors the search text; the root `search` // key is still sent for back-compatibility. Empty values are dropped, and `searchFields` is // null when nothing meaningful remains so the backend can treat it as \"no search\". const searchFields: Record<string, any> = {}; if (requestParams && typeof requestParams === 'object') { for (const [key, value] of Object.entries(requestParams as Record<string, unknown>)) { if (value !== undefined && value !== null && value !== '') { searchFields[key] = value; } } } if (this.search || Object.keys(searchFields).length > 0) { searchFields.q = this.search; } requestData.searchFields = Object.keys(searchFields).length > 0 ? searchFields : null; // This is also used for Rubix, so it may not work for your application. const response = await fetch(dataUri, { method: this.method, headers: { 'x-kx-fetch-style': 'zn-data-table', }, signal, credentials: 'same-origin', body: this.method === 'POST' ? JSON.stringify(requestData) : undefined }); if (!response.ok) throw new Error(response.statusText); return response.json(); }, args: () => [this.dataUri, this.requestParams] })"
             },
             {
               "kind": "field",
@@ -9154,6 +9189,78 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "_sharableKnownKeys",
+              "type": {
+                "text": "array"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "['search', 'filter', 'sortColumn', 'sortDirection', 'page', 'perPage']"
+            },
+            {
+              "kind": "method",
+              "name": "_captureSharableDefaults",
+              "privacy": "private",
+              "description": "Snapshot the initial (attribute-provided) value of every managed key, so the URL writer can\nomit any key still holding its default - e.g. the table's default sort/direction, page 1 or the\ndefault page size. Captured once, before the URL is read, so URL values are treated as deltas."
+            },
+            {
+              "kind": "method",
+              "name": "_readSharableState",
+              "privacy": "private",
+              "description": "Seed the table state from the URL query string (raw param names) when `sharable` is set. Runs\nonce, before the first render, so the initial data request already carries the shared state."
+            },
+            {
+              "kind": "method",
+              "name": "_populateSharableFields",
+              "privacy": "private",
+              "description": "Push the shared state back into the actual DOM fields so the UI reflects it. The search value\nlives on the slotted <zn-data-table-search>, the filter on <zn-data-table-filter>, and extra\nfield params on the search/inputs fields (all light-DOM descendants)."
+            },
+            {
+              "kind": "method",
+              "name": "_hasFieldNamed",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setSharableFieldValue",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateSharableUrl",
+              "privacy": "private",
+              "description": "Mirror the current table state to the URL query string (raw param names) via replaceState.\nA key is written only when its value differs from the captured default, so the default sort,\npage 1, the default page size and empty search/filter/fields never clutter the URL. Unrelated\nparams (e.g. utm_*) are preserved."
+            },
             {
               "kind": "method",
               "name": "publishFilterSuggestions",
@@ -9951,6 +10058,15 @@
               "default": "false",
               "fieldName": "noInitialLoad"
             },
+            {
+              "name": "sharable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, the table's non-default state (search, filter, sort, page, per-page and field values)\nis mirrored to the URL query string and restored from it on load, so the view is shareable.",
+              "fieldName": "sharable"
+            },
             {
               "name": "group-by",
               "type": {
@@ -10448,6 +10564,12 @@
               "name": "emitChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "hydrateFromValue",
+              "privacy": "private",
+              "description": "Rebuild the active filters from an encoded `value` (the inverse of emitChange), so a filter\nrestored from a shareable URL shows its pills. Runs only while there are no active filters and\nneeds the filters schema present to resolve each key. Sets `_active` directly so it neither\nre-emits nor overwrites the value it just read."
+            },
             {
               "kind": "method",
               "name": "handleDateInput",
@@ -10919,7 +11041,7 @@
                 "text": "number"
               },
               "default": "350",
-              "description": "The delay in milliseconds before triggering a search (default: 500).",
+              "description": "The delay in milliseconds before triggering a search (default: 350).",
               "attribute": "debounce-delay"
             },
             {
@@ -11056,7 +11178,7 @@
                 "text": "number"
               },
               "default": "350",
-              "description": "The delay in milliseconds before triggering a search (default: 500).",
+              "description": "The delay in milliseconds before triggering a search (default: 350).",
               "fieldName": "debounceDelay"
             }
           ],
@@ -11068,7 +11190,7 @@
           "tagNameWithoutPrefix": "data-table-search",
           "tagName": "zn-data-table-search",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A search component for data tables.\n * @documentation https://zinc.style/components/data-table-search\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-input\n * @dependency zn-tooltip\n *\n * @event zn-search-change - Emitted when the search value changes (debounced).\n *\n * @slot - The default slot for additional form inputs.\n *\n * @csspart base - The component's base wrapper.\n *\n * @property {string} name - The name of the search input field (default: \"search\").\n * @property {string} value - The current search value.\n * @property {string} placeholder - The placeholder text for the search input (default: \"Search...\").\n * @property {string} helpText - Help text, shown from an information icon inside the search input.\n * @property {string} searchUri - Optional URI to use for search operations.\n * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).\n */",
+          "jsDoc": "/**\n * @summary A search component for data tables.\n * @documentation https://zinc.style/components/data-table-search\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-input\n * @dependency zn-tooltip\n *\n * @event zn-search-change - Emitted when the search value changes (debounced).\n *\n * @slot - The default slot for additional form inputs.\n *\n * @csspart base - The component's base wrapper.\n *\n * @property {string} name - The name of the search input field (default: \"search\").\n * @property {string} value - The current search value.\n * @property {string} placeholder - The placeholder text for the search input (default: \"Search...\").\n * @property {string} helpText - Help text, shown from an information icon inside the search input.\n * @property {string} searchUri - Optional URI to use for search operations.\n * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 350).\n */",
           "documentation": "https://zinc.style/components/data-table-search",
           "status": "experimental",
           "since": "1.0",
@@ -52826,7 +52948,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.132",
+    "version": "1.1.134",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -13,6 +13,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-alert",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -53,17 +64,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -1223,6 +1223,11 @@
         { "name": "filters", "values": [{ "name": "[]" }] },
         { "name": "method", "values": [{ "name": "GET" }, { "name": "POST" }] },
         { "name": "no-initial-load", "values": [] },
+        {
+          "name": "sharable",
+          "description": "When set, the table's non-default state (search, filter, sort, page, per-page and field values)\nis mirrored to the URL query string and restored from it on load, so the view is shareable.",
+          "values": []
+        },
         { "name": "group-by", "values": [] },
         { "name": "groups", "values": [] },
         { "name": "per-page-size", "values": [] }
@@ -1285,7 +1290,7 @@
         },
         {
           "name": "debounce-delay",
-          "description": "The delay in milliseconds before triggering a search (default: 500).",
+          "description": "The delay in milliseconds before triggering a search (default: 350).",
           "values": []
         }
       ],

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.132",
+  "version": "1.1.134",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -83,28 +105,6 @@
             ]
           }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -2746,6 +2746,11 @@
               "name": "no-initial-load",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "sharable",
+              "description": "When set, the table's non-default state (search, filter, sort, page, per-page and field values)\nis mirrored to the URL query string and restored from it on load, so the view is shareable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "group-by",
               "value": { "type": "string", "default": "''" }
@@ -2834,6 +2839,11 @@
               { "name": "filters", "type": "[]" },
               { "name": "method", "type": "'GET' | 'POST'" },
               { "name": "noInitialLoad", "type": "boolean" },
+              {
+                "name": "sharable",
+                "description": "When set, the table's non-default state (search, filter, sort, page, per-page and field values)\nis mirrored to the URL query string and restored from it on load, so the view is shareable.",
+                "type": "boolean"
+              },
               { "name": "groupBy", "type": "string" },
               { "name": "groups", "type": "string" },
               { "name": "itemsPerPage", "type": "number" },
@@ -2935,7 +2945,7 @@
             },
             {
               "name": "debounce-delay",
-              "description": "The delay in milliseconds before triggering a search (default: 500).",
+              "description": "The delay in milliseconds before triggering a search (default: 350).",
               "value": { "type": "number", "default": "350" }
             }
           ],
@@ -2980,7 +2990,7 @@
               },
               {
                 "name": "debounceDelay",
-                "description": "The delay in milliseconds before triggering a search (default: 500).",
+                "description": "The delay in milliseconds before triggering a search (default: 350).",
                 "type": "number"
               },
               { "name": "validationMessage", "type": "string" },

package/dist/zn.d.ts

@@ -3460,6 +3460,13 @@ declare module "components/data-table-filter/data-table-filter.component" {
         private toggleOption;
         private selectedValues;
         private emitChange;
+        /**
+         * Rebuild the active filters from an encoded `value` (the inverse of emitChange), so a filter
+         * restored from a shareable URL shows its pills. Runs only while there are no active filters and
+         * needs the filters schema present to resolve each key. Sets `_active` directly so it neither
+         * re-emits nor overwrites the value it just read.
+         */
+        private hydrateFromValue;
         private handleDateInput;
         private serializeDate;
         private handleTextInput;
@@ -3679,7 +3686,7 @@ declare module "components/data-table-search/data-table-search.component" {
      * @property {string} placeholder - The placeholder text for the search input (default: "Search...").
      * @property {string} helpText - Help text, shown from an information icon inside the search input.
      * @property {string} searchUri - Optional URI to use for search operations.
-     * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).
+     * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 350).
      */
     export default class ZnDataTableSearch extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
@@ -4139,6 +4146,11 @@ declare module "components/data-table/data-table.component" {
         filters: [];
         method: 'GET' | 'POST';
         noInitialLoad: boolean;
+        /**
+         * When set, the table's non-default state (search, filter, sort, page, per-page and field values)
+         *is mirrored to the URL query string and restored from it on load, so the view is shareable.
+         */
+        sharable: boolean;
         groupBy: string;
         groups: string;
         itemsPerPage: number;
@@ -4147,6 +4159,9 @@ declare module "components/data-table/data-table.component" {
         private _hasLoadedData;
         private _lastLoadHadRows;
         private _lastTableContent;
+        private _sharableInitialised;
+        private _sharableDefaults;
+        private readonly _urlManagedKeys;
         private readonly resizeObserver;
         private page;
         private totalPages;
@@ -4173,8 +4188,36 @@ declare module "components/data-table/data-table.component" {
         private isColumnVisible;
         private applyColumnDefaults;
         private toggleColumn;
+        private static readonly _sharableKnownKeys;
+        /**
+         * Snapshot the initial (attribute-provided) value of every managed key, so the URL writer can
+         * omit any key still holding its default - e.g. the table's default sort/direction, page 1 or the
+         * default page size. Captured once, before the URL is read, so URL values are treated as deltas.
+         */
+        private _captureSharableDefaults;
+        /**
+         * Seed the table state from the URL query string (raw param names) when `sharable` is set. Runs
+         * once, before the first render, so the initial data request already carries the shared state.
+         */
+        private _readSharableState;
+        /**
+         * Push the shared state back into the actual DOM fields so the UI reflects it. The search value
+         * lives on the slotted <zn-data-table-search>, the filter on <zn-data-table-filter>, and extra
+         * field params on the search/inputs fields (all light-DOM descendants).
+         */
+        private _populateSharableFields;
+        private _hasFieldNamed;
+        private _setSharableFieldValue;
+        /**
+         * Mirror the current table state to the URL query string (raw param names) via replaceState.
+         * A key is written only when its value differs from the captured default, so the default sort,
+         * page 1, the default page size and empty search/filter/fields never clutter the URL. Unrelated
+         * params (e.g. utm_*) are preserved.
+         */
+        private _updateSharableUrl;
         render(): TemplateResult<1>;
         connectedCallback(): void;
+        protected firstUpdated(): void;
         protected updated(changed: PropertyValues): void;
         private publishFilterSuggestions;
         private getTemplate;