@kubex/zinc 1.1.21 → 1.1.23

package/dist/custom-elements.json

@@ -47,79 +47,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/alert/alert.js",
@@ -296,6 +223,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/animated-button/animated-button.js",
@@ -1283,7 +1283,7 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | 'white' | (string & Record<never, never>)"
+                "text": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | (string & Record<never, never>)"
               },
               "default": "'default'",
               "attribute": "color"
@@ -1764,7 +1764,7 @@
             {
               "name": "color",
               "type": {
-                "text": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | 'white' | (string & Record<never, never>)"
+                "text": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | (string & Record<never, never>)"
               },
               "default": "'default'",
               "fieldName": "color"
@@ -2584,6 +2584,14 @@
             }
           ],
           "slots": [
+            {
+              "description": "Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).",
+              "name": "title"
+            },
+            {
+              "description": "Replaces the secondary line. Falls back to the `subtitle` attribute.",
+              "name": "subtitle"
+            },
             {
               "description": "Replaces the leading icon in the active state.",
               "name": "leading"
@@ -3077,7 +3085,7 @@
           "tagNameWithoutPrefix": "channel-tile",
           "tagName": "zn-channel-tile",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A channel/queue slot tile with two faces: an active (occupied) state\n * showing an in-progress item, and an available (empty) state advertising\n * capacity — optionally reserving an incoming item with an auto-accept countdown.\n * @documentation https://zinc.style/components/channel-tile\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-icon\n *\n * @event zn-accept - Emitted when an available tile is accepted (click or auto-accept).\n *  Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n * @event zn-reject - Emitted when the reject control is pressed.\n *\n * @slot leading - Replaces the leading icon in the active state.\n * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.\n * @slot footer - Trailing content (e.g. status badges) in the active state.\n *\n * @csspart base - The component's base wrapper.\n * @csspart progress - The progress indicator (incoming countdown overlay or active progress bar).\n *\n * @cssproperty --channel-tile-color - Resolved accent color (set from the `color` property).\n */",
+          "jsDoc": "/**\n * @summary A channel/queue slot tile with two faces: an active (occupied) state\n * showing an in-progress item, and an available (empty) state advertising\n * capacity — optionally reserving an incoming item with an auto-accept countdown.\n * @documentation https://zinc.style/components/channel-tile\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-icon\n *\n * @event zn-accept - Emitted when an available tile is accepted (click or auto-accept).\n *  Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n * @event zn-reject - Emitted when the reject control is pressed.\n *\n * @slot title - Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).\n * @slot subtitle - Replaces the secondary line. Falls back to the `subtitle` attribute.\n * @slot leading - Replaces the leading icon in the active state.\n * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.\n * @slot footer - Trailing content (e.g. status badges) in the active state.\n *\n * @csspart base - The component's base wrapper.\n * @csspart progress - The progress indicator (incoming countdown overlay or active progress bar).\n *\n * @cssproperty --channel-tile-color - Resolved accent color (set from the `color` property).\n */",
           "documentation": "https://zinc.style/components/channel-tile",
           "status": "experimental",
           "since": "1.0",
@@ -5328,6 +5336,16 @@
           "kind": "class",
           "description": "",
           "name": "ZnCollapsible",
+          "cssParts": [
+            {
+              "description": "The header row (toggle).",
+              "name": "header"
+            },
+            {
+              "description": "The caption text.",
+              "name": "caption"
+            }
+          ],
           "slots": [
             {
               "description": "Clicking will toggle the show state of the data",
@@ -5461,7 +5479,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'header', 'caption', 'label')"
+              "default": "new HasSlotController(this, '[default]', 'header', 'caption', 'label', 'description')"
             },
             {
               "kind": "field",
@@ -5589,7 +5607,7 @@
           "tagNameWithoutPrefix": "collapsible",
           "tagName": "zn-collapsible",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Toggles between showing and hiding content when clicked\n * @documentation https://zinc.style/components/collapsible\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon - The icon element\n *\n * @slot header - Clicking will toggle the show state of the data\n *\n */",
+          "jsDoc": "/**\n * @summary Toggles between showing and hiding content when clicked\n * @documentation https://zinc.style/components/collapsible\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon - The icon element\n *\n * @slot header - Clicking will toggle the show state of the data\n *\n * @csspart header - The header row (toggle).\n * @csspart caption - The caption text.\n */",
           "documentation": "https://zinc.style/components/collapsible",
           "status": "experimental",
           "since": "1.0",
@@ -37169,7 +37187,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.21",
+    "version": "1.1.23",
     "author": "",
     "license": "MIT"
   }

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

@@ -13,17 +13,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-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.",
@@ -63,6 +52,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-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",
@@ -168,7 +168,6 @@
             { "name": "warning" },
             { "name": "transparent" },
             { "name": "star" },
-            { "name": "white" },
             { "name": "(string & Record<never, never>)" }
           ]
         },
@@ -327,7 +326,7 @@
     },
     {
       "name": "zn-channel-tile",
-      "description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
+      "description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **title** - Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).\n- **subtitle** - Replaces the secondary line. Falls back to the `subtitle` attribute.\n- **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
       "attributes": [
         {
           "name": "available",
@@ -757,7 +756,7 @@
     },
     {
       "name": "zn-collapsible",
-      "description": "Toggles between showing and hiding content when clicked\n---\n\n\n### **Slots:**\n - **header** - Clicking will toggle the show state of the data",
+      "description": "Toggles between showing and hiding content when clicked\n---\n\n\n### **Slots:**\n - **header** - Clicking will toggle the show state of the data\n\n### **CSS Parts:**\n - **header** - The header row (toggle).\n- **caption** - The caption text.",
       "attributes": [
         { "name": "caption", "values": [] },
         { "name": "description", "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.21",
+  "version": "1.1.23",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "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.",
@@ -100,6 +78,28 @@
             ]
           }
         },
+        {
+          "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",
@@ -291,7 +291,7 @@
             {
               "name": "color",
               "value": {
-                "type": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | 'white' | (string & Record<never, never>)",
+                "type": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | (string & Record<never, never>)",
                 "default": "'default'"
               }
             },
@@ -462,7 +462,7 @@
               { "name": "countdownContainer", "type": "HTMLElement[]" },
               {
                 "name": "color",
-                "type": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | 'white' | (string & Record<never, never>)"
+                "type": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | (string & Record<never, never>)"
               },
               { "name": "hoverColor", "type": "string" },
               { "name": "text", "type": "boolean" },
@@ -635,7 +635,7 @@
         },
         {
           "name": "zn-channel-tile",
-          "description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
+          "description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **title** - Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).\n- **subtitle** - Replaces the secondary line. Falls back to the `subtitle` attribute.\n- **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
           "doc-url": "",
           "attributes": [
             {
@@ -735,6 +735,14 @@
             }
           ],
           "slots": [
+            {
+              "name": "title",
+              "description": "Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state)."
+            },
+            {
+              "name": "subtitle",
+              "description": "Replaces the secondary line. Falls back to the `subtitle` attribute."
+            },
             {
               "name": "leading",
               "description": "Replaces the leading icon in the active state."
@@ -1640,7 +1648,7 @@
         },
         {
           "name": "zn-collapsible",
-          "description": "Toggles between showing and hiding content when clicked\n---\n\n\n### **Slots:**\n - **header** - Clicking will toggle the show state of the data",
+          "description": "Toggles between showing and hiding content when clicked\n---\n\n\n### **Slots:**\n - **header** - Clicking will toggle the show state of the data\n\n### **CSS Parts:**\n - **header** - The header row (toggle).\n- **caption** - The caption text.",
           "doc-url": "",
           "attributes": [
             {

package/dist/zn.d.ts

@@ -1169,7 +1169,7 @@ declare module "components/button/button.component" {
         private _loadingState;
         button: HTMLButtonElement;
         countdownContainer: HTMLElement[];
-        color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent' | 'star' | 'white' | (string & Record<never, never>);
+        color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent' | 'star' | (string & Record<never, never>);
         hoverColor: string;
         text: boolean;
         outline: boolean;
@@ -1377,6 +1377,8 @@ declare module "components/collapsible/collapsible.component" {
      *
      * @slot header - Clicking will toggle the show state of the data
      *
+     * @csspart header - The header row (toggle).
+     * @csspart caption - The caption text.
      */
     export default class ZnCollapsible extends ZincElement {
         static styles: CSSResultGroup;
@@ -3691,6 +3693,8 @@ declare module "components/channel-tile/channel-tile.component" {
      *  Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.
      * @event zn-reject - Emitted when the reject control is pressed.
      *
+     * @slot title - Replaces the primary line. Falls back to the `title` attribute (or "Available" when unset in the available state).
+     * @slot subtitle - Replaces the secondary line. Falls back to the `subtitle` attribute.
      * @slot leading - Replaces the leading icon in the active state.
      * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.
      * @slot footer - Trailing content (e.g. status badges) in the active state.

package/dist/zn.min.js

@@ -112,13 +112,13 @@ function print() { __p += __j.call(arguments, '') }
              aria-label="tooltip">
           <slot name="content">${this.content}</slot>
         </div>
-      </zn-popup>`}};ua.styles=Q(zde),_([ce("slot:not([name])")],ua.prototype,"defaultSlot",2),_([ce(".tooltip__body")],ua.prototype,"body",2),_([ce("zn-popup")],ua.prototype,"popup",2),_([w()],ua.prototype,"content",2),_([w()],ua.prototype,"placement",2),_([w({type:Boolean,reflect:!0})],ua.prototype,"disabled",2),_([w({type:Number})],ua.prototype,"distance",2),_([w({type:Boolean,reflect:!0})],ua.prototype,"open",2),_([w({type:Number})],ua.prototype,"skidding",2),_([w()],ua.prototype,"trigger",2),_([w({type:Boolean})],ua.prototype,"hoist",2),_([He("open",{waitUntilFirstUpdate:!0})],ua.prototype,"handleOpenChange",1),_([He(["content","distance","hoist","placement","skidding"])],ua.prototype,"handleOptionsChange",1),_([He("disabled")],ua.prototype,"handleDisabledChange",1);var bs=ua;ua.define("zn-tooltip");var Mde=J`:host,html,body{color:rgba(var(--zn-text),var(--zn-text-opacity));font-family:var(--zn-font-family-sans);font-feature-settings:normal;font-variation-settings:normal;font-size:var(--zn-text-paragraph-font-size);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tab-size:4;-o-tab-size:4;tab-size:4;margin:0}html,body{background-color:rgba(var(--zn-body),var(--zn-bg-opacity));container-type:size;min-height:100%;height:100%}.inline-container{container-type:inline-size}.app-container{container-type:inline-size;display:flex;flex:1;flex-direction:column;position:relative;max-height:100%;height:100%;width:100%;max-width:100%}.inline-app-container,.app-container.inline-app-container,[inline-container] .app-container{display:block;height:auto;flex:unset}hr{height:0;border:none;border-top:1px solid rgb(var(--zn-border-color))}code,kbd,samp,pre,.mono{font-family:var(--zn-font-family-mono);font-size:1em}small{font-size:80%}.hidden{display:none !important}.visibility-hidden{visibility:hidden}p{font-size:var(--zn-text-paragraph-font-size);line-height:var(--zn-text-paragraph-line-height);font-weight:var(--zn-text-paragraph-font-weight)}h1,h2,h3,h4,h5,h6{color:rgb(var(--zn-text-heading))}h1{font-size:var(--zn-text-h1-font-size);line-height:var(--zn-text-h1-line-height);font-weight:var(--zn-text-h1-font-weight)}h2{font-size:var(--zn-text-h2-font-size);line-height:var(--zn-text-h2-line-height);font-weight:var(--zn-text-h2-font-weight)}h3,h4,h5,h6{font-size:var(--zn-text-h3-font-size);line-height:var(--zn-text-h3-line-height);font-weight:var(--zn-text-h3-font-weight)}kbd{font-family:monospace;background-color:#eee;color:#333;border:1px solid rgb(var(--zn-border-color));border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5) inset;display:inline-block;font-size:13px;line-height:20px;padding:1px 6px;white-space:nowrap;min-width:15px;color:rgba(0,0,0,0.5)}[t=dark] kbd{background-color:rgb(25,25,25);box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(110,110,110,0.5) inset;color:#eee}[tab]{cursor:pointer}.zn-link:hover{--zn-text:rgb(var(--zn-primary));--icon-color:rgb(var(--zn-primary));--zn-text-heading:rgb(var(--zn-primary));--property-color:rgb(var(--zn-primary));opacity:1}.grow{flex-grow:1}.no-grow{flex-grow:0}.shrink{flex-shrink:1}.no-shrink{flex-shrink:0}.block{display:block}.flex{display:flex}.flex-wrap{display:flex;flex-wrap:wrap}.flex-col{display:flex;flex-direction:column}.flex-mid{display:flex;align-items:center}.flex-jc{justify-content:center}.flex-between{display:flex;justify-content:space-between}.flex-end{display:flex;justify-content:flex-end}.flex-bottom{display:flex;align-items:flex-end}.equal{flex-basis:50%}.m-auto{margin:auto}.mt-auto{margin-top:auto}.zn-pad{padding:var(--zn-base-gap,0)}.zn-pad-y,.zn-py{padding-top:16px;padding-bottom:16px}.zn-pad-x,.zn-px{padding-left:16px;padding-right:16px}.zn-pr{padding-right:16px}.zn-pl{padding-left:16px}.zn-pt{padding-top:16px}.zn-pb{padding-bottom:16px}.zn-margin{margin:16px}.zn-mx{margin-left:16px;margin-right:16px}.zn-my{margin-top:16px;margin-bottom:16px}.zn-mt{margin-top:16px}.zn-mb{margin-bottom:16px}.zn-ml{margin-left:16px}.zn-mr{margin-right:16px}.zn-mxa{margin-left:auto;margin-right:auto}.zn-mya{margin-top:auto;margin-bottom:auto}.zn-mta{margin-top:auto}.zn-mba{margin-bottom:auto}.zn-mla{margin-left:auto}.zn-mra{margin-right:auto}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}@keyframes act-vanish{from{transform:scale(1);opacity:1;max-height:100%}to{transform:scale(0.8);opacity:0;max-height:0}}.act-vanish{animation:ease-in act-vanish 600ms forwards;transform-origin:top center;background-color:rgba(var(--zn-color-error),0.3);display:block;overflow:hidden}.h-full{height:100%}.w-full{width:100%}.zn-panel-bg{--zn-page-surface-background:var(--zn-panel);background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.zn-panel{background-color:rgba(var(--zn-panel),var(--zn-panel-opacity));border:1px solid rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);--zn-page-surface-background:var(--zn-panel)}.zn-container{display:flex;flex-direction:column;flex-grow:1;max-height:100%;overflow:hidden}.tar{text-align:right}.tal{text-align:left}.tac{text-align:center}.zn-empty-hide:empty{display:none}.ml-auto{margin-left:auto}.zn-b-dash{border-style:dashed}.zn-b-dotted{border-style:dotted}.zn-border{border-style:solid;border-width:1px !important}.zn-bt{border-top-style:solid;border-top-width:1px !important}.zn-bb{border-bottom-style:solid;border-bottom-width:1px !important}.zn-bl{border-left-style:solid;border-left-width:1px !important}.zn-br{border-right-style:solid;border-right-width:1px !important}.unifi-action{display:flex;gap:10px;padding:10px 0;align-items:center}.zn-panel-bar{border-bottom:1px solid rgb(var(--zn-border-color));background-color:rgba(var(--zn-panel),0.9);padding:var(--zn-base-px);gap:var(--zn-base-px);display:flex;flex-wrap:wrap;align-items:center;z-index:1}.zn-panel-bar--pill{border-radius:var(--zn-border-radius);border:1px solid rgb(var(--zn-border-color))}.zn-panel-bar--large{padding:var(--zn-base-px) calc(var(--zn-base-gap) + var(--zn-gutter));gap:var(--zn-base-px);height:50px}.scroll-container{overflow:auto;flex-grow:1;position:relative;display:flex;flex-direction:column;max-height:100%}.zn-divide{display:flex;flex-direction:column}.zn-divide>*:not(:first-child){border-top:1px solid rgb(var(--zn-border-color))}.zn-divide>div:empty+div:not(:first-child){border-top:0}.zn-divide-y{display:flex;flex-direction:row}.zn-divide-y>*:not(:first-child):not(:empty){border-left:1px solid rgb(var(--zn-border-color))}.zn-c-pad{--zn-pad-spacing:var(--zn-spacing-large)}.zn-c-pad-x>*{padding-left:var(--zn-pad-spacing);padding-right:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:first-child){padding-top:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:last-child){padding-bottom:var(--zn-pad-spacing)}.zn-nav.zn-transparent{background:transparent}.zn-nav{background:rgba(var(--zn-panel),var(--zn-panel-opacity));border-right:1px solid rgb(var(--zn-border-color));max-width:320px;height:100%;padding-top:5px}.zn-nav ul{list-style:none;padding-bottom:10px;margin:0;display:flex;flex-direction:column;position:relative}.zn-nav ul:after{content:"";height:1px;left:18px;right:18px;bottom:0;position:absolute;background:rgb(var(--zn-border-color))}.zn-nav ul li a{text-decoration:none;color:rgb(var(--zn-text));display:block;font-weight:500;cursor:pointer}.zn-nav ul li a:hover,.zn-nav ul li a.zn-tb-active{background:rgb(var(--zn-body))}.zn-nav ul li a.zn-tb-active{color:rgb(var(--zn-purple-text))}.zn-nav ul:last-child:after{display:none}.zn-nav strong,.zn-nav li a{padding:10px 20px}.zn-nav strong{display:block;margin-top:10px;font-size:13px;letter-spacing:0.93px;color:rgb(var(--zn-text-heading));font-weight:600;padding-bottom:5px;text-transform:uppercase}@keyframes shimmer-text-sweep{0%{background-position:100% center}100%{background-position:0% center}}@media (prefers-reduced-motion:no-preference){.shimmer-text{--shimmer-base:rgb(var(--zn-text));--shimmer-highlight:rgb(var(--zn-text-heading));--shimmer-core:0.5ch;--shimmer-spread:1.5ch;--shimmer-duration:1.5s;display:inline-block;width:-moz-fit-content;width:fit-content;max-width:100%;background-image:linear-gradient(90deg,transparent calc(50% - var(--shimmer-spread)),var(--shimmer-highlight) calc(50% - var(--shimmer-core)),var(--shimmer-highlight) calc(50% + var(--shimmer-core)),transparent calc(50% + var(--shimmer-spread))),linear-gradient(var(--shimmer-base),var(--shimmer-base));background-size:250% 100%,auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent !important;color:transparent !important;animation:var(--shimmer-duration) linear infinite shimmer-text-sweep}.shimmer-text.zn-error{--shimmer-base:rgb(var(--zn-color-error));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-error)) 55%,white)}.shimmer-text.zn-success{--shimmer-base:rgb(var(--zn-color-success));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-success)) 55%,white)}.shimmer-text.zn-info{--shimmer-base:rgb(var(--zn-color-info));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-info)) 55%,white)}.shimmer-text.zn-warning{--shimmer-base:rgb(var(--zn-color-warning));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-warning)) 55%,white)}.shimmer-text.zn-primary{--shimmer-base:rgb(var(--zn-primary));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-primary)) 55%,white)}.shimmer-text.zn-accent{--shimmer-base:rgb(var(--zn-accent));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-accent)) 55%,white)}}@media (prefers-reduced-motion:reduce){.shimmer-text{color:rgb(var(--zn-text))}.shimmer-text.zn-error{color:rgb(var(--zn-color-error)) !important}.shimmer-text.zn-success{color:rgb(var(--zn-color-success)) !important}.shimmer-text.zn-info{color:rgb(var(--zn-color-info)) !important}.shimmer-text.zn-warning{color:rgb(var(--zn-color-warning)) !important}.shimmer-text.zn-primary{color:rgb(var(--zn-primary)) !important}.shimmer-text.zn-accent{color:rgb(var(--zn-accent)) !important}}*,*::before,*::after{box-sizing:border-box}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}strong{font-weight:bolder}b{font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:inline-block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}button,.zn-button{border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}button:hover:not([disabled]),.zn-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{display:block;width:100%;border-radius:5px;border-style:solid;border-width:1px !important;border-color:rgb(var(--zn-border-color));background-color:rgb(var(--zn-input-bg));outline:none}input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type=file]:focus,input[list]:focus,textarea:focus,select:focus{border-color:rgb(var(--zn-primary));box-shadow:0 0 0 3px rgba(var(--zn-primary),0.3)}input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=week]::-moz-placeholder, input[type=file]::-moz-placeholder, input[list]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}input[type=date]::placeholder,input[type=datetime-local]::placeholder,input[type=email]::placeholder,input[type=month]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,input[type=time]::placeholder,input[type=url]::placeholder,input[type=week]::placeholder,input[type=file]::placeholder,input[list]::placeholder,textarea::placeholder,select::placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}@media (min-width:360px){input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{padding:8px}}label{font-weight:600;font-size:rgb(var(--zn-font-size-medium));line-height:var(--zn-spacing-medium);color:rgb(var(--zn-text-heading));display:block;margin-bottom:4px;margin-top:16px}input[type=checkbox],input[type=radio]{border-radius:5px}input[type=radio]{border-radius:50%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:10px;background-color:rgb(var(--zn-border-color));height:8px;accent-color:rgb(var(--zn-primary));width:100%;max-width:768px}fieldset{border-color:rgba(var(--zn-primary),20%);border-width:2px;padding:0 16px 16px}select option{padding:4px}select>option:checked{background-color:rgba(var(--zn-primary),20%);border-radius:5px}fieldset>legend{padding:4px}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}input[type=button]:hover:not([disabled]),input[type=submit]:hover:not([disabled]),button[type=submit]:not(.button):hover:not([disabled]),button[type=button]:not(.button):hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){width:auto}div+button{margin-top:16px}input[type=file]::-webkit-file-upload-button{border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}input[type=file]::-webkit-file-upload-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=file]::-webkit-file-upload-button{margin-right:8px}input::-webkit-calendar-picker-indicator{cursor:pointer;padding:8px}input[list]::-webkit-calendar-picker-indicator{padding:8px 4px}.input--with-icon{position:relative}.input--with-icon zn-icon{padding:14px;position:absolute;top:50%;pointer-events:none;transform:translateY(-50%);left:8px;background-color:rgb(var(--zn-primary));color:rgb(var(--zn-text));border-radius:50%}.input--with-icon input{padding-left:40px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:rgb(var(--zn-text));-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;box-shadow:inset 0 0 20px 20px rgba(35,35,35,0.1607843137)}select{height:43px}.no-border{border:none !important}table:not(.remarkd-table){border-collapse:separate !important;border-spacing:0;width:100%;max-width:100%;table-layout:auto;text-align:left;font-family:var(--zn-font-sans);font-size:var(--zn-text-table-content-font-size);font-weight:var(--zn-text-table-content-font-weight);line-height:var(--zn-text-table-content-line-height);color:var(--zn-text-table-content-color);text-transform:var(--zn-text-table-content-transform)}table:not(.remarkd-table) thead{font-weight:var(--zn-font-weight-medium)}table:not(.remarkd-table) thead tr th{background-color:rgb(var(--zn-table-header-background-color))}table:not(.remarkd-table) tbody a{cursor:pointer;color:rgb(var(--zn-primary))}table:not(.remarkd-table) tbody tr td{border-top:1px solid rgb(var(--zn-border-color)) !important}table:not(.remarkd-table) tbody tr:first-of-type td{border-top:0 !important}table:not(.remarkd-table) th,table:not(.remarkd-table) td{padding:var(--zn-spacing-small) var(--zn-spacing-medium);min-width:90px;white-space:nowrap}table:not(.remarkd-table) td>span{white-space:normal}table:not(.remarkd-table) th{font-family:var(--zn-font-sans);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);color:var(--zn-text-button-label-color);text-transform:var(--zn-text-button-label-transform);text-transform:capitalize;border-bottom:1px solid rgb(var(--zn-border-color))}.zn-table-fixed{table-layout:fixed}.opacity-100{opacity:1}.opacity-90{opacity:0.9}.opacity-80{opacity:0.8}.opacity-60{opacity:0.6}.opacity-50{opacity:0.5}.opacity-40{opacity:0.4}.opacity-10{opacity:0.1}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host button,:host a{width:100%}.button{border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}.button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}.button{--btn-color:var(--zn-primary);--notification-color:rgb(var(--zn-color-error));border-width:var(--zn-button-border-width,1px);border-top-width:var(--zn-button-border-top-width,var(--zn-button-border-width,1px));border-right-width:var(--zn-button-border-right-width,var(--zn-button-border-width,1px));border-bottom-width:var(--zn-button-border-bottom-width,var(--zn-button-border-width,1px));border-left-width:var(--zn-button-border-left-width,var(--zn-button-border-width,1px));border-color:var(--zn-button-border-color,transparent);display:inline-flex;position:relative}.button.button--info{--btn-color:var(--zn-color-info)}.button.button--error{--btn-color:var(--zn-color-error)}.button.button--warning{--btn-color:var(--zn-color-warning)}.button.button--success{--btn-color:var(--zn-color-success)}.button__label--hidden{visibility:hidden}.button.button--muted-notification{--notification-color:rgb(var(--zn-color-info))}.button--has-notification{position:relative;overflow:visible}.button--has-notification::after{content:attr(data-notification);position:absolute;display:flex;justify-content:center;align-items:center;top:-4px;left:auto;inset-inline-end:-4px;box-sizing:border-box;min-width:13px;height:13px;padding:0 3px;border-radius:999px;font-size:var(--zn-text-notification-font-size);font-weight:var(--zn-text-notification-font-weight);line-height:var(--zn-text-notification-line-height);color:var(--zn-text-notification-color);background-color:var(--notification-color)}.button--has-notification.button--notification-dot::after{content:"";min-width:0;width:8px;height:8px;padding:0;border-radius:50%}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:2px solid rgb(var(--btn-color));outline-offset:2px}[disabled]{cursor:not-allowed;opacity:0.5}[disabled] *{pointer-events:none}.button--standard.button--secondary{background-color:var(--zn-color-neutral-50);border-color:var(--zn-button-border-color,var(--zn-color-neutral-50));color:rgb(var(--zn-primary))}.button--standard.button--secondary:hover:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard.button--secondary:active:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard{background-color:rgba(var(--btn-color),0.85);border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:rgba(255,255,255,0.9)}.button--standard:hover:not([disabled]){background-color:rgba(var(--btn-color),0.8)}.button--standard:active:not([disabled]){background-color:rgba(var(--btn-color))}.button--outline{background:none;border-width:var(--zn-button-border-width,1px);border-top-width:var(--zn-button-border-top-width,var(--zn-button-border-width,1px));border-right-width:var(--zn-button-border-right-width,var(--zn-button-border-width,1px));border-bottom-width:var(--zn-button-border-bottom-width,var(--zn-button-border-width,1px));border-left-width:var(--zn-button-border-left-width,var(--zn-button-border-width,1px));border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:rgb(var(--btn-color))}.button--outline:hover:not([disabled]),.button--outline:active:not([disabled]){background-color:rgb(var(--btn-color));color:white}.button--outline.button--secondary{border-color:var(--zn-button-border-color,var(--zn-color-neutral-100))}.button--outline.button--secondary:hover:not([disabled]),.button--outline.button--secondary:active:not([disabled]){background-color:var(--zn-color-neutral-100);color:rgb(var(--btn-color))}.button--text{background:none;color:rgb(var(--btn-color))}.button--text:hover:not([disabled]),.button--text:active:not([disabled]){background-color:rgba(var(--btn-color),0.1)}.button--text.button--secondary{font-weight:normal}.button--grow{width:100%}.button--with-icon.button--with-content:not(.button--icon-button).button--icon-left zn-icon{margin-right:var(--zn-base-px)}.button--with-icon.button--with-content:not(.button--icon-button).button--icon-right zn-icon{margin-left:var(--zn-base-px)}.button--square{border-radius:0}.button--transparent{background-color:transparent;border-color:var(--zn-button-border-color,transparent) !important;color:inherit}.button--transparent:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.1)}.button--transparent:active:not([disabled]){background-color:rgba(var(--zn-primary),0.2)}.button--star{--btn-color:var(--zn-orange);background-color:rgb(var(--btn-color));border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:white;opacity:1 !important}.button--star:hover:not([disabled]){background-color:rgb(var(--btn-color))}.button--star:active{background-color:rgb(var(--btn-color))}.button--star.button--outline{background-color:transparent;border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:rgb(var(--btn-color))}.button--star.button--outline:hover:not([disabled]),.button--star.button--outline:active:not([disabled]){background-color:rgba(var(--btn-color));color:white}.button.button--white{background:rgb(var(--zn-panel));border-color:var(--zn-button-border-color,rgb(var(--zn-border-color)));color:rgb(var(--zn-text))}.button.button--white:hover:not([disabled]),.button.button--white:active:not([disabled]){background:rgba(var(--zn-color-tab),0.5)}.button.button--icon-button{--icon-button-color:rgb(var(--zn-text));--icon-button-hover-color:rgb(var(--zn-primary));width:40px;min-width:40px;height:36px;min-height:36px;max-height:36px;padding:6px;margin:0;background:rgb(var(--zn-panel));border-color:var(--zn-button-border-color,rgb(var(--zn-border-color))) !important;border-radius:var(--zn-border-radius);color:var(--icon-button-color);font-weight:inherit;line-height:0}.button.button--icon-button zn-icon,.button.button--icon-button ::slotted(zn-icon){--icon-color:currentColor;color:inherit;line-height:0}.button.button--icon-button:hover:not([disabled]),.button.button--icon-button:active:not([disabled]){background:rgba(var(--zn-color-tab),0.5)}.button.button--icon-button.button--icon-button-small{width:36px;min-width:36px}.button.button--icon-button.button--icon-button-round{width:36px;min-width:36px;padding:8px;background:rgb(var(--zn-color-tab));border-color:var(--zn-button-border-color,transparent) !important;border-radius:var(--zn-border-radius-circle)}.button.button--icon-button.button--icon-button-round:hover:not([disabled]),.button.button--icon-button.button--icon-button-round:active:not([disabled]){background:rgb(var(--zn-color-border))}.button.button--icon-button.button--plain{background:transparent;border-color:var(--zn-button-border-color,transparent) !important}.button.button--icon-button.button--plain:hover:not([disabled]),.button.button--icon-button.button--plain:active:not([disabled]){background:rgb(var(--zn-color-tab))}.button.button--icon-button.button--no-hover:hover:not([disabled]),.button.button--icon-button.button--no-hover:active:not([disabled]){background:rgb(var(--zn-panel))}.button.button--icon-button.button--no-hover.button--icon-button-round:hover:not([disabled]),.button.button--icon-button.button--no-hover.button--icon-button-round:active:not([disabled]){background:rgb(var(--zn-color-tab))}.button.button--icon-button.button--no-hover.button--plain:hover:not([disabled]),.button.button--icon-button.button--no-hover.button--plain:active:not([disabled]){background:transparent}.button.button--icon-button.button--has-notification::after{--icon-inset:calc((100% - var(--notification-icon-size,20px)) / 2);top:calc(var(--icon-inset) - 4px);inset-inline-end:calc(var(--icon-inset) - 4px);transform:translate(50%,-50%)}.button--loading-bg-transparent{background-color:transparent}.button--loading-fill{pointer-events:none;position:absolute;z-index:1;background-color:rgba(var(--btn-color),0.85);border-radius:inherit;transition:width 0s;animation:loading-fill-grow var(--loading-duration,2s) linear forwards;inset:-1px}.button--loading-fill-transparent{background-color:rgba(var(--zn-primary),0.1)}.button--loading-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.button--loading-text{z-index:5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:inherit;font-weight:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;pointer-events:none;color:inherit}.button--loading-text .loading-countdown{margin-left:3px}.button--loading-text-left{justify-content:flex-start;padding-inline-start:7px}.button--loading-text-right{justify-content:flex-end;padding-inline-end:7px}.button--relative-wrapper{position:relative;display:inline-flex;height:100%;width:100%}@keyframes loading-fill-grow{from{width:0}to{width:100%}}:host([vertical-align=center]){align-self:center}:host([vertical-align=end]){align-self:end}:host([vertical-align=start]){align-self:start}:host([grow]){width:100%}:host([grow]) button{width:100%}:host([data-zn-button-group__button--grow]){flex-grow:1;flex-basis:0}:host([data-zn-button-group__button--inner]) .button{border-radius:0 !important;border-left:0 !important;border-right:0 !important}:host([data-zn-button-group__button]:not([data-zn-button-group__button--first]):not(:hover)) .button:after{content:"";position:absolute;top:0;inset-inline-start:0;bottom:0;border-left:solid 1px;mix-blend-mode:multiply;color:rgb(var(--zn-border-color))}:host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button{border-radius:5px 0 0 5px !important;border-right:0 !important}:host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button{border-radius:0 5px 5px 0 !important;border-left:0 !important}.button--panel-bg{background:rgb(var(--zn-panel))}`;var dt=class extends Y{constructor(){super(...arguments);this.formControlController=new lt(this);this.hasSlotController=new Je(this,"[default]");this._loadingState={countdown:null,interval:void 0};this.color="default";this.text=!1;this.outline=!1;this.disabled=!1;this.grow=!1;this.square=!1;this.iconButton=!1;this.plain=!1;this.noHover=!1;this.panelBackground=!1;this.dropdownCloser=!1;this.mutedNotifications=!1;this.content="";this.icon="";this.gaid="";this.iconPosition="left";this.rel="noreferrer noopener";this.autoClick=!1;this.autoClickDelay=2e3;this.loadingText="Loading...";this.loadingTextPosition="center";this.loading=!1;this.handleClick=()=>{if(!this.disabled){if(this.dropdownCloser){let t=null,i=this,n=0,o=30;for(;i&&n<o;){if(i instanceof jn){t=i;break}i=i.parentElement||(i.getRootNode()instanceof ShadowRoot?i.getRootNode().host:null),n++}t==null||t.hide()}this.type==="submit"&&this.formControlController.submit()}}}get validity(){return this._isButton()&&this.button?this.button.validity:za}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}firstUpdated(){this._isButton()&&this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback(),this.teardownAutoClick()}async handleAutoClickChange(t,i){i?(await this.updateComplete,this.setupAutoClick()):this.teardownAutoClick()}updated(t){if(super.updated(t),this.button){let i=this.button.querySelector(".button--loading-fill");if(i&&i.remove(),this.loading){let n=`${this.autoClickDelay/1e3}s`,o=document.createElement("div");o.classList.add("button--loading-fill"),o.setAttribute("style",`--loading-duration: ${n}`),this.button.classList.contains("button--transparent")&&(o.classList.add("button--loading-fill-transparent"),this.button.classList.add("button--loading-bg-transparent")),this.button.prepend(o),this.button.classList.add("button--loading-bg")}else this.button.classList.remove("button--loading-bg"),this.button.classList.remove("button--loading-bg-transparent");this.updateCountdownText()}}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(t){this._isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}click(){this.handleClick()}_isLink(){return this.href!==void 0}_isButton(){return!this._isLink()}getIconButtonColor(t){switch(t){case void 0:case"":case"default":return"rgb(var(--zn-text))";case"primary":return"rgb(var(--zn-primary))";case"secondary":return"rgb(var(--zn-text))";case"error":return"rgb(var(--zn-color-error))";case"info":return"rgb(var(--zn-color-info))";case"success":return"rgb(var(--zn-color-success))";case"warning":return"rgb(var(--zn-color-warning))";case"transparent":return"inherit";case"star":return"rgb(var(--zn-orange))";default:return t}}setupAutoClick(){this.button&&(this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!0,this._loadingState.countdown=Math.ceil(this.autoClickDelay/1e3),this.updateCountdownText(),this._loadingState.interval=window.setInterval(()=>{this._loadingState.countdown&&this._loadingState.countdown>0&&(this._loadingState.countdown--,this.updateCountdownText())},1e3),this._autoClickTimeout=window.setTimeout(()=>{var t;this.loading=!1,this._loadingState.countdown=null,this.updateCountdownText(),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),(t=this.button)==null||t.click()},this.autoClickDelay))}updateCountdownText(){let t=this._loadingState.countdown&&this._loadingState.countdown>0?` (${this._loadingState.countdown}s)`:"";if(this.countdownContainer)for(let i of this.countdownContainer)i.textContent=t}teardownAutoClick(){this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!1,this._loadingState.countdown=null,this.button&&(this.button.style.width="")}render(){let t=this._isLink(),i=this.loading&&this.autoClick,n=this.icon&&!this.loading?Zr`
+      </zn-popup>`}};ua.styles=Q(zde),_([ce("slot:not([name])")],ua.prototype,"defaultSlot",2),_([ce(".tooltip__body")],ua.prototype,"body",2),_([ce("zn-popup")],ua.prototype,"popup",2),_([w()],ua.prototype,"content",2),_([w()],ua.prototype,"placement",2),_([w({type:Boolean,reflect:!0})],ua.prototype,"disabled",2),_([w({type:Number})],ua.prototype,"distance",2),_([w({type:Boolean,reflect:!0})],ua.prototype,"open",2),_([w({type:Number})],ua.prototype,"skidding",2),_([w()],ua.prototype,"trigger",2),_([w({type:Boolean})],ua.prototype,"hoist",2),_([He("open",{waitUntilFirstUpdate:!0})],ua.prototype,"handleOpenChange",1),_([He(["content","distance","hoist","placement","skidding"])],ua.prototype,"handleOptionsChange",1),_([He("disabled")],ua.prototype,"handleDisabledChange",1);var bs=ua;ua.define("zn-tooltip");var Mde=J`:host,html,body{color:rgba(var(--zn-text),var(--zn-text-opacity));font-family:var(--zn-font-family-sans);font-feature-settings:normal;font-variation-settings:normal;font-size:var(--zn-text-paragraph-font-size);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tab-size:4;-o-tab-size:4;tab-size:4;margin:0}html,body{background-color:rgba(var(--zn-body),var(--zn-bg-opacity));container-type:size;min-height:100%;height:100%}.inline-container{container-type:inline-size}.app-container{container-type:inline-size;display:flex;flex:1;flex-direction:column;position:relative;max-height:100%;height:100%;width:100%;max-width:100%}.inline-app-container,.app-container.inline-app-container,[inline-container] .app-container{display:block;height:auto;flex:unset}hr{height:0;border:none;border-top:1px solid rgb(var(--zn-border-color))}code,kbd,samp,pre,.mono{font-family:var(--zn-font-family-mono);font-size:1em}small{font-size:80%}.hidden{display:none !important}.visibility-hidden{visibility:hidden}p{font-size:var(--zn-text-paragraph-font-size);line-height:var(--zn-text-paragraph-line-height);font-weight:var(--zn-text-paragraph-font-weight)}h1,h2,h3,h4,h5,h6{color:rgb(var(--zn-text-heading))}h1{font-size:var(--zn-text-h1-font-size);line-height:var(--zn-text-h1-line-height);font-weight:var(--zn-text-h1-font-weight)}h2{font-size:var(--zn-text-h2-font-size);line-height:var(--zn-text-h2-line-height);font-weight:var(--zn-text-h2-font-weight)}h3,h4,h5,h6{font-size:var(--zn-text-h3-font-size);line-height:var(--zn-text-h3-line-height);font-weight:var(--zn-text-h3-font-weight)}kbd{font-family:monospace;background-color:#eee;color:#333;border:1px solid rgb(var(--zn-border-color));border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5) inset;display:inline-block;font-size:13px;line-height:20px;padding:1px 6px;white-space:nowrap;min-width:15px;color:rgba(0,0,0,0.5)}[t=dark] kbd{background-color:rgb(25,25,25);box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(110,110,110,0.5) inset;color:#eee}[tab]{cursor:pointer}.zn-link:hover{--zn-text:rgb(var(--zn-primary));--icon-color:rgb(var(--zn-primary));--zn-text-heading:rgb(var(--zn-primary));--property-color:rgb(var(--zn-primary));opacity:1}.grow{flex-grow:1}.no-grow{flex-grow:0}.shrink{flex-shrink:1}.no-shrink{flex-shrink:0}.block{display:block}.flex{display:flex}.flex-wrap{display:flex;flex-wrap:wrap}.flex-col{display:flex;flex-direction:column}.flex-mid{display:flex;align-items:center}.flex-jc{justify-content:center}.flex-between{display:flex;justify-content:space-between}.flex-end{display:flex;justify-content:flex-end}.flex-bottom{display:flex;align-items:flex-end}.equal{flex-basis:50%}.m-auto{margin:auto}.mt-auto{margin-top:auto}.zn-pad{padding:var(--zn-base-gap,0)}.zn-pad-y,.zn-py{padding-top:16px;padding-bottom:16px}.zn-pad-x,.zn-px{padding-left:16px;padding-right:16px}.zn-pr{padding-right:16px}.zn-pl{padding-left:16px}.zn-pt{padding-top:16px}.zn-pb{padding-bottom:16px}.zn-margin{margin:16px}.zn-mx{margin-left:16px;margin-right:16px}.zn-my{margin-top:16px;margin-bottom:16px}.zn-mt{margin-top:16px}.zn-mb{margin-bottom:16px}.zn-ml{margin-left:16px}.zn-mr{margin-right:16px}.zn-mxa{margin-left:auto;margin-right:auto}.zn-mya{margin-top:auto;margin-bottom:auto}.zn-mta{margin-top:auto}.zn-mba{margin-bottom:auto}.zn-mla{margin-left:auto}.zn-mra{margin-right:auto}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}@keyframes act-vanish{from{transform:scale(1);opacity:1;max-height:100%}to{transform:scale(0.8);opacity:0;max-height:0}}.act-vanish{animation:ease-in act-vanish 600ms forwards;transform-origin:top center;background-color:rgba(var(--zn-color-error),0.3);display:block;overflow:hidden}.h-full{height:100%}.w-full{width:100%}.zn-panel-bg{--zn-page-surface-background:var(--zn-panel);background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.zn-panel{background-color:rgba(var(--zn-panel),var(--zn-panel-opacity));border:1px solid rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);--zn-page-surface-background:var(--zn-panel)}.zn-container{display:flex;flex-direction:column;flex-grow:1;max-height:100%;overflow:hidden}.tar{text-align:right}.tal{text-align:left}.tac{text-align:center}.zn-empty-hide:empty{display:none}.ml-auto{margin-left:auto}.zn-b-dash{border-style:dashed}.zn-b-dotted{border-style:dotted}.zn-border{border-style:solid;border-width:1px !important}.zn-bt{border-top-style:solid;border-top-width:1px !important}.zn-bb{border-bottom-style:solid;border-bottom-width:1px !important}.zn-bl{border-left-style:solid;border-left-width:1px !important}.zn-br{border-right-style:solid;border-right-width:1px !important}.unifi-action{display:flex;gap:10px;padding:10px 0;align-items:center}.zn-panel-bar{border-bottom:1px solid rgb(var(--zn-border-color));background-color:rgba(var(--zn-panel),0.9);padding:var(--zn-base-px);gap:var(--zn-base-px);display:flex;flex-wrap:wrap;align-items:center;z-index:1}.zn-panel-bar--pill{border-radius:var(--zn-border-radius);border:1px solid rgb(var(--zn-border-color))}.zn-panel-bar--large{padding:var(--zn-base-px) calc(var(--zn-base-gap) + var(--zn-gutter));gap:var(--zn-base-px);height:50px}.scroll-container{overflow:auto;flex-grow:1;position:relative;display:flex;flex-direction:column;max-height:100%}.zn-divide{display:flex;flex-direction:column}.zn-divide>*:not(:first-child){border-top:1px solid rgb(var(--zn-border-color))}.zn-divide>div:empty+div:not(:first-child){border-top:0}.zn-divide-y{display:flex;flex-direction:row}.zn-divide-y>*:not(:first-child):not(:empty){border-left:1px solid rgb(var(--zn-border-color))}.zn-c-pad{--zn-pad-spacing:var(--zn-spacing-large)}.zn-c-pad-x>*{padding-left:var(--zn-pad-spacing);padding-right:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:first-child){padding-top:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:last-child){padding-bottom:var(--zn-pad-spacing)}.zn-nav.zn-transparent{background:transparent}.zn-nav{background:rgba(var(--zn-panel),var(--zn-panel-opacity));border-right:1px solid rgb(var(--zn-border-color));max-width:320px;height:100%;padding-top:5px}.zn-nav ul{list-style:none;padding-bottom:10px;margin:0;display:flex;flex-direction:column;position:relative}.zn-nav ul:after{content:"";height:1px;left:18px;right:18px;bottom:0;position:absolute;background:rgb(var(--zn-border-color))}.zn-nav ul li a{text-decoration:none;color:rgb(var(--zn-text));display:block;font-weight:500;cursor:pointer}.zn-nav ul li a:hover,.zn-nav ul li a.zn-tb-active{background:rgb(var(--zn-body))}.zn-nav ul li a.zn-tb-active{color:rgb(var(--zn-purple-text))}.zn-nav ul:last-child:after{display:none}.zn-nav strong,.zn-nav li a{padding:10px 20px}.zn-nav strong{display:block;margin-top:10px;font-size:13px;letter-spacing:0.93px;color:rgb(var(--zn-text-heading));font-weight:600;padding-bottom:5px;text-transform:uppercase}@keyframes shimmer-text-sweep{0%{background-position:100% center}100%{background-position:0% center}}@media (prefers-reduced-motion:no-preference){.shimmer-text{--shimmer-base:rgb(var(--zn-text));--shimmer-highlight:rgb(var(--zn-text-heading));--shimmer-core:0.5ch;--shimmer-spread:1.5ch;--shimmer-duration:1.5s;display:inline-block;width:-moz-fit-content;width:fit-content;max-width:100%;background-image:linear-gradient(90deg,transparent calc(50% - var(--shimmer-spread)),var(--shimmer-highlight) calc(50% - var(--shimmer-core)),var(--shimmer-highlight) calc(50% + var(--shimmer-core)),transparent calc(50% + var(--shimmer-spread))),linear-gradient(var(--shimmer-base),var(--shimmer-base));background-size:250% 100%,auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent !important;color:transparent !important;animation:var(--shimmer-duration) linear infinite shimmer-text-sweep}.shimmer-text.zn-error{--shimmer-base:rgb(var(--zn-color-error));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-error)) 55%,white)}.shimmer-text.zn-success{--shimmer-base:rgb(var(--zn-color-success));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-success)) 55%,white)}.shimmer-text.zn-info{--shimmer-base:rgb(var(--zn-color-info));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-info)) 55%,white)}.shimmer-text.zn-warning{--shimmer-base:rgb(var(--zn-color-warning));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-color-warning)) 55%,white)}.shimmer-text.zn-primary{--shimmer-base:rgb(var(--zn-primary));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-primary)) 55%,white)}.shimmer-text.zn-accent{--shimmer-base:rgb(var(--zn-accent));--shimmer-highlight:color-mix(in srgb,rgb(var(--zn-accent)) 55%,white)}}@media (prefers-reduced-motion:reduce){.shimmer-text{color:rgb(var(--zn-text))}.shimmer-text.zn-error{color:rgb(var(--zn-color-error)) !important}.shimmer-text.zn-success{color:rgb(var(--zn-color-success)) !important}.shimmer-text.zn-info{color:rgb(var(--zn-color-info)) !important}.shimmer-text.zn-warning{color:rgb(var(--zn-color-warning)) !important}.shimmer-text.zn-primary{color:rgb(var(--zn-primary)) !important}.shimmer-text.zn-accent{color:rgb(var(--zn-accent)) !important}}*,*::before,*::after{box-sizing:border-box}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}strong{font-weight:bolder}b{font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:inline-block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}button,.zn-button{border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}button:hover:not([disabled]),.zn-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{display:block;width:100%;border-radius:5px;border-style:solid;border-width:1px !important;border-color:rgb(var(--zn-border-color));background-color:rgb(var(--zn-input-bg));outline:none}input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type=file]:focus,input[list]:focus,textarea:focus,select:focus{border-color:rgb(var(--zn-primary));box-shadow:0 0 0 3px rgba(var(--zn-primary),0.3)}input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=week]::-moz-placeholder, input[type=file]::-moz-placeholder, input[list]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}input[type=date]::placeholder,input[type=datetime-local]::placeholder,input[type=email]::placeholder,input[type=month]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,input[type=time]::placeholder,input[type=url]::placeholder,input[type=week]::placeholder,input[type=file]::placeholder,input[list]::placeholder,textarea::placeholder,select::placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}@media (min-width:360px){input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{padding:8px}}label{font-weight:600;font-size:rgb(var(--zn-font-size-medium));line-height:var(--zn-spacing-medium);color:rgb(var(--zn-text-heading));display:block;margin-bottom:4px;margin-top:16px}input[type=checkbox],input[type=radio]{border-radius:5px}input[type=radio]{border-radius:50%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:10px;background-color:rgb(var(--zn-border-color));height:8px;accent-color:rgb(var(--zn-primary));width:100%;max-width:768px}fieldset{border-color:rgba(var(--zn-primary),20%);border-width:2px;padding:0 16px 16px}select option{padding:4px}select>option:checked{background-color:rgba(var(--zn-primary),20%);border-radius:5px}fieldset>legend{padding:4px}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}input[type=button]:hover:not([disabled]),input[type=submit]:hover:not([disabled]),button[type=submit]:not(.button):hover:not([disabled]),button[type=button]:not(.button):hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){width:auto}div+button{margin-top:16px}input[type=file]::-webkit-file-upload-button{border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}input[type=file]::-webkit-file-upload-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=file]::-webkit-file-upload-button{margin-right:8px}input::-webkit-calendar-picker-indicator{cursor:pointer;padding:8px}input[list]::-webkit-calendar-picker-indicator{padding:8px 4px}.input--with-icon{position:relative}.input--with-icon zn-icon{padding:14px;position:absolute;top:50%;pointer-events:none;transform:translateY(-50%);left:8px;background-color:rgb(var(--zn-primary));color:rgb(var(--zn-text));border-radius:50%}.input--with-icon input{padding-left:40px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:rgb(var(--zn-text));-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;box-shadow:inset 0 0 20px 20px rgba(35,35,35,0.1607843137)}select{height:43px}.no-border{border:none !important}table:not(.remarkd-table){border-collapse:separate !important;border-spacing:0;width:100%;max-width:100%;table-layout:auto;text-align:left;font-family:var(--zn-font-sans);font-size:var(--zn-text-table-content-font-size);font-weight:var(--zn-text-table-content-font-weight);line-height:var(--zn-text-table-content-line-height);color:var(--zn-text-table-content-color);text-transform:var(--zn-text-table-content-transform)}table:not(.remarkd-table) thead{font-weight:var(--zn-font-weight-medium)}table:not(.remarkd-table) thead tr th{background-color:rgb(var(--zn-table-header-background-color))}table:not(.remarkd-table) tbody a{cursor:pointer;color:rgb(var(--zn-primary))}table:not(.remarkd-table) tbody tr td{border-top:1px solid rgb(var(--zn-border-color)) !important}table:not(.remarkd-table) tbody tr:first-of-type td{border-top:0 !important}table:not(.remarkd-table) th,table:not(.remarkd-table) td{padding:var(--zn-spacing-small) var(--zn-spacing-medium);min-width:90px;white-space:nowrap}table:not(.remarkd-table) td>span{white-space:normal}table:not(.remarkd-table) th{font-family:var(--zn-font-sans);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);color:var(--zn-text-button-label-color);text-transform:var(--zn-text-button-label-transform);text-transform:capitalize;border-bottom:1px solid rgb(var(--zn-border-color))}.zn-table-fixed{table-layout:fixed}.opacity-100{opacity:1}.opacity-90{opacity:0.9}.opacity-80{opacity:0.8}.opacity-60{opacity:0.6}.opacity-50{opacity:0.5}.opacity-40{opacity:0.4}.opacity-10{opacity:0.1}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host button,:host a{width:100%}.button{border-radius:var(--zn-border-radius);display:inline-flex;align-items:center;justify-content:center;padding:var(--zn-base-px);margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-size:var(--zn-text-button-label-font-size);font-weight:var(--zn-text-button-label-font-weight);line-height:var(--zn-text-button-label-line-height);text-transform:var(--zn-text-button-label-transform);cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;max-height:36px;height:36px;min-height:36px}.button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}.button{--btn-color:var(--zn-primary);--notification-color:rgb(var(--zn-color-error));border-width:var(--zn-button-border-width,1px);border-top-width:var(--zn-button-border-top-width,var(--zn-button-border-width,1px));border-right-width:var(--zn-button-border-right-width,var(--zn-button-border-width,1px));border-bottom-width:var(--zn-button-border-bottom-width,var(--zn-button-border-width,1px));border-left-width:var(--zn-button-border-left-width,var(--zn-button-border-width,1px));border-color:var(--zn-button-border-color,transparent);display:inline-flex;position:relative}.button.button--info{--btn-color:var(--zn-color-info)}.button.button--error{--btn-color:var(--zn-color-error)}.button.button--warning{--btn-color:var(--zn-color-warning)}.button.button--success{--btn-color:var(--zn-color-success)}.button__label--hidden{visibility:hidden}.button.button--muted-notification{--notification-color:rgb(var(--zn-color-info))}.button--has-notification{position:relative;overflow:visible}.button--has-notification::after{content:attr(data-notification);position:absolute;display:flex;justify-content:center;align-items:center;top:-4px;left:auto;inset-inline-end:-4px;box-sizing:border-box;min-width:13px;height:13px;padding:0 3px;border-radius:999px;font-size:var(--zn-text-notification-font-size);font-weight:var(--zn-text-notification-font-weight);line-height:var(--zn-text-notification-line-height);color:var(--zn-text-notification-color);background-color:var(--notification-color)}.button--has-notification.button--notification-dot::after{content:"";min-width:0;width:8px;height:8px;padding:0;border-radius:50%}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:2px solid rgb(var(--btn-color));outline-offset:2px}[disabled]{cursor:not-allowed;opacity:0.5}[disabled] *{pointer-events:none}.button--standard.button--secondary{background-color:var(--zn-color-neutral-50);border-color:var(--zn-button-border-color,var(--zn-color-neutral-50));color:rgb(var(--zn-primary))}.button--standard.button--secondary:hover:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard.button--secondary:active:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard{background-color:rgba(var(--btn-color),0.85);border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:rgba(255,255,255,0.9)}.button--standard:hover:not([disabled]){background-color:rgba(var(--btn-color),0.8)}.button--standard:active:not([disabled]){background-color:rgba(var(--btn-color))}.button--outline{background:none;border-width:var(--zn-button-border-width,1px);border-top-width:var(--zn-button-border-top-width,var(--zn-button-border-width,1px));border-right-width:var(--zn-button-border-right-width,var(--zn-button-border-width,1px));border-bottom-width:var(--zn-button-border-bottom-width,var(--zn-button-border-width,1px));border-left-width:var(--zn-button-border-left-width,var(--zn-button-border-width,1px));border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:rgb(var(--btn-color))}.button--outline:hover:not([disabled]),.button--outline:active:not([disabled]){background-color:rgb(var(--btn-color));color:white}.button--outline.button--secondary{border-color:var(--zn-button-border-color,var(--zn-color-neutral-100))}.button--outline.button--secondary:hover:not([disabled]),.button--outline.button--secondary:active:not([disabled]){background-color:var(--zn-color-neutral-100);color:rgb(var(--btn-color))}.button--text{background:none;color:rgb(var(--btn-color))}.button--text:hover:not([disabled]),.button--text:active:not([disabled]){background-color:rgba(var(--btn-color),0.1)}.button--text.button--secondary{font-weight:normal}.button--grow{width:100%}.button--with-icon.button--with-content:not(.button--icon-button).button--icon-left zn-icon{margin-right:var(--zn-base-px)}.button--with-icon.button--with-content:not(.button--icon-button).button--icon-right zn-icon{margin-left:var(--zn-base-px)}.button--square{border-radius:0}.button--transparent{background-color:transparent;border-color:var(--zn-button-border-color,transparent) !important;color:inherit}.button--transparent:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.1)}.button--transparent:active:not([disabled]){background-color:rgba(var(--zn-primary),0.2)}.button--star{--btn-color:var(--zn-orange);background-color:rgb(var(--btn-color));border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:white;opacity:1 !important}.button--star:hover:not([disabled]){background-color:rgb(var(--btn-color))}.button--star:active{background-color:rgb(var(--btn-color))}.button--star.button--outline{background-color:transparent;border-color:var(--zn-button-border-color,rgb(var(--btn-color)));color:rgb(var(--btn-color))}.button--star.button--outline:hover:not([disabled]),.button--star.button--outline:active:not([disabled]){background-color:rgba(var(--btn-color));color:white}.button.button--icon-button{--icon-button-color:rgb(var(--zn-text));--icon-button-hover-color:rgb(var(--zn-primary));width:40px;min-width:40px;height:36px;min-height:36px;max-height:36px;padding:6px;margin:0;background:rgb(var(--zn-panel));border-color:var(--zn-button-border-color,rgb(var(--zn-border-color))) !important;border-radius:var(--zn-border-radius);color:var(--icon-button-color);font-weight:inherit;line-height:0}.button.button--icon-button zn-icon,.button.button--icon-button ::slotted(zn-icon){--icon-color:currentColor;color:inherit;line-height:0}.button.button--icon-button:hover:not([disabled]),.button.button--icon-button:active:not([disabled]){background:rgba(var(--zn-color-tab),0.5)}.button.button--icon-button.button--icon-button-small{width:36px;min-width:36px}.button.button--icon-button.button--icon-button-round{width:36px;min-width:36px;padding:8px;background:rgb(var(--zn-color-tab));border-color:var(--zn-button-border-color,transparent) !important;border-radius:var(--zn-border-radius-circle)}.button.button--icon-button.button--icon-button-round:hover:not([disabled]),.button.button--icon-button.button--icon-button-round:active:not([disabled]){background:rgb(var(--zn-color-border))}.button.button--icon-button.button--plain{background:transparent;border-color:var(--zn-button-border-color,transparent) !important}.button.button--icon-button.button--plain:hover:not([disabled]),.button.button--icon-button.button--plain:active:not([disabled]){background:rgb(var(--zn-color-tab))}.button.button--icon-button.button--no-hover:hover:not([disabled]),.button.button--icon-button.button--no-hover:active:not([disabled]){background:rgb(var(--zn-panel))}.button.button--icon-button.button--no-hover.button--icon-button-round:hover:not([disabled]),.button.button--icon-button.button--no-hover.button--icon-button-round:active:not([disabled]){background:rgb(var(--zn-color-tab))}.button.button--icon-button.button--no-hover.button--plain:hover:not([disabled]),.button.button--icon-button.button--no-hover.button--plain:active:not([disabled]){background:transparent}.button.button--icon-button.button--has-notification::after{--icon-inset:calc((100% - var(--notification-icon-size,20px)) / 2);top:calc(var(--icon-inset) - 4px);inset-inline-end:calc(var(--icon-inset) - 4px);transform:translate(50%,-50%)}.button--loading-bg-transparent{background-color:transparent}.button--loading-fill{pointer-events:none;position:absolute;z-index:1;background-color:rgba(var(--btn-color),0.85);border-radius:inherit;transition:width 0s;animation:loading-fill-grow var(--loading-duration,2s) linear forwards;inset:-1px}.button--loading-fill-transparent{background-color:rgba(var(--zn-primary),0.1)}.button--loading-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.button--loading-text{z-index:5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:inherit;font-weight:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;pointer-events:none;color:inherit}.button--loading-text .loading-countdown{margin-left:3px}.button--loading-text-left{justify-content:flex-start;padding-inline-start:7px}.button--loading-text-right{justify-content:flex-end;padding-inline-end:7px}.button--relative-wrapper{position:relative;display:inline-flex;height:100%;width:100%}@keyframes loading-fill-grow{from{width:0}to{width:100%}}:host([vertical-align=center]){align-self:center}:host([vertical-align=end]){align-self:end}:host([vertical-align=start]){align-self:start}:host([grow]){width:100%}:host([grow]) button{width:100%}:host([data-zn-button-group__button--grow]){flex-grow:1;flex-basis:0}:host([data-zn-button-group__button--inner]) .button{border-radius:0 !important;border-left:0 !important;border-right:0 !important}:host([data-zn-button-group__button]:not([data-zn-button-group__button--first]):not(:hover)) .button:after{content:"";position:absolute;top:0;inset-inline-start:0;bottom:0;border-left:solid 1px;mix-blend-mode:multiply;color:rgb(var(--zn-border-color))}:host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button{border-radius:5px 0 0 5px !important;border-right:0 !important}:host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button{border-radius:0 5px 5px 0 !important;border-left:0 !important}.button--panel-bg{background:rgb(var(--zn-panel));border-color:var(--zn-button-border-color,rgb(var(--zn-border-color)));color:rgb(var(--zn-text))}.button--panel-bg:hover:not([disabled]),.button--panel-bg:active:not([disabled]){background:rgba(var(--zn-color-tab),0.5)}`;var dt=class extends Y{constructor(){super(...arguments);this.formControlController=new lt(this);this.hasSlotController=new Je(this,"[default]");this._loadingState={countdown:null,interval:void 0};this.color="default";this.text=!1;this.outline=!1;this.disabled=!1;this.grow=!1;this.square=!1;this.iconButton=!1;this.plain=!1;this.noHover=!1;this.panelBackground=!1;this.dropdownCloser=!1;this.mutedNotifications=!1;this.content="";this.icon="";this.gaid="";this.iconPosition="left";this.rel="noreferrer noopener";this.autoClick=!1;this.autoClickDelay=2e3;this.loadingText="Loading...";this.loadingTextPosition="center";this.loading=!1;this.handleClick=()=>{if(!this.disabled){if(this.dropdownCloser){let t=null,i=this,n=0,o=30;for(;i&&n<o;){if(i instanceof jn){t=i;break}i=i.parentElement||(i.getRootNode()instanceof ShadowRoot?i.getRootNode().host:null),n++}t==null||t.hide()}this.type==="submit"&&this.formControlController.submit()}}}get validity(){return this._isButton()&&this.button?this.button.validity:za}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}firstUpdated(){this._isButton()&&this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback(),this.teardownAutoClick()}async handleAutoClickChange(t,i){i?(await this.updateComplete,this.setupAutoClick()):this.teardownAutoClick()}updated(t){if(super.updated(t),this.button){let i=this.button.querySelector(".button--loading-fill");if(i&&i.remove(),this.loading){let n=`${this.autoClickDelay/1e3}s`,o=document.createElement("div");o.classList.add("button--loading-fill"),o.setAttribute("style",`--loading-duration: ${n}`),this.button.classList.contains("button--transparent")&&(o.classList.add("button--loading-fill-transparent"),this.button.classList.add("button--loading-bg-transparent")),this.button.prepend(o),this.button.classList.add("button--loading-bg")}else this.button.classList.remove("button--loading-bg"),this.button.classList.remove("button--loading-bg-transparent");this.updateCountdownText()}}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(t){this._isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}click(){this.handleClick()}_isLink(){return this.href!==void 0}_isButton(){return!this._isLink()}getIconButtonColor(t){switch(t){case void 0:case"":case"default":return"rgb(var(--zn-text))";case"primary":return"rgb(var(--zn-primary))";case"secondary":return"rgb(var(--zn-text))";case"error":return"rgb(var(--zn-color-error))";case"info":return"rgb(var(--zn-color-info))";case"success":return"rgb(var(--zn-color-success))";case"warning":return"rgb(var(--zn-color-warning))";case"transparent":return"inherit";case"star":return"rgb(var(--zn-orange))";default:return t}}setupAutoClick(){this.button&&(this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!0,this._loadingState.countdown=Math.ceil(this.autoClickDelay/1e3),this.updateCountdownText(),this._loadingState.interval=window.setInterval(()=>{this._loadingState.countdown&&this._loadingState.countdown>0&&(this._loadingState.countdown--,this.updateCountdownText())},1e3),this._autoClickTimeout=window.setTimeout(()=>{var t;this.loading=!1,this._loadingState.countdown=null,this.updateCountdownText(),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),(t=this.button)==null||t.click()},this.autoClickDelay))}updateCountdownText(){let t=this._loadingState.countdown&&this._loadingState.countdown>0?` (${this._loadingState.countdown}s)`:"";if(this.countdownContainer)for(let i of this.countdownContainer)i.textContent=t}teardownAutoClick(){this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!1,this._loadingState.countdown=null,this.button&&(this.button.style.width="")}render(){let t=this._isLink(),i=this.loading&&this.autoClick,n=this.icon&&!this.loading?Zr`
         <zn-icon part="icon" src="${this.icon}" id="xy2" size="${this.iconSize?this.iconSize:20}"
                  color="${ue(this.iconColor)}" fill="${ue(this.iconFill)}"
                  library="${ue(this.iconLibrary)}"></zn-icon>`:"",o=t?dd`a`:dd`button`,s=this.iconButton?{"--icon-button-color":this.getIconButtonColor(this.color),"--icon-button-hover-color":this.getIconButtonColor(this.hoverColor||"primary")}:{},l=Zr`
       <${o}
         part="base"
-        class="${ae({button:!0,"button--default":this.color==="default","button--secondary":this.color==="secondary","button--panel-bg":this.panelBackground,"button--error":this.color==="error","button--info":this.color==="info","button--success":this.color==="success","button--warning":this.color==="warning","button--transparent":this.color==="transparent","button--star":this.color==="star","button--white":this.color==="white","button--outline":this.outline,"button--text":this.text&&!this.outline,"button--icon-button":!!this.iconButton,"button--plain":!!this.iconButton&&this.plain,"button--no-hover":this.noHover,"button--icon-button-small":this.iconButton==="small","button--icon-button-round":this.iconButton==="round","button--grow":this.grow,"button--standard":!this.outline&&!this.text,"button--with-icon":this.icon,"button--icon-left":this.iconPosition==="left","button--icon-right":this.iconPosition==="right","button--with-content":this.hasSlotController.test("[default]")||this.content,"button--square":this.square,"button--has-notification":this.notification!==void 0&&this.notification!==0,"button--muted-notification":this.mutedNotifications||this.notification!==void 0&&this.notification===-2,"button--notification-dot":this.notification!==void 0&&this.notification<0})}"
+        class="${ae({button:!0,"button--default":this.color==="default","button--secondary":this.color==="secondary","button--panel-bg":this.panelBackground,"button--error":this.color==="error","button--info":this.color==="info","button--success":this.color==="success","button--warning":this.color==="warning","button--transparent":this.color==="transparent","button--star":this.color==="star","button--outline":this.outline,"button--text":this.text&&!this.outline,"button--icon-button":!!this.iconButton,"button--plain":!!this.iconButton&&this.plain,"button--no-hover":this.noHover,"button--icon-button-small":this.iconButton==="small","button--icon-button-round":this.iconButton==="round","button--grow":this.grow,"button--standard":!this.outline&&!this.text,"button--with-icon":this.icon,"button--icon-left":this.iconPosition==="left","button--icon-right":this.iconPosition==="right","button--with-content":this.hasSlotController.test("[default]")||this.content,"button--square":this.square,"button--has-notification":this.notification!==void 0&&this.notification!==0,"button--muted-notification":this.mutedNotifications||this.notification!==void 0&&this.notification===-2,"button--notification-dot":this.notification!==void 0&&this.notification<0})}"
         type="${ue(this.type)}"
         href="${ue(this.href)}"
         target="${ue(t?this.target:void 0)}"
@@ -172,16 +172,17 @@ function print() { __p += __j.call(arguments, '') }
         ${this.arrow?C`
           <div part="arrow" class="popup__arrow" role="presentation"></div>`:""}
       </div>
-    `}};Xt.styles=Q(oce),_([ce(".popup")],Xt.prototype,"popup",2),_([ce(".popup__arrow")],Xt.prototype,"arrowEl",2),_([w()],Xt.prototype,"anchor",2),_([w({type:Boolean,reflect:!0})],Xt.prototype,"active",2),_([w({reflect:!0})],Xt.prototype,"placement",2),_([w({reflect:!0})],Xt.prototype,"strategy",2),_([w({type:Number})],Xt.prototype,"distance",2),_([w({type:Number})],Xt.prototype,"skidding",2),_([w({type:Boolean})],Xt.prototype,"arrow",2),_([w({attribute:"arrow-placement"})],Xt.prototype,"arrowPlacement",2),_([w({attribute:"arrow-padding",type:Number})],Xt.prototype,"arrowPadding",2),_([w({type:Boolean})],Xt.prototype,"flip",2),_([w({attribute:"flip-fallback-placements",converter:{fromAttribute:t=>t.split(" ").map(i=>i.trim()).filter(i=>i!==""),toAttribute:t=>t.join(" ")}})],Xt.prototype,"flipFallbackPlacements",2),_([w({attribute:"flip-fallback-strategy"})],Xt.prototype,"flipFallbackStrategy",2),_([w({type:Object})],Xt.prototype,"flipBoundary",2),_([w({attribute:"flip-padding",type:Number})],Xt.prototype,"flipPadding",2),_([w({type:Boolean})],Xt.prototype,"shift",2),_([w({type:Object})],Xt.prototype,"shiftBoundary",2),_([w({attribute:"shift-padding",type:Number})],Xt.prototype,"shiftPadding",2),_([w({attribute:"auto-size"})],Xt.prototype,"autoSize",2),_([w()],Xt.prototype,"sync",2),_([w({type:Object})],Xt.prototype,"autoSizeBoundary",2),_([w({attribute:"auto-size-padding",type:Number})],Xt.prototype,"autoSizePadding",2),_([w({attribute:"hover-bridge",type:Boolean})],Xt.prototype,"hoverBridge",2);var L0=Xt;Xt.define("zn-popup");var sce=J`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host(:not([expanded])){cursor:pointer}:host([expanded]) .expand{transform:rotate(180deg)}:host-context(.app-navigation) .header{padding:var(--zn-base-px)}.header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;overflow:hidden;padding:var(--zn-base-gap);justify-items:center}.header .caption{font-weight:600;margin:0;flex-grow:1;width:100%;color:rgb(var(--zn-text-heading))}.header .description{text-align:right;padding:0;margin:0}.header .summary{font-weight:500;font-size:90%}.header .label{font-weight:500;font-size:90%}.header__left{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.header__right{display:flex;flex-direction:row;align-items:center}:host([error-label]) .header .caption{color:rgb(var(--zn-color-error))}:host([warning-label]) .header .caption{color:rgb(var(--zn-color-warning))}:host(:not([flush])).content{padding:var(--zn-base-gap,0)}.content{transition:0.1s all ease-out}:host([expanded]) .content{margin:0 var(--zn-spacing-medium);padding-bottom:var(--zn-spacing-medium)}:host([expanded]) .content--flush{margin:0;padding:0}:host(:not([expanded])) .content{max-height:0;opacity:0;overflow:hidden;padding:0}.expand{margin-left:var(--zn-spacing-medium)}`;var Na=class extends Y{constructor(){super(...arguments);this.caption="";this.label="";this.showNumber=!1;this.countElement="*";this.expanded=!1;this.storeKey="";this.storeTtl=0;this.flush=!1;this.numberOfItems=0;this.hasSlotController=new Je(this,"[default]","header","caption","label");this.observer=new vr(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>this.recalculateNumberOfItems()});this.showArrow=!0;this.handleCaptionToggle=t=>{let i=t.target;i&&(this.expanded=i.checked)};this.handleCollapse=t=>{let i=t.target;i.tagName.toLowerCase()==="input"&&i.type==="checkbox"||this.expanded&&(this.expanded=!1,t.stopPropagation())};this.recalculateNumberOfItems=()=>{let t=this.hasSlotController.getDefaultSlot().filter(n=>n.nodeType===Node.ELEMENT_NODE);if(this.countElement==="*"){this.numberOfItems=t.length;return}let i=t.flatMap(n=>Array.from(n.querySelectorAll(this.countElement)));this.numberOfItems=i.length}}async connectedCallback(){if(super.connectedCallback(),this._store=new hn(this.localStorage?window.localStorage:window.sessionStorage,"zncla:",this.storeTtl),this.expanded=this.defaultState==="open",this.storeKey){let i=this._store.get(this.storeKey);i&&(this.expanded=i==="true")}this.showNumber&&this.observer.observe(this),await this.updateComplete;let t=this.hasSlotController.getSlot("caption");if(t){let i=t.querySelectorAll("zn-toggle");this.showArrow=!1,i.forEach(n=>{n.removeEventListener("zn-input",this.handleCaptionToggle),n.addEventListener("zn-input",this.handleCaptionToggle)})}}updated(t){super.updated(t),t.has("expanded")&&this.storeKey&&this._store.set(this.storeKey,this.expanded.toString())}render(){return this.recalculateNumberOfItems(),C`
+    `}};Xt.styles=Q(oce),_([ce(".popup")],Xt.prototype,"popup",2),_([ce(".popup__arrow")],Xt.prototype,"arrowEl",2),_([w()],Xt.prototype,"anchor",2),_([w({type:Boolean,reflect:!0})],Xt.prototype,"active",2),_([w({reflect:!0})],Xt.prototype,"placement",2),_([w({reflect:!0})],Xt.prototype,"strategy",2),_([w({type:Number})],Xt.prototype,"distance",2),_([w({type:Number})],Xt.prototype,"skidding",2),_([w({type:Boolean})],Xt.prototype,"arrow",2),_([w({attribute:"arrow-placement"})],Xt.prototype,"arrowPlacement",2),_([w({attribute:"arrow-padding",type:Number})],Xt.prototype,"arrowPadding",2),_([w({type:Boolean})],Xt.prototype,"flip",2),_([w({attribute:"flip-fallback-placements",converter:{fromAttribute:t=>t.split(" ").map(i=>i.trim()).filter(i=>i!==""),toAttribute:t=>t.join(" ")}})],Xt.prototype,"flipFallbackPlacements",2),_([w({attribute:"flip-fallback-strategy"})],Xt.prototype,"flipFallbackStrategy",2),_([w({type:Object})],Xt.prototype,"flipBoundary",2),_([w({attribute:"flip-padding",type:Number})],Xt.prototype,"flipPadding",2),_([w({type:Boolean})],Xt.prototype,"shift",2),_([w({type:Object})],Xt.prototype,"shiftBoundary",2),_([w({attribute:"shift-padding",type:Number})],Xt.prototype,"shiftPadding",2),_([w({attribute:"auto-size"})],Xt.prototype,"autoSize",2),_([w()],Xt.prototype,"sync",2),_([w({type:Object})],Xt.prototype,"autoSizeBoundary",2),_([w({attribute:"auto-size-padding",type:Number})],Xt.prototype,"autoSizePadding",2),_([w({attribute:"hover-bridge",type:Boolean})],Xt.prototype,"hoverBridge",2);var L0=Xt;Xt.define("zn-popup");var sce=J`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host(:not([expanded])){cursor:pointer}:host([expanded]) .expand{transform:rotate(180deg)}:host-context(.app-navigation) .header{padding:var(--zn-base-px)}.header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;overflow:hidden;padding:var(--zn-base-gap);justify-items:center}.header .caption{font-weight:600;margin:0;flex-grow:1;width:100%;color:rgb(var(--zn-text-heading))}.header .description{text-align:right;padding:0;margin:0}.header .summary{font-weight:500;font-size:90%}.header .label{font-weight:500;font-size:90%}.header__left{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.header__right{display:flex;flex-direction:row;align-items:center}:host([error-label]) .header .caption{color:rgb(var(--zn-color-error))}:host([warning-label]) .header .caption{color:rgb(var(--zn-color-warning))}:host(:not([flush])).content{padding:var(--zn-base-gap,0)}.content{transition:0.1s all ease-out}:host([expanded]) .content{margin:0 var(--zn-spacing-medium);padding-bottom:var(--zn-spacing-medium)}:host([expanded]) .content--flush{margin:0;padding:0}:host(:not([expanded])) .content{max-height:0;opacity:0;overflow:hidden;padding:0}.expand{margin-left:var(--zn-spacing-medium)}`;var Na=class extends Y{constructor(){super(...arguments);this.caption="";this.label="";this.showNumber=!1;this.countElement="*";this.expanded=!1;this.storeKey="";this.storeTtl=0;this.flush=!1;this.numberOfItems=0;this.hasSlotController=new Je(this,"[default]","header","caption","label","description");this.observer=new vr(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>this.recalculateNumberOfItems()});this.showArrow=!0;this.handleCaptionToggle=t=>{let i=t.target;i&&(this.expanded=i.checked)};this.handleCollapse=t=>{let i=t.target;i.tagName.toLowerCase()==="input"&&i.type==="checkbox"||this.expanded&&(this.expanded=!1,t.stopPropagation())};this.recalculateNumberOfItems=()=>{let t=this.hasSlotController.getDefaultSlot().filter(n=>n.nodeType===Node.ELEMENT_NODE);if(this.countElement==="*"){this.numberOfItems=t.length;return}let i=t.flatMap(n=>Array.from(n.querySelectorAll(this.countElement)));this.numberOfItems=i.length}}async connectedCallback(){if(super.connectedCallback(),this._store=new hn(this.localStorage?window.localStorage:window.sessionStorage,"zncla:",this.storeTtl),this.expanded=this.defaultState==="open",this.storeKey){let i=this._store.get(this.storeKey);i&&(this.expanded=i==="true")}this.showNumber&&this.observer.observe(this),await this.updateComplete;let t=this.hasSlotController.getSlot("caption");if(t){let i=t.querySelectorAll("zn-toggle");this.showArrow=!1,i.forEach(n=>{n.removeEventListener("zn-input",this.handleCaptionToggle),n.addEventListener("zn-input",this.handleCaptionToggle)})}}updated(t){super.updated(t),t.has("expanded")&&this.storeKey&&this._store.set(this.storeKey,this.expanded.toString())}render(){return this.recalculateNumberOfItems(),C`
       <div @click="${()=>this.expanded?"":this.expanded=!0}">
-        <slot name="header" class="header" @click="${this.handleCollapse}">
+        <slot name="header" part="header" class="header" @click="${this.handleCollapse}">
           <div class="header__left">
-            <p class="caption">
+            <p part="caption" class="caption">
               <slot name="caption">${this.caption}</slot>
             </p>
-            <p class="description">
-              <slot name="description">${this.description}</slot>
-            </p>
+            ${this.description||this.hasSlotController.test("description")?C`
+                <p class="description">
+                  <slot name="description">${this.description}</slot>
+                </p>`:""}
           </div>
           <div class="header__right">
             <slot name="label"><p class="label">${this.label}</p></slot>
@@ -759,29 +760,29 @@ function print() { __p += __j.call(arguments, '') }
         </zn-select>
       </div>`}getPageRange(){let t=this.totalPages,i=this.page;if(t<=7)return Array.from({length:t},(s,l)=>l+1);let n=i>4,o=i<t-3;return!n&&o?[1,2,3,4,5,"ellipsis",t]:n&&!o?[1,"ellipsis",t-4,t-3,t-2,t-1,t]:[1,"ellipsis",i-1,i,i+1,"ellipsis",t]}getPagination(){return this.hidePagination||this.totalPages<=1?null:C`
       <div class="table__footer__pagination-buttons">
-        <zn-button color="white"
-                   @click="${this.page!==1?this.goToFirstPage:void 0}"
+        <zn-button @click="${this.page!==1?this.goToFirstPage:void 0}"
                    ?disabled="${this.page===1}"
-                   icon="arrow_left@lu">First
+                   icon="arrow_left@lu"
+                   panel-bg>First
         </zn-button>
-        <zn-button color="white"
-                   @click="${this.page!==1?this.goToPreviousPage:void 0}"
-                   ?disabled="${this.page===1}">Back
+        <zn-button @click="${this.page!==1?this.goToPreviousPage:void 0}"
+                   ?disabled="${this.page===1}"
+                   panel-bg>Back
         </zn-button>
         ${this.getPageRange().map(t=>t==="ellipsis"?C`<span class="table__footer__pagination-ellipsis">…</span>`:C`
             <zn-button @click="${t!==this.page?()=>this.goToPage(t):void 0}"
                        icon-button="small"
                        class="${t===this.page?"table__footer__pagination-page--active":""}">${t}
             </zn-button>`)}
-        <zn-button color="white"
-                   @click="${this.page!==this.totalPages?this.goToNextPage:void 0}"
-                   ?disabled="${this.page===this.totalPages}">Next
+        <zn-button @click="${this.page!==this.totalPages?this.goToNextPage:void 0}"
+                   ?disabled="${this.page===this.totalPages}"
+                   panel-bg>Next
         </zn-button>
-        <zn-button color="white"
-                   @click="${this.page!==this.totalPages?this.goToLastPage:void 0}"
+        <zn-button @click="${this.page!==this.totalPages?this.goToLastPage:void 0}"
                    ?disabled="${this.page===this.totalPages}"
                    icon="arrow_right@lu"
-                   icon-position="right">Last
+                   icon-position="right"
+                   panel-bg>Last
         </zn-button>
       </div>`}getActions(){let t=[];return this.hasSlotController.test("delete-action".valueOf())||this.hasSlotController.test("modify-action".valueOf())||this.hasSlotController.test("create-action".valueOf())?(!this.hideCheckboxes&&this._rows.length>0&&t.push(C`
         <zn-button @click="${this.selectAll}"
@@ -1136,8 +1137,8 @@ function print() { __p += __j.call(arguments, '') }
         <div class="channel-tile__body">
           ${this._renderLeading()}
           <div class="channel-tile__content">
-            <h3 class="channel-tile__title">${t}</h3>
-            <p class="channel-tile__subtitle">${this.subtitle}</p>
+            <h3 class="channel-tile__title"><slot name="title">${t}</slot></h3>
+            <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>
           </div>
           <slot name="footer" class="channel-tile__footer"></slot>
         </div>

package/docs/pages/components/channel-tile.md

@@ -7,8 +7,10 @@ layout: component
 
 The channel tile represents a single slot in a queue or channel rail. It has two faces:
 
-- **Active** — the slot is occupied by an in-progress item (header, leading icon, title/subtitle, and a progress/SLA bar).
-- **Available** — the slot is empty and advertising capacity. When `incoming` is set it reserves an arriving item with a countdown that can auto-accept.
+- **Active** — the slot is occupied by an in-progress item (header, leading icon, title/subtitle, and a progress/SLA
+  bar).
+- **Available** — the slot is empty and advertising capacity. When `incoming` is set it reserves an arriving item with a
+  countdown that can auto-accept.
 
 Tiles are designed to sit side by side in a horizontal rail; each is a fixed-width block with a right divider.
 
@@ -31,7 +33,8 @@ Tiles are designed to sit side by side in a horizontal rail; each is a fixed-wid
 
 ### Active Tile
 
-The default (occupied) face. Set `header` for the top bar, `icon` + `color` for the leading badge, and `title`/`subtitle` for the item. The `progress` value (0–100) fills the SLA bar along the bottom edge.
+The default (occupied) face. Set `header` for the top bar, `icon` + `color` for the leading badge, and `title`/
+`subtitle` for the item. The `progress` value (0–100) fills the SLA bar along the bottom edge.
 
 ```html:preview
 <div style="display: flex;">
@@ -49,7 +52,8 @@ The default (occupied) face. Set `header` for the top bar, `icon` + `color` for
 
 ### Available Tile
 
-Set `available` to render the empty face. When `title` is omitted it defaults to "Available". The leading slot shows a built-in accept button.
+Set `available` to render the empty face. When `title` is omitted it defaults to "Available". The leading slot shows a
+built-in accept button.
 
 ```html:preview
 <div style="display: flex;">
@@ -59,7 +63,8 @@ Set `available` to render the empty face. When `title` is omitted it defaults to
 
 ### Accepting an Item
 
-Provide `accept-uri` and the built-in accept button becomes a link to it. When a tile is accepted, a cancelable `zn-accept` event fires before the fetch — call `preventDefault()` on it to take over the accept yourself.
+Provide `accept-uri` and the built-in accept button becomes a link to it. When a tile is accepted, a cancelable
+`zn-accept` event fires before the fetch — call `preventDefault()` on it to take over the accept yourself.
 
 ```html:preview
 <div style="display: flex;">
@@ -74,7 +79,9 @@ Provide `accept-uri` and the built-in accept button becomes a link to it. When a
 
 ### Incoming with Auto-Accept
 
-An `available` tile with `incoming` reserves an arriving item. Provide `reserved-until` (an epoch in seconds or milliseconds marking the end of the window) and `auto-accept-delay` (the window length in milliseconds) to drive the countdown overlay. When the window elapses the tile auto-accepts via `accept-uri`.
+An `available` tile with `incoming` reserves an arriving item. Provide `reserved-until` (an epoch in seconds or
+milliseconds marking the end of the window) and `auto-accept-delay` (the window length in milliseconds) to drive the
+countdown overlay. When the window elapses the tile auto-accepts via `accept-uri`.
 
 ```html:preview
 <div style="display: flex;">
@@ -118,7 +125,8 @@ Add `rejectable` to an incoming tile to offer a reject control. Pressing it emit
 
 ### Colors
 
-The `color` attribute sets the accent (the leading icon badge and the `--channel-tile-color` custom property). Available colors are: `default`, `primary`, `info`, `success`, `warning`, `error`, and `disabled`.
+The `color` attribute sets the accent (the leading icon badge and the `--channel-tile-color` custom property). Available
+colors are: `default`, `primary`, `info`, `success`, `warning`, `error`, and `disabled`.
 
 ```html:preview
 <div style="display: flex; flex-wrap: wrap;">
@@ -131,6 +139,21 @@ The `color` attribute sets the accent (the leading icon badge and the `--channel
 </div>
 ```
 
+### Custom Title and Subtitle
+
+The `title` and `subtitle` attributes cover plain text. For richer content, use the `title` and `subtitle` slots — they
+override the matching attribute (which is used as the fallback when the slot is empty).
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile header="Acme Support" icon="chat" color="info" progress="60"
+                   progress-color="rgb(var(--zn-color-info))">
+    <span slot="title">Jane <strong>Cooper</strong></span>
+    <span slot="subtitle">Billing question · <a href="#">#4821</a></span>
+  </zn-channel-tile>
+</div>
+```
+
 ### Custom Leading Content
 
 Use the `leading` slot to replace the leading icon in the active state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button/button.component.ts

@@ -60,7 +60,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @queryAll('.loading-countdown') countdownContainer: HTMLElement[];
 
   @property({}) color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |
-    'transparent' | 'star' | 'white' | (string & Record<never, never>) = 'default';
+    'transparent' | 'star' | (string & Record<never, never>) = 'default';
   @property({attribute: 'hover-color'}) hoverColor: string;
   @property({type: Boolean}) text = false;
   @property({type: Boolean}) outline = false;
@@ -388,7 +388,6 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--warning': this.color === 'warning',
           'button--transparent': this.color === 'transparent',
           'button--star': this.color === 'star',
-          'button--white': this.color === 'white',
           'button--outline': this.outline,
           'button--text': (this.text && !this.outline),
           'button--icon-button': !!this.iconButton,

package/src/components/button/button.scss

@@ -244,22 +244,6 @@
   }
 }
 
-/**
- * White: white panel background with a neutral border, matching the
- * icon-button look but for normal (auto-width, text) buttons.
- *
- * Doubled-up selector so it out-cascades the standard/secondary combos.
- */
-.button.button--white {
-  background: rgb(var(--zn-panel));
-  border-color: var(--zn-button-border-color, rgb(var(--zn-border-color)));
-  color: rgb(var(--zn-text));
-
-  &:hover:not([disabled]), &:active:not([disabled]) {
-    background: rgba(var(--zn-color-tab), 0.5);
-  }
-}
-
 /**
  * Icon buttons
  *
@@ -489,4 +473,10 @@
 
 .button--panel-bg {
   background: rgb(var(--zn-panel));
+  border-color: var(--zn-button-border-color, rgb(var(--zn-border-color)));
+  color: rgb(var(--zn-text));
+
+  &:hover:not([disabled]), &:active:not([disabled]) {
+    background: rgba(var(--zn-color-tab), 0.5);
+  }
 }

package/src/components/channel-tile/channel-tile.component.ts

@@ -23,6 +23,8 @@ export type ChannelTileColor =
  *  Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.
  * @event zn-reject - Emitted when the reject control is pressed.
  *
+ * @slot title - Replaces the primary line. Falls back to the `title` attribute (or "Available" when unset in the available state).
+ * @slot subtitle - Replaces the secondary line. Falls back to the `subtitle` attribute.
  * @slot leading - Replaces the leading icon in the active state.
  * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.
  * @slot footer - Trailing content (e.g. status badges) in the active state.
@@ -213,8 +215,8 @@ export default class ZnChannelTile extends ZincElement {
         <div class="channel-tile__body">
           ${this._renderLeading()}
           <div class="channel-tile__content">
-            <h3 class="channel-tile__title">${title}</h3>
-            <p class="channel-tile__subtitle">${this.subtitle}</p>
+            <h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
+            <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>
           </div>
           <slot name="footer" class="channel-tile__footer"></slot>
         </div>

package/src/components/collapsible/collapsible.component.ts

@@ -20,6 +20,8 @@ import styles from './collapsible.scss';
  *
  * @slot header - Clicking will toggle the show state of the data
  *
+ * @csspart header - The header row (toggle).
+ * @csspart caption - The caption text.
  */
 export default class ZnCollapsible extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -51,7 +53,7 @@ export default class ZnCollapsible extends ZincElement {
 
   protected _store: Store;
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'header', 'caption', 'label');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'header', 'caption', 'label', 'description');
 
   private readonly observer = new MutationController(this, {
     target: null,
@@ -137,14 +139,17 @@ export default class ZnCollapsible extends ZincElement {
 
     return html`
       <div @click="${() => (!this.expanded ? (this.expanded = true) : '')}">
-        <slot name="header" class="header" @click="${this.handleCollapse}">
+        <slot name="header" part="header" class="header" @click="${this.handleCollapse}">
           <div class="header__left">
-            <p class="caption">
+            <p part="caption" class="caption">
               <slot name="caption">${this.caption}</slot>
             </p>
-            <p class="description">
-              <slot name="description">${this.description}</slot>
-            </p>
+            ${this.description || this.hasSlotController.test('description')
+              ? html`
+                <p class="description">
+                  <slot name="description">${this.description}</slot>
+                </p>`
+              : ''}
           </div>
           <div class="header__right">
             <slot name="label"><p class="label">${this.label}</p></slot>

package/src/components/data-table/data-table.component.ts

@@ -722,14 +722,14 @@ export default class ZnDataTable extends ZincElement {
 
     return html`
       <div class="table__footer__pagination-buttons">
-        <zn-button color="white"
-                   @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
+        <zn-button @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
                    ?disabled="${this.page === 1}"
-                   icon="arrow_left@lu">First
+                   icon="arrow_left@lu"
+                   panel-bg>First
         </zn-button>
-        <zn-button color="white"
-                   @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
-                   ?disabled="${this.page === 1}">Back
+        <zn-button @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
+                   ?disabled="${this.page === 1}"
+                   panel-bg>Back
         </zn-button>
         ${this.getPageRange().map((p) => p === 'ellipsis'
           ? html`<span class="table__footer__pagination-ellipsis">…</span>`
@@ -739,15 +739,15 @@ export default class ZnDataTable extends ZincElement {
                        class="${p === this.page ? 'table__footer__pagination-page--active' : ''}">${p}
             </zn-button>`
         )}
-        <zn-button color="white"
-                   @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
-                   ?disabled="${this.page === this.totalPages}">Next
+        <zn-button @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
+                   ?disabled="${this.page === this.totalPages}"
+                   panel-bg>Next
         </zn-button>
-        <zn-button color="white"
-                   @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
+        <zn-button @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
                    ?disabled="${this.page === this.totalPages}"
                    icon="arrow_right@lu"
-                   icon-position="right">Last
+                   icon-position="right"
+                   panel-bg>Last
         </zn-button>
       </div>`;
   }