overflowed 0.0.0-experimental-20221120013127 → 0.0.0-experimental-20230103160007

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2033 Alexandre Hitchcox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/{Overflowed-53afb67e.d.ts → Overflowed-4d9a04ab.d.ts}

@@ -21,6 +21,7 @@ declare class Overflowed {
     private getElementSize;
     private getElementOffsetFromRight;
     private getElementOffsetFromLeft;
+    private getElementComputedValues;
     private update;
     private requestedUpdate;
     requestUpdate(): void;

package/README.md

@@ -0,0 +1,50 @@
+# Overflowed
+
+Overflowed is a small library allowing you to make your websites more responsive with collapsible
+lists. It's currently in it's alpha stage and the APIs are potentially unstable, but I aim to
+satisfy the following goals before a stable version.
+
+- ⚛️ Works across all major frameworks
+- 🌳 Lightweight and dependency-free, tree-shakable
+- 🏗️ Includes strongly typed TypeScript declarations
+- 🎨 Infinitely customizable, sensible defaults
+- ⚡ Highly optimized and performant
+- 📚 Clean API and comprehensive documentation
+- ♿ Encourages accessible practices
+- ↩️ Supports right-to-left writing modes
+- 🦄 Ponyfills can be provided
+- ⚙️ Supports SSR and environments without JS
+- 🧩 Ships with ESM and CJS bundles
+
+## Installation
+
+```
+npm install overflowed
+yarn add overflowed
+pnpm add overflowed
+```
+
+## Progress
+
+- [ ] Documentation
+  - [ ] Getting started
+    - [ ] React
+    - [ ] Vue.js
+    - [ ] Svelte
+    - [ ] Preact
+    - [ ] SolidJS
+  - [ ] Examples
+  - [ ] Playground
+- [ ] `overflowed/core`
+- [ ] `overflowed/react`
+  - [ ] `useOverflowedItems`
+- [ ] `overflowed/vue`
+- [ ] `overflowed/svelte`
+  - [ ] `overflowedItems`
+- [ ] `overflowed/preact`
+- [ ] `overflowed/solid`
+
+## Usage
+
+Check out the [examples](https://overflowed.aht.cx/examples) to see the library being used in
+various scenarios and it's implementations.

package/{chunk-DATLJDI5.mjs → chunk-DZKPYTOC.mjs}

@@ -73,23 +73,56 @@ var Overflowed = class {
     }
     return element.offsetTop;
   }
+  getElementComputedValues(element) {
+    const {
+      direction,
+      marginBlockStart,
+      marginBlockEnd,
+      marginInlineStart,
+      marginInlineEnd,
+      paddingBlockStart,
+      paddingBlockEnd,
+      paddingInlineStart,
+      paddingInlineEnd
+    } = window.getComputedStyle(element);
+    const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
+    const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
+    const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
+    const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
+    if (marginStartAsString && !marginStartAsString.endsWith("px"))
+      throw new Error("ok1");
+    if (marginEndAsString && !marginEndAsString.endsWith("px"))
+      throw new Error("ok2");
+    if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
+      throw new Error("ok3");
+    if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
+      throw new Error("ok4");
+    const marginStart = parseInt(marginStartAsString || "0", 10);
+    const marginEnd = parseInt(marginEndAsString || "0", 10);
+    const paddingStart = parseInt(paddingStartAsString || "0", 10);
+    const paddingEnd = parseInt(paddingEndAsString || "0", 10);
+    const isRtl = direction === "rtl";
+    return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
+  }
   update() {
     if (!this.containerElement) {
       return;
     }
-    const { direction, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd } = window.getComputedStyle(this.containerElement);
-    const offsetStart = parseInt(this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart, 10);
-    const offsetEnd = parseInt(this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd, 10);
-    const isRtl = direction === "rtl";
-    const containerElementSize = this.getElementSize(this.containerElement) - offsetStart - offsetEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement);
+    const {
+      isRtl,
+      paddingStart: containerPaddingStart,
+      paddingEnd: containerPaddingEnd
+    } = this.getElementComputedValues(this.containerElement);
+    const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
+    const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
+    const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
     const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
     const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
     const breakpoints = [];
-    for (const [_index, childElement] of childrenArray.entries()) {
+    for (const childElement of childrenArray.values()) {
       const childOffset = getOffset(childElement);
       const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - offsetStart, childOffset + childSize + offsetEnd]);
+      breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
     }
     if (breakpoints.length === 0) {
       return;
@@ -100,7 +133,7 @@ var Overflowed = class {
         ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
       );
       const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
-      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + offsetStart;
+      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
       this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
     } else {
       this.onUpdate(breakpoints.length, 0);

package/core/index.d.ts

@@ -1 +1 @@
-export { B as Breakpoint, a as Overflowed, O as OverflowedOptions } from '../Overflowed-53afb67e.js';
+export { B as Breakpoint, a as Overflowed, O as OverflowedOptions } from '../Overflowed-4d9a04ab.js';

package/core/index.js

@@ -99,23 +99,56 @@ var Overflowed = class {
     }
     return element.offsetTop;
   }
