@aiquants/virtualscroll 2.3.0 → 2.4.0

package/dist/styles/virtualscroll.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{box-sizing:border-box;flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border:1px solid #fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-pupil{box-sizing:border-box;background-color:#ffffffd9;border:1px solid #ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-rod{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar[data-visible=false],.aqvs-scrollbar-thumb-wrapper[data-visible=false]{opacity:0;pointer-events:none}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;letter-spacing:normal;background-color:#e0e0e0;border:0 solid;justify-content:center;align-items:center;padding:0;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border:0 solid;border-radius:9999px;padding:.25rem 3rem;font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scroll-to-edge-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-overlay[data-visible=false] .aqvs-scroll-to-edge-button{pointer-events:none}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}
+@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane[data-self-measured=true]{height:100%}.aqvs-scroll-pane-content{box-sizing:border-box;flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border:1px solid #fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-pupil{box-sizing:border-box;background-color:#ffffffd9;border:1px solid #ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-rod{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar[data-visible=false],.aqvs-scrollbar-thumb-wrapper[data-visible=false]{opacity:0;pointer-events:none}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;letter-spacing:normal;background-color:#e0e0e0;border:0 solid;justify-content:center;align-items:center;padding:0;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border:0 solid;border-radius:9999px;padding:.25rem 3rem;font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scroll-to-edge-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-overlay[data-visible=false] .aqvs-scroll-to-edge-button{pointer-events:none}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}

package/dist/styles/virtualscroll.standalone.css

@@ -1,3 +1,3 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 /*! @aiquants/virtualscroll standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
-@layer theme,base;@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{box-sizing:border-box;flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border:1px solid #fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-pupil{box-sizing:border-box;background-color:#ffffffd9;border:1px solid #ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-rod{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar[data-visible=false],.aqvs-scrollbar-thumb-wrapper[data-visible=false]{opacity:0;pointer-events:none}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;letter-spacing:normal;background-color:#e0e0e0;border:0 solid;justify-content:center;align-items:center;padding:0;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border:0 solid;border-radius:9999px;padding:.25rem 3rem;font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scroll-to-edge-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-overlay[data-visible=false] .aqvs-scroll-to-edge-button{pointer-events:none}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}@layer utilities;
+@layer theme,base;@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane[data-self-measured=true]{height:100%}.aqvs-scroll-pane-content{box-sizing:border-box;flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border:1px solid #fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-pupil{box-sizing:border-box;background-color:#ffffffd9;border:1px solid #ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-rod{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar[data-visible=false],.aqvs-scrollbar-thumb-wrapper[data-visible=false]{opacity:0;pointer-events:none}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;letter-spacing:normal;background-color:#e0e0e0;border:0 solid;justify-content:center;align-items:center;padding:0;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border:0 solid;border-radius:9999px;padding:.25rem 3rem;font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scroll-to-edge-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-overlay[data-visible=false] .aqvs-scroll-to-edge-button{pointer-events:none}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}@layer utilities;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/virtualscroll",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "High-performance virtual scrolling component for React with variable item heights",
   "sideEffects": [
     "**/*.css"

package/src/ScrollPane.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef } from "react"
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { twMerge } from "tailwind-merge"
 import { Logger } from "./logger.ts"
 import { ScrollBar, type ScrollBarTapCircleOptions, type ScrollBarThumbOverlayRenderProps, TAP_SCROLL_CANCEL_EVENT } from "./ScrollBar.tsx"
@@ -25,8 +25,32 @@ export type ScrollPaneProps = {
     children: (scrollPosition: number) => React.ReactNode
     /** The total size of the content. / コンテンツの総サイズ。 */
     contentSize: number
-    /** The size of the visible area. / 表示領域のサイズ。 */
-    viewportSize: number
+    /**
+     * Size of the visible band (px). Omit it to let the pane measure its own band.
+     * 可視帯の高さ (px)。省略するとペインが自分の帯を計測する。
+     *
+     * ❗ **省略が既定の使い方である。** この値は帯のクリップ窓・最大スクロール位置・つまみ写像・
+     * 描画枚数・スクロール可否のすべての基準であり、実際の帯と食い違うと 5 通りの壊れ方が
+     * **例外も警告も出さずに**発生する (はみ出し / 死に帯 / 末尾へ到達不能 / つまみが視野外へ /
+     * ホイールとドラッグの無効化)。自分で測れるものを消費側に渡させると、同じ正解を各画面で
+     * 書き直すことになり、実際に推測値や定数が代入される。
+     *
+     * 省略時は `.aqvs-scroll-pane-content` の実高さ (CSS の `height: 100%` が決める) を
+     * `ResizeObserver` で追跡する。**ホスト側がルート要素の高さを確定させること**が前提で
+     * (`h-full` / `flex-1` + `min-h-0` / 明示 px / `position: absolute` など)、高さが auto の
+     * ホストでは帯が 0 のままになる (開発ビルドで警告する)。
+     *
+     * 明示する正当なケースは「帯の高さを計測ではなく算出で知っている」場合のみである
+     * (例: ドロップダウンが件数 × 行高から高さを決める)。
+     */
+    viewportSize?: number
+    /**
+     * Notified when the self-measured viewport size changes (not called while `viewportSize` is given).
+     * 自己計測したビューポート高さが変化したときに通知する (`viewportSize` 指定時は呼ばれない)。
+     *
+     * 帯の数値を必要とする親 (`VirtualScroll` は描画枚数とアライン計算に使う) がこの口で受け取る。
+     */
+    onViewportSizeChange?: (viewportSize: number) => void
     /** The width of the scrollbar. / スクロールバーの幅。 */
     scrollBarWidth?: number
     /** Whether grabbing the scrollbar thumb is allowed. / スクロールバーのつまみ操作を許可するかどうか。 */
@@ -224,7 +248,8 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
         {
             children,
             contentSize,
-            viewportSize,
+            viewportSize: viewportSizeProp,
+            onViewportSizeChange,
             scrollBarWidth = 12,
             enableThumbDrag = true,
             enableTrackClick = true,
@@ -256,6 +281,140 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
         const scrollPositionRef = useRef(Number.isFinite(initialScrollPosition) ? Math.max(0, initialScrollPosition) : 0)
         const scrollContainerRef = useRef<HTMLDivElement>(null)
         const contentAreaRef = useRef<HTMLDivElement>(null)
+
+        // viewportSize 未指定なら自分の帯を計測する。以降のすべての計算はこの解決済み値 (viewportSize) を使う。
+        // ❗ ScrollPane が持つ唯一の State であり、変化するのは**ホストの帯が変わったときだけ**である
+        // (スクロール中には一切変化しない)。ホットパスで setState しないという設計 (§1.1) は保たれる。
+        const isSelfMeasuringViewport = viewportSizeProp === undefined
+        const [measuredViewportSize, setMeasuredViewportSize] = useState(0)
+        const viewportSize = viewportSizeProp ?? measuredViewportSize
+        // 同一内容の警告を繰り返さないための最後の警告キー。
+        const lastViewportWarningRef = useRef<string | null>(null)
+
+        /**
+         * Tracks the real height of the content band so the pane can size itself.
+         * ペインが自分の帯の実高さを追跡し、自己サイズ決定できるようにする副作用。
+         *
+         * 計測対象は**コンテンツ要素**である。自己計測モードではこの要素へ高さのインラインスタイルを
+         * 書かず、CSS の `height: 100%` (= ルートの確定高さ) がレイアウトを所有するため、
+         * 「計測した数値を書き戻して自分のサイズを変える」フィードバックループが構造的に起こらない。
+         * ルート要素を測ると、消費側がルートへ付けた padding の分だけ帯を過大評価してしまう。
+         *
+         * ❗ **0 の計測は採用しない。** `display: none` のタブに置かれている等でレイアウトされて
+         * いないとき `offsetHeight` は 0 になる。0 を採ると `isScrollable` が偽になり、サイズ調整
+         * エフェクト (§9) が `scrollTo(0)` を発行して**タブ切替でスクロール位置が失われる**。
+         * 0 は「帯が 0」ではなく「まだ測れない」と解釈し、直前の値を保つ。
+         *
+         * 目的: 自己計測モードで帯の高さを State へ反映する。
+         * 依存関係: [contentSize, isSelfMeasuringViewport]
+         * クリーンアップ: ResizeObserver を切断する。
+         */
+        useLayoutEffect(() => {
+            if (!isSelfMeasuringViewport) {
+                return
+            }
+            const element = contentAreaRef.current
+            if (!element) {
+                return
+            }
+            // ResizeObserver の通知は layout の後・paint の前に届くため、ここでの読み取りは強制リフローにならない。
+            // transform: scale(...) の下でもレイアウト px を得るため rect ではなく offsetHeight を使う (整数丸め)。
+            const applyMeasuredSize = () => {
+                const measured = element.offsetHeight
+                if (measured > 0) {
+                    setMeasuredViewportSize((previous) => (previous === measured ? previous : measured))
+                    return
+                }
+                // offsetParent が null なら display: none 等で非表示 = 正常な未計測状態なので黙る。
+                // レイアウトされているのに 0 の場合はホストが高さを確定させていない (自己計測の前提破り)。
+                if (element.offsetParent !== null && contentSize > 0 && lastViewportWarningRef.current !== "zero") {
+                    lastViewportWarningRef.current = "zero"
+                    Logger.warn("[ScrollPane] The self-measured viewport is 0px. Give the scroll pane's host element a definite height (e.g. h-full, flex-1 + min-h-0, an explicit px height), or pass viewportSize explicitly.")
+                }
+            }
+            applyMeasuredSize()
+            if (typeof ResizeObserver !== "function") {
+                return
+            }
+            const observer = new ResizeObserver(applyMeasuredSize)
+            observer.observe(element)
+            return () => {
+                observer.disconnect()
+            }
+        }, [contentSize, isSelfMeasuringViewport])
+
+        /**
+         * Publishes the self-measured viewport size to the owner.
+         * 自己計測したビューポート高さを所有者へ通知する副作用。
+         *
+         * ❗ layout effect である。`VirtualScroll` は描画枚数とアライン計算にこの数値を使うため、
+         * paint 前に通知しないと初回フレームだけ 1 行しか描かれない見た目になる。
+         *
+         * 目的: 親が帯の数値を保持できるようにする。
+         * 依存関係: [isSelfMeasuringViewport, measuredViewportSize, onViewportSizeChange]
+         * クリーンアップ: 不要。
+         */
+        useLayoutEffect(() => {
+            if (!isSelfMeasuringViewport) {
+                return
+            }
+            onViewportSizeChange?.(measuredViewportSize)
+        }, [isSelfMeasuringViewport, measuredViewportSize, onViewportSizeChange])
+
+        /**
+         * Warns when an explicitly passed viewportSize disagrees with the host's real band.
+         * 明示された viewportSize がホストの実際の帯と食い違うときに警告する副作用。
+         *
+         * ❗ 食い違いは**例外も視覚的な破綻もなく**進行し、はみ出し / 死に帯 / 末尾へ到達不能 /
+         * つまみが視野外 / ホイールとドラッグの無効化を引き起こす。検知できるのはここだけである。
+         *
+         * 比較対象はルート要素の `clientHeight` である。コンテンツ要素は明示モードでは
+         * `height: viewportSize` を書かれているため測っても同義反復になる。ホストが高さを
+         * 確定させていない (auto) 場合はルートも `viewportSize` に一致するので警告は出ない
+         * — その場合は食い違い自体が存在しないため正しい。
+         *
+         * `Logger.warn` を無条件に使う (NODE_ENV で切らない): 単一ビルドを配布しており
+         * `process.env` の置換は消費側のバンドラ任せで信頼できないうえ、既存の誤用警告
+         * (`useLruCache` の無効容量、`scrollTo` の非有限値) と同じ扱いに揃えるため。
+         *
+         * 目的: 帯との食い違いを検知して通知する。
+         * 依存関係: [isSelfMeasuringViewport, viewportSize]
+         * クリーンアップ: ResizeObserver を切断する。
+         */
+        useLayoutEffect(() => {
+            if (isSelfMeasuringViewport) {
+                return
+            }
+            const element = scrollContainerRef.current
+            if (!element) {
+                return
+            }
+            const warnOnMismatch = () => {
+                const actual = element.clientHeight
+                // 0 は非表示 (display: none 等) の未計測状態なので比較しない。
+                if (actual <= 0 || Math.abs(actual - viewportSize) <= 1) {
+                    return
+                }
+                const key = `${viewportSize}/${actual}`
+                if (lastViewportWarningRef.current === key) {
+                    return
+                }
+                lastViewportWarningRef.current = key
+                Logger.warn(
+                    `[ScrollPane] viewportSize=${viewportSize} but the host band is ${actual}px. The clip window, max scroll position, thumb mapping, rendered row count and scrollability all derive from viewportSize, so they are now wrong. Omit viewportSize to let the pane measure itself.`,
+                )
+            }
+            warnOnMismatch()
+            if (typeof ResizeObserver !== "function") {
+                return
+            }
+            const observer = new ResizeObserver(warnOnMismatch)
+            observer.observe(element)
+            return () => {
+                observer.disconnect()
+            }
+        }, [isSelfMeasuringViewport, viewportSize])
+
         // 横委譲コールバックは ref 経由で参照し、wheel リスナの再登録を避ける。
         const onWheelHorizontalRef = useRef(onWheelHorizontal)
         useEffect(() => {
@@ -1225,8 +1384,14 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
             [scrollTo, stopInertia],
         )
 
+        // ❗ 自己計測モードではルートに `data-self-measured` を出し、パッケージ CSS の
+        // `.aqvs-scroll-pane[data-self-measured="true"] { height: 100% }` でホストの帯まで伸ばす。
+        // 明示モードでは content のインライン高さがルートを押し広げるためルート自身に高さは不要だが、
+        // 高さを書かない自己計測モードでは「ルート auto → content の `height: 100%` が auto へ解決
+        // → 帯 0」に潰れる (実ブラウザで実測)。インラインで書かず data 属性 + クラスにするのは、
+        // 消費側が CSS で上書きできる状態を保つため (状態は data-* とパッケージ CSS で表現する方針)。
         return (
-            <div ref={scrollContainerRef} data-testid={testId} className={twMerge("aqvs-scroll-pane", className)} style={style}>
+            <div ref={scrollContainerRef} data-testid={testId} data-self-measured={isSelfMeasuringViewport ? "true" : undefined} className={twMerge("aqvs-scroll-pane", className)} style={style}>
                 <div
                     ref={contentAreaRef}
                     className={twMerge("aqvs-scroll-pane-content")}
@@ -1235,7 +1400,11 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
                     // コンテンツ領域には prop が無いため、パッケージ側で固定値を出す
                     data-testid="aqvs-scroll-pane-content"
                     style={{
-                        height: viewportSize,
+                        // ❗ 自己計測モードでは高さを書かない。CSS の `height: 100%` (= ルートの確定高さ) が
+                        // レイアウトを所有することで、「計測した値を書き戻して自分のサイズを変える」
+                        // フィードバックループが構造的に起こらず、初回 paint の時点でも帯は実寸で正しい
+                        // (数値の反映だけが 1 コミット遅れる)。明示モードは従来どおり px を書く。
+                        height: isSelfMeasuringViewport ? undefined : viewportSize,
                         paddingTop: resolvedInsets.top,
                         paddingBottom: resolvedInsets.bottom,
                         // スクロール不能時 (contentSize <= viewportSize) は touch-action を通常に戻し、

package/src/VirtualScroll.tsx

@@ -151,7 +151,21 @@ export type VirtualScrollProps<T> = {
      * さもないとキャッシュ済み高さが別のアイテムを指すインデックスに残る。
      */
     getItemHeight: (index: number) => number
-    viewportSize: number
+    /**
+     * Size of the visible band (px). Omit it to let the component measure its own band.
+     * 可視帯の高さ (px)。省略するとコンポーネントが自分の帯を計測する。
+     *
+     * ❗ **省略が既定の使い方である。** この値は帯のクリップ窓・最大スクロール位置・つまみ写像・
+     * 描画枚数・スクロール可否のすべての基準であり、実際の帯と食い違うと 5 通りの壊れ方が
+     * **例外も警告も出さずに**発生する。自分で測れるものを消費側に渡させると、同じ正解を各画面で
+     * 書き直すことになり、実際に推測値や定数が代入される (詳細は `ScrollPaneProps.viewportSize`)。
+     *
+     * 省略時はホスト要素が高さを確定させていること (`h-full` / `flex-1` + `min-h-0` / 明示 px など)
+     * が前提で、高さが auto のホストでは帯が 0 のままになる (`Logger.warn` で警告する)。
+     * 明示する正当なケースは「帯の高さを計測ではなく算出で知っている」場合のみである
+     * (例: ドロップダウンが件数 × 行高から高さを決める)。
+     */
+    viewportSize?: number
     overscanCount?: number
     className?: string
     /** Test id emitted as data-testid on the scroll root (DOM hooks must use data-* attributes, never class selectors). / スクロールルートに data-testid として出力されるテスト ID (DOM フックはクラスセレクタでなく data-* 属性を使う)。 */
@@ -736,7 +750,7 @@ const VirtualScrollInner = <T,>(
         getItem,
         getItemKey,
         getItemHeight,
-        viewportSize,
+        viewportSize: viewportSizeProp,
         overscanCount = 15,
         className,
         testId,
@@ -761,6 +775,16 @@ const VirtualScrollInner = <T,>(
 
     const { enablePointerDrag, pointerDragInputs, enableKeyboardNavigation = true, wheelSpeedMultiplier, inertiaOptions, clipItemHeight = false, resetOnGetItemHeightChange = false } = behaviorOptions ?? {}
 
+    // viewportSize 未指定のときは ScrollPane が自分の帯を計測し、その値をこのコールバックで通知する。
+    // 描画枚数 (computeRenderingRanges) とアライン計算 (scrollToIndex / ドリフト補正) はこの解決済み値を使う。
+    // 初回コミットは 0 だが ScrollPane が paint 前 (layout effect) に通知するためちらつきは無く、
+    // 帯が landed した時点でドリフト補正 effect (viewportSize を依存に持つ) がアンカー位置を再計算する。
+    const [measuredViewportSize, setMeasuredViewportSize] = useState(0)
+    const viewportSize = viewportSizeProp ?? measuredViewportSize
+    const handleViewportSizeChange = useCallback((nextViewportSize: number) => {
+        setMeasuredViewportSize((previous) => (previous === nextViewportSize ? previous : nextViewportSize))
+    }, [])
+
     // ❗ 内部ペイン ref の型は ScrollPaneHandle (ペイン座標)。VirtualScrollHandle と誤記すると
     // 2.0.0 以降は型ドキュメントが「論理座標を返す」と嘘をつく (構造的互換で型検査は通ってしまう)
     const scrollPaneRef = useRef<ScrollPaneHandle>(null)
@@ -2065,7 +2089,8 @@ const VirtualScrollInner = <T,>(
         <ScrollPane
             ref={scrollPaneRef}
             contentSize={totalContentHeight}
-            viewportSize={viewportSize}
+            viewportSize={viewportSizeProp}
+            onViewportSizeChange={handleViewportSizeChange}
             className={className}
             testId={testId}
             onScroll={handleScroll}

package/src/styles/virtualscroll.css

@@ -3,6 +3,13 @@
   display: flex;
 }
 
+/* 自己計測モード (viewportSize 省略) のときだけルートをホストの帯まで伸ばす。
+   明示モードでは content のインライン height がルートを押し広げるため不要で、
+   ここで無条件に伸ばすと既存消費者のルート要素の箱が変わってしまう。 */
+.aqvs-scroll-pane[data-self-measured="true"] {
+  height: 100%;
+}
+
 .aqvs-scroll-pane-content {
   box-sizing: border-box;
   position: relative;