@kubex/zinc 1.0.16 → 1.0.17

package/dist/custom-elements.json

@@ -26498,7 +26498,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.0.16",
+    "version": "1.0.17",
     "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.16",
+  "version": "1.0.17",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -100,7 +100,7 @@ function print() { __p += __j.call(arguments, '') }
              aria-label="tooltip">
           <slot name="content">${this.content}</slot>
         </div>
-      </zn-popup>`}};Si.styles=ie(b4),y([be("slot:not([name])")],Si.prototype,"defaultSlot",2),y([be(".tooltip__body")],Si.prototype,"body",2),y([be("zn-popup")],Si.prototype,"popup",2),y([_()],Si.prototype,"content",2),y([_()],Si.prototype,"placement",2),y([_({type:Boolean,reflect:!0})],Si.prototype,"disabled",2),y([_({type:Number})],Si.prototype,"distance",2),y([_({type:Boolean,reflect:!0})],Si.prototype,"open",2),y([_({type:Number})],Si.prototype,"skidding",2),y([_()],Si.prototype,"trigger",2),y([_({type:Boolean})],Si.prototype,"hoist",2),y([He("open",{waitUntilFirstUpdate:!0})],Si.prototype,"handleOpenChange",1),y([He(["content","distance","hoist","placement","skidding"])],Si.prototype,"handleOptionsChange",1),y([He("disabled")],Si.prototype,"handleDisabledChange",1);var Na=Si;Si.define("zn-tooltip");var v4=ne`:host,html,body{color:rgba(var(--zn-text),var(--zn-text-opacity));font-family:var(--zn-font-family-sans);font-feature-settings:normal;font-variation-settings:normal;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tab-size:4;-o-tab-size:4;tab-size:4;margin:0}html,body{background-color:rgba(var(--zn-body),var(--zn-bg-opacity));container-type:size;min-height:100%;height:100%}.inline-container{container-type:inline-size}.app-container{container-type:inline-size;display:flex;flex:1;flex-direction:column;position:relative;max-height:100%;height:100%;width:100%;max-width:100%}.inline-app-container,.app-container.inline-app-container,[inline-container] .app-container{display:block;height:auto;flex:unset}hr{height:0;border:none;border-top:1px solid rgb(var(--zn-border-color))}code,kbd,samp,pre,.mono{font-family:var(--zn-font-family-mono);font-size:1em}small{font-size:80%}.hidden{display:none !important}.visibility-hidden{visibility:hidden}h1,h2,h3,h4,h5,h6{font-weight:var(--zn-font-weight-medium);color:rgb(var(--zn-text-heading))}h6{font-size:var(--zn-font-size-x-small)}h5{font-size:var(--zn-font-size-small)}h4{font-size:var(--zn-font-size-medium)}h3{font-size:var(--zn-font-size-large)}h2{font-size:var(--zn-font-size-x-large)}h1{font-size:var(--zn-font-size-2x-large)}kbd{font-family:monospace;background-color:#eee;color:#333;border:1px solid rgb(var(--zn-border-color));border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5) inset;display:inline-block;font-size:13px;line-height:20px;padding:1px 6px;white-space:nowrap;min-width:15px;color:rgba(0,0,0,0.5)}[t=dark] kbd{background-color:rgb(25,25,25);box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(110,110,110,0.5) inset;color:#eee}[tab]{cursor:pointer}.zn-link:hover{--zn-text:rgb(var(--zn-primary));--icon-color:rgb(var(--zn-primary));--zn-text-heading:rgb(var(--zn-primary));--property-color:rgb(var(--zn-primary));opacity:1}.grow{flex-grow:1}.no-grow{flex-grow:0}.shrink{flex-shrink:1}.no-shrink{flex-shrink:0}.block{display:block}.flex{display:flex}.flex-wrap{display:flex;flex-wrap:wrap}.flex-col{display:flex;flex-direction:column}.flex-mid{display:flex;align-items:center}.flex-jc{justify-content:center}.flex-between{display:flex;justify-content:space-between}.flex-bottom{display:flex;align-items:flex-end}.equal{flex-basis:50%}.m-auto{margin:auto}.mt-auto{margin-top:auto}.zn-pad{padding:var(--zn-spacing-medium,0)}.zn-pad-y,.zn-py{padding-top:15px;padding-bottom:15px}.zn-pad-x,.zn-px{padding-left:15px;padding-right:15px}.zn-pr{padding-right:15px}.zn-pl{padding-left:15px}.zn-pt{padding-top:15px}.zn-pb{padding-bottom:15px}.zn-margin{margin:15px}.zn-mx{margin-left:15px;margin-right:15px}.zn-my{margin-top:15px;margin-bottom:15px}.zn-mt{margin-top:15px}.zn-mb{margin-bottom:15px}.zn-ml{margin-left:15px}.zn-mr{margin-right:15px}.zn-mxa{margin-left:auto;margin-right:auto}.zn-mya{margin-top:auto;margin-bottom:auto}.zn-mta{margin-top:auto}.zn-mba{margin-bottom:auto}.zn-mla{margin-left:auto}.zn-mra{margin-right:auto}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}@keyframes act-vanish{from{transform:scale(1);opacity:1;max-height:100%}to{transform:scale(0.8);opacity:0;max-height:0}}.act-vanish{animation:ease-in act-vanish 600ms forwards;transform-origin:top center;background-color:rgba(var(--zn-color-error),0.3);display:block;overflow:hidden}.h-full{height:100%}.w-full{width:100%}.zn-panel-bg{background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.zn-container{display:flex;flex-direction:column;flex-grow:1;max-height:100%;overflow:hidden}.tar{text-align:right}.tal{text-align:left}.tac{text-align:center}.zn-empty-hide:empty{display:none}.ml-auto{margin-left:auto}.zn-b-dash{border-style:dashed}.zn-b-dotted{border-style:dotted}.zn-border{border-style:solid;border-width:1px !important}.zn-bt{border-top-style:solid;border-top-width:1px !important}.zn-bb{border-bottom-style:solid;border-bottom-width:1px !important}.zn-bl{border-left-style:solid;border-left-width:1px !important}.zn-br{border-right-style:solid;border-right-width:1px !important}.unifi-action{display:flex;gap:10px;padding:10px 0;align-items:center}.zn-panel-bar{border-bottom:1px solid rgb(var(--zn-border-color));background-color:rgba(var(--zn-panel),0.9);padding:3px;gap:3px;display:flex;flex-wrap:wrap;align-items:center;z-index:1}.zn-panel-bar--large{padding:6px;gap:6px}.scroll-container{overflow:auto;flex-grow:1;position:relative;display:flex;flex-direction:column;max-height:100%}.zn-divide{display:flex;flex-direction:column}.zn-divide>*:not(:first-child){border-top:1px solid rgb(var(--zn-border-color))}.zn-divide>div:empty+div:not(:first-child){border-top:0}.zn-divide-y{display:flex;flex-direction:row}.zn-divide-y>*:not(:first-child):not(:empty){border-left:1px solid rgb(var(--zn-border-color))}.zn-c-pad{--zn-pad-spacing:var(--zn-spacing-large)}.zn-c-pad-x>*{padding-left:var(--zn-pad-spacing);padding-right:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:first-child){padding-top:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:last-child){padding-bottom:var(--zn-pad-spacing)}.zn-nav.zn-transparent{background:transparent}.zn-nav{background:rgba(var(--zn-panel),var(--zn-panel-opacity));border-right:1px solid rgb(var(--zn-border-color));max-width:320px;height:100%;padding-top:5px}.zn-nav ul{list-style:none;padding-bottom:10px;margin:0;display:flex;flex-direction:column;position:relative}.zn-nav ul:after{content:"";height:1px;left:18px;right:18px;bottom:0;position:absolute;background:rgb(var(--zn-border-color))}.zn-nav ul li a{text-decoration:none;color:rgb(var(--zn-text));display:block;font-weight:500;cursor:pointer}.zn-nav ul li a:hover,.zn-nav ul li a.zn-tb-active{background:rgb(var(--zn-body))}.zn-nav ul li a.zn-tb-active{color:rgb(var(--zn-purple-text))}.zn-nav ul:last-child:after{display:none}.zn-nav strong,.zn-nav li a{padding:10px 20px}.zn-nav strong{display:block;margin-top:10px;font-size:13px;letter-spacing:0.93px;color:rgb(var(--zn-text-heading));font-weight:600;padding-bottom:5px;text-transform:uppercase}*,*::before,*::after{box-sizing:border-box}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}strong{font-weight:bolder}b{font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:inline-block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}button,.zn-button{border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap}button:hover:not([disabled]),.zn-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{display:block;width:100%;border-radius:5px;border-style:solid;border-width:1px !important;border-color:rgb(var(--zn-border-color));background-color:rgb(var(--zn-input-bg));outline:none}input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type=file]:focus,input[list]:focus,textarea:focus,select:focus{border-color:rgb(var(--zn-primary));box-shadow:0 0 0 3px rgba(var(--zn-primary),0.3)}input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=week]::-moz-placeholder, input[type=file]::-moz-placeholder, input[list]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}input[type=date]::placeholder,input[type=datetime-local]::placeholder,input[type=email]::placeholder,input[type=month]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,input[type=time]::placeholder,input[type=url]::placeholder,input[type=week]::placeholder,input[type=file]::placeholder,input[list]::placeholder,textarea::placeholder,select::placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}@media (min-width:360px){input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{padding:10px}}label{font-weight:600;font-size:rgb(var(--zn-font-size-medium));color:rgb(var(--zn-text-heading));display:block;margin-bottom:5px;margin-top:15px}input[type=checkbox],input[type=radio]{border-radius:5px}input[type=radio]{border-radius:50%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:10px;background-color:rgb(var(--zn-border-color));height:10px;accent-color:rgb(var(--zn-primary));width:100%;max-width:768px}fieldset{border-color:rgba(var(--zn-primary),20%);border-width:2px;padding:0 15px 15px}select option{padding:5px}select>option:checked{background-color:rgba(var(--zn-primary),20%);border-radius:5px}fieldset>legend{padding:5px}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap}input[type=button]:hover:not([disabled]),input[type=submit]:hover:not([disabled]),button[type=submit]:not(.button):hover:not([disabled]),button[type=button]:not(.button):hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){width:auto}div+button{margin-top:15px}input[type=file]::-webkit-file-upload-button{border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;margin-right:10px}input[type=file]::-webkit-file-upload-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input::-webkit-calendar-picker-indicator{cursor:pointer;padding:10px}input[list]::-webkit-calendar-picker-indicator{padding:10px 5px}.input--with-icon{position:relative}.input--with-icon zn-icon{padding:14px;position:absolute;top:50%;pointer-events:none;transform:translateY(-50%);left:10px;background-color:rgb(var(--zn-primary));color:rgb(var(--zn-text));border-radius:50%}.input--with-icon input{padding-left:40px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:rgb(var(--zn-text));-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;box-shadow:inset 0 0 20px 20px rgba(35,35,35,0.1607843137)}select{height:43px}.no-border{border:none !important}table{border-collapse:separate !important;border-spacing:0;width:100%;max-width:100%;table-layout:auto;text-align:left}table thead{font-weight:500}table tbody a{cursor:pointer;color:rgb(var(--zn-primary))}table tbody tr td{border-top:1px solid rgb(var(--zn-border-color)) !important}table tbody tr:first-of-type td{border-top:0 !important}table tbody tr:nth-of-type(even){background-color:rgba(var(--zn-body))}table thead tr th:first-of-type,table tbody tr td:first-of-type{padding-left:14px}table thead tr th:last-of-type,table tbody tr td:last-of-type{padding-right:14px}table th,table td{padding:15px;min-width:90px;white-space:nowrap}table th:first-child,table td:first-child{padding-left:0}table td>span{white-space:normal}table th{padding-bottom:0;border-bottom:1px solid rgb(var(--zn-border-color))}.zn-table-fixed{table-layout:fixed}thead tr:last-of-type th{border-bottom:0}.opacity-100{opacity:1}.opacity-90{opacity:0.9}.opacity-80{opacity:0.8}.opacity-60{opacity:0.6}.opacity-50{opacity:0.5}.opacity-40{opacity:0.4}.opacity-10{opacity:0.1}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host button,:host a{width:100%}.button{border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;--btn-color:var(--zn-primary);--notification-color:rgb(var(--zn-color-error));border-width:1px;border-color:transparent;display:inline-flex;position:relative}.button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}.button.button--info{--btn-color:var(--zn-color-info)}.button.button--error{--btn-color:var(--zn-color-error)}.button.button--warning{--btn-color:var(--zn-color-warning)}.button.button--success{--btn-color:var(--zn-color-success)}.button__label--hidden{visibility:hidden}.button.button--muted-notification{--notification-color:rgb(var(--zn-color-info))}.button--has-notification{position:relative}.button--has-notification::after{content:attr(data-notification);position:absolute;display:flex;justify-content:center;align-items:center;top:0;inset-inline-end:0;width:15px;height:15px;border-radius:50%;font-size:10px;color:white;background-color:var(--notification-color)}.button--has-notification.button--notification-dot:after{content:"";width:5px;height:5px;top:5px;right:3px}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:2px solid rgb(var(--btn-color));outline-offset:2px}[disabled]{cursor:not-allowed;opacity:0.5}[disabled] *{pointer-events:none}.button--standard{background-color:rgba(var(--btn-color),0.85);border-color:rgb(var(--btn-color));color:rgba(255,255,255,0.9)}.button--standard.button--secondary{background-color:var(--zn-color-neutral-50);border-color:var(--zn-color-neutral-50);color:rgb(var(--zn-primary))}.button--standard.button--secondary:hover:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard.button--secondary:active:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard:hover:not([disabled]){background-color:rgba(var(--btn-color),0.8)}.button--standard:active:not([disabled]){background-color:rgba(var(--btn-color))}.button--outline{background:none;border-width:1px;border-color:rgb(var(--btn-color));color:rgb(var(--btn-color))}.button--outline:hover:not([disabled]),.button--outline:active:not([disabled]){background-color:rgb(var(--btn-color));color:white}.button--outline.button--secondary{border-color:#F3EFFF}.button--outline.button--secondary:hover:not([disabled]),.button--outline.button--secondary:active:not([disabled]){background-color:rgb(221,218,236)}.button--text{background:none;color:rgb(var(--btn-color))}.button--text:hover:not([disabled]),.button--text:active:not([disabled]){background-color:rgba(var(--btn-color),0.1)}.button--text.button--secondary{font-weight:normal}.button--x-small{padding:2px 10px;font-size:12px}.button--content{padding:0 0;font-size:12px}.button--content zn-icon{line-height:0}.button--grow{width:100%}.button--small{padding:4px 14px}.button--large{padding:10px 20px}.button--with-icon:not(.button--with-content).button--x-small,.button--with-icon:not(.button--with-content).button--small{padding:4px}.button--with-icon:not(.button--with-content).button--medium{padding:7px}.button--with-icon:not(.button--with-content).button--large{padding:10px;font-size:16px}.button--with-icon.button--with-content.button--x-small,.button--with-icon.button--with-content.button--small{padding-left:10px}.button--with-icon.button--with-content.button--x-small.button--icon-left,.button--with-icon.button--with-content.button--small.button--icon-left{padding-left:10px}.button--with-icon.button--with-content.button--x-small.button--icon-left zn-icon,.button--with-icon.button--with-content.button--small.button--icon-left zn-icon{margin-right:4px}.button--with-icon.button--with-content.button--x-small.button--icon-right,.button--with-icon.button--with-content.button--small.button--icon-right{padding-right:10px}.button--with-icon.button--with-content.button--x-small.button--icon-right zn-icon,.button--with-icon.button--with-content.button--small.button--icon-right zn-icon{margin-left:4px}.button--with-icon.button--with-content.button--medium.button--icon-left{padding-left:10px}.button--with-icon.button--with-content.button--medium.button--icon-left zn-icon{margin-right:6px}.button--with-icon.button--with-content.button--medium.button--icon-right{padding-right:10px}.button--with-icon.button--with-content.button--medium.button--icon-right zn-icon{margin-left:6px}.button--with-icon.button--with-content.button--large.button--icon-left{padding-left:14px}.button--with-icon.button--with-content.button--large.button--icon-left zn-icon{margin-right:8px}.button--with-icon.button--with-content.button--large.button--icon-right{padding-right:14px}.button--with-icon.button--with-content.button--large.button--icon-right zn-icon{margin-left:8px}.button--square{border-radius:0}.button--transparent{background-color:transparent;border-color:transparent !important;color:inherit}.button--transparent:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.1)}.button--transparent:active:not([disabled]){background-color:rgba(var(--zn-primary),0.2)}.button--star{--btn-color:var(--zn-orange);background-color:rgb(var(--btn-color));border-color:rgb(var(--btn-color));color:white;opacity:1 !important}.button--star:hover:not([disabled]){background-color:rgb(var(--btn-color))}.button--star:active{background-color:rgb(var(--btn-color))}.button--star.button--outline{background-color:transparent;border-color:rgb(var(--btn-color));color:rgb(var(--btn-color))}.button--star.button--outline:hover:not([disabled]),.button--star.button--outline:active:not([disabled]){background-color:rgba(var(--btn-color));color:white}.button--loading-bg-transparent{background-color:transparent}.button--loading-fill{pointer-events:none;position:absolute;z-index:1;background-color:rgba(var(--btn-color),0.85);border-radius:inherit;transition:width 0s;animation:loading-fill-grow var(--loading-duration,2s) linear forwards;inset:-1px}.button--loading-fill-transparent{background-color:rgba(var(--zn-primary),0.1)}.button--loading-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.button--loading-text{z-index:5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:inherit;font-weight:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;pointer-events:none;color:inherit}.button--loading-text .loading-countdown{margin-left:3px}.button--loading-text-left{justify-content:flex-start;padding-inline-start:7px}.button--loading-text-right{justify-content:flex-end;padding-inline-end:7px}.button--relative-wrapper{position:relative;display:inline-flex;height:100%;width:100%}@keyframes loading-fill-grow{from{width:0}to{width:100%}}:host([vertical-align=center]){align-self:center}:host([vertical-align=end]){align-self:end}:host([vertical-align=start]){align-self:start}:host([grow]){width:100%}:host([grow]) button{width:100%}:host([data-zn-button-group__button--grow]){flex-grow:1;flex-basis:0}:host([data-zn-button-group__button--inner]) .button{border-radius:0 !important;border-left:0 !important;border-right:0 !important}:host([data-zn-button-group__button]:not([data-zn-button-group__button--first]):not(:hover)) .button:after{content:"";position:absolute;top:0;inset-inline-start:0;bottom:0;border-left:solid 1px;mix-blend-mode:multiply;color:rgb(var(--zn-border-color))}:host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button{border-radius:5px 0 0 5px !important;border-right:0 !important}:host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button{border-radius:0 5px 5px 0 !important;border-left:0 !important}`;var tt=class extends J{constructor(){super(...arguments);this.formControlController=new ot(this);this.hasSlotController=new Ge(this,"[default]");this._loadingState={countdown:null,interval:void 0};this.color="default";this.size="medium";this.text=!1;this.outline=!1;this.disabled=!1;this.grow=!1;this.square=!1;this.dropdownCloser=!1;this.mutedNotifications=!1;this.content="";this.icon="";this.gaid="";this.iconPosition="left";this.rel="noreferrer noopener";this.autoClick=!1;this.autoClickDelay=2e3;this.loadingText="Loading...";this.loadingTextPosition="center";this.loading=!1;this.handleClick=()=>{if(!this.disabled){if(this.dropdownCloser){let i=null,n=this,r=0,a=30;for(;n&&r<a;){if(n instanceof $a){i=n;break}n=n.parentElement||(n.getRootNode()instanceof ShadowRoot?n.getRootNode().host:null),r++}i==null||i.hide()}this.type==="submit"&&this.formControlController.submit()}}}get validity(){return this._isButton()&&this.button?this.button.validity:tr}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}firstUpdated(){this._isButton()&&this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback(),this.teardownAutoClick()}async handleAutoClickChange(i,n){n?(await this.updateComplete,this.setupAutoClick()):this.teardownAutoClick()}updated(i){if(super.updated(i),this.button){let n=this.button.querySelector(".button--loading-fill");if(n&&n.remove(),this.loading){let r=`${this.autoClickDelay/1e3}s`,a=document.createElement("div");a.classList.add("button--loading-fill"),a.setAttribute("style",`--loading-duration: ${r}`),this.button.classList.contains("button--transparent")&&(a.classList.add("button--loading-fill-transparent"),this.button.classList.add("button--loading-bg-transparent")),this.button.prepend(a),this.button.classList.add("button--loading-bg")}else this.button.classList.remove("button--loading-bg"),this.button.classList.remove("button--loading-bg-transparent");this.updateCountdownText()}}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(i){this._isButton()&&(this.button.setCustomValidity(i),this.formControlController.updateValidity())}_isLink(){return this.href!==void 0}_isButton(){return!this._isLink()}setupAutoClick(){this.button&&(this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!0,this._loadingState.countdown=Math.ceil(this.autoClickDelay/1e3),this.updateCountdownText(),this._loadingState.interval=window.setInterval(()=>{this._loadingState.countdown&&this._loadingState.countdown>0&&(this._loadingState.countdown--,this.updateCountdownText())},1e3),this._autoClickTimeout=window.setTimeout(()=>{var i;this.loading=!1,this._loadingState.countdown=null,this.updateCountdownText(),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),(i=this.button)==null||i.click()},this.autoClickDelay))}updateCountdownText(){let i=this._loadingState.countdown&&this._loadingState.countdown>0?` (${this._loadingState.countdown}s)`:"";if(this.countdownContainer)for(let n of this.countdownContainer)n.textContent=i}teardownAutoClick(){this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!1,this._loadingState.countdown=null,this.button&&(this.button.style.width="")}render(){let i=this._isLink(),n=this.loading&&this.autoClick,r=this.icon&&!this.loading?ln`
+      </zn-popup>`}};Si.styles=ie(b4),y([be("slot:not([name])")],Si.prototype,"defaultSlot",2),y([be(".tooltip__body")],Si.prototype,"body",2),y([be("zn-popup")],Si.prototype,"popup",2),y([_()],Si.prototype,"content",2),y([_()],Si.prototype,"placement",2),y([_({type:Boolean,reflect:!0})],Si.prototype,"disabled",2),y([_({type:Number})],Si.prototype,"distance",2),y([_({type:Boolean,reflect:!0})],Si.prototype,"open",2),y([_({type:Number})],Si.prototype,"skidding",2),y([_()],Si.prototype,"trigger",2),y([_({type:Boolean})],Si.prototype,"hoist",2),y([He("open",{waitUntilFirstUpdate:!0})],Si.prototype,"handleOpenChange",1),y([He(["content","distance","hoist","placement","skidding"])],Si.prototype,"handleOptionsChange",1),y([He("disabled")],Si.prototype,"handleDisabledChange",1);var Na=Si;Si.define("zn-tooltip");var v4=ne`:host,html,body{color:rgba(var(--zn-text),var(--zn-text-opacity));font-family:var(--zn-font-family-sans);font-feature-settings:normal;font-variation-settings:normal;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tab-size:4;-o-tab-size:4;tab-size:4;margin:0}html,body{background-color:rgba(var(--zn-body),var(--zn-bg-opacity));container-type:size;min-height:100%;height:100%}.inline-container{container-type:inline-size}.app-container{container-type:inline-size;display:flex;flex:1;flex-direction:column;position:relative;max-height:100%;height:100%;width:100%;max-width:100%}.inline-app-container,.app-container.inline-app-container,[inline-container] .app-container{display:block;height:auto;flex:unset}hr{height:0;border:none;border-top:1px solid rgb(var(--zn-border-color))}code,kbd,samp,pre,.mono{font-family:var(--zn-font-family-mono);font-size:1em}small{font-size:80%}.hidden{display:none !important}.visibility-hidden{visibility:hidden}h1,h2,h3,h4,h5,h6{font-weight:var(--zn-font-weight-medium);color:rgb(var(--zn-text-heading))}h6{font-size:var(--zn-font-size-x-small)}h5{font-size:var(--zn-font-size-small)}h4{font-size:var(--zn-font-size-medium)}h3{font-size:var(--zn-font-size-large)}h2{font-size:var(--zn-font-size-x-large)}h1{font-size:var(--zn-font-size-2x-large)}kbd{font-family:monospace;background-color:#eee;color:#333;border:1px solid rgb(var(--zn-border-color));border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5) inset;display:inline-block;font-size:13px;line-height:20px;padding:1px 6px;white-space:nowrap;min-width:15px;color:rgba(0,0,0,0.5)}[t=dark] kbd{background-color:rgb(25,25,25);box-shadow:0 1px 1px rgba(0,0,0,0.2),0 1px 0 0 rgba(110,110,110,0.5) inset;color:#eee}[tab]{cursor:pointer}.zn-link:hover{--zn-text:rgb(var(--zn-primary));--icon-color:rgb(var(--zn-primary));--zn-text-heading:rgb(var(--zn-primary));--property-color:rgb(var(--zn-primary));opacity:1}.grow{flex-grow:1}.no-grow{flex-grow:0}.shrink{flex-shrink:1}.no-shrink{flex-shrink:0}.block{display:block}.flex{display:flex}.flex-wrap{display:flex;flex-wrap:wrap}.flex-col{display:flex;flex-direction:column}.flex-mid{display:flex;align-items:center}.flex-jc{justify-content:center}.flex-between{display:flex;justify-content:space-between}.flex-bottom{display:flex;align-items:flex-end}.equal{flex-basis:50%}.m-auto{margin:auto}.mt-auto{margin-top:auto}.zn-pad{padding:var(--zn-spacing-medium,0)}.zn-pad-y,.zn-py{padding-top:15px;padding-bottom:15px}.zn-pad-x,.zn-px{padding-left:15px;padding-right:15px}.zn-pr{padding-right:15px}.zn-pl{padding-left:15px}.zn-pt{padding-top:15px}.zn-pb{padding-bottom:15px}.zn-margin{margin:15px}.zn-mx{margin-left:15px;margin-right:15px}.zn-my{margin-top:15px;margin-bottom:15px}.zn-mt{margin-top:15px}.zn-mb{margin-bottom:15px}.zn-ml{margin-left:15px}.zn-mr{margin-right:15px}.zn-mxa{margin-left:auto;margin-right:auto}.zn-mya{margin-top:auto;margin-bottom:auto}.zn-mta{margin-top:auto}.zn-mba{margin-bottom:auto}.zn-mla{margin-left:auto}.zn-mra{margin-right:auto}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}@keyframes act-vanish{from{transform:scale(1);opacity:1;max-height:100%}to{transform:scale(0.8);opacity:0;max-height:0}}.act-vanish{animation:ease-in act-vanish 600ms forwards;transform-origin:top center;background-color:rgba(var(--zn-color-error),0.3);display:block;overflow:hidden}.h-full{height:100%}.w-full{width:100%}.zn-panel-bg{background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.zn-container{display:flex;flex-direction:column;flex-grow:1;max-height:100%;overflow:hidden}.tar{text-align:right}.tal{text-align:left}.tac{text-align:center}.zn-empty-hide:empty{display:none}.ml-auto{margin-left:auto}.zn-b-dash{border-style:dashed}.zn-b-dotted{border-style:dotted}.zn-border{border-style:solid;border-width:1px !important}.zn-bt{border-top-style:solid;border-top-width:1px !important}.zn-bb{border-bottom-style:solid;border-bottom-width:1px !important}.zn-bl{border-left-style:solid;border-left-width:1px !important}.zn-br{border-right-style:solid;border-right-width:1px !important}.unifi-action{display:flex;gap:10px;padding:10px 0;align-items:center}.zn-panel-bar{border-bottom:1px solid rgb(var(--zn-border-color));background-color:rgba(var(--zn-panel),0.9);padding:3px;gap:3px;display:flex;flex-wrap:wrap;align-items:center;z-index:1}.zn-panel-bar--large{padding:6px;gap:6px}.scroll-container{overflow:auto;flex-grow:1;position:relative;display:flex;flex-direction:column;max-height:100%}.zn-divide{display:flex;flex-direction:column}.zn-divide>*:not(:first-child){border-top:1px solid rgb(var(--zn-border-color))}.zn-divide>div:empty+div:not(:first-child){border-top:0}.zn-divide-y{display:flex;flex-direction:row}.zn-divide-y>*:not(:first-child):not(:empty){border-left:1px solid rgb(var(--zn-border-color))}.zn-c-pad{--zn-pad-spacing:var(--zn-spacing-large)}.zn-c-pad-x>*{padding-left:var(--zn-pad-spacing);padding-right:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:first-child){padding-top:var(--zn-pad-spacing)}.zn-c-pad-y>*:not(:last-child){padding-bottom:var(--zn-pad-spacing)}.zn-nav.zn-transparent{background:transparent}.zn-nav{background:rgba(var(--zn-panel),var(--zn-panel-opacity));border-right:1px solid rgb(var(--zn-border-color));max-width:320px;height:100%;padding-top:5px}.zn-nav ul{list-style:none;padding-bottom:10px;margin:0;display:flex;flex-direction:column;position:relative}.zn-nav ul:after{content:"";height:1px;left:18px;right:18px;bottom:0;position:absolute;background:rgb(var(--zn-border-color))}.zn-nav ul li a{text-decoration:none;color:rgb(var(--zn-text));display:block;font-weight:500;cursor:pointer}.zn-nav ul li a:hover,.zn-nav ul li a.zn-tb-active{background:rgb(var(--zn-body))}.zn-nav ul li a.zn-tb-active{color:rgb(var(--zn-purple-text))}.zn-nav ul:last-child:after{display:none}.zn-nav strong,.zn-nav li a{padding:10px 20px}.zn-nav strong{display:block;margin-top:10px;font-size:13px;letter-spacing:0.93px;color:rgb(var(--zn-text-heading));font-weight:600;padding-bottom:5px;text-transform:uppercase}*,*::before,*::after{box-sizing:border-box}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}strong{font-weight:bolder}b{font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:inline-block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}button,.zn-button{border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap}button:hover:not([disabled]),.zn-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{display:block;width:100%;border-radius:5px;border-style:solid;border-width:1px !important;border-color:rgb(var(--zn-border-color));background-color:rgb(var(--zn-input-bg));outline:none}input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type=file]:focus,input[list]:focus,textarea:focus,select:focus{border-color:rgb(var(--zn-primary));box-shadow:0 0 0 3px rgba(var(--zn-primary),0.3)}input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=week]::-moz-placeholder, input[type=file]::-moz-placeholder, input[list]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}input[type=date]::placeholder,input[type=datetime-local]::placeholder,input[type=email]::placeholder,input[type=month]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,input[type=time]::placeholder,input[type=url]::placeholder,input[type=week]::placeholder,input[type=file]::placeholder,input[list]::placeholder,textarea::placeholder,select::placeholder{font-weight:400;color:rgba(var(--zn-text),0.6)}@media (min-width:360px){input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type=file],input[list],textarea,select{padding:10px}}label{font-weight:600;font-size:rgb(var(--zn-font-size-medium));color:rgb(var(--zn-text-heading));display:block;margin-bottom:5px;margin-top:15px}input[type=checkbox],input[type=radio]{border-radius:5px}input[type=radio]{border-radius:50%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:10px;background-color:rgb(var(--zn-border-color));height:10px;accent-color:rgb(var(--zn-primary));width:100%;max-width:768px}fieldset{border-color:rgba(var(--zn-primary),20%);border-width:2px;padding:0 15px 15px}select option{padding:5px}select>option:checked{background-color:rgba(var(--zn-primary),20%);border-radius:5px}fieldset>legend{padding:5px}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap}input[type=button]:hover:not([disabled]),input[type=submit]:hover:not([disabled]),button[type=submit]:not(.button):hover:not([disabled]),button[type=button]:not(.button):hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input[type=button],input[type=submit],button[type=submit]:not(.button),button[type=button]:not(.button){width:auto}div+button{margin-top:15px}input[type=file]::-webkit-file-upload-button{border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;margin-right:10px}input[type=file]::-webkit-file-upload-button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}input::-webkit-calendar-picker-indicator{cursor:pointer;padding:10px}input[list]::-webkit-calendar-picker-indicator{padding:10px 5px}.input--with-icon{position:relative}.input--with-icon zn-icon{padding:14px;position:absolute;top:50%;pointer-events:none;transform:translateY(-50%);left:10px;background-color:rgb(var(--zn-primary));color:rgb(var(--zn-text));border-radius:50%}.input--with-icon input{padding-left:40px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:rgb(var(--zn-text));-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;box-shadow:inset 0 0 20px 20px rgba(35,35,35,0.1607843137)}select{height:43px}.no-border{border:none !important}table{border-collapse:separate !important;border-spacing:0;width:100%;max-width:100%;table-layout:auto;text-align:left}table thead{font-weight:500}table tbody a{cursor:pointer;color:rgb(var(--zn-primary))}table tbody tr td{border-top:1px solid rgb(var(--zn-border-color)) !important}table tbody tr:first-of-type td{border-top:0 !important}table tbody tr:nth-of-type(even){background-color:rgba(var(--zn-body))}table thead tr th:first-of-type,table tbody tr td:first-of-type{padding-left:14px}table thead tr th:last-of-type,table tbody tr td:last-of-type{padding-right:14px}table th,table td{padding:15px;min-width:90px;white-space:nowrap}table th:first-child,table td:first-child{padding-left:0}table td>span{white-space:normal}table th{padding-bottom:0;border-bottom:1px solid rgb(var(--zn-border-color))}.zn-table-fixed{table-layout:fixed}thead tr:last-of-type th{border-bottom:0}.opacity-100{opacity:1}.opacity-90{opacity:0.9}.opacity-80{opacity:0.8}.opacity-60{opacity:0.6}.opacity-50{opacity:0.5}.opacity-40{opacity:0.4}.opacity-10{opacity:0.1}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host button,:host a{width:100%}.button{border-radius:var(--zn-border-radius-medium);display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;margin:auto;width:-moz-fit-content;width:fit-content;background-color:rgb(var(--zn-primary));color:rgba(255,255,255,0.9);font-weight:600;cursor:pointer;vertical-align:middle;border-color:transparent;white-space:nowrap;--btn-color:var(--zn-primary);--notification-color:rgb(var(--zn-color-error));border-width:1px;border-color:transparent;height:100%;display:inline-flex;position:relative}.button:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.8)}.button.button--info{--btn-color:var(--zn-color-info)}.button.button--error{--btn-color:var(--zn-color-error)}.button.button--warning{--btn-color:var(--zn-color-warning)}.button.button--success{--btn-color:var(--zn-color-success)}.button__label--hidden{visibility:hidden}.button.button--muted-notification{--notification-color:rgb(var(--zn-color-info))}.button--has-notification{position:relative}.button--has-notification::after{content:attr(data-notification);position:absolute;display:flex;justify-content:center;align-items:center;top:0;inset-inline-end:0;width:15px;height:15px;border-radius:50%;font-size:10px;color:white;background-color:var(--notification-color)}.button--has-notification.button--notification-dot:after{content:"";width:5px;height:5px;top:5px;right:3px}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:2px solid rgb(var(--btn-color));outline-offset:2px}[disabled]{cursor:not-allowed;opacity:0.5}[disabled] *{pointer-events:none}.button--standard{background-color:rgba(var(--btn-color),0.85);border-color:rgb(var(--btn-color));color:rgba(255,255,255,0.9)}.button--standard.button--secondary{background-color:var(--zn-color-neutral-50);border-color:var(--zn-color-neutral-50);color:rgb(var(--zn-primary))}.button--standard.button--secondary:hover:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard.button--secondary:active:not([disabled]){background-color:var(--zn-color-neutral-100)}.button--standard:hover:not([disabled]){background-color:rgba(var(--btn-color),0.8)}.button--standard:active:not([disabled]){background-color:rgba(var(--btn-color))}.button--outline{background:none;border-width:1px;border-color:rgb(var(--btn-color));color:rgb(var(--btn-color))}.button--outline:hover:not([disabled]),.button--outline:active:not([disabled]){background-color:rgb(var(--btn-color));color:white}.button--outline.button--secondary{border-color:#F3EFFF}.button--outline.button--secondary:hover:not([disabled]),.button--outline.button--secondary:active:not([disabled]){background-color:rgb(221,218,236)}.button--text{background:none;color:rgb(var(--btn-color))}.button--text:hover:not([disabled]),.button--text:active:not([disabled]){background-color:rgba(var(--btn-color),0.1)}.button--text.button--secondary{font-weight:normal}.button--x-small{padding:2px 10px;font-size:12px}.button--content{padding:0 0;font-size:12px}.button--content zn-icon{line-height:0}.button--grow{width:100%}.button--small{padding:4px 14px}.button--large{padding:10px 20px}.button--with-icon:not(.button--with-content).button--x-small,.button--with-icon:not(.button--with-content).button--small{padding:4px}.button--with-icon:not(.button--with-content).button--medium{padding:7px}.button--with-icon:not(.button--with-content).button--large{padding:10px;font-size:16px}.button--with-icon.button--with-content.button--x-small,.button--with-icon.button--with-content.button--small{padding-left:10px}.button--with-icon.button--with-content.button--x-small.button--icon-left,.button--with-icon.button--with-content.button--small.button--icon-left{padding-left:10px}.button--with-icon.button--with-content.button--x-small.button--icon-left zn-icon,.button--with-icon.button--with-content.button--small.button--icon-left zn-icon{margin-right:4px}.button--with-icon.button--with-content.button--x-small.button--icon-right,.button--with-icon.button--with-content.button--small.button--icon-right{padding-right:10px}.button--with-icon.button--with-content.button--x-small.button--icon-right zn-icon,.button--with-icon.button--with-content.button--small.button--icon-right zn-icon{margin-left:4px}.button--with-icon.button--with-content.button--medium.button--icon-left{padding-left:10px}.button--with-icon.button--with-content.button--medium.button--icon-left zn-icon{margin-right:6px}.button--with-icon.button--with-content.button--medium.button--icon-right{padding-right:10px}.button--with-icon.button--with-content.button--medium.button--icon-right zn-icon{margin-left:6px}.button--with-icon.button--with-content.button--large.button--icon-left{padding-left:14px}.button--with-icon.button--with-content.button--large.button--icon-left zn-icon{margin-right:8px}.button--with-icon.button--with-content.button--large.button--icon-right{padding-right:14px}.button--with-icon.button--with-content.button--large.button--icon-right zn-icon{margin-left:8px}.button--square{border-radius:0}.button--transparent{background-color:transparent;border-color:transparent !important;color:inherit}.button--transparent:hover:not([disabled]){background-color:rgba(var(--zn-primary),0.1)}.button--transparent:active:not([disabled]){background-color:rgba(var(--zn-primary),0.2)}.button--star{--btn-color:var(--zn-orange);background-color:rgb(var(--btn-color));border-color:rgb(var(--btn-color));color:white;opacity:1 !important}.button--star:hover:not([disabled]){background-color:rgb(var(--btn-color))}.button--star:active{background-color:rgb(var(--btn-color))}.button--star.button--outline{background-color:transparent;border-color:rgb(var(--btn-color));color:rgb(var(--btn-color))}.button--star.button--outline:hover:not([disabled]),.button--star.button--outline:active:not([disabled]){background-color:rgba(var(--btn-color));color:white}.button--loading-bg-transparent{background-color:transparent}.button--loading-fill{pointer-events:none;position:absolute;z-index:1;background-color:rgba(var(--btn-color),0.85);border-radius:inherit;transition:width 0s;animation:loading-fill-grow var(--loading-duration,2s) linear forwards;inset:-1px}.button--loading-fill-transparent{background-color:rgba(var(--zn-primary),0.1)}.button--loading-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.button--loading-text{z-index:5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:inherit;font-weight:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;pointer-events:none;color:inherit}.button--loading-text .loading-countdown{margin-left:3px}.button--loading-text-left{justify-content:flex-start;padding-inline-start:7px}.button--loading-text-right{justify-content:flex-end;padding-inline-end:7px}.button--relative-wrapper{position:relative;display:inline-flex;height:100%;width:100%}@keyframes loading-fill-grow{from{width:0}to{width:100%}}:host([vertical-align=center]){align-self:center}:host([vertical-align=end]){align-self:end}:host([vertical-align=start]){align-self:start}:host([grow]){width:100%}:host([grow]) button{width:100%}:host([data-zn-button-group__button--grow]){flex-grow:1;flex-basis:0}:host([data-zn-button-group__button--inner]) .button{border-radius:0 !important;border-left:0 !important;border-right:0 !important}:host([data-zn-button-group__button]:not([data-zn-button-group__button--first]):not(:hover)) .button:after{content:"";position:absolute;top:0;inset-inline-start:0;bottom:0;border-left:solid 1px;mix-blend-mode:multiply;color:rgb(var(--zn-border-color))}:host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button{border-radius:5px 0 0 5px !important;border-right:0 !important}:host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button{border-radius:0 5px 5px 0 !important;border-left:0 !important}`;var tt=class extends J{constructor(){super(...arguments);this.formControlController=new ot(this);this.hasSlotController=new Ge(this,"[default]");this._loadingState={countdown:null,interval:void 0};this.color="default";this.size="medium";this.text=!1;this.outline=!1;this.disabled=!1;this.grow=!1;this.square=!1;this.dropdownCloser=!1;this.mutedNotifications=!1;this.content="";this.icon="";this.gaid="";this.iconPosition="left";this.rel="noreferrer noopener";this.autoClick=!1;this.autoClickDelay=2e3;this.loadingText="Loading...";this.loadingTextPosition="center";this.loading=!1;this.handleClick=()=>{if(!this.disabled){if(this.dropdownCloser){let i=null,n=this,r=0,a=30;for(;n&&r<a;){if(n instanceof $a){i=n;break}n=n.parentElement||(n.getRootNode()instanceof ShadowRoot?n.getRootNode().host:null),r++}i==null||i.hide()}this.type==="submit"&&this.formControlController.submit()}}}get validity(){return this._isButton()&&this.button?this.button.validity:tr}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}firstUpdated(){this._isButton()&&this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback(),this.teardownAutoClick()}async handleAutoClickChange(i,n){n?(await this.updateComplete,this.setupAutoClick()):this.teardownAutoClick()}updated(i){if(super.updated(i),this.button){let n=this.button.querySelector(".button--loading-fill");if(n&&n.remove(),this.loading){let r=`${this.autoClickDelay/1e3}s`,a=document.createElement("div");a.classList.add("button--loading-fill"),a.setAttribute("style",`--loading-duration: ${r}`),this.button.classList.contains("button--transparent")&&(a.classList.add("button--loading-fill-transparent"),this.button.classList.add("button--loading-bg-transparent")),this.button.prepend(a),this.button.classList.add("button--loading-bg")}else this.button.classList.remove("button--loading-bg"),this.button.classList.remove("button--loading-bg-transparent");this.updateCountdownText()}}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(i){this._isButton()&&(this.button.setCustomValidity(i),this.formControlController.updateValidity())}_isLink(){return this.href!==void 0}_isButton(){return!this._isLink()}setupAutoClick(){this.button&&(this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!0,this._loadingState.countdown=Math.ceil(this.autoClickDelay/1e3),this.updateCountdownText(),this._loadingState.interval=window.setInterval(()=>{this._loadingState.countdown&&this._loadingState.countdown>0&&(this._loadingState.countdown--,this.updateCountdownText())},1e3),this._autoClickTimeout=window.setTimeout(()=>{var i;this.loading=!1,this._loadingState.countdown=null,this.updateCountdownText(),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),(i=this.button)==null||i.click()},this.autoClickDelay))}updateCountdownText(){let i=this._loadingState.countdown&&this._loadingState.countdown>0?` (${this._loadingState.countdown}s)`:"";if(this.countdownContainer)for(let n of this.countdownContainer)n.textContent=i}teardownAutoClick(){this._autoClickTimeout&&(window.clearTimeout(this._autoClickTimeout),this._autoClickTimeout=void 0),this._loadingState.interval&&(window.clearInterval(this._loadingState.interval),this._loadingState.interval=void 0),this.loading=!1,this._loadingState.countdown=null,this.button&&(this.button.style.width="")}render(){let i=this._isLink(),n=this.loading&&this.autoClick,r=this.icon&&!this.loading?ln`
         <zn-icon part="icon" src="${this.icon}" id="xy2" size="${this.iconSize?this.iconSize:16}"
                  color="${this.iconColor?this.iconColor:null}"></zn-icon>`:"",a=i?Ia`a`:Ia`button`,s=ln`
       <${a}
@@ -838,13 +838,16 @@ function print() { __p += __j.call(arguments, '') }
           </zn-sp>
         </zn-panel>
       </zn-dropdown>
-    `}};nn.styles=ie(I5),y([be(".input__control")],nn.prototype,"input",2),y([be(".defined-label__dropdown")],nn.prototype,"dropdown",2),y([_()],nn.prototype,"value",2),y([_()],nn.prototype,"inputValue",2),y([_({attribute:"input-size",reflect:!0})],nn.prototype,"inputSize",2),y([_()],nn.prototype,"name",2),y([_()],nn.prototype,"title",2),y([_({type:Boolean})],nn.prototype,"disabled",2),y([_({attribute:"allow-custom",type:Boolean})],nn.prototype,"allowCustom",2),y([_({type:Array,attribute:"predefined-labels"})],nn.prototype,"predefinedLabels",2),y([He("value",{waitUntilFirstUpdate:!0})],nn.prototype,"handleValueChange",1);var LN=nn;nn.define("zn-defined-label");var $5=ne`@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}.note{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;flex-wrap:nowrap;padding:var(--zn-spacing-x-small) var(--zn-spacing-small);gap:var(--zn-spacing-3x-small);border-left:3px solid transparent}.note__header{display:flex;justify-content:space-between}.note__header__caption{font-weight:var(--zn-font-weight-semibold);font-size:var(--zn-font-size-medium);color:rgb(var(--zn-text-heading))}.note__header__date{font-size:var(--zn-font-size-small)}.note__body-container{position:relative;max-width:var(--zn-container-md)}.note__body{display:block}.note__toggle{margin-top:var(--zn-spacing-2x-small)}.note__toggle__btn{background:none;border:none;color:var(--zn-color-primary-500,currentColor);font:inherit;cursor:pointer;padding:0}.note__body--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--note-collapse-lines,0);overflow:hidden;text-overflow:ellipsis}.note--red{border-left:3px solid var(--zn-color-red-600);background-color:hsla(from var(--zn-color-red-600) h s l/0.02)}.note--red .note__header__caption{color:hsl(from var(--zn-color-red-600) h s 40%)}.note--blue{border-left:3px solid var(--zn-color-blue-500);background-color:hsla(from var(--zn-color-blue-500) h s l/0.02)}.note--blue .note__header__caption{color:hsl(from var(--zn-color-blue-500) h s 40%)}.note--orange{border-left:3px solid var(--zn-color-orange-500);background-color:hsla(from var(--zn-color-orange-500) h s l/0.02)}.note--orange .note__header__caption{color:hsl(from var(--zn-color-orange-500) h s 40%)}.note--yellow{border-left:3px solid var(--zn-color-yellow-400);background-color:hsla(from var(--zn-color-yellow-400) h s l/0.02)}.note--yellow .note__header__caption{color:hsl(from var(--zn-color-yellow-400) h s 40%)}.note--indigo{border-left:3px solid var(--zn-color-indigo-400);background-color:hsla(from var(--zn-color-indigo-400) h s l/0.02)}.note--indigo .note__header__caption{color:hsl(from var(--zn-color-indigo-400) h s 40%)}.note--violet{border-left:3px solid var(--zn-color-violet-600);background-color:hsla(from var(--zn-color-violet-600) h s l/0.02)}.note--violet .note__header__caption{color:hsl(from var(--zn-color-violet-600) h s 40%)}.note--green{border-left:3px solid var(--zn-color-green-500);background-color:hsla(from var(--zn-color-green-500) h s l/0.02)}.note--green .note__header__caption{color:hsl(from var(--zn-color-green-500) h s 40%)}.note--pink{border-left:3px solid var(--zn-color-pink-400);background-color:hsla(from var(--zn-color-pink-400) h s l/0.02)}.note--pink .note__header__caption{color:hsl(from var(--zn-color-pink-400) h s 40%)}.note--gray{border-left:3px solid var(--zn-color-gray-500);background-color:hsla(from var(--zn-color-gray-500) h s l/0.02)}.note--gray .note__header__caption{color:hsl(from var(--zn-color-gray-500) h s 40%)}.note__footer{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--zn-spacing-x-small)}`;var io=class extends J{constructor(){super(...arguments);this.caption="";this.date="";this.body="";this.hasSlotController=new Ge(this,"caption","date","[default]","snippet","footer");this.expanded=!1}_toggleExpand(){this.expanded=!this.expanded}render(){let i=this.hasSlotController.test("snippet")&&this.hasSlotController.test("[default]");return M`
+    `}};nn.styles=ie(I5),y([be(".input__control")],nn.prototype,"input",2),y([be(".defined-label__dropdown")],nn.prototype,"dropdown",2),y([_()],nn.prototype,"value",2),y([_()],nn.prototype,"inputValue",2),y([_({attribute:"input-size",reflect:!0})],nn.prototype,"inputSize",2),y([_()],nn.prototype,"name",2),y([_()],nn.prototype,"title",2),y([_({type:Boolean})],nn.prototype,"disabled",2),y([_({attribute:"allow-custom",type:Boolean})],nn.prototype,"allowCustom",2),y([_({type:Array,attribute:"predefined-labels"})],nn.prototype,"predefinedLabels",2),y([He("value",{waitUntilFirstUpdate:!0})],nn.prototype,"handleValueChange",1);var LN=nn;nn.define("zn-defined-label");var $5=ne`@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}.note{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;flex-wrap:nowrap;padding:var(--zn-spacing-x-small) var(--zn-spacing-small);gap:var(--zn-spacing-3x-small);border-left:3px solid transparent}.note__header{display:flex;justify-content:space-between}.note__header__caption{font-weight:var(--zn-font-weight-semibold);font-size:var(--zn-font-size-medium);color:rgb(var(--zn-text-heading))}.note__header__date{font-size:var(--zn-font-size-small)}.note__header__end{display:flex;gap:var(--zn-spacing-small)}.note__body-container{position:relative;max-width:var(--zn-container-md)}.note__body{display:block}.note__toggle{margin-top:var(--zn-spacing-2x-small)}.note__toggle__btn{background:none;border:none;color:var(--zn-color-primary-500,currentColor);font:inherit;cursor:pointer;padding:0}.note__body--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--note-collapse-lines,0);overflow:hidden;text-overflow:ellipsis}.note--red{border-left:3px solid var(--zn-color-red-600);background-color:hsla(from var(--zn-color-red-600) h s l/0.02)}.note--red .note__header__caption{color:hsl(from var(--zn-color-red-600) h s 40%)}.note--blue{border-left:3px solid var(--zn-color-blue-500);background-color:hsla(from var(--zn-color-blue-500) h s l/0.02)}.note--blue .note__header__caption{color:hsl(from var(--zn-color-blue-500) h s 40%)}.note--orange{border-left:3px solid var(--zn-color-orange-500);background-color:hsla(from var(--zn-color-orange-500) h s l/0.02)}.note--orange .note__header__caption{color:hsl(from var(--zn-color-orange-500) h s 40%)}.note--yellow{border-left:3px solid var(--zn-color-yellow-400);background-color:hsla(from var(--zn-color-yellow-400) h s l/0.02)}.note--yellow .note__header__caption{color:hsl(from var(--zn-color-yellow-400) h s 40%)}.note--indigo{border-left:3px solid var(--zn-color-indigo-400);background-color:hsla(from var(--zn-color-indigo-400) h s l/0.02)}.note--indigo .note__header__caption{color:hsl(from var(--zn-color-indigo-400) h s 40%)}.note--violet{border-left:3px solid var(--zn-color-violet-600);background-color:hsla(from var(--zn-color-violet-600) h s l/0.02)}.note--violet .note__header__caption{color:hsl(from var(--zn-color-violet-600) h s 40%)}.note--green{border-left:3px solid var(--zn-color-green-500);background-color:hsla(from var(--zn-color-green-500) h s l/0.02)}.note--green .note__header__caption{color:hsl(from var(--zn-color-green-500) h s 40%)}.note--pink{border-left:3px solid var(--zn-color-pink-400);background-color:hsla(from var(--zn-color-pink-400) h s l/0.02)}.note--pink .note__header__caption{color:hsl(from var(--zn-color-pink-400) h s 40%)}.note--gray{border-left:3px solid var(--zn-color-gray-500);background-color:hsla(from var(--zn-color-gray-500) h s l/0.02)}.note--gray .note__header__caption{color:hsl(from var(--zn-color-gray-500) h s 40%)}.note__footer{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--zn-spacing-x-small)}`;var io=class extends J{constructor(){super(...arguments);this.caption="";this.date="";this.body="";this.hasSlotController=new Ge(this,"caption","date","[default]","snippet","footer");this.expanded=!1}_toggleExpand(){this.expanded=!this.expanded}render(){let i=this.hasSlotController.test("snippet")&&this.hasSlotController.test("[default]");return M`
       <div class="${de({note:!0,"note--red":this.color==="red","note--blue":this.color==="blue","note--orange":this.color==="orange","note--yellow":this.color==="yellow","note--indigo":this.color==="indigo","note--violet":this.color==="violet","note--green":this.color==="green","note--pink":this.color==="pink","note--gray":this.color==="gray"})}">
         <div class="note__header">
           <slot name="caption" class="note__header__caption">${this.caption}</slot>