+  getElementComputedValues(element) {
+    const {
+      direction,
+      marginBlockStart,
+      marginBlockEnd,
+      marginInlineStart,
+      marginInlineEnd,
+      paddingBlockStart,
+      paddingBlockEnd,
+      paddingInlineStart,
+      paddingInlineEnd
+    } = window.getComputedStyle(element);
+    const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
+    const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
+    const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
+    const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
+    if (marginStartAsString && !marginStartAsString.endsWith("px"))
+      throw new Error("ok1");
+    if (marginEndAsString && !marginEndAsString.endsWith("px"))
+      throw new Error("ok2");
+    if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
+      throw new Error("ok3");
+    if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
+      throw new Error("ok4");
+    const marginStart = parseInt(marginStartAsString || "0", 10);
+    const marginEnd = parseInt(marginEndAsString || "0", 10);
+    const paddingStart = parseInt(paddingStartAsString || "0", 10);
+    const paddingEnd = parseInt(paddingEndAsString || "0", 10);
+    const isRtl = direction === "rtl";
+    return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
+  }
   update() {
     if (!this.containerElement) {
       return;
     }
-    const { direction, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd } = window.getComputedStyle(this.containerElement);
-    const offsetStart = parseInt(this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart, 10);
-    const offsetEnd = parseInt(this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd, 10);
-    const isRtl = direction === "rtl";
-    const containerElementSize = this.getElementSize(this.containerElement) - offsetStart - offsetEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement);
+    const {
+      isRtl,
+      paddingStart: containerPaddingStart,
+      paddingEnd: containerPaddingEnd
+    } = this.getElementComputedValues(this.containerElement);
+    const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
+    const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
+    const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
     const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
     const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
     const breakpoints = [];
-    for (const [_index, childElement] of childrenArray.entries()) {
+    for (const childElement of childrenArray.values()) {
       const childOffset = getOffset(childElement);
       const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - offsetStart, childOffset + childSize + offsetEnd]);
+      breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
     }
     if (breakpoints.length === 0) {
       return;
@@ -126,7 +159,7 @@ var Overflowed = class {
         ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
       );
       const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
-      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + offsetStart;
+      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
       this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
     } else {
       this.onUpdate(breakpoints.length, 0);

package/core/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-TXQIKLPR.mjs";
 import {
   Overflowed
-} from "../chunk-DATLJDI5.mjs";
+} from "../chunk-DZKPYTOC.mjs";
 export {
   Overflowed
 };

package/index.js

@@ -24,5 +24,8 @@ __export(modules_exports, {
 });
 module.exports = __toCommonJS(modules_exports);
 var modules_default = void 0;
+throw new Error(
+  "You imported `overflowed` directly, instead you should import from it's subdirectories such as `overflowed/react` or `overflowed/core`. Documentation for this error is available at https://overflowed.aht.cx/errors/imported-root"
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/index.mjs

@@ -1,5 +1,8 @@
 // modules/index.ts
 var modules_default = void 0;
+throw new Error(
+  "You imported `overflowed` directly, instead you should import from it's subdirectories such as `overflowed/react` or `overflowed/core`. Documentation for this error is available at https://overflowed.aht.cx/errors/imported-root"
+);
 export {
   modules_default as default
 };

package/package.json

@@ -1,11 +1,30 @@
 {
   "name": "overflowed",
-  "version": "0.0.0-experimental-20221120013127",
+  "version": "0.0.0-experimental-20230103160007",
+  "description": "Create toolbars with responsive overflow menus ✂️",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ahtcx/overflowed.git"
+  },
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
+  "devDependencies": {
+    "@changesets/cli": "2.26.0",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "preact": "10.11.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rome": "11.0.0",
+    "svelte": "3.55.0",
+    "tsup": "6.5.0",
+    "typescript": "4.9.4"
+  },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
+    "preact": "^10.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "svelte": "^3.0.0"
   },
@@ -13,11 +32,18 @@
     "@types/react": {
       "optional": true
     },
+    "preact": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },
     "svelte": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "pnpm --recursive dev"
   }
 }

package/react/index.d.ts

@@ -1,4 +1,4 @@
-import { O as OverflowedOptions } from '../Overflowed-53afb67e.js';
+import { O as OverflowedOptions } from '../Overflowed-4d9a04ab.js';
 
 interface UseOverflowedItemsState {
     visibleItemCount: number;

package/react/index.js

@@ -102,23 +102,56 @@ var Overflowed = class {
     }
     return element.offsetTop;
   }
+  getElementComputedValues(element) {
+    const {
+      direction,
+      marginBlockStart,
+      marginBlockEnd,
+      marginInlineStart,
+      marginInlineEnd,
+      paddingBlockStart,
+      paddingBlockEnd,
+      paddingInlineStart,
+      paddingInlineEnd
+    } = window.getComputedStyle(element);
+    const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
+    const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
+    const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
+    const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
+    if (marginStartAsString && !marginStartAsString.endsWith("px"))
+      throw new Error("ok1");
+    if (marginEndAsString && !marginEndAsString.endsWith("px"))
+      throw new Error("ok2");
+    if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
+      throw new Error("ok3");
+    if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
+      throw new Error("ok4");
+    const marginStart = parseInt(marginStartAsString || "0", 10);
+    const marginEnd = parseInt(marginEndAsString || "0", 10);
+    const paddingStart = parseInt(paddingStartAsString || "0", 10);
+    const paddingEnd = parseInt(paddingEndAsString || "0", 10);
+    const isRtl = direction === "rtl";
+    return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
+  }
   update() {
     if (!this.containerElement) {
       return;
     }
-    const { direction, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd } = window.getComputedStyle(this.containerElement);
-    const offsetStart = parseInt(this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart, 10);
-    const offsetEnd = parseInt(this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd, 10);
-    const isRtl = direction === "rtl";
-    const containerElementSize = this.getElementSize(this.containerElement) - offsetStart - offsetEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement);
+    const {
+      isRtl,
+      paddingStart: containerPaddingStart,
+      paddingEnd: containerPaddingEnd
+    } = this.getElementComputedValues(this.containerElement);
+    const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
+    const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
+    const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
     const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
     const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
     const breakpoints = [];
-    for (const [_index, childElement] of childrenArray.entries()) {
+    for (const childElement of childrenArray.values()) {
       const childOffset = getOffset(childElement);
       const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - offsetStart, childOffset + childSize + offsetEnd]);
+      breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
     }
     if (breakpoints.length === 0) {
       return;
@@ -129,7 +162,7 @@ var Overflowed = class {
         ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
       );
       const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
-      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + offsetStart;
+      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
       this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
     } else {
       this.onUpdate(breakpoints.length, 0);
@@ -165,6 +198,7 @@ var defaultCreateGetContainerProps = (overflowed, state) => ({ style } = {}) =>
   style: {
     overflowX: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
     overflowY: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
+    position: "relative",
     ...style
   }
 });
@@ -177,15 +211,14 @@ var defaultCreateGetIndicatorProps = (overflowed, state, isVisible) => ({ style
     }
     overflowed.registerIndicatorElement(indicatorElement);
   },
-  style: isVisible ? {
-    position: isVisible ? "absolute" : void 0,
-    insetInlineStart: isVisible ? state.indicatorElementOffset : void 0,
+  style: {
+    position: "absolute",
     marginInlineStart: 0,
+    insetInlineStart: isVisible ? state.indicatorElementOffset : 0,
+    userSelect: isVisible ? void 0 : "none",
+    pointerEvents: isVisible ? void 0 : "none",
+    visibility: isVisible ? void 0 : "hidden",
     ...style
-  } : {
-    userSelect: "none",
-    pointerEvents: "none",
-    visibility: "hidden"
   }
 });
 

package/react/index.mjs

@@ -1,6 +1,6 @@
 import {
   Overflowed
-} from "../chunk-DATLJDI5.mjs";
+} from "../chunk-DZKPYTOC.mjs";
 
 // modules/react/useOverflowedItems.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -16,6 +16,7 @@ var defaultCreateGetContainerProps = (overflowed, state) => ({ style } = {}) =>
   style: {
     overflowX: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
     overflowY: overflowed.axis === "horizontal" ? state.isMounted ? "clip" : "auto" : void 0,
+    position: "relative",
     ...style
   }
 });
@@ -28,15 +29,14 @@ var defaultCreateGetIndicatorProps = (overflowed, state, isVisible) => ({ style
     }
     overflowed.registerIndicatorElement(indicatorElement);
   },
-  style: isVisible ? {
-    position: isVisible ? "absolute" : void 0,
-    insetInlineStart: isVisible ? state.indicatorElementOffset : void 0,
+  style: {
+    position: "absolute",
     marginInlineStart: 0,
+    insetInlineStart: isVisible ? state.indicatorElementOffset : 0,
+    userSelect: isVisible ? void 0 : "none",
+    pointerEvents: isVisible ? void 0 : "none",
+    visibility: isVisible ? void 0 : "hidden",
     ...style
-  } : {
-    userSelect: "none",
-    pointerEvents: "none",
-    visibility: "hidden"
   }
 });
 

package/svelte/index.js

@@ -99,23 +99,56 @@ var Overflowed = class {
     }
     return element.offsetTop;
   }
+  getElementComputedValues(element) {
+    const {
+      direction,
+      marginBlockStart,
+      marginBlockEnd,
+      marginInlineStart,
+      marginInlineEnd,
+      paddingBlockStart,
+      paddingBlockEnd,
+      paddingInlineStart,
+      paddingInlineEnd
+    } = window.getComputedStyle(element);
+    const marginStartAsString = this.axis === "horizontal" ? marginInlineStart : marginBlockStart;
+    const marginEndAsString = this.axis === "horizontal" ? marginInlineEnd : marginBlockEnd;
+    const paddingStartAsString = this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart;
+    const paddingEndAsString = this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd;
+    if (marginStartAsString && !marginStartAsString.endsWith("px"))
+      throw new Error("ok1");
+    if (marginEndAsString && !marginEndAsString.endsWith("px"))
+      throw new Error("ok2");
+    if (paddingStartAsString && !paddingStartAsString.endsWith("px"))
+      throw new Error("ok3");
+    if (paddingEndAsString && !paddingEndAsString.endsWith("px"))
+      throw new Error("ok4");
+    const marginStart = parseInt(marginStartAsString || "0", 10);
+    const marginEnd = parseInt(marginEndAsString || "0", 10);
+    const paddingStart = parseInt(paddingStartAsString || "0", 10);
+    const paddingEnd = parseInt(paddingEndAsString || "0", 10);
+    const isRtl = direction === "rtl";
+    return { isRtl, marginStart, marginEnd, paddingStart, paddingEnd };
+  }
   update() {
     if (!this.containerElement) {
       return;
     }
-    const { direction, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd } = window.getComputedStyle(this.containerElement);
-    const offsetStart = parseInt(this.axis === "horizontal" ? paddingInlineStart : paddingBlockStart, 10);
-    const offsetEnd = parseInt(this.axis === "horizontal" ? paddingInlineEnd : paddingBlockEnd, 10);
-    const isRtl = direction === "rtl";
-    const containerElementSize = this.getElementSize(this.containerElement) - offsetStart - offsetEnd;
-    const indicatorElementSize = this.getElementSize(this.indicatorElement);
+    const {
+      isRtl,
+      paddingStart: containerPaddingStart,
+      paddingEnd: containerPaddingEnd
+    } = this.getElementComputedValues(this.containerElement);
+    const indicatorMarginEnd = this.indicatorElement ? this.getElementComputedValues(this.indicatorElement).marginEnd : 0;
+    const containerElementSize = this.getElementSize(this.containerElement) - containerPaddingStart - containerPaddingEnd;
+    const indicatorElementSize = this.getElementSize(this.indicatorElement) + indicatorMarginEnd;
     const childrenArray = Array.from(this.containerElement.children).filter((element) => element !== this.indicatorElement).filter(isHtmlElement);
     const getOffset = isRtl ? this.getElementOffsetFromRight.bind(this) : this.getElementOffsetFromLeft.bind(this);
     const breakpoints = [];
-    for (const [_index, childElement] of childrenArray.entries()) {
+    for (const childElement of childrenArray.values()) {
       const childOffset = getOffset(childElement);
       const childSize = this.getElementSize(childElement);
-      breakpoints.push([childOffset - offsetStart, childOffset + childSize + offsetEnd]);
+      breakpoints.push([childOffset - containerPaddingStart, childOffset + childSize + containerPaddingEnd]);
     }
     if (breakpoints.length === 0) {
       return;
@@ -126,7 +159,7 @@ var Overflowed = class {
         ([start, end]) => (this.indicatorElement ? start : end) > containerElementSize - indicatorElementSize
       );
       const newVisibleItemCount = Math.max(intersectingChildIndex - (this.indicatorElement ? 1 : 0), 0);
-      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + offsetStart;
+      const newIndicatorElementOffset = breakpoints[newVisibleItemCount]?.[0] + containerPaddingStart;
       this.onUpdate(newVisibleItemCount, newIndicatorElementOffset);
     } else {
       this.onUpdate(breakpoints.length, 0);
@@ -151,7 +184,7 @@ var isHtmlElement = (element) => {
   throw new Error("Element provided is not a HTMLElement.");
 };
 
-// modules/svelte/OverflowedActions.ts
+// modules/svelte/overflowedItems.ts
 var overflowedItems = (items, onUpdate) => {
   const overflowed = new Overflowed({
     onUpdate: (newVisibleItemCount, indicatorElementOffset) => {

package/svelte/index.mjs

@@ -1,9 +1,9 @@
 import "../chunk-TXQIKLPR.mjs";
 import {
   Overflowed
-} from "../chunk-DATLJDI5.mjs";
+} from "../chunk-DZKPYTOC.mjs";
 
-// modules/svelte/OverflowedActions.ts
+// modules/svelte/overflowedItems.ts
 var overflowedItems = (items, onUpdate) => {
   const overflowed = new Overflowed({
     onUpdate: (newVisibleItemCount, indicatorElementOffset) => {