@kubex/zinc 1.0.24 → 1.0.25

package/dist/custom-elements.json

@@ -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.24",
+    "version": "1.0.25",
     "author": "",
     "license": "MIT"
   }

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.24",
+  "version": "1.0.25",
   "description-markup": "markdown",
   "contributions": {
     "html": {

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}">
@@ -1919,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"
@@ -2389,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})}">
 
@@ -5001,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-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`
+    `}};_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}">
@@ -5019,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.24",
+  "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/navbar/navbar.component.ts

@@ -273,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

@@ -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

@@ -26,7 +26,7 @@ zn-navbar {
 }
 
 zn-navbar::part(navbar) {
-  padding: 0;
+  padding: 0 0 0 7px;
   gap: 15px;
 }