-          <slot name="date" class="note__header__date">
-            <small>${this.date}</small>
-          </slot>
+          <div class="note__header__end">
+            <slot name="date" class="note__header__date">
+              <small>${this.date}</small>
+            </slot>
+            <slot name="action"></slot>
+          </div>
         </div>
 
         ${this.expanded&&i?M`

package/package.json

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

package/src/components/button/button.scss

@@ -21,6 +21,7 @@
 
   border-width: 1px;
   border-color: transparent;
+  height: 100%;
   display: inline-flex;
   position: relative;
 

package/src/components/note/note.component.ts

@@ -1,11 +1,11 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type colors} from "../data-select/providers/color-data-provider";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
 import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
-import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -61,9 +61,12 @@ export default class ZnNote extends ZincElement {
       })}">
         <div class="note__header">
           <slot name="caption" class="note__header__caption">${this.caption}</slot>
-          <slot name="date" class="note__header__date">
-            <small>${this.date}</small>
-          </slot>
+          <div class="note__header__end">
+            <slot name="date" class="note__header__date">
+              <small>${this.date}</small>
+            </slot>
+            <slot name="action"></slot>
+          </div>
         </div>
 
         ${this.expanded && showExpandableButton ?

package/src/components/note/note.scss

@@ -40,6 +40,11 @@ $colors: (
     &__date {
       font-size: var(--zn-font-size-small);
     }
+
+    &__end {
+      display: flex;
+      gap: var(--zn-spacing-small);
+    }
   }
 
   &__body-container {