@kubex/zinc 1.1.172 → 1.1.173

package/dist/custom-elements.json

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

package/dist/zn.min.js

@@ -2542,7 +2542,7 @@ import{a as Hn,b as e5,c as kr,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var s
       ${this._header}
       <div class="${M({pane__content:!0,"pane__content--flush":this.flush})}">
         <slot></slot>
-      </div>`}};To.styles=_(j1),c([p({type:Boolean})],To.prototype,"flush",2);var V8=To;To.define("zn-pane");function pp(o,i,t,r){function n(a){let s=a.composedPath?.()||a.path||[a.target];for(let l of s){if(l instanceof Element&&l.matches(t))return a.selectedTarget=l,r(a);if(l===o)break}return!1}return o.addEventListener(i,n),()=>o.removeEventListener(i,n)}var G1=k`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host([gap]){gap:0 calc(var(--zn-base-gap) / 2)}::slotted(*){display:flex;flex-direction:column;height:100%;overflow-y:auto}:host{display:flex;height:100%;max-height:100%;min-height:100%;width:100%;flex:1;min-width:350px;container-type:inline-size;position:relative}:host #primary-pane{flex:0 1 var(--initial-size,50%);min-width:0;min-height:0}:host #secondary-pane{flex:1 1 0;min-width:0;min-height:0;overflow:hidden}:host slot{overflow:auto}:host #resizer{position:relative}:host #resizer:after{content:"";position:absolute;z-index:500}:host #resizer:before{content:"";display:block;position:absolute;z-index:1;transition:background-color 200ms ease-in-out}:host #resizer{cursor:col-resize}:host #resizer:hover:before{background-color:rgb(var(--zn-blue))}:host(:not([vertical])) #split-nav,zn-split-pane:not([vertical]) #split-nav{display:none}@container (min-width:0px) and (max-width:767px){:host(:not([vertical])) #split-nav,zn-split-pane:not([vertical]) #split-nav{position:absolute;top:0;left:0;right:0;background-color:rgba(var(--zn-panel),var(--zn-panel-opacity));padding:0;margin:0;list-style-type:none;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid rgb(var(--zn-border-color))}:host(:not([vertical])) #split-nav li,zn-split-pane:not([vertical]) #split-nav li{line-height:39px;flex:1 1 0;min-width:0;text-align:center;position:relative;cursor:pointer}:host(:not([vertical])) #split-nav li::before,zn-split-pane:not([vertical]) #split-nav li::before{content:"";left:50%;right:50%;bottom:-1px;position:absolute;background-color:rgb(var(--zn-accent));transition:all 300ms ease-in-out;height:var(--zn-spacing-2x-small)}:host(:not([vertical])) #split-nav li:hover:before,zn-split-pane:not([vertical]) #split-nav li:hover:before{left:20%;right:20%}:host(:not([vertical])) #split-nav li.active::before,zn-split-pane:not([vertical]) #split-nav li.active::before{left:0;right:0}:host(:not([vertical])) #resizer,:host(:not([vertical])) #primary-pane,:host(:not([vertical])) #secondary-pane,zn-split-pane:not([vertical]) #resizer,zn-split-pane:not([vertical]) #primary-pane,zn-split-pane:not([vertical]) #secondary-pane{display:none}:host(:not([vertical])) #primary-pane,:host(:not([vertical])) #secondary-pane,zn-split-pane:not([vertical]) #primary-pane,zn-split-pane:not([vertical]) #secondary-pane{flex:1 1 100%;max-width:100% !important;width:100%;padding-top:40px}}:host(:not([vertical])) #primary-pane,zn-split-pane:not([vertical]) #primary-pane{min-width:var(--min-panel-size,15%)}:host(:not([vertical])) #secondary-pane,zn-split-pane:not([vertical]) #secondary-pane{min-width:var(--min-secondary-panel-size,var(--min-panel-size,15%))}:host(:not([vertical])) #primary-pane,zn-split-pane:not([vertical]) #primary-pane{max-width:var(--max-panel-size,none);overflow:hidden}:host(:not([vertical])) #resizer,zn-split-pane:not([vertical]) #resizer{min-width:1px;padding-top:0;padding-bottom:0}:host(:not([vertical])) #resizer:after,zn-split-pane:not([vertical]) #resizer:after{inset:0 -10px;width:20px}:host(:not([vertical])) #resizer:before,zn-split-pane:not([vertical]) #resizer:before{height:100%;width:1px;top:0;left:50%;transform:translateX(-50%)}@container (min-width:0px) and (max-width:767px){:host([merged-navigation]:not([vertical])){padding-top:0}:host([merged-navigation]:not([vertical])) #split-nav{display:none}:host([merged-navigation]:not([vertical])) #primary-pane,:host([merged-navigation]:not([vertical])) #secondary-pane{padding-top:0}}:host([hide=primary]),:host([hide=secondary]){padding-top:0}:host([hide=primary]) #split-nav,:host([hide=primary]) #resizer,:host([hide=secondary]) #split-nav,:host([hide=secondary]) #resizer{display:none}:host([hide=primary]) #primary-pane{flex:0 0 0;height:0;max-height:0 !important;max-width:0 !important;min-height:0 !important;min-width:0 !important;overflow:hidden;pointer-events:none;visibility:hidden;width:0}:host([hide=primary]) #secondary-pane{flex:1 1 100%;height:100%;max-height:100% !important;max-width:100% !important;width:100%}:host([hide=secondary]) #primary-pane{flex:1 1 100%;height:100%;max-height:100% !important;max-width:100% !important;width:100%}:host([hide=secondary]) #secondary-pane{flex:0 0 0;height:0;max-height:0 !important;max-width:0 !important;min-height:0 !important;min-width:0 !important;overflow:hidden;pointer-events:none;visibility:hidden;width:0}:host([focus-pane="0"]) #primary-pane{display:block}:host([focus-pane="1"]) #secondary-pane{display:block}:host([vertical]){flex-direction:column}:host([vertical]) #split-nav{display:none}:host([vertical]) #primary-pane{min-height:var(--min-panel-size,15%)}:host([vertical]) #secondary-pane{min-height:var(--min-secondary-panel-size,var(--min-panel-size,15%));z-index:1}:host([vertical]) #primary-pane{max-height:var(--max-panel-size,none);overflow:hidden}:host([vertical]) #resizer{min-height:1px;padding-left:0;padding-right:0;cursor:row-resize}:host([vertical]) #resizer:after{inset:-10px 0;height:20px}:host([vertical]) #resizer:before{width:100%;height:1px;left:0;top:50%;transform:translateY(-50%)}:host(.resizing){cursor:col-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host(.resizing) #primary-pane{min-width:1%}:host(.resizing) #primary-pane,:host(.resizing) #secondary-pane{pointer-events:none}@container (max-width:767px){:host([padded]){padding-left:8px;overflow:hidden}:host([padded]) #primary-pane{border-left:1px solid rgb(var(--zn-border-color))}:host([padded]) #split-nav{left:8px;border-radius:10px 0 0 0;border-left:1px solid rgb(var(--zn-border-color));border-top:1px solid rgb(var(--zn-border-color))}}@container (min-width:768px){:host([padded]) #primary-pane{padding:0 8px}:host([padded]) #primary-pane ::slotted(*){border-radius:10px 10px 0 0;border:1px solid rgb(var(--zn-border-color)) !important;border-bottom-width:0 !important}:host([padded]) #resizer{margin-right:8px}:host([padded]) #secondary-pane{overflow:hidden;border-radius:10px 0 0 0;background-color:#fbfbfb;border:1px solid rgb(var(--zn-border-color)) !important;border-bottom-width:0 !important}:host([padded-right]) #primary-pane{padding-right:8px}:host([padded-right]) #primary-pane ::slotted(*){border-radius:0 10px 0 0;border:1px solid rgb(var(--zn-border-color)) !important;border-bottom-width:0 !important}:host([padded-right]) #resizer::before{background-color:transparent !important}}:host([padded]:not(.resizing)) #resizer::before,:host([padded-right]:not(.resizing)) #resizer::before{background-color:transparent}:host([padded]:not(.resizing)) #resizer:hover::before,:host([padded-right]:not(.resizing)) #resizer:hover::before{background-color:rgb(var(--zn-blue)) !important}:host([bordered]) #resizer:before{background-color:rgb(var(--zn-border-color))}`;var U8=768,Qe=class extends S{constructor(){super(...arguments);this.mouseMoveHandler=null;this.mouseUpHandler=null;this.currentPixelSize=0;this.currentPercentSize=0;this.currentContainerSize=0;this.focusChangeHandler=()=>this.requestUpdate();this.resizeObserver=null;this.parentIsNarrow=!1;this.calculatePixels=!1;this.preferSecondarySize=!1;this.minimumPaneSize=10;this.initialSize=50;this.storeKey="";this.border=!1;this.vertical=!1;this.primaryCaption="Primary";this.secondaryCaption="Secondary";this._focusPane=0;this.padded=!1;this.paddedRight=!1;this.gap=!1;this.hide="";this.mergedNavigation=!1;this.storeTtl=0}connectedCallback(){super.connectedCallback(),this._store=new Sr(this.localStorage?window.localStorage:window.sessionStorage,"znsp:",this.storeTtl),this.primaryFull=this.calculatePixels?this.initialSize+"px":this.initialSize+"%",pp(this,"click","[split-pane-focus]",t=>{t.preventDefault(),t.stopPropagation(),this._setFocusPane(parseInt(t.selectedTarget.getAttribute("split-pane-focus")))}),this.addEventListener("zn-split-pane-focus-change",this.focusChangeHandler),this.resizeObserver=new ResizeObserver(()=>this.refreshNarrowState()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("zn-split-pane-focus-change",this.focusChangeHandler),this.resizeObserver?.disconnect(),this.resizeObserver=null,super.disconnectedCallback()}refreshNarrowState(){let t=this.getBoundingClientRect().width<U8;t!==this.parentIsNarrow&&(this.parentIsNarrow=t,this.updateNestedNavigationMerging(),this.requestUpdate())}firstUpdated(t){setTimeout(this.applyStoredSize.bind(this),100),this.refreshNarrowState(),super.firstUpdated(t)}applyStoredSize(){this.currentContainerSize=this.vertical?this.getBoundingClientRect().height:this.getBoundingClientRect().width;let t=this.preferSecondarySize?this.currentContainerSize-this.initialSize:this.initialSize,r=this.preferSecondarySize?100-this.initialSize:this.initialSize,n=this._store.get(this.storeKey);if(n!==null){let a=n.split(",");if(a.length>=3){t=parseInt(a[0]),r=parseInt(a[1]);let s=parseInt(a[2]);this.preferSecondarySize&&this.calculatePixels&&(t*=this.currentContainerSize/s)}}this.setSize(this.calculatePixels?t:this.currentContainerSize/100*r)}resize(t){if(this.hide==="primary"||this.hide==="secondary")return;this.mouseUpHandler!==null&&this.mouseUpHandler(t),this.classList.add("resizing"),this.currentContainerSize=this.vertical?this.getBoundingClientRect().height:this.getBoundingClientRect().width;let r=this.vertical?this.getBoundingClientRect().top:this.getBoundingClientRect().left;this.mouseMoveHandler=function(n){let a=this.vertical?n.y:n.x;"touches"in n&&n instanceof TouchEvent&&(a=this.vertical?n.touches[0].clientY:n.touches[0].clientX),this.setSize(a-r)}.bind(this),this.mouseUpHandler=function(){this._store.set(this.storeKey,Math.round(this.currentPixelSize)+","+Math.round(this.currentPercentSize)+","+this.currentContainerSize),this.classList.remove("resizing"),window.removeEventListener("touchmove",this.mouseMoveHandler),window.removeEventListener("mousemove",this.mouseMoveHandler),window.removeEventListener("touchend",this.mouseUpHandler),window.removeEventListener("mouseup",this.mouseUpHandler)}.bind(this),window.addEventListener("touchmove",this.mouseMoveHandler),window.addEventListener("touchend",this.mouseUpHandler),window.addEventListener("mousemove",this.mouseMoveHandler),window.addEventListener("mouseup",this.mouseUpHandler)}setSize(t){let r=Number.isFinite(this.minimumSecondaryPaneSize),n=r?this.currentContainerSize-(this.calculatePixels?this.minimumSecondaryPaneSize:this.currentContainerSize/100*this.minimumSecondaryPaneSize):void 0,a=n===void 0?t:Math.min(t,n),s=a/this.currentContainerSize*100;if(this.calculatePixels){let l=n===void 0?this.minimumPaneSize:Math.min(this.minimumPaneSize,n);this.maximumPaneSize||n!==void 0?a=Math.max(l,Math.min(this.maximumPaneSize??1/0,n??1/0,a)):a=Math.max(l,a),s=a/this.currentContainerSize*100,this.initialSize=a}else{let l=r?100-this.minimumSecondaryPaneSize:void 0,d=l===void 0?this.minimumPaneSize:Math.min(this.minimumPaneSize,l);this.maximumPaneSize||l!==void 0?s=Math.max(d,Math.min(this.maximumPaneSize??1/0,l??1/0,s)):s=Math.max(d,s),a=this.currentContainerSize/100*s,this.initialSize=s}this.currentPixelSize=a,this.currentPercentSize=s,this.primaryFull=this.calculatePixels?this.currentPixelSize+"px":this.currentPercentSize+"%"}_setFocusPane(t){this._focusPane=t,this.dispatchEvent(new CustomEvent("zn-split-pane-focus-change",{bubbles:!0,composed:!0}))}getDirectNestedSplitPanes(){return Array.from(this.querySelectorAll("zn-split-pane")).filter(t=>t.parentElement?.closest("zn-split-pane")===this&&!t.vertical)}updateNestedNavigationMerging(){let t=!this.vertical&&this.parentIsNarrow;this.getDirectNestedSplitPanes().forEach(r=>{r.mergedNavigation=t})}getPaneIndexForNestedSplitPane(t){let r=t;for(;r&&r.parentElement!==this;)r=r.parentElement;return r?.getAttribute("slot")==="secondary"?1:0}getNestedNavigationItems(t){return this.getDirectNestedSplitPanesForPane(t).flatMap(r=>r.getNavigationItems().map(n=>({caption:n.caption,active:this._focusPane===t&&n.active,select:()=>{this._setFocusPane(t),n.select()}})))}getDirectNestedSplitPanesForPane(t){return this.getDirectNestedSplitPanes().filter(r=>this.getPaneIndexForNestedSplitPane(r)===t)}getNavigationItems(){this.updateNestedNavigationMerging();let t=this.getNestedNavigationItems(0),r=this.getNestedNavigationItems(1),n=t.length>0?t:[{caption:this.primaryCaption,active:this._focusPane===0,select:()=>this._setFocusPane(0)}],a=r.length>0?r:[{caption:this.secondaryCaption,active:this._focusPane===1,select:()=>this._setFocusPane(1)}];return[...n,...a]}render(){let n=Number.isFinite(this.minimumSecondaryPaneSize)?this.minimumSecondaryPaneSize+(this.calculatePixels?"px":"%"):"var(--min-panel-size)";return u`
+      </div>`}};To.styles=_(j1),c([p({type:Boolean})],To.prototype,"flush",2);var V8=To;To.define("zn-pane");function pp(o,i,t,r){function n(a){let s=a.composedPath?.()||a.path||[a.target];for(let l of s){if(l instanceof Element&&l.matches(t))return a.selectedTarget=l,r(a);if(l===o)break}return!1}return o.addEventListener(i,n),()=>o.removeEventListener(i,n)}var G1=k`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host([gap]){gap:0 calc(var(--zn-base-gap) / 2)}::slotted(*){display:flex;flex-direction:column;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(var(--inverse-base),0.2) transparent}:host ::-webkit-scrollbar{width:5px;height:5px}:host{}:host ::-webkit-scrollbar-track{background:transparent}:host{}:host ::-webkit-scrollbar-thumb{background:rgba(var(--inverse-base),0.2);border-radius:5px}:host{}:host ::-webkit-scrollbar-thumb:hover{background:rgba(var(--inverse-base),0.6)}:host{display:flex;height:100%;max-height:100%;min-height:100%;width:100%;flex:1;min-width:350px;container-type:inline-size;position:relative}:host #primary-pane{flex:0 1 var(--initial-size,50%);min-width:0;min-height:0}:host #secondary-pane{flex:1 1 0;min-width:0;min-height:0;overflow:hidden}:host slot{overflow:auto}:host #resizer{position:relative}:host #resizer:after{content:"";position:absolute;z-index:500}:host #resizer:before{content:"";display:block;position:absolute;z-index:1;transition:background-color 200ms ease-in-out}:host #resizer{cursor:col-resize}:host #resizer:hover:before{background-color:rgb(var(--zn-blue))}:host(:not([vertical])) #split-nav,zn-split-pane:not([vertical]) #split-nav{display:none}@container (min-width:0px) and (max-width:767px){:host(:not([vertical])) #split-nav,zn-split-pane:not([vertical]) #split-nav{position:absolute;top:0;left:0;right:0;background-color:rgba(var(--zn-panel),var(--zn-panel-opacity));padding:0;margin:0;list-style-type:none;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid rgb(var(--zn-border-color))}:host(:not([vertical])) #split-nav li,zn-split-pane:not([vertical]) #split-nav li{line-height:39px;flex:1 1 0;min-width:0;text-align:center;position:relative;cursor:pointer}:host(:not([vertical])) #split-nav li::before,zn-split-pane:not([vertical]) #split-nav li::before{content:"";left:50%;right:50%;bottom:-1px;position:absolute;background-color:rgb(var(--zn-accent));transition:all 300ms ease-in-out;height:var(--zn-spacing-2x-small)}:host(:not([vertical])) #split-nav li:hover:before,zn-split-pane:not([vertical]) #split-nav li:hover:before{left:20%;right:20%}:host(:not([vertical])) #split-nav li.active::before,zn-split-pane:not([vertical]) #split-nav li.active::before{left:0;right:0}:host(:not([vertical])) #resizer,:host(:not([vertical])) #primary-pane,:host(:not([vertical])) #secondary-pane,zn-split-pane:not([vertical]) #resizer,zn-split-pane:not([vertical]) #primary-pane,zn-split-pane:not([vertical]) #secondary-pane{display:none}:host(:not([vertical])) #primary-pane,:host(:not([vertical])) #secondary-pane,zn-split-pane:not([vertical]) #primary-pane,zn-split-pane:not([vertical]) #secondary-pane{flex:1 1 100%;max-width:100% !important;width:100%;padding-top:40px}}:host(:not([vertical])) #primary-pane,zn-split-pane:not([vertical]) #primary-pane{min-width:var(--min-panel-size,15%)}:host(:not([vertical])) #secondary-pane,zn-split-pane:not([vertical]) #secondary-pane{min-width:var(--min-secondary-panel-size,var(--min-panel-size,15%))}:host(:not([vertical])) #primary-pane,zn-split-pane:not([vertical]) #primary-pane{max-width:var(--max-panel-size,none);overflow:hidden}:host(:not([vertical])) #resizer,zn-split-pane:not([vertical]) #resizer{min-width:1px;padding-top:0;padding-bottom:0}:host(:not([vertical])) #resizer:after,zn-split-pane:not([vertical]) #resizer:after{inset:0 -10px;width:20px}:host(:not([vertical])) #resizer:before,zn-split-pane:not([vertical]) #resizer:before{height:100%;width:1px;top:0;left:50%;transform:translateX(-50%)}@container (min-width:0px) and (max-width:767px){:host([merged-navigation]:not([vertical])){padding-top:0}:host([merged-navigation]:not([vertical])) #split-nav{display:none}:host([merged-navigation]:not([vertical])) #primary-pane,:host([merged-navigation]:not([vertical])) #secondary-pane{padding-top:0}}:host([hide=primary]),:host([hide=secondary]){padding-top:0}:host([hide=primary]) #split-nav,:host([hide=primary]) #resizer,:host([hide=secondary]) #split-nav,:host([hide=secondary]) #resizer{display:none}:host([hide=primary]) #primary-pane{flex:0 0 0;height:0;max-height:0 !important;max-width:0 !important;min-height:0 !important;min-width:0 !important;overflow:hidden;pointer-events:none;visibility:hidden;width:0}:host([hide=primary]) #secondary-pane{flex:1 1 100%;height:100%;max-height:100% !important;max-width:100% !important;width:100%}:host([hide=secondary]) #primary-pane{flex:1 1 100%;height:100%;max-height:100% !important;max-width:100% !important;width:100%}:host([hide=secondary]) #secondary-pane{flex:0 0 0;height:0;max-height:0 !important;max-width:0 !important;min-height:0 !important;min-width:0 !important;overflow:hidden;pointer-events:none;visibility:hidden;width:0}:host([focus-pane="0"]) #primary-pane{display:block}:host([focus-pane="1"]) #secondary-pane{display:block}:host([vertical]){flex-direction:column}:host([vertical]) #split-nav{display:none}:host([vertical]) #primary-pane{min-height:var(--min-panel-size,15%)}:host([vertical]) #secondary-pane{min-height:var(--min-secondary-panel-size,var(--min-panel-size,15%));z-index:1}:host([vertical]) #primary-pane{max-height:var(--max-panel-size,none);overflow:hidden}:host([vertical]) #resizer{min-height:1px;padding-left:0;padding-right:0;cursor:row-resize}:host([vertical]) #resizer:after{inset:-10px 0;height:20px}:host([vertical]) #resizer:before{width:100%;height:1px;left:0;top:50%;transform:translateY(-50%)}:host(.resizing){cursor:col-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host(.resizing) #primary-pane{min-width:1%}:host(.resizing) #primary-pane,:host(.resizing) #secondary-pane{pointer-events:none}@container (max-width:767px){:host([padded]){padding-left:8px;overflow:hidden}:host([padded]) #primary-pane{border-left:1px solid rgb(var(--zn-border-color))}:host([padded]) #split-nav{left:8px;border-radius:10px 0 0 0;border-left:1px solid rgb(var(--zn-border-color));border-top:1px solid rgb(var(--zn-border-color))}}@container (min-width:768px){:host([padded]) #primary-pane{padding:0 8px}:host([padded]) #primary-pane ::slotted(*){border-radius:10px 10px 0 0;border:1px solid rgb(var(--zn-border-color)) !important;border-bottom-width:0 !important}:host([padded]) #resizer{margin-right:8px}:host([padded]) #secondary-pane{overflow:hidden;border-radius:10px 0 0 0;background-color:#fbfbfb;border:1px solid rgb(var(--zn-border-color)) !important;border-bottom-width:0 !important}:host([padded-right]) #primary-pane{padding-right:8px}:host([padded-right]) #primary-pane ::slotted(*){border-radius:0 10px 0 0;border:1px solid rgb(var(--zn-border-color)) !important;border-bottom-width:0 !important}:host([padded-right]) #resizer::before{background-color:transparent !important}}:host([padded]:not(.resizing)) #resizer::before,:host([padded-right]:not(.resizing)) #resizer::before{background-color:transparent}:host([padded]:not(.resizing)) #resizer:hover::before,:host([padded-right]:not(.resizing)) #resizer:hover::before{background-color:rgb(var(--zn-blue)) !important}:host([bordered]) #resizer:before{background-color:rgb(var(--zn-border-color))}`;var U8=768,Qe=class extends S{constructor(){super(...arguments);this.mouseMoveHandler=null;this.mouseUpHandler=null;this.currentPixelSize=0;this.currentPercentSize=0;this.currentContainerSize=0;this.focusChangeHandler=()=>this.requestUpdate();this.resizeObserver=null;this.parentIsNarrow=!1;this.calculatePixels=!1;this.preferSecondarySize=!1;this.minimumPaneSize=10;this.initialSize=50;this.storeKey="";this.border=!1;this.vertical=!1;this.primaryCaption="Primary";this.secondaryCaption="Secondary";this._focusPane=0;this.padded=!1;this.paddedRight=!1;this.gap=!1;this.hide="";this.mergedNavigation=!1;this.storeTtl=0}connectedCallback(){super.connectedCallback(),this._store=new Sr(this.localStorage?window.localStorage:window.sessionStorage,"znsp:",this.storeTtl),this.primaryFull=this.calculatePixels?this.initialSize+"px":this.initialSize+"%",pp(this,"click","[split-pane-focus]",t=>{t.preventDefault(),t.stopPropagation(),this._setFocusPane(parseInt(t.selectedTarget.getAttribute("split-pane-focus")))}),this.addEventListener("zn-split-pane-focus-change",this.focusChangeHandler),this.resizeObserver=new ResizeObserver(()=>this.refreshNarrowState()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("zn-split-pane-focus-change",this.focusChangeHandler),this.resizeObserver?.disconnect(),this.resizeObserver=null,super.disconnectedCallback()}refreshNarrowState(){let t=this.getBoundingClientRect().width<U8;t!==this.parentIsNarrow&&(this.parentIsNarrow=t,this.updateNestedNavigationMerging(),this.requestUpdate())}firstUpdated(t){setTimeout(this.applyStoredSize.bind(this),100),this.refreshNarrowState(),super.firstUpdated(t)}applyStoredSize(){this.currentContainerSize=this.vertical?this.getBoundingClientRect().height:this.getBoundingClientRect().width;let t=this.preferSecondarySize?this.currentContainerSize-this.initialSize:this.initialSize,r=this.preferSecondarySize?100-this.initialSize:this.initialSize,n=this._store.get(this.storeKey);if(n!==null){let a=n.split(",");if(a.length>=3){t=parseInt(a[0]),r=parseInt(a[1]);let s=parseInt(a[2]);this.preferSecondarySize&&this.calculatePixels&&(t*=this.currentContainerSize/s)}}this.setSize(this.calculatePixels?t:this.currentContainerSize/100*r)}resize(t){if(this.hide==="primary"||this.hide==="secondary")return;this.mouseUpHandler!==null&&this.mouseUpHandler(t),this.classList.add("resizing"),this.currentContainerSize=this.vertical?this.getBoundingClientRect().height:this.getBoundingClientRect().width;let r=this.vertical?this.getBoundingClientRect().top:this.getBoundingClientRect().left;this.mouseMoveHandler=function(n){let a=this.vertical?n.y:n.x;"touches"in n&&n instanceof TouchEvent&&(a=this.vertical?n.touches[0].clientY:n.touches[0].clientX),this.setSize(a-r)}.bind(this),this.mouseUpHandler=function(){this._store.set(this.storeKey,Math.round(this.currentPixelSize)+","+Math.round(this.currentPercentSize)+","+this.currentContainerSize),this.classList.remove("resizing"),window.removeEventListener("touchmove",this.mouseMoveHandler),window.removeEventListener("mousemove",this.mouseMoveHandler),window.removeEventListener("touchend",this.mouseUpHandler),window.removeEventListener("mouseup",this.mouseUpHandler)}.bind(this),window.addEventListener("touchmove",this.mouseMoveHandler),window.addEventListener("touchend",this.mouseUpHandler),window.addEventListener("mousemove",this.mouseMoveHandler),window.addEventListener("mouseup",this.mouseUpHandler)}setSize(t){let r=Number.isFinite(this.minimumSecondaryPaneSize),n=r?this.currentContainerSize-(this.calculatePixels?this.minimumSecondaryPaneSize:this.currentContainerSize/100*this.minimumSecondaryPaneSize):void 0,a=n===void 0?t:Math.min(t,n),s=a/this.currentContainerSize*100;if(this.calculatePixels){let l=n===void 0?this.minimumPaneSize:Math.min(this.minimumPaneSize,n);this.maximumPaneSize||n!==void 0?a=Math.max(l,Math.min(this.maximumPaneSize??1/0,n??1/0,a)):a=Math.max(l,a),s=a/this.currentContainerSize*100,this.initialSize=a}else{let l=r?100-this.minimumSecondaryPaneSize:void 0,d=l===void 0?this.minimumPaneSize:Math.min(this.minimumPaneSize,l);this.maximumPaneSize||l!==void 0?s=Math.max(d,Math.min(this.maximumPaneSize??1/0,l??1/0,s)):s=Math.max(d,s),a=this.currentContainerSize/100*s,this.initialSize=s}this.currentPixelSize=a,this.currentPercentSize=s,this.primaryFull=this.calculatePixels?this.currentPixelSize+"px":this.currentPercentSize+"%"}_setFocusPane(t){this._focusPane=t,this.dispatchEvent(new CustomEvent("zn-split-pane-focus-change",{bubbles:!0,composed:!0}))}getDirectNestedSplitPanes(){return Array.from(this.querySelectorAll("zn-split-pane")).filter(t=>t.parentElement?.closest("zn-split-pane")===this&&!t.vertical)}updateNestedNavigationMerging(){let t=!this.vertical&&this.parentIsNarrow;this.getDirectNestedSplitPanes().forEach(r=>{r.mergedNavigation=t})}getPaneIndexForNestedSplitPane(t){let r=t;for(;r&&r.parentElement!==this;)r=r.parentElement;return r?.getAttribute("slot")==="secondary"?1:0}getNestedNavigationItems(t){return this.getDirectNestedSplitPanesForPane(t).flatMap(r=>r.getNavigationItems().map(n=>({caption:n.caption,active:this._focusPane===t&&n.active,select:()=>{this._setFocusPane(t),n.select()}})))}getDirectNestedSplitPanesForPane(t){return this.getDirectNestedSplitPanes().filter(r=>this.getPaneIndexForNestedSplitPane(r)===t)}getNavigationItems(){this.updateNestedNavigationMerging();let t=this.getNestedNavigationItems(0),r=this.getNestedNavigationItems(1),n=t.length>0?t:[{caption:this.primaryCaption,active:this._focusPane===0,select:()=>this._setFocusPane(0)}],a=r.length>0?r:[{caption:this.secondaryCaption,active:this._focusPane===1,select:()=>this._setFocusPane(1)}];return[...n,...a]}render(){let n=Number.isFinite(this.minimumSecondaryPaneSize)?this.minimumSecondaryPaneSize+(this.calculatePixels?"px":"%"):"var(--min-panel-size)";return u`
       <style>:host {
         --min-panel-size: ${this.minimumPaneSize}${this.calculatePixels?"px":"%"};
         --min-secondary-panel-size: ${n};

package/package.json

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

package/src/components/split-pane/split-pane.scss

@@ -6,14 +6,18 @@
   gap: 0 calc(var(--zn-base-gap) / 2);
 }
 
+// Slotted panes are light DOM, which ::-webkit-scrollbar rules here cannot reach, so they take the standard properties.
 ::slotted(*) {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: mixins.$scrollbar-thumb transparent;
 }
 
 :host {
+  @include wc.scrollbars;
   display: flex;
   height: 100%;
   max-height: 100%;