@kubex/zinc 1.0.23 → 1.0.25

package/dist/custom-elements.json

@@ -1644,6 +1644,171 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/button-group/button-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnButtonGroup",
+          "cssProperties": [
+            {
+              "description": "Use flex-grow to fill available space.",
+              "name": "--grow"
+            },
+            {
+              "description": "Justify content at the start of the flex space.",
+              "name": "--start"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "attribute": "direction"
+            },
+            {
+              "kind": "field",
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "grow"
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "wrap"
+            },
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "start"
+            },
+            {
+              "kind": "field",
+              "name": "gap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "gap"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "fieldName": "direction"
+            },
+            {
+              "name": "grow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "grow"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "start",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "start"
+            },
+            {
+              "name": "gap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "gap"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "button-group",
+          "tagName": "zn-button-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/button-group\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 *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --grow - Use flex-grow to fill available space.\n * @cssproperty --start - Justify content at the start of the flex space.\n */",
+          "documentation": "https://zinc.style/components/button-group",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnButtonGroup",
+            "module": "components/button-group/button-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button-menu/button-menu.js",
@@ -1929,171 +2094,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnButtonGroup",
-          "cssProperties": [
-            {
-              "description": "Use flex-grow to fill available space.",
-              "name": "--grow"
-            },
-            {
-              "description": "Justify content at the start of the flex space.",
-              "name": "--start"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "attribute": "direction"
-            },
-            {
-              "kind": "field",
-              "name": "grow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "grow"
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "wrap"
-            },
-            {
-              "kind": "field",
-              "name": "start",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "start"
-            },
-            {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "gap"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "fieldName": "direction"
-            },
-            {
-              "name": "grow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "grow"
-            },
-            {
-              "name": "wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "wrap"
-            },
-            {
-              "name": "start",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "start"
-            },
-            {
-              "name": "gap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "gap"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "button-group",
-          "tagName": "zn-button-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/button-group\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 *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --grow - Use flex-grow to fill available space.\n * @cssproperty --start - Justify content at the start of the flex space.\n */",
-          "documentation": "https://zinc.style/components/button-group",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/chart/chart.js",
@@ -26867,7 +26867,7 @@
               "type": {
                 "text": "Record<string, string>"
               },
-              "default": "{ 'en': 'English' }",
+              "default": "{ 'en': 'EN' }",
               "attribute": "languages"
             },
             {
@@ -27002,7 +27002,7 @@
               "type": {
                 "text": "Record<string, string>"
               },
-              "default": "{ 'en': 'English' }",
+              "default": "{ 'en': 'EN' }",
               "fieldName": "languages"
             },
             {
@@ -27275,7 +27275,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.0.23",
+    "version": "1.0.25",
     "author": "",
     "license": "MIT"
   }

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

@@ -212,6 +212,26 @@
         }
       ]
     },
+    {
+      "name": "zn-button-group",
+      "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\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "direction",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        { "name": "grow", "values": [] },
+        { "name": "wrap", "values": [] },
+        { "name": "start", "values": [] },
+        { "name": "gap", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/button-group"
+        }
+      ]
+    },
     {
       "name": "zn-button-menu",
       "description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
@@ -241,26 +261,6 @@
         }
       ]
     },
-    {
-      "name": "zn-button-group",
-      "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\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "direction",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-        },
-        { "name": "grow", "values": [] },
-        { "name": "wrap", "values": [] },
-        { "name": "start", "values": [] },
-        { "name": "gap", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/button-group"
-        }
-      ]
-    },
     {
       "name": "zn-chart",
       "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.",

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.0.23",
+  "version": "1.0.25",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -395,52 +395,6 @@
             ]
           }
         },
-        {
-          "name": "zn-button-menu",
-          "description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "max-width", "value": { "type": "number" } },
-            { "name": "containerWidth", "value": { "type": "number" } },
-            { "name": "limit", "value": { "type": "number", "default": "-1" } },
-            {
-              "name": "max-level",
-              "value": { "type": "number", "default": "2" }
-            },
-            {
-              "name": "size",
-              "value": {
-                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "icon-size",
-              "value": { "type": "number", "default": "24" }
-            },
-            { "name": "no-gap", "value": { "type": "boolean" } },
-            { "name": "no-padding", "value": { "type": "boolean" } }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "maxWidth", "type": "number" },
-              { "name": "containerWidth", "type": "number" },
-              { "name": "limit", "type": "number" },
-              { "name": "maxLevel", "type": "number" },
-              {
-                "name": "size",
-                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'"
-              },
-              { "name": "iconSize", "type": "number" },
-              { "name": "noGap", "type": "boolean" },
-              { "name": "noPadding", "type": "boolean" },
-              { "name": "handleResize" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "zn-button-group",
           "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\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -491,6 +445,52 @@
             ]
           }
         },
+        {
+          "name": "zn-button-menu",
+          "description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "max-width", "value": { "type": "number" } },
+            { "name": "containerWidth", "value": { "type": "number" } },
+            { "name": "limit", "value": { "type": "number", "default": "-1" } },
+            {
+              "name": "max-level",
+              "value": { "type": "number", "default": "2" }
+            },
+            {
+              "name": "size",
+              "value": {
+                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "icon-size",
+              "value": { "type": "number", "default": "24" }
+            },
+            { "name": "no-gap", "value": { "type": "boolean" } },
+            { "name": "no-padding", "value": { "type": "boolean" } }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "maxWidth", "type": "number" },
+              { "name": "containerWidth", "type": "number" },
+              { "name": "limit", "type": "number" },
+              { "name": "maxLevel", "type": "number" },
+              {
+                "name": "size",
+                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'"
+              },
+              { "name": "iconSize", "type": "number" },
+              { "name": "noGap", "type": "boolean" },
+              { "name": "noPadding", "type": "boolean" },
+              { "name": "handleResize" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-chart",
           "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.",
@@ -6998,7 +6998,7 @@
               "name": "languages",
               "value": {
                 "type": "Record<string, string>",
-                "default": "{ 'en': 'English' }"
+                "default": "{ 'en': 'EN' }"
               }
             },
             {

package/dist/zn.d.ts

@@ -6688,12 +6688,12 @@ declare module "components/audio-select/index" {
     }
 }
 declare module "components/translations/translations.component" {
+    import type { PropertyValues } from 'lit';
+    import type { ZincFormControl } from "internal/zinc-element";
     import ZincElement from "internal/zinc-element";
     import ZnInlineEdit from "components/inline-edit/index";
     import ZnInput from "components/input/index";
     import ZnNavbar from "components/navbar/index";
-    import type { PropertyValues } from 'lit';
-    import type { ZincFormControl } from "internal/zinc-element";
     export default class ZnTranslations extends ZincElement implements ZincFormControl {
         static styles: import("lit").CSSResult;
         static dependencies: {

package/dist/zn.min.js

@@ -626,7 +626,7 @@ function print() { __p += __j.call(arguments, '') }
         </div>`:T`
       <div class="table__head__sort table__head__sort--active">
         <zn-icon src="arrow_upward_alt" size="16"></zn-icon>
-      </div>`}renderCellHeader(i){var a;let n=!Object.values(this.unsortableHeaders).includes(i.key)&&!Object.values(this.hiddenHeaders).includes(i.key)&&!this.unsortable,r=(a=Object.values(this.headers).filter(s=>s.hideHeader||s.hideColumn||Object.values(this.hiddenColumns).includes(s.key)?!1:!s.secondary).slice(-1)[0])==null?void 0:a.key;return T`
+      </div>`}renderCellHeader(i){var a;let n=!Object.values(this.unsortableHeaders).includes(i.key)&&!Object.values(this.hiddenHeaders).includes(i.key)&&!this.unsortable&&i.sortable!==!1,r=(a=Object.values(this.headers).filter(s=>s.hideHeader||s.hideColumn||Object.values(this.hiddenColumns).includes(s.key)?!1:!s.secondary).slice(-1)[0])==null?void 0:a.key;return T`
       <th
         class="${ce({table__head:!0,"table__head--wide":i.key===this.wideColumn,"table__head--last":i.key===r,"table__head--hidden":Object.values(this.hiddenHeaders).includes(i.key)})}"
         @click="${n?this.updateSort(i.key):void 0}">
@@ -1887,12 +1887,13 @@ rect.legend-mouseover-inactive,
           }
         </style>${d}`:d}};Ui.styles=Z(uA),y([_({attribute:"full-location"})],Ui.prototype,"fullLocation",2),y([_({attribute:"entity-id"})],Ui.prototype,"entityId",2),y([_({attribute:"entity-id-show",type:Boolean})],Ui.prototype,"entityIdShow",2),y([_({type:Boolean})],Ui.prototype,"transparent",2),y([_()],Ui.prototype,"caption",2),y([_()],Ui.prototype,"icon",2),y([_()],Ui.prototype,"description",2),y([_({type:Array})],Ui.prototype,"navigation",2),y([_({attribute:"full-width",type:Boolean})],Ui.prototype,"fullWidth",2),y([_({attribute:"previous-path"})],Ui.prototype,"previousPath",2),y([_({attribute:"previous-target"})],Ui.prototype,"previousTarget",2),y([He("navigation",{waitUntilFirstUpdate:!0})],Ui.prototype,"updateNav",1);var OU=Ui;Ui.define("zn-header");var pA=te`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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: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:block}.navbar__container{display:flex;flex-direction:row;position:relative;justify-content:space-between}.navbar{margin:0;padding-left:var(--zn-spacing-medium)}.navbar--flush{padding:0}ul.navbar li{padding-top:0;font-size:var(--zn-font-size-medium);white-space:nowrap}:host([baseless]) .navbar__container{border-bottom:none}:host([stacked]){width:unset;height:100%;margin:0 0}:host([stacked]) .navbar__container{border-bottom:none;height:100%}:host([stacked]) ul.navbar.navbar--no-pad li{padding:0 !important}:host([stacked]) ul.navbar{padding:0;flex-direction:column;gap:0}:host([stacked]) ul.navbar li{border-bottom:1px solid rgb(var(--zn-border-color));padding:var(--zn-spacing-medium)}:host([stacked]) ul.navbar li.active:before,:host([stacked]) ul.navbar li.zn-tb-active:before{display:none}:host([stacked]) ul.navbar li.zn-tb-active{background-color:rgb(var(--zn-panel))}:host([stacked]) ul.navbar li:hover:before{left:0;right:0}:host([stacked]) ul.navbar--slim li{padding:var(--zn-spacing-small)}:host([stacked][slot=left]) ul.navbar--border{border-right:1px solid rgb(var(--zn-border-color))}:host([stacked][slot=right]) ul.navbar--border{border-left:1px solid rgb(var(--zn-border-color))}:host([panel]){background:rgb(var(--zn-panel))}:host([icon-bar]) ul.navbar{display:flex;flex-direction:row;gap:5px;padding:5px;border-radius:10px;margin:0;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));flex-basis:100%;min-height:50px}:host([icon-bar]) ul.navbar li{flex-direction:column;border-radius:6px;flex-basis:100%;padding:5px 10px}:host([icon-bar]) ul.navbar li:before{display:none !important}:host([icon-bar]) ul.navbar li.active,:host([icon-bar]) ul.navbar li.zn-tb-active{background:rgba(0,0,0,0.03);color:rgb(var(--zn-primary))}:host([icon-bar]) ul.navbar li:hover{color:rgb(var(--zn-primary))}:host([icon-bar]) .navbar__container{border-bottom:0}.navbar__container--stacked{display:inline}ul.navbar.navbar--stacked.navbar--icon-bar{flex-direction:column;padding:0;gap:0}ul.navbar.navbar--stacked.navbar--icon-bar li{border-radius:0;align-items:flex-start;padding:8px}:host(:not([stacked]):not([icon-bar])) ul.navbar{height:35px;align-self:end}:host([pad]) ul.navbar{padding:var(--zn-spacing-medium) var(--zn-spacing-medium) 0}:host{display:block;width:100%}:host .navbar__container{border-bottom:1px solid rgb(var(--zn-border-color))}:host ul.navbar{display:flex;flex-basis:fit-content;gap:30px;list-style:none}:host ul.navbar li.more{display:none}:host ul.navbar.has-hidden li.more{display:flex}:host ul.navbar li{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:500;padding:0 0 var(--zn-spacing-small);position:relative;display:flex;align-items:center;justify-content:center;gap:3px;cursor:pointer}:host ul.navbar li.hidden{visibility:hidden;position:absolute;pointer-events:none}:host ul.navbar li .closer{display:none}:host ul.navbar li zn-icon,:host ul.navbar li zn-tooltip{pointer-events:none}:host ul.navbar li#dropdown-item{flex-grow:1;justify-content:flex-start;padding:0}:host ul.navbar li#dropdown-item zn-dropdown{height:100%}:host ul.navbar li#dropdown-item zn-dropdown zn-button{height:100%}:host ul.navbar li::before{content:"";left:50%;right:50%;bottom:0;position:absolute;background-color:rgb(var(--zn-primary));transition:all 300ms ease-in-out;height:2px}:host ul.navbar li:hover:before:not(#dropdown-item){left:-2px;right:-2px}:host ul.navbar li.active,:host ul.navbar li.zn-tb-active{color:rgb(var(--zn-primary));font-weight:var(--zn-font-weight-semibold)}:host ul.navbar li.active::before,:host ul.navbar li.zn-tb-active::before{left:calc(var(--zn-spacing-medium) * -1);right:calc(var(--zn-spacing-medium) * -1)}:host ul.navbar li[closable] .closer{display:block;margin-left:10px;pointer-events:all;opacity:0.8}:host ul.navbar li[closable] .closer:hover{opacity:1}:host([small]){width:unset}:host([small]) ul.navbar{padding:0;gap:0;border-radius:5px}:host([small]) ul.navbar li{border-left:1px solid rgb(var(--zn-border-color));border-radius:0}:host([small]) ul.navbar li:first-of-type{border-left:none}button[popovertarget]{display:flex;justify-content:center;align-items:center}:host([highlight]){margin:0 0}:host([highlight]) .navbar__container{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(var(--zn-border-color));height:35px}:host([highlight]):host([dropdown]) li{border-bottom:0}:host([highlight]) ul.navbar{gap:0;overflow:initial}:host([highlight]) ul.navbar li{padding-left:var(--zn-spacing-medium);padding-right:var(--zn-spacing-medium);padding-top:var(--zn-spacing-small);position:relative}:host([highlight]) ul.navbar li:hover::before,:host([highlight]) ul.navbar li::before:not(.active):not(#dropdown-item){display:none}:host([highlight]) ul.navbar li.active{border-right:1px solid rgb(var(--zn-border-color))}:host([highlight]) ul.navbar li.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:rgb(var(--zn-panel))}:host([highlight]) .active{background-color:rgb(var(--zn-panel))}:host([dropdown]) ul.navbar li{border-bottom:1px solid rgb(var(--zn-border-color));border-right:1px solid rgb(var(--zn-border-color));border-right:1px solid rgb(var(--zn-border-color));border-left:0}:host([dropdown]) ul.navbar li.active{border-bottom:0}:host([dropdown]) ul.navbar li:before{display:none}:host([dropdown]) ul.navbar li#dropdown-item{border-right:0}.expandables{flex-grow:0;flex-shrink:1;margin:0 var(--zn-spacing-medium);display:flex;align-items:center;width:-moz-fit-content;width:fit-content;height:100%;gap:var(--zn-spacing-2x-small)}.expandables:empty{display:none}:host ul.navbar li.more zn-button::part(base){padding-left:0;padding-right:0}:host ul.navbar li.more zn-button::part(base):hover{background-color:transparent}:host ul.navbar li.more ul#extended-menu{box-shadow:var(--zn-shadow-medium);background:rgb(var(--zn-border-color));display:flex;flex-direction:column;gap:1px;height:auto;width:-moz-fit-content;width:fit-content;margin:0;padding:1px}:host ul.navbar li.more ul#extended-menu li{justify-content:left;background:rgb(var(--zn-panel));color:rgb(var(--zn-text));padding:var(--zn-spacing-small)}:host ul.navbar li.more ul#extended-menu li.active::before,:host ul.navbar li.more ul#extended-menu li.zn-tb-active::before{left:0;right:0}`;var Ti=class extends J{constructor(){super(...arguments);this.navigation=[];this.flush=!1;this.dropdown=[];this.manualAddItems=!1;this.isolated=!1;this._openedTabs=[];this.resizeObserver=null;this._navItems=null;this._expandable=null;this._extendedMenu=null;this._navItemsGap=0;this._expandableMargin=0;this._totalItemWidth=0;this.handleResize=()=>{var d,f,h,p,m,v;if(this._totalItemWidth===0||this._extendedMenu===null||this.iconBar||this.stacked)return;let i=this._expandableMargin+(((d=this._expandable)==null?void 0:d.offsetWidth)||0),n=(((f=this._navItems)==null?void 0:f.querySelectorAll("li.hidden").length)||0)>0;if(!n&&i+this._totalItemWidth<=this.offsetWidth){(h=this._navItems)==null||h.classList.toggle("has-hidden",!1);return}let r=this.parentElement,a=this.offsetWidth||(r==null?void 0:r.offsetWidth)||0;for(;a===0&&(r!=null&&r.parentElement);)r=r.parentElement,a=r.offsetWidth||0;a-=i;let s=0,l=!1,c=((p=this._navItems)==null?void 0:p.querySelectorAll(":scope > li"))||[];this._extendedMenu.innerHTML="";for(let b of c){if(b.classList.contains("more")||!(b instanceof HTMLElement))continue;let x=b.offsetWidth+this._navItemsGap+5;if(l||x+s>a){let k=b.cloneNode(!0);k.classList.remove("hidden"),k.addEventListener("click",()=>{var z,E;b.click(),(E=((z=this.shadowRoot)==null?void 0:z.querySelector("#extended-dropdown"))||null)==null||E.hide()}),(m=this._extendedMenu)==null||m.appendChild(k),b.classList.add("hidden"),n=!0,l=!0}else b.classList.remove("hidden"),s+=x}(v=this._navItems)==null||v.classList.toggle("has-hidden",n&&l)};this.handleClick=i=>{let n=i.composedPath(),r=this.isolated?"data-tab":"tab",a=n.find(s=>s instanceof HTMLElement&&s.tagName==="LI"&&(s.hasAttribute(r)||s.hasAttribute("tab-uri")));a&&(i.stopPropagation(),this.emit("zn-select",{detail:{item:a}}))}}appendItem(i){this._appended=this._appended||[],this._appended.push(i)}connectedCallback(){super.connectedCallback(),this._preItems=this.querySelectorAll("li:not([suffix])"),this._postItems=this.querySelectorAll("li[suffix]"),this._expanding=this.querySelectorAll("zn-expanding-action"),this.resizeObserver=new ResizeObserver(this.handleResize.bind(this)),this.resizeObserver.observe(this)}addItem(i){var s,l;let n=i.getAttribute("tab-uri");if(typeof n!="string"||this._openedTabs.includes(n))return;this._openedTabs.push(n);let r=(s=this.shadowRoot)==null?void 0:s.querySelector("ul"),a=(l=this.shadowRoot)==null?void 0:l.querySelector('[id="dropdown-item"]');a.querySelector("zn-dropdown").hide(),a?r==null||r.insertBefore(i,a):r==null||r.appendChild(i)}firstUpdated(i){var n,r,a,s;if(super.firstUpdated(i),this._extendedMenu=((n=this.shadowRoot)==null?void 0:n.querySelector("#extended-menu"))||null,this._expandable=((r=this.shadowRoot)==null?void 0:r.querySelector(".navbar__container > div.expandables"))||null,this._expandable){let l=getComputedStyle(this._expandable);this._expandableMargin=parseInt(l.marginLeft)+parseInt(l.marginRight)}if(this._navItems=((a=this.shadowRoot)==null?void 0:a.querySelector(".navbar__container > ul"))||null,this._navItems){let l=getComputedStyle(this._navItems);this._navItemsGap=parseInt(l.columnGap)}if(setTimeout(()=>{var c;let l=((c=this._navItems)==null?void 0:c.querySelectorAll("li"))||[];for(let d of l)this._totalItemWidth+=d.offsetWidth+this._navItemsGap;this.handleResize()},100),this.dropdown.length>0){let l=(s=this.shadowRoot)==null?void 0:s.querySelector("zn-menu");l&&l.addEventListener("zn-menu-select",c=>{if(this.manualAddItems)return;if(c.detail.element.hasAttribute("data-path")){let f=document.createElement("li");f.setAttribute("tab-uri",c.detail.element.getAttribute("data-path")),f.innerText=c.detail.value,this.addItem(f),setTimeout(()=>{f.click()},300)}})}}showMore(){}render(){var n,r,a;this.navigation||(this.navigation=[]);let i=((n=this.navigation)==null?void 0:n.length)+((r=this._preItems)==null?void 0:r.length)+((a=this._postItems)==null?void 0:a.length);return this._expanding.length===0&&(i===0||i<2&&this.hideOne)&&(this.style.display="none"),T`
       <div class="${ce({navbar__container:!0,"navbar__container--stacked":this.stacked,"navbar__container--icon-bar":this.iconBar})}">
-        <ul @click="${this.handleClick}" class="${ce({navbar:!0,"navbar--slim":this.slim,"navbar--border":this.border,"navbar--flush":this.flush,"navbar--no-pad":this.noPad,"navbar--stacked":this.stacked,"navbar--icon-bar":this.iconBar})}">
+        <ul @click="${this.handleClick}" part="navbar" class="${ce({navbar:!0,"navbar--slim":this.slim,"navbar--border":this.border,"navbar--flush":this.flush,"navbar--no-pad":this.noPad,"navbar--stacked":this.stacked,"navbar--icon-bar":this.iconBar})}">
           ${this._preItems}
           ${this.navigation.map(s=>{let l=T`${s.title}`;return s.icon!=null&&s.icon!=""&&(l=T`
                 <zn-icon src="${s.icon}"></zn-icon>${l}`),s.path!=null?T`
-                <li class="${ce({active:s.active})}" tab-uri="${s.path}">${l}</li>`:T`
+                <li class="${ce({active:s.active})}" part="navbar-item" tab-uri="${s.path}">${l}</li>`:T`
               <li class="${ce({active:s.active})}"
+                  part="navbar-item"
                   tab="${ke(this.isolated?void 0:s.tab)}"
                   data-tab="${ke(this.isolated?s.tab:void 0)}">
                 ${l}
@@ -1909,7 +1910,7 @@ rect.legend-mouseover-inactive,
           ${this.dropdown&&this.dropdown.length>0?T`
             <li id="dropdown-item">
               <zn-dropdown>
-                <zn-button slot="trigger" color="secondary" square grow>
+                <zn-button slot="trigger" part="button" exportparts="base:button__base" color="secondary" square grow>
                   <zn-icon src="add" size="18"></zn-icon>
                 </zn-button>
                 <zn-menu actions="${JSON.stringify(this.dropdown)}"></zn-menu>
@@ -1918,7 +1919,10 @@ rect.legend-mouseover-inactive,
           ${this._postItems}
           ${this._appended}
         </ul>
-        <div class="expandables">${this._expanding}</div>
+        <div class="expandables">
+          ${this._expanding}
+          <slot name="expand"></slot>
+        </div>
       </div>`}};Ti.styles=Z(pA),Ti.dependencies={"zn-dropdown":Na},y([_({attribute:"navigation",type:Array})],Ti.prototype,"navigation",2),y([_({attribute:"full-width",type:Boolean,reflect:!0})],Ti.prototype,"fullWidth",2),y([_({attribute:"icon-bar",type:Boolean,reflect:!0})],Ti.prototype,"iconBar",2),y([_({attribute:"slim",type:Boolean,reflect:!0})],Ti.prototype,"slim",2),y([_({attribute:"border",type:Boolean,reflect:!0})],Ti.prototype,"border",2),y([_({attribute:"hide-one",type:Boolean,reflect:!0})],Ti.prototype,"hideOne",2),y([_({attribute:"flush",type:Boolean,reflect:!0})],Ti.prototype,"flush",2),y([_({type:Boolean})],Ti.prototype,"stacked",2),y([_({type:Array})],Ti.prototype,"dropdown",2),y([_({attribute:"no-pad",type:Boolean})],Ti.prototype,"noPad",2),y([_({attribute:"manual-add-items",type:Boolean})],Ti.prototype,"manualAddItems",2),y([_({type:Boolean})],Ti.prototype,"isolated",2),y([_()],Ti.prototype,"_appended",2);var ww=Ti;Ti.define("zn-navbar");var rn=(o="value")=>(t,i)=>{let n=t.constructor,r=n.prototype.attributeChangedCallback;n.prototype.attributeChangedCallback=function(a,s,l){var f;let c=n.getPropertyOptions(o),d=typeof c.attribute=="string"?c.attribute:o;if(a===d){let h=c.converter||yd,m=(typeof h=="function"?h:(f=h==null?void 0:h.fromAttribute)!=null?f:yd.fromAttribute)(l,c.type);this[o]!==m&&(this[i]=m)}r.call(this,a,s,l)}};function ha(o,t,i){return new Promise(n=>{if((i==null?void 0:i.duration)===1/0)throw new Error("Promise-based animations must be finite.");let r=o.animate(t,et(Ce({},i),{duration:DU()?0:i.duration}));r.addEventListener("cancel",n,{once:!0}),r.addEventListener("finish",n,{once:!0})})}function DU(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function kw(o){return Promise.all(o.getAnimations().map(t=>new Promise(i=>{t.cancel(),requestAnimationFrame(i)})))}var gA=new Map,$U=new WeakMap;function IU(o){return o!=null?o:{keyframes:[],options:{duration:0}}}function mA(o,t){return t.toLowerCase()==="rtl"?{keyframes:o.rtlKeyframes||o.keyframes,options:o.options}:o}function ua(o,t){gA.set(o,IU(t))}function pa(o,t,i){let n=$U.get(o);if(n!=null&&n[t])return mA(n[t],i.dir);let r=gA.get(t);return r?mA(r,i.dir):{keyframes:[],options:{duration:0}}}var bA=te`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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: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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.select{flex:1 1 auto;display:inline-flex;width:100%;position:relative;vertical-align:middle}.select::part(popup){z-index:var(--zn-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{flex:1;display:flex;width:100%;min-width:0;position:relative;align-items:center;justify-content:start;font-family:var(--zn-input-font-family);font-weight:var(--zn-input-font-weight);letter-spacing:var(--zn-input-letter-spacing);box-shadow:var(--zn-shadow-x-small);vertical-align:middle;overflow:hidden;cursor:pointer;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) box-shadow,var(--zn-transition-fast) background-color}.select__prefix{display:flex;align-items:center;align-self:stretch;height:100%}.select__display-input{position:relative;width:100%;font:inherit;border:none;background:none;color:var(--zn-input-color);cursor:inherit;overflow:hidden;padding:0;margin:0;-webkit-appearance:none}.select__display-input::-moz-placeholder{color:var(--zn-input-placeholder-color)}.select__display-input::placeholder{color:var(--zn-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--zn-input-color-hover)}.select__display-input:focus{outline:none}.select--multiple:not(.select--placeholder-visible) .select__display-input{position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;opacity:0}.select__value-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:-1}.select__tags{display:flex;flex:1;align-items:center;flex-wrap:wrap;margin-inline-start:var(--zn-spacing-2x-small)}.select__tags::slotted(zn-chip){cursor:pointer !important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(zn-chip){cursor:not-allowed !important}.select--standard .select__combobox{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);color:var(--zn-input-color-disabled);opacity:0.5;cursor:not-allowed;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus);box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.select--standard:hover:not(.select--disabled) .select__combobox{background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.select--small .select__combobox{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small);min-height:var(--zn-input-height-small);padding-block:0;padding-inline:var(--zn-input-spacing-small)}.select--small .select__clear{margin-inline-start:var(--zn-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-small)}.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-block:2px;padding-inline-start:0}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium);min-height:var(--zn-input-height-medium);padding-block:0;padding-inline:var(--zn-input-spacing-medium)}.select--has-input-prefix.select--medium .select__combobox{padding-inline-start:0}.select--medium .select__clear{margin-inline-start:var(--zn-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-medium)}.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-inline-start:0;padding-block:3px}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large);min-height:var(--zn-input-height-large);padding-block:0;padding-inline:var(--zn-input-spacing-large)}.select--has-input-prefix.select--large .select__combobox{padding-inline-start:0}.select--large .select__clear{margin-inline-start:var(--zn-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--zn-input-spacing-large)}.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox{padding-inline-start:0;padding-block:4px}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-large)}.select--pill.select--medium .select__combobox{border-radius:var(--zn-input-height-medium);padding:0 var(--zn-spacing-large)}.select--pill.select--large .select__combobox{border-radius:var(--zn-input-height-large);padding:0 var(--zn-spacing-large)}.select__prefix{flex:0;display:inline-flex;align-items:center;color:var(--zn-input-icon-color)}.select--has-input-prefix.select--standard .select__combobox{padding-inline-start:0}.select__clear{display:inline-flex;align-items:center;justify-content:center;font-size:var(--zn-font-size-large);color:var(--zn-input-icon-color);border:none;background:none;padding:0;transition:var(--zn-transition-fast) color;cursor:pointer}.select__clear zn-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}.select__clear:hover{color:var(--zn-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{flex:0 0 auto;display:flex;align-items:center;transition:var(--zn-transition-medium) rotate ease;rotate:0;margin-inline-start:var(--zn-spacing-small)}.select__expand-icon zn-icon{--icon-size:var(--zn-font-size-large);--icon-color:var(--zn-input-icon-color)}.select--open .select__expand-icon{rotate:-180deg}.select__listbox{display:block;position:relative;font-family:var(--zn-font-sans);font-size:var(--zn-font-size-medium);font-weight:var(--zn-font-weight-normal);box-shadow:var(--zn-shadow-medium);background:var(--zn-panel-background-color);border:solid var(--zn-panel-border-width) var(--zn-panel-border-color);border-radius:var(--zn-border-radius-medium);margin:var(--zn-spacing-x-small) 0;padding-block:var(--zn-spacing-x-small);padding-inline:0;overflow:auto;overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:min(500px,var(--auto-size-available-height))}.select__listbox ::slotted(zn-divider){--spacing:var(--zn-spacing-x-small)}.select__listbox ::slotted(small){font-size:var(--zn-font-size-x-small);font-weight:var(--zn-font-weight-semibold);line-height:var(--zn-line-height-normal);letter-spacing:var(--zn-letter-spacing-normal);padding-block:var(--zn-spacing-2x-small);padding-inline:var(--zn-spacing-2x-large);-moz-user-select:none;user-select:none;-webkit-user-select:none}`;var tt=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new Ue(this,"help-text","label");this.localize=new tn(this);this.typeToSelectString="";this.hasFocus=!1;this.displayLabel="";this.selectedOptions=[];this.valueHasChanged=!1;this.inputPrefix=!1;this.name="";this._value="";this.defaultValue="";this.size="medium";this.placeholder="";this.multiple=!1;this.maxOptions=0;this.maxOptionsVisible=3;this.disabled=!1;this.clearable=!1;this.open=!1;this.hoist=!1;this.pill=!1;this.label="";this.labelTooltip="";this.contextNote="";this.placement="bottom";this.helpText="";this.required=!1;this.cacheKey="";this.triggerSubmit=!1;this.getTag=i=>T`
       <zn-chip
         part="tag"
@@ -2388,7 +2392,7 @@ rect.legend-mouseover-inactive,
           <slot name="footer"></slot>
         </div>
       </div>
-    `}};ma.styles=Z(LA),y([_({attribute:"start-scrolled",type:Boolean,reflect:!0})],ma.prototype,"startScrolled",2),y([ge(".scroll-container")],ma.prototype,"container",2),y([ge(".scroll-footer")],ma.prototype,"footer",2);var JU=ma;ma.define("zn-scroll-container");function pi(o){let t=document.createDocumentFragment();return _d(o,t),t.firstElementChild}var Or=zr(class extends Fn{constructor(o){if(super(o),o.type!==en.PROPERTY&&o.type!==en.ATTRIBUTE&&o.type!==en.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!yg(o))throw Error("`live` bindings can only contain a single expression")}render(o){return o}update(o,[t]){if(t===Zi||t===Rt)return t;let i=o.element,n=o.name;if(o.type===en.PROPERTY){if(t===i[n])return Zi}else if(o.type===en.BOOLEAN_ATTRIBUTE){if(!!t===i.hasAttribute(n))return Zi}else if(o.type===en.ATTRIBUTE&&i.getAttribute(n)===t+"")return Zi;return xg(o),t}});var qA=te`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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: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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.input{flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;box-shadow:var(--zn-shadow-x-small);font-family:var(--zn-input-font-family),sans-serif;font-weight:var(--zn-input-font-weight);letter-spacing:var(--zn-input-letter-spacing);vertical-align:middle;overflow:hidden;cursor:text;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) background-color}.input--standard{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.input--standard:hover:not(.input--disabled,.input--filled){background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.input--filled:hover:not(.input--disabled){background-color:var(--zn-color-neutral-50);border-color:var(--zn-input-border-color-hover)}.input--standard.input--focused:not(.input--disabled){background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus)}.input--standard.input--focused:not(.input--disabled):not(.input--x-small){box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.input--standard.input--focused:not(.input--disabled).input--x-small{box-shadow:0 0 0 var(--zn-focus-ring-width-x-small) var(--zn-input-focus-ring-color)}.input--standard.input--focused:not(.input--disabled) .input__control{color:var(--zn-input-color-focus)}.input--standard.input--disabled{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.input--standard.input--filled{background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.input--standard.input--disabled .input__control{color:var(--zn-input-color-disabled)}.input--standard.input--disabled .input__control::-moz-placeholder{color:var(--zn-input-placeholder-color-disabled)}.input--standard.input--disabled .input__control::placeholder{color:var(--zn-input-placeholder-color-disabled)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;height:100%;color:var(--zn-input-color);border:none;background:inherit;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--zn-input-height-large) var(--zn-input-background-color) inset !important;-webkit-text-fill-color:var(--zn-input-color);caret-color:var(--zn-input-color)}.input__control::-moz-placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.input__control::placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.input:hover:not(.input--disabled) .input__control{color:var(--zn-input-color-hover)}.input__control:focus{outline:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--zn-input-icon-color);font-size:var(--zn-font-size-small)}.input__prefix zn-icon,.input__suffix zn-icon{--icon-size:var(--zn-font-size-x-large);color:var(--zn-input-icon-color);font-size:var(--zn-font-size-small)}.input__prefix ::slotted(zn-icon),.input__suffix ::slotted(zn-icon){--icon-size:var(--zn-font-size-medium);font-size:var(--zn-font-size-medium);color:var(--zn-input-icon-color)}.input--x-small{border-radius:var(--zn-input-border-radius-x-small);font-size:var(--zn-input-font-size-small);height:var(--zn-input-height-x-small)}.input--x-small .input__control{height:calc(var(--zn-input-height-x-small) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-small)}.input--x-small .input__clear,.input--x-small .input__password-toggle{width:calc(1em + var(--zn-input-spacing-x-small) * 2)}.input--x-small .input__prefix ::slotted(*),.input__prefix-default{margin-inline-start:var(--zn-input-spacing-x-small)}.input--x-small .input__suffix ::slotted(*),.input__suffix-default{margin-inline-end:var(--zn-input-spacing-x-small)}.input--x-small .input__suffix ::slotted(zn-button),.input--x-small .input__prefix ::slotted(zn-button){margin-inline-end:0;margin-inline-start:0}.input--small{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small);height:var(--zn-input-height-small)}.input--small .input__control{height:calc(var(--zn-input-height-small) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{width:calc(1em + var(--zn-input-spacing-small) * 2)}.input--small .input__prefix ::slotted(*),.input__prefix-default{margin-inline-start:var(--zn-input-spacing-small)}.input--small .input__suffix ::slotted(*),.input__suffix-default{margin-inline-end:var(--zn-input-spacing-small)}.input--small .input__suffix ::slotted(zn-button),.input--small .input__prefix ::slotted(zn-button){margin-inline-end:0;margin-inline-start:0}.input--medium{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium);height:var(--zn-input-height-medium)}.input--medium .input__control{height:calc(var(--zn-input-height-medium) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-small)}.input--medium .input__clear,.input--medium .input__password-toggle{width:calc(1em + var(--zn-input-spacing-medium) * 2)}.input--medium .input__prefix ::slotted(*),.input__prefix-default{margin-inline-start:var(--zn-input-spacing-medium)}.input--medium .input__suffix ::slotted(*),.input__suffix-default{margin-inline-end:var(--zn-input-spacing-medium)}.input--medium .input__suffix ::slotted(zn-button),.input--medium .input__prefix ::slotted(zn-button){margin-inline-end:0;margin-inline-start:0}.input--large{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large);height:var(--zn-input-height-large)}.input--large .input__control{height:calc(var(--zn-input-height-large) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-medium)}.input--large .input__clear,.input--large .input__password-toggle{width:calc(1em + var(--zn-input-spacing-large) * 2)}.input--large .input__suffix ::slotted(zn-button),.input--large .input__prefix ::slotted(zn-button){margin-inline-end:0;margin-inline-start:0}.input--pill.input--x-small{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-x-small)}.input--pill.input--small{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-x-small)}.input--pill.input--medium{border-radius:var(--zn-input-height-medium);padding:0 var(--zn-spacing-x-small)}.input--pill.input--large{border-radius:var(--zn-input-height-large);padding:0 var(--zn-spacing-x-small)}.input__clear:not(.input__clear--visible){visibility:hidden}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:var(--zn-font-size-large);color:var(--zn-input-icon-color);border:none;background:none;padding:0;transition:var(--zn-transition-fast) color;cursor:pointer}.input__clear zn-icon,.input__password-toggle zn-icon{--icon-size:var(--zn-font-size-large)}.input__clear:hover,.input__password-toggle:hover{color:var(--zn-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}::-ms-reveal{display:none}.input--no-spin-buttons input[type=number]::-webkit-outer-spin-button,.input--no-spin-buttons input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;display:none}.input--no-spin-buttons input[type=number]{-moz-appearance:textfield}input[type=date]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>')}`;var it=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new Ue(this,"help-text","label","label-tooltip");this.localize=new tn(this);this.hasFocus=!1;this.title="";this.__numberInput=Object.assign(document.createElement("input"),{type:"number"});this.__dateInput=Object.assign(document.createElement("input"),{type:"date"});this.type="text";this.name="";this.value="";this.defaultValue="";this.size="medium";this.pill=!1;this.label="";this.labelTooltip="";this.contextNote="";this.helpText="";this.clearable=!1;this.optionalIcon=!1;this.disabled=!1;this.filled=!1;this.placeholder="";this.readonly=!1;this.passwordToggle=!1;this.passwordVisible=!1;this.noSpinButtons=!1;this.required=!1;this.spellcheck=!0}get valueAsDate(){var i;return this.__dateInput.type=this.type,this.__dateInput.value=this.value,((i=this.input)==null?void 0:i.valueAsDate)||this.__dateInput.valueAsDate}set valueAsDate(i){this.__dateInput.type=this.type,this.__dateInput.valueAsDate=i,this.value=this.__dateInput.value}get valueAsNumber(){var i;return this.__numberInput.value=this.value,((i=this.input)==null?void 0:i.valueAsNumber)||this.__numberInput.valueAsNumber}set valueAsNumber(i){this.__numberInput.valueAsNumber=i,this.value=this.__numberInput.value}get validity(){var i;return(i=this.input)==null?void 0:i.validity}get validationMessage(){return this.input.validationMessage}validateMinMax(){this.type!=="number"&&this.type!=="date"||(typeof this.min!="undefined"&&parseInt(this.value)<parseInt(this.min)&&(this.value=this.min.toString()),typeof this.max!="undefined"&&parseInt(this.value)>parseInt(this.max)&&(this.value=this.max.toString()))}handleBlur(){this.hasFocus=!1,this.validateMinMax(),this.emit("zn-blur")}handleChange(){this.type==="currency"&&this.input.value?this.value=parseFloat(this.input.value).toFixed(2):this.value=this.input.value,this.emit("zn-change")}handleClearClick(i){this.value="",this.emit("zn-clear"),this.emit("zn-input"),this.emit("zn-change"),this.input.focus(),i.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("zn-focus")}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("zn-input")}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}handleKeyDown(i){let n=i.altKey||i.ctrlKey||i.metaKey||i.shiftKey;i.key==="Enter"&&!n&&!i.defaultPrevented&&!i.isComposing&&this.formControlController.submit()}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}focusInput(i){if(this.hasFocus)return;let n=i.target;(n.classList.contains("input__prefix")||n.slot==="prefix"||n.hasAttribute("part")&&n.getAttribute("part")==="base")&&(this.handleFocus(),this.input.focus())}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(i){this.input.focus(i)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(i,n,r="none"){this.input.setSelectionRange(i,n,r)}setRangeText(i,n,r,a="preserve"){let s=n!=null?n:this.input.selectionStart,l=r!=null?r:this.input.selectionEnd;this.input.setRangeText(i,s,l,a),this.value!==this.input.value&&(this.value=this.input.value)}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.input.showPicker()}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(i){this.input.setCustomValidity(i),this.formControlController.updateValidity()}render(){let i=this.hasSlotController.test("label"),n=this.hasSlotController.test("label-tooltip"),r=this.hasSlotController.test("context-note"),a=this.hasSlotController.test("help-text"),s=this.label?!0:i,l=this.labelTooltip?!0:n,c=this.contextNote?!0:r,d=this.helpText?!0:a,f=this.clearable&&!this.disabled&&!this.readonly,h=this.optionalIcon,p=f&&(typeof this.value=="number"||this.value.length>0);return T`
+    `}};ma.styles=Z(LA),y([_({attribute:"start-scrolled",type:Boolean,reflect:!0})],ma.prototype,"startScrolled",2),y([ge(".scroll-container")],ma.prototype,"container",2),y([ge(".scroll-footer")],ma.prototype,"footer",2);var JU=ma;ma.define("zn-scroll-container");function pi(o){let t=document.createDocumentFragment();return _d(o,t),t.firstElementChild}var Or=zr(class extends Fn{constructor(o){if(super(o),o.type!==en.PROPERTY&&o.type!==en.ATTRIBUTE&&o.type!==en.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!yg(o))throw Error("`live` bindings can only contain a single expression")}render(o){return o}update(o,[t]){if(t===Zi||t===Rt)return t;let i=o.element,n=o.name;if(o.type===en.PROPERTY){if(t===i[n])return Zi}else if(o.type===en.BOOLEAN_ATTRIBUTE){if(!!t===i.hasAttribute(n))return Zi}else if(o.type===en.ATTRIBUTE&&i.getAttribute(n)===t+"")return Zi;return xg(o),t}});var qA=te`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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: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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.input{flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;box-shadow:var(--zn-shadow-x-small);font-family:var(--zn-input-font-family),sans-serif;font-weight:var(--zn-input-font-weight);letter-spacing:var(--zn-input-letter-spacing);vertical-align:middle;overflow:hidden;cursor:text;transition:var(--zn-transition-fast) color,var(--zn-transition-fast) border,var(--zn-transition-fast) background-color}.input--standard{background-color:var(--zn-input-background-color);border:solid var(--zn-input-border-width) var(--zn-input-border-color)}.input--standard:hover:not(.input--disabled,.input--filled){background-color:var(--zn-input-background-color-hover);border-color:var(--zn-input-border-color-hover)}.input--filled:hover:not(.input--disabled){background-color:var(--zn-color-neutral-50);border-color:var(--zn-input-border-color-hover)}.input--standard.input--focused:not(.input--disabled){background-color:var(--zn-input-background-color-focus);border-color:var(--zn-input-border-color-focus)}.input--standard.input--focused:not(.input--disabled):not(.input--x-small){box-shadow:0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color)}.input--standard.input--focused:not(.input--disabled).input--x-small{box-shadow:0 0 0 var(--zn-focus-ring-width-x-small) var(--zn-input-focus-ring-color)}.input--standard.input--focused:not(.input--disabled) .input__control{color:var(--zn-input-color-focus)}.input--standard.input--disabled{background-color:var(--zn-input-background-color-disabled);border-color:var(--zn-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.input--standard.input--filled{background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.input--standard.input--disabled .input__control{color:var(--zn-input-color-disabled)}.input--standard.input--disabled .input__control::-moz-placeholder{color:var(--zn-input-placeholder-color-disabled)}.input--standard.input--disabled .input__control::placeholder{color:var(--zn-input-placeholder-color-disabled)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;height:100%;color:var(--zn-input-color);border:none;background:inherit;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--zn-input-height-large) var(--zn-input-background-color) inset !important;-webkit-text-fill-color:var(--zn-input-color);caret-color:var(--zn-input-color)}.input__control::-moz-placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.input__control::placeholder{color:var(--zn-input-placeholder-color);-moz-user-select:none;user-select:none;-webkit-user-select:none}.input:hover:not(.input--disabled) .input__control{color:var(--zn-input-color-hover)}.input__control:focus{outline:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;align-self:stretch;height:100%;cursor:default;color:var(--zn-input-icon-color);font-size:var(--zn-font-size-small)}.input__prefix zn-icon,.input__suffix zn-icon{--icon-size:var(--zn-font-size-x-large);color:var(--zn-input-icon-color);font-size:var(--zn-font-size-small)}.input__prefix ::slotted(zn-icon),.input__suffix ::slotted(zn-icon){--icon-size:var(--zn-font-size-medium);font-size:var(--zn-font-size-medium);color:var(--zn-input-icon-color)}.input--x-small{border-radius:var(--zn-input-border-radius-x-small);font-size:var(--zn-input-font-size-small);height:var(--zn-input-height-x-small)}.input--x-small .input__control{height:calc(var(--zn-input-height-x-small) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-small)}.input--x-small .input__clear,.input--x-small .input__password-toggle{width:calc(1em + var(--zn-input-spacing-x-small) * 2)}.input--x-small .input__prefix ::slotted(*),.input__prefix-default{margin-inline-start:var(--zn-input-spacing-x-small)}.input--x-small .input__suffix ::slotted(*),.input__suffix-default{margin-inline-end:var(--zn-input-spacing-x-small)}.input--x-small .input__suffix ::slotted(zn-button),.input--x-small .input__prefix ::slotted(zn-button),.input--x-small .input__suffix ::slotted(zn-checkbox),.input--x-small .input__prefix ::slotted(zn-checkbox){margin-inline-end:0;margin-inline-start:0}.input--small{border-radius:var(--zn-input-border-radius-small);font-size:var(--zn-input-font-size-small);height:var(--zn-input-height-small)}.input--small .input__control{height:calc(var(--zn-input-height-small) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{width:calc(1em + var(--zn-input-spacing-small) * 2)}.input--small .input__prefix ::slotted(*),.input__prefix-default{margin-inline-start:var(--zn-input-spacing-small)}.input--small .input__suffix ::slotted(*),.input__suffix-default{margin-inline-end:var(--zn-input-spacing-small)}.input--small .input__suffix ::slotted(zn-button),.input--small .input__prefix ::slotted(zn-button),.input--small .input__suffix ::slotted(zn-checkbox),.input--small .input__prefix ::slotted(zn-checkbox){margin-inline-end:0;margin-inline-start:0}.input--medium{border-radius:var(--zn-input-border-radius-medium);font-size:var(--zn-input-font-size-medium);height:var(--zn-input-height-medium)}.input--medium .input__control{height:calc(var(--zn-input-height-medium) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-small)}.input--medium .input__clear,.input--medium .input__password-toggle{width:calc(1em + var(--zn-input-spacing-medium) * 2)}.input--medium .input__prefix ::slotted(*),.input__prefix-default{margin-inline-start:var(--zn-input-spacing-medium)}.input--medium .input__suffix ::slotted(*),.input__suffix-default{margin-inline-end:var(--zn-input-spacing-medium)}.input--medium .input__suffix ::slotted(zn-button),.input--medium .input__prefix ::slotted(zn-button),.input--medium .input__suffix ::slotted(zn-checkbox),.input--medium .input__prefix ::slotted(zn-checkbox){margin-inline-end:0;margin-inline-start:0}.input--large{border-radius:var(--zn-input-border-radius-large);font-size:var(--zn-input-font-size-large);height:var(--zn-input-height-large)}.input--large .input__control{height:calc(var(--zn-input-height-large) - var(--zn-input-border-width) * 2);padding:0 var(--zn-input-spacing-medium)}.input--large .input__clear,.input--large .input__password-toggle{width:calc(1em + var(--zn-input-spacing-large) * 2)}.input--large .input__suffix ::slotted(zn-button),.input--large .input__prefix ::slotted(zn-button),.input--large .input__suffix ::slotted(zn-checkbox),.input--large .input__prefix ::slotted(zn-checkbox){margin-inline-end:0;margin-inline-start:0}.input--pill.input--x-small{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-x-small)}.input--pill.input--small{border-radius:var(--zn-input-height-small);padding:0 var(--zn-spacing-x-small)}.input--pill.input--medium{border-radius:var(--zn-input-height-medium);padding:0 var(--zn-spacing-x-small)}.input--pill.input--large{border-radius:var(--zn-input-height-large);padding:0 var(--zn-spacing-x-small)}.input__clear:not(.input__clear--visible){visibility:hidden}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:var(--zn-font-size-large);color:var(--zn-input-icon-color);border:none;background:none;padding:0;transition:var(--zn-transition-fast) color;cursor:pointer}.input__clear zn-icon,.input__password-toggle zn-icon{--icon-size:var(--zn-font-size-large)}.input__clear:hover,.input__password-toggle:hover{color:var(--zn-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}::-ms-reveal{display:none}.input--no-spin-buttons input[type=number]::-webkit-outer-spin-button,.input--no-spin-buttons input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;display:none}.input--no-spin-buttons input[type=number]{-moz-appearance:textfield}input[type=date]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>')}`;var it=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-blur","zn-input"]});this.hasSlotController=new Ue(this,"help-text","label","label-tooltip");this.localize=new tn(this);this.hasFocus=!1;this.title="";this.__numberInput=Object.assign(document.createElement("input"),{type:"number"});this.__dateInput=Object.assign(document.createElement("input"),{type:"date"});this.type="text";this.name="";this.value="";this.defaultValue="";this.size="medium";this.pill=!1;this.label="";this.labelTooltip="";this.contextNote="";this.helpText="";this.clearable=!1;this.optionalIcon=!1;this.disabled=!1;this.filled=!1;this.placeholder="";this.readonly=!1;this.passwordToggle=!1;this.passwordVisible=!1;this.noSpinButtons=!1;this.required=!1;this.spellcheck=!0}get valueAsDate(){var i;return this.__dateInput.type=this.type,this.__dateInput.value=this.value,((i=this.input)==null?void 0:i.valueAsDate)||this.__dateInput.valueAsDate}set valueAsDate(i){this.__dateInput.type=this.type,this.__dateInput.valueAsDate=i,this.value=this.__dateInput.value}get valueAsNumber(){var i;return this.__numberInput.value=this.value,((i=this.input)==null?void 0:i.valueAsNumber)||this.__numberInput.valueAsNumber}set valueAsNumber(i){this.__numberInput.valueAsNumber=i,this.value=this.__numberInput.value}get validity(){var i;return(i=this.input)==null?void 0:i.validity}get validationMessage(){return this.input.validationMessage}validateMinMax(){this.type!=="number"&&this.type!=="date"||(typeof this.min!="undefined"&&parseInt(this.value)<parseInt(this.min)&&(this.value=this.min.toString()),typeof this.max!="undefined"&&parseInt(this.value)>parseInt(this.max)&&(this.value=this.max.toString()))}handleBlur(){this.hasFocus=!1,this.validateMinMax(),this.emit("zn-blur")}handleChange(){this.type==="currency"&&this.input.value?this.value=parseFloat(this.input.value).toFixed(2):this.value=this.input.value,this.emit("zn-change")}handleClearClick(i){this.value="",this.emit("zn-clear"),this.emit("zn-input"),this.emit("zn-change"),this.input.focus(),i.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("zn-focus")}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("zn-input")}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}handleKeyDown(i){let n=i.altKey||i.ctrlKey||i.metaKey||i.shiftKey;i.key==="Enter"&&!n&&!i.defaultPrevented&&!i.isComposing&&this.formControlController.submit()}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}focusInput(i){if(this.hasFocus)return;let n=i.target;n.tagName==="ZN-CHECKBOX"&&(n.slot==="prefix"||n.closest('[slot="prefix"]'))||(n.classList.contains("input__prefix")||n.slot==="prefix"||n.hasAttribute("part")&&n.getAttribute("part")==="base")&&(this.handleFocus(),this.input.focus())}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(i){this.input.focus(i)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(i,n,r="none"){this.input.setSelectionRange(i,n,r)}setRangeText(i,n,r,a="preserve"){let s=n!=null?n:this.input.selectionStart,l=r!=null?r:this.input.selectionEnd;this.input.setRangeText(i,s,l,a),this.value!==this.input.value&&(this.value=this.input.value)}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.input.showPicker()}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(i){this.input.setCustomValidity(i),this.formControlController.updateValidity()}render(){let i=this.hasSlotController.test("label"),n=this.hasSlotController.test("label-tooltip"),r=this.hasSlotController.test("context-note"),a=this.hasSlotController.test("help-text"),s=this.label?!0:i,l=this.labelTooltip?!0:n,c=this.contextNote?!0:r,d=this.helpText?!0:a,f=this.clearable&&!this.disabled&&!this.readonly,h=this.optionalIcon,p=f&&(typeof this.value=="number"||this.value.length>0);return T`
       <div part="form-control"
            class="${ce({"form-control":!0,"form-control--x-small":this.size==="x-small","form-control--small":this.size==="small","form-control--medium":this.size==="medium","form-control--large":this.size==="large","form-control--has-label":s,"form-control--has-label-tooltip":l,"form-control--has-context-note":c,"form-control--has-help-text":d})}">
 
@@ -4314,7 +4318,7 @@ button {
             <slot></slot>
           </div>
         </zn-cols>
-      </fieldset>`}};Sa.styles=Z(KL),y([_()],Sa.prototype,"label",2),y([_({attribute:"label-tooltip"})],Sa.prototype,"labelTooltip",2),y([_({attribute:"help-text"})],Sa.prototype,"helpText",2);var Nre=Sa;Sa.define("zn-form-group");var JL=te`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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: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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.input-group{display:flex;flex-wrap:nowrap;align-items:center;width:100%}::slotted([data-zn-input-group__input]){margin-inline-end:-1px;position:relative;z-index:1}::slotted([data-zn-input-group__input]:focus-within){z-index:2}::slotted([data-zn-input-group__input--first]){--zn-input-border-radius-x-small:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);--zn-input-border-radius-small:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);--zn-input-border-radius-medium:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);--zn-input-border-radius-large:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium)}::slotted([data-zn-input-group__input--inner]){--zn-input-border-radius-x-small:0;--zn-input-border-radius-small:0;--zn-input-border-radius-medium:0;--zn-input-border-radius-large:0}::slotted([data-zn-input-group__input--last]){--zn-input-border-radius-x-small:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;--zn-input-border-radius-small:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;--zn-input-border-radius-medium:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;--zn-input-border-radius-large:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;margin-inline-end:0}::slotted(zn-button[data-zn-input-group__input])::part(base){border-radius:0}::slotted(zn-button[data-zn-input-group__input--first])::part(base){border-start-start-radius:var(--zn-border-radius-medium);border-end-start-radius:var(--zn-border-radius-medium)}::slotted(zn-button[data-zn-input-group__input--last])::part(base){border-start-end-radius:var(--zn-border-radius-medium);border-end-end-radius:var(--zn-border-radius-medium)}`;var Ms=class extends J{constructor(){super(...arguments);this.hasSlotController=new Ue(this,"label");this.label=""}handleSlotChange(){let i=[...this.defaultSlot.assignedElements({flatten:!0})],n=["ZN-INPUT","ZN-SELECT","ZN-BUTTON"],r=i.filter(a=>n.includes(a.tagName));r.forEach(a=>{let s=r.indexOf(a);a.toggleAttribute("data-zn-input-group__input",!0),a.toggleAttribute("data-zn-input-group__input--first",s===0),a.toggleAttribute("data-zn-input-group__input--inner",s>0&&s<r.length-1),a.toggleAttribute("data-zn-input-group__input--last",s===r.length-1)})}render(){let i=this.hasSlotController.test("label"),n=this.label?!0:i;return T`
+      </fieldset>`}};Sa.styles=Z(KL),y([_()],Sa.prototype,"label",2),y([_({attribute:"label-tooltip"})],Sa.prototype,"labelTooltip",2),y([_({attribute:"help-text"})],Sa.prototype,"helpText",2);var Nre=Sa;Sa.define("zn-form-group");var JL=te`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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: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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.input-group{display:flex;flex-wrap:nowrap;align-items:center;width:100%}::slotted([data-zn-input-group__input]){margin-inline-end:-1px;position:relative;z-index:1;flex:1}::slotted([data-zn-input-group__input]:focus-within){z-index:2}::slotted([data-zn-input-group__input--first]){--zn-input-border-radius-x-small:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);--zn-input-border-radius-small:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);--zn-input-border-radius-medium:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);--zn-input-border-radius-large:var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium)}::slotted([data-zn-input-group__input--inner]){--zn-input-border-radius-x-small:0;--zn-input-border-radius-small:0;--zn-input-border-radius-medium:0;--zn-input-border-radius-large:0}::slotted([data-zn-input-group__input--last]){--zn-input-border-radius-x-small:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;--zn-input-border-radius-small:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;--zn-input-border-radius-medium:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;--zn-input-border-radius-large:0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;margin-inline-end:0}::slotted(zn-button[data-zn-input-group__input])::part(base){border-radius:0}::slotted(zn-button[data-zn-input-group__input--first])::part(base){border-start-start-radius:var(--zn-border-radius-medium);border-end-start-radius:var(--zn-border-radius-medium)}::slotted(zn-button[data-zn-input-group__input--last])::part(base){border-start-end-radius:var(--zn-border-radius-medium);border-end-end-radius:var(--zn-border-radius-medium)}`;var Ms=class extends J{constructor(){super(...arguments);this.hasSlotController=new Ue(this,"label");this.label=""}handleSlotChange(){let i=[...this.defaultSlot.assignedElements({flatten:!0})],n=["ZN-INPUT","ZN-SELECT","ZN-BUTTON"],r=i.filter(a=>n.includes(a.tagName));r.forEach(a=>{let s=r.indexOf(a);a.toggleAttribute("data-zn-input-group__input",!0),a.toggleAttribute("data-zn-input-group__input--first",s===0),a.toggleAttribute("data-zn-input-group__input--inner",s>0&&s<r.length-1),a.toggleAttribute("data-zn-input-group__input--last",s===r.length-1)})}render(){let i=this.hasSlotController.test("label"),n=this.label?!0:i;return T`
       <div part="form-control"
            class="${ce({"form-control":!0,"form-control--has-label":n})}">
 
@@ -5000,7 +5004,7 @@ button {
           <zn-option value="${i.url}">${i.name}</zn-option>
         `)}
       </zn-select>
-    `}};_o.styles=Z(U7),y([We()],_o.prototype,"_isPlaying",2),y([_()],_o.prototype,"value",2),y([_()],_o.prototype,"label",2),y([_()],_o.prototype,"placeholder",2),y([_({type:Object})],_o.prototype,"files",2);var zoe=_o;_o.define("zn-audio-select");var G7=te`.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.translations{display:flex;flex-direction:column;padding:0 var(--zn-spacing-medium);gap:var(--zn-spacing-small)}.input-container{padding:var(--zn-spacing-small) 0}`;var xn=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this);this.hasSlotController=new Ue(this,"label");this.name="";this.value='{"en":""}';this.label="";this.disabled=!1;this.required=!1;this.flush=!1;this.languages={en:"English"};this.values={};this._activeLanguage="en";this.handleLanguageAdd=i=>{let r=i.detail.element.getAttribute("data-path");r&&(this.values=et(Ce({},this.values),{[r]:""}),this._activeLanguage=r,this.updateValue())};this.handleNavbarClick=i=>{i.stopPropagation();let n=i.detail.item;if(n){let r=n.getAttribute("tab")||n.getAttribute("data-tab");r&&(this._activeLanguage=r,this.requestUpdate())}};this.handleValueUpdate=i=>{let n=i.target;if(this._activeLanguage){let r=n.value;r!==this.values[this._activeLanguage]&&(this.values=et(Ce({},this.values),{[this._activeLanguage]:r}),this.updateValue())}};this.handleKeyDown=i=>{if(i.key==="Enter"){if(i.target instanceof Tb)return;!(i.altKey||i.ctrlKey||i.metaKey||i.shiftKey)&&!i.defaultPrevented&&!i.isComposing&&this.formControlController.submit()}};this.handleSubmit=()=>{this.formControlController.submit()}}get validity(){return _n}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){}firstUpdated(){this.formControlController.updateValidity()}willUpdate(i){let n=i.has("value"),r=i.has("values");if(n&&r){let a=this.value==='{"en":""}',s=Object.keys(this.values).length===0;a&&!s?n=!1:!a&&s?r=!1:this.hasAttribute("values")&&!this.hasAttribute("value")?n=!1:this.hasAttribute("value")&&!this.hasAttribute("values")&&(r=!1)}if(n)try{let a=JSON.parse(this.value||"{}");JSON.stringify(a)!==JSON.stringify(this.values)&&(this.values=a)}catch(a){}if(r&&(this.value=JSON.stringify(this.values),!this._activeLanguage||!Object.prototype.hasOwnProperty.call(this.values,this._activeLanguage)&&this._activeLanguage!=="en")){let a=Object.keys(this.values);a.length>0?this._activeLanguage=a[0]:this._activeLanguage="en"}}updateValue(){this.value=JSON.stringify(this.values),this.emit("zn-change"),this.emit("zn-input")}render(){let i=Object.entries(this.languages).filter(([c])=>c!=="en"&&!Object.prototype.hasOwnProperty.call(this.values,c)).map(([c,d])=>({title:d,type:"dropdown",path:c})),n=Object.keys(this.values);n.includes("en")||n.unshift("en");let r=n.map(c=>({title:this.languages[c]||c,active:c===this._activeLanguage,tab:c})),a=this.values[this._activeLanguage],s=this.hasSlotController.test("label"),l=this.label?!0:s;return T`
+    `}};_o.styles=Z(U7),y([We()],_o.prototype,"_isPlaying",2),y([_()],_o.prototype,"value",2),y([_()],_o.prototype,"label",2),y([_()],_o.prototype,"placeholder",2),y([_({type:Object})],_o.prototype,"files",2);var zoe=_o;_o.define("zn-audio-select");var G7=te`.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-font-weight-semibold);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}:host{display:block}.translations{display:flex;flex-direction:column;padding:0 var(--zn-spacing-medium);gap:var(--zn-spacing-3x-small)}.input-container{padding:var(--zn-spacing-small) 0}.form-control__label{margin-bottom:0 !important}zn-navbar{overflow:hidden;margin-top:var(--zn-spacing-x-small)}zn-navbar::part(navbar){padding:0 0 0 7px;gap:15px}zn-navbar::part(navbar-item){font-size:var(--zn-font-size-small);--zn-spacing-medium:7px}`;var xn=class extends J{constructor(){super(...arguments);this.formControlController=new rt(this);this.hasSlotController=new Ue(this,"label");this.name="";this.value='{"en":""}';this.label="";this.disabled=!1;this.required=!1;this.flush=!1;this.languages={en:"EN"};this.values={};this._activeLanguage="en";this.handleLanguageAdd=i=>{let r=i.detail.element.getAttribute("data-path");r&&(this.values=et(Ce({},this.values),{[r]:""}),this._activeLanguage=r,this.updateValue())};this.handleNavbarClick=i=>{i.stopPropagation();let n=i.detail.item;if(n){let r=n.getAttribute("tab")||n.getAttribute("data-tab");r&&(this._activeLanguage=r,this.requestUpdate())}};this.handleValueUpdate=i=>{let n=i.target;if(this._activeLanguage){let r=n.value;r!==this.values[this._activeLanguage]&&(this.values=et(Ce({},this.values),{[this._activeLanguage]:r}),this.updateValue())}};this.handleKeyDown=i=>{if(i.key==="Enter"){if(i.target instanceof Tb)return;!(i.altKey||i.ctrlKey||i.metaKey||i.shiftKey)&&!i.defaultPrevented&&!i.isComposing&&this.formControlController.submit()}};this.handleSubmit=()=>{this.formControlController.submit()}}get validity(){return _n}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){}firstUpdated(){this.formControlController.updateValidity()}willUpdate(i){let n=i.has("value"),r=i.has("values");if(n&&r){let a=this.value==='{"en":""}',s=Object.keys(this.values).length===0;a&&!s?n=!1:!a&&s?r=!1:this.hasAttribute("values")&&!this.hasAttribute("value")?n=!1:this.hasAttribute("value")&&!this.hasAttribute("values")&&(r=!1)}if(n)try{let a=JSON.parse(this.value||"{}");JSON.stringify(a)!==JSON.stringify(this.values)&&(this.values=a)}catch(a){}if(r&&(this.value=JSON.stringify(this.values),!this._activeLanguage||!Object.prototype.hasOwnProperty.call(this.values,this._activeLanguage)&&this._activeLanguage!=="en")){let a=Object.keys(this.values);a.length>0?this._activeLanguage=a[0]:this._activeLanguage="en"}}updateValue(){this.value=JSON.stringify(this.values),this.emit("zn-change"),this.emit("zn-input")}render(){let i=Object.entries(this.languages).filter(([c])=>c!=="en"&&!Object.prototype.hasOwnProperty.call(this.values,c)).map(([c,d])=>({title:d,type:"dropdown",path:c})),n=Object.keys(this.values);n.includes("en")||n.unshift("en");let r=n.map(c=>({title:c.toUpperCase(),active:c===this._activeLanguage,tab:c})),a=this.values[this._activeLanguage],s=this.hasSlotController.test("label"),l=this.label?!0:s;return T`
       <div part="form-control"
            class="${ce({translations:!0,"form-control":!0,"form-control--medium":!0,"form-control--has-label":l})}"
            @keydown="${this.handleKeyDown}">
@@ -5018,7 +5022,9 @@ button {
           flush=${this.flush||Ve}
           isolated
           manual-add-items
-        ></zn-navbar>
+        >
+          <slot name="expand" slot="expand"></slot>
+        </zn-navbar>
         <div class="input-container">
           <zn-inline-edit
             .value=${a}

package/docs/pages/components/translations.md

@@ -22,13 +22,14 @@ between languages.
 
 ## Examples
 
-### With Label
+### With Label and extra button
 
 ```html:preview
 
 <zn-translations
   label="Description"
   languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;de&quot;:&quot;German&quot;}'>
+  <zn-button slot="expand" size="x-small" color="transparent" icon="translate"></zn-button>
 </zn-translations>
 ```
 

package/package.json

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

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

@@ -975,7 +975,7 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private renderCellHeader(header: HeaderConfig) {
-    const sortable = !Object.values(this.unsortableHeaders).includes(header.key) && !Object.values(this.hiddenHeaders).includes(header.key) && !this.unsortable;
+    const sortable = !Object.values(this.unsortableHeaders).includes(header.key) && !Object.values(this.hiddenHeaders).includes(header.key) && !this.unsortable && header.sortable !== false;
 
     // Determine the last visible header considering secondary flags and hidden columns
     const lastVisibleHeaderKey = Object.values(this.headers)

package/src/components/input/input.component.ts

@@ -327,6 +327,10 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     }
 
     const target = event.target as HTMLElement;
+    if (target.tagName === 'ZN-CHECKBOX' && (target.slot === 'prefix' || target.closest('[slot="prefix"]'))) {
+      return;
+    }
+
     if (target.classList.contains('input__prefix') || target.slot === 'prefix' || (target.hasAttribute('part') && target.getAttribute('part') === 'base')) {
       this.handleFocus();
       this.input.focus();

package/src/components/input/input.scss

@@ -128,6 +128,8 @@
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
+  align-self: stretch;
+  height: 100%;
   cursor: default;
   color: var(--zn-input-icon-color);
   font-size: var(--zn-font-size-small);
@@ -177,7 +179,9 @@
 }
 
 .input--x-small .input__suffix ::slotted(zn-button),
-.input--x-small .input__prefix ::slotted(zn-button) {
+.input--x-small .input__prefix ::slotted(zn-button),
+.input--x-small .input__suffix ::slotted(zn-checkbox),
+.input--x-small .input__prefix ::slotted(zn-checkbox), {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
@@ -209,7 +213,9 @@
 }
 
 .input--small .input__suffix ::slotted(zn-button),
-.input--small .input__prefix ::slotted(zn-button) {
+.input--small .input__prefix ::slotted(zn-button),
+.input--small .input__suffix ::slotted(zn-checkbox),
+.input--small .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
@@ -241,7 +247,9 @@
 }
 
 .input--medium .input__suffix ::slotted(zn-button),
-.input--medium .input__prefix ::slotted(zn-button) {
+.input--medium .input__prefix ::slotted(zn-button),
+.input--medium .input__suffix ::slotted(zn-checkbox),
+.input--medium .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
@@ -264,7 +272,8 @@
 
 .input--large .input__suffix ::slotted(zn-button),
 .input--large .input__prefix ::slotted(zn-button),
-{
+.input--large .input__suffix ::slotted(zn-checkbox),
+.input--large .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }

package/src/components/input-group/input-group.scss

@@ -20,6 +20,7 @@
   /* Ensure focus ring is above */
   position: relative;
   z-index: 1;
+  flex: 1;
 }
 
 ::slotted([data-zn-input-group__input]:focus-within) {

package/src/components/item/item.component.ts

@@ -52,7 +52,7 @@ export default class ZnItem extends ZincElement {
   @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;
 
   // align items in the center
-  @property({type: Boolean, attribute: 'align-center'}) alignCenter: boolean;
+  @property({type: Boolean, attribute: 'align-center'})  alignCenter: boolean;
 
   connectedCallback() {
     super.connectedCallback();

package/src/components/navbar/navbar.component.ts

@@ -224,7 +224,7 @@ export default class ZnNavbar extends ZincElement {
         'navbar__container--stacked': this.stacked,
         'navbar__container--icon-bar': this.iconBar
       })}">
-        <ul @click="${this.handleClick}" class="${classMap({
+        <ul @click="${this.handleClick}" part="navbar" class="${classMap({
           'navbar': true,
           'navbar--slim': this.slim,
           'navbar--border': this.border,
@@ -242,10 +242,11 @@ export default class ZnNavbar extends ZincElement {
             }
             if (item.path != undefined) {
               return html`
-                <li class="${classMap({'active': item.active})}" tab-uri="${item.path}">${content}</li>`;
+                <li class="${classMap({'active': item.active})}" part="navbar-item" tab-uri="${item.path}">${content}</li>`;
             }
             return html`
-              <li class="${classMap({'active': item.active})}"
+              <li class="${classMap({ 'active': item.active })}"
+                  part="navbar-item"
                   tab="${ifDefined(!this.isolated ? item.tab : undefined)}"
                   data-tab="${ifDefined(this.isolated ? item.tab : undefined)}">
                 ${content}
@@ -263,7 +264,7 @@ export default class ZnNavbar extends ZincElement {
           ${this.dropdown && this.dropdown.length > 0 ? html`
             <li id="dropdown-item">
               <zn-dropdown>
-                <zn-button slot="trigger" color="secondary" square grow>
+                <zn-button slot="trigger" part="button" exportparts="base:button__base" color="secondary" square grow>
                   <zn-icon src="add" size="18"></zn-icon>
                 </zn-button>
                 <zn-menu actions="${JSON.stringify(this.dropdown)}"></zn-menu>
@@ -272,7 +273,10 @@ export default class ZnNavbar extends ZincElement {
           ${this._postItems}
           ${this._appended}
         </ul>
-        <div class="expandables">${this._expanding}</div>
+        <div class="expandables">
+          ${this._expanding}
+          <slot name="expand"></slot>
+        </div>
       </div>`;
   }
 }

package/src/components/translations/translations.component.ts

@@ -1,16 +1,16 @@
-import {classMap} from 'lit/directives/class-map.js';
-import {FormControlController, validValidityState} from '../../internal/form';
-import {HasSlotController} from '../../internal/slot';
-import {html, nothing, unsafeCSS} from 'lit';
-import {property, state} from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FormControlController, validValidityState } from '../../internal/form';
+import { HasSlotController } from '../../internal/slot';
+import type { PropertyValues } from 'lit';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import type { ZincFormControl } from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 import ZnInlineEdit from '../inline-edit';
 import ZnInput from '../input';
 import ZnNavbar from '../navbar';
-import type {PropertyValues} from 'lit';
-import type {ZincFormControl} from '../../internal/zinc-element';
-import type {ZnMenuSelectEvent} from '../../events/zn-menu-select';
-import type {ZnSelectEvent} from "../../events/zn-select";
+import type { ZnMenuSelectEvent } from '../../events/zn-menu-select';
+import type { ZnSelectEvent } from "../../events/zn-select";
 
 import styles from './translations.scss';
 
@@ -28,14 +28,14 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property() name = '';
   @property() value = '{"en":""}';
   @property() label: string = '';
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) required = false;
-  @property({type: Boolean, reflect: true}) flush = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ type: Boolean, reflect: true }) flush = false;
 
-  @property({type: Object}) languages: Record<string, string> = {
-    'en': 'English'
+  @property({ type: Object }) languages: Record<string, string> = {
+    'en': 'EN'
   };
-  @property({type: Object}) values: Record<string, string> = {};
+  @property({ type: Object }) values: Record<string, string> = {};
 
   @state() private _activeLanguage = 'en';
 
@@ -117,7 +117,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     const languageCode = element.getAttribute('data-path');
     if (languageCode) {
       // Add new language with empty string
-      this.values = {...this.values, [languageCode]: ''};
+      this.values = { ...this.values, [languageCode]: '' };
       this._activeLanguage = languageCode;
       this.updateValue();
     }
@@ -140,7 +140,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     if (this._activeLanguage) {
       const newValue: string = target.value as string;
       if (newValue !== this.values[this._activeLanguage]) {
-        this.values = {...this.values, [this._activeLanguage]: newValue};
+        this.values = { ...this.values, [this._activeLanguage]: newValue };
         this.updateValue();
       }
     }
@@ -185,7 +185,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     }
 
     const navigation = visibleTabs.map(code => ({
-      title: this.languages[code] || code,
+      title: code.toUpperCase(),
       active: code === this._activeLanguage,
       tab: code
     }));
@@ -218,7 +218,9 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
           flush=${this.flush || nothing}
           isolated
           manual-add-items
-        ></zn-navbar>
+        >
+          <slot name="expand" slot="expand"></slot>
+        </zn-navbar>
         <div class="input-container">
           <zn-inline-edit
             .value=${currentTranslation}

package/src/components/translations/translations.scss

@@ -8,9 +8,34 @@
   display: flex;
   flex-direction: column;
   padding: 0 var(--zn-spacing-medium);
-  gap: var(--zn-spacing-small);
+  gap: var(--zn-spacing-3x-small);
 }
 
 .input-container {
   padding: var(--zn-spacing-small) 0;
 }
+
+.form-control__label {
+  margin-bottom: 0 !important;
+}
+
+
+zn-navbar {
+  overflow: hidden;
+  margin-top: var(--zn-spacing-x-small);
+}
+
+zn-navbar::part(navbar) {
+  padding: 0 0 0 7px;
+  gap: 15px;
+}
+
+zn-navbar::part(navbar-item) {
+  font-size: var(--zn-font-size-small);
+
+  --zn-spacing-medium: 7px;
+}
+
+zn-navbar::part(button__base) {
+  //padding: 0 5px;
+}