@kubex/zinc 1.0.23 → 1.0.24

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.24",
     "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.24",
   "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

@@ -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>
@@ -4314,7 +4315,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 +5001,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;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}">

package/package.json

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

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>

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
     }));

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;
+  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;
+}