slim-select 3.3.0 → 3.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "type": "module",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
@@ -68,43 +68,43 @@
     "release": "node release.js"
   },
   "devDependencies": {
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/downloadjs": "^1.4.6",
-    "@types/node": "^25.0.0",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
-    "@typescript-eslint/parser": "^8.47.0",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vitest/coverage-v8": "^4.0.15",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "@vue/test-utils": "^2.4.6",
-    "axe-core": "^4.11.0",
+    "axe-core": "^4.11.1",
     "clipboard": "^2.0.11",
     "downloadjs": "^1.4.7",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.5",
     "highlight.js": "^11.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^27.3.0",
+    "jsdom": "^28.0.0",
     "pinia": "^3.0.4",
-    "prettier": "^3.7.4",
-    "react": "^19.2.2",
-    "react-dom": "^19.2.2",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rimraf": "^6.1.2",
-    "sass": "^1.96.0",
-    "shiki": "^3.19.0",
-    "terser": "^5.44.1",
+    "sass": "^1.97.3",
+    "shiki": "^3.22.0",
+    "terser": "^5.46.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^7.2.7",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.15",
-    "vue": "^3.5.25",
-    "vue-router": "^4.6.4",
-    "vue-tsc": "^3.1.8",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.27",
+    "vue-router": "^5.0.2",
+    "vue-tsc": "^3.2.4",
     "vuex": "^4.0.2"
   },
   "peerDependencies": {

package/sitemap.js

@@ -8,6 +8,7 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
 // Define all routes and their metadata
+// Based on routes defined in src/docs/router.ts
 const routes = [
   {
     loc: 'https://slimselectjs.com/',
@@ -33,12 +34,30 @@ const routes = [
     changefreq: 'monthly',
     priority: '0.8'
   },
+  {
+    loc: 'https://slimselectjs.com/examples',
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'monthly',
+    priority: '0.8'
+  },
+  {
+    loc: 'https://slimselectjs.com/privacy',
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'yearly',
+    priority: '0.3'
+  },
   {
     loc: 'https://slimselectjs.com/settings',
     lastmod: new Date().toISOString().split('T')[0],
     changefreq: 'monthly',
     priority: '0.8'
   },
+  {
+    loc: 'https://slimselectjs.com/style',
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'monthly',
+    priority: '0.8'
+  },
   {
     loc: 'https://slimselectjs.com/events',
     lastmod: new Date().toISOString().split('T')[0],
@@ -52,13 +71,13 @@ const routes = [
     priority: '0.7'
   },
   {
-    loc: 'https://slimselectjs.com/frameworks/react',
+    loc: 'https://slimselectjs.com/react',
     lastmod: new Date().toISOString().split('T')[0],
     changefreq: 'monthly',
     priority: '0.8'
   },
   {
-    loc: 'https://slimselectjs.com/frameworks/vue',
+    loc: 'https://slimselectjs.com/vue',
     lastmod: new Date().toISOString().split('T')[0],
     changefreq: 'monthly',
     priority: '0.8'

package/src/slim-select/render.test.ts

@@ -1658,4 +1658,220 @@ describe('render module', () => {
       expect(render.content.main.classList.contains(render.classes.dirBelow)).toBe(true)
     })
   })
+
+  describe('setContentPosition (via moveContentBelow)', () => {
+    // Helper: mock getBoundingClientRect on an element to return specific values
+    function mockRect(el: HTMLElement, rect: Partial<DOMRect>) {
+      el.getBoundingClientRect = vi.fn(
+        () =>
+          ({
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => {},
+            ...rect
+          }) as DOMRect
+      )
+    }
+
+    test('absolute (default): content aligns below trigger using document coords', () => {
+      // Simulate trigger at viewport (100, 50) with height 40 and width 200
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      // No scroll
+      Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+
+      // top = viewportTop(100) + scrollY(0) + height(40) = 140
+      // left = viewportLeft(50) + scrollX(0) = 50
+      expect(render.content.main.style.top).toBe('140px')
+      expect(render.content.main.style.left).toBe('50px')
+      expect(render.content.main.style.width).toBe('200px')
+    })
+
+    test('absolute: content accounts for page scroll', () => {
+      // Trigger at viewport (100, 50) but page is scrolled down 300px and right 20px
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      Object.defineProperty(window, 'scrollY', { value: 300, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 20, writable: true })
+
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+
+      // top = viewportTop(100) + scrollY(300) + height(40) = 440
+      // left = viewportLeft(50) + scrollX(20) = 70
+      expect(render.content.main.style.top).toBe('440px')
+      expect(render.content.main.style.left).toBe('70px')
+      expect(render.content.main.style.width).toBe('200px')
+    })
+
+    test('absolute: content aligns correctly when trigger is near top of page', () => {
+      // Trigger is at very top, no scroll
+      mockRect(render.main.main, { top: 0, left: 10, height: 30, width: 150 })
+
+      Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+
+      // top = 0 + 0 + 30 = 30
+      // left = 10 + 0 = 10
+      expect(render.content.main.style.top).toBe('30px')
+      expect(render.content.main.style.left).toBe('10px')
+      expect(render.content.main.style.width).toBe('150px')
+    })
+
+    test('fixed: content uses viewport coords without scroll offset', () => {
+      // Same trigger position and scroll as the absolute+scroll test
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      Object.defineProperty(window, 'scrollY', { value: 300, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 20, writable: true })
+
+      render.settings.contentPosition = 'fixed'
+      render.moveContentBelow()
+
+      // Fixed ignores scroll: top = viewportTop(100) + height(40) = 140
+      // left = viewportLeft(50) = 50
+      expect(render.content.main.style.top).toBe('140px')
+      expect(render.content.main.style.left).toBe('50px')
+      expect(render.content.main.style.width).toBe('200px')
+    })
+
+    test('relative: content position styles are not set', () => {
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      render.settings.contentPosition = 'relative'
+
+      // Reset styles to confirm they aren't changed
+      render.content.main.style.top = ''
+      render.content.main.style.left = ''
+      render.content.main.style.width = ''
+
+      render.moveContentBelow()
+
+      // setContentPosition returns early for relative, so no inline positioning
+      expect(render.content.main.style.top).toBe('')
+      expect(render.content.main.style.left).toBe('')
+      expect(render.content.main.style.width).toBe('')
+    })
+
+    test('absolute vs fixed diverge only by scroll offset', () => {
+      const triggerRect = { top: 200, left: 80, height: 36, width: 250 }
+
+      Object.defineProperty(window, 'scrollY', { value: 500, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+
+      // Absolute
+      mockRect(render.main.main, triggerRect)
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+      const absTop = render.content.main.style.top
+      const absLeft = render.content.main.style.left
+
+      // Fixed
+      mockRect(render.main.main, triggerRect)
+      render.settings.contentPosition = 'fixed'
+      render.moveContentBelow()
+      const fixedTop = render.content.main.style.top
+      const fixedLeft = render.content.main.style.left
+
+      // Absolute top should be exactly scrollY more than fixed top
+      expect(parseFloat(absTop)).toBe(parseFloat(fixedTop) + 500)
+      // Left should differ by scrollX (which is 0 here, so equal)
+      expect(parseFloat(absLeft)).toBe(parseFloat(fixedLeft))
+    })
+
+    describe('contentWidth setting', () => {
+      beforeEach(() => {
+        mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+        Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+        Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+        render.settings.contentPosition = 'absolute'
+      })
+
+      test('default (empty): width matches trigger', () => {
+        render.settings.contentWidth = ''
+        render.moveContentBelow()
+
+        expect(render.content.main.style.width).toBe('200px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('exact value: sets width to given value', () => {
+        render.settings.contentWidth = '500px'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.width).toBe('500px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('> prefix: sets min-width, no fixed width', () => {
+        render.settings.contentWidth = '>300px'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.minWidth).toBe('300px')
+        expect(render.content.main.style.width).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('< prefix: sets max-width, no fixed width', () => {
+        render.settings.contentWidth = '<600px'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.maxWidth).toBe('600px')
+        expect(render.content.main.style.width).toBe('')
+        expect(render.content.main.style.minWidth).toBe('')
+      })
+
+      test('exact value with percentage', () => {
+        render.settings.contentWidth = '100%'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.width).toBe('100%')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('clears previous width styles when switching modes', () => {
+        // First set min-width
+        render.settings.contentWidth = '>300px'
+        render.moveContentBelow()
+        expect(render.content.main.style.minWidth).toBe('300px')
+
+        // Now switch to exact width — min-width should be cleared
+        render.settings.contentWidth = '500px'
+        render.moveContentBelow()
+        expect(render.content.main.style.width).toBe('500px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('clears previous width styles when switching to default', () => {
+        // First set max-width
+        render.settings.contentWidth = '<600px'
+        render.moveContentBelow()
+        expect(render.content.main.style.maxWidth).toBe('600px')
+
+        // Now switch to default — max-width should be cleared, width matches trigger
+        render.settings.contentWidth = ''
+        render.moveContentBelow()
+        expect(render.content.main.style.width).toBe('200px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+    })
+  })
 })

package/src/slim-select/render.ts

@@ -1614,26 +1614,81 @@ export default class Render {
       return
     }
 
+    // getBoundingClientRect() returns viewport-relative coordinates.
     const containerRect = this.main.main.getBoundingClientRect()
     let top: number
     let left: number
 
     if (this.settings.contentPosition === 'fixed') {
-      // Fixed positioning - use viewport coordinates directly
+      // position:fixed is relative to the viewport, so viewport coords work directly.
       top = containerRect.top + containerRect.height
       left = containerRect.left
     } else {
-      // Absolute positioning - calculate relative to offsetParent
-      const offsetParent = this.content.main.offsetParent as HTMLElement
-      const offsetParentRect = offsetParent ? offsetParent.getBoundingClientRect() : { top: 0, left: 0 }
-
-      top = containerRect.top - offsetParentRect.top + containerRect.height - (offsetParent?.clientTop || 0)
-      left = containerRect.left - offsetParentRect.left - (offsetParent?.clientLeft || 0)
+      // position:absolute is relative to the containing block. By default the content
+      // is appended to document.body (static), so the containing block is the initial
+      // containing block (document origin). We must convert viewport coords to document
+      // coords by adding scroll offsets. Using offsetParent subtraction was unreliable
+      // because offsetParent for body children varies across browsers (body vs html)
+      // and body margin caused misalignment.
+      top = containerRect.top + window.scrollY + containerRect.height
+      left = containerRect.left + window.scrollX
     }
 
     this.content.main.style.top = top + 'px'
     this.content.main.style.left = left + 'px'
-    this.content.main.style.width = containerRect.width + 'px'
+
+    // Apply content width based on contentWidth setting
+    // ""           → width matches trigger (default/current behavior)
+    // "500px"      → exact width of 500px
+    // ">500px"     → min-width of 500px, width auto (content can grow)
+    // "<500px"     → max-width of 500px, width auto (content can shrink)
+    const cw = this.settings.contentWidth
+    this.content.main.style.width = ''
+    this.content.main.style.minWidth = ''
+    this.content.main.style.maxWidth = ''
+
+    if (!cw) {
+      // Default: match trigger width exactly
+      this.content.main.style.width = containerRect.width + 'px'
+    } else if (cw.startsWith('>')) {
+      // Min-width mode: at least this wide, can grow to fit content
+      this.content.main.style.minWidth = cw.slice(1)
+    } else if (cw.startsWith('<')) {
+      // Max-width mode: no wider than this, content wraps if longer
+      this.content.main.style.maxWidth = cw.slice(1)
+    } else {
+      // Exact width
+      this.content.main.style.width = cw
+    }
+
+    // If content overflows the right side of the viewport, shift it left so the right edge
+    // lines up with the trigger (or stays inside the viewport). Use rAF so we measure after
+    // layout (and after width:auto / min-width have been applied).
+    const padding = 20
+    const viewportRight = window.innerWidth - padding
+
+    const applyOverflowShift = (): void => {
+      const contentRect = this.content.main.getBoundingClientRect()
+      const contentRight = contentRect.right
+      if (contentRight <= viewportRight) return
+
+      const overflow = contentRight - viewportRight
+      const currentLeft = parseFloat(this.content.main.style.left) || 0
+
+      if (this.settings.contentPosition === 'fixed') {
+        const newLeft = Math.max(padding, currentLeft - overflow)
+        this.content.main.style.left = newLeft + 'px'
+      } else {
+        const newLeft = Math.max(window.scrollX + padding, currentLeft - overflow)
+        this.content.main.style.left = newLeft + 'px'
+      }
+    }
+
+    // First rAF: layout done (width/min-width applied). Second rAF: catch scrollbar etc.
+    requestAnimationFrame(() => {
+      applyOverflowShift()
+      requestAnimationFrame(applyOverflowShift)
+    })
   }
 
   public moveContentAbove(): void {

package/src/slim-select/settings.test.ts

@@ -36,7 +36,8 @@ const defaultSettings: { [key: string]: any } = {
   maxSelected: 1000,
   timeoutDelay: 200,
   maxValuesShown: 20,
-  maxValuesMessage: '{number} selected'
+  maxValuesMessage: '{number} selected',
+  contentWidth: ''
 }
 
 describe('Settings module', () => {

package/src/slim-select/settings.ts

@@ -25,6 +25,7 @@ export default class Settings {
   public closeOnSelect: boolean
   public contentLocation: HTMLElement | null
   public contentPosition: 'relative' | 'absolute' | 'fixed'
+  public contentWidth: string
   public openPosition: 'auto' | 'up' | 'down'
   public placeholderText: string
   public allowDeselect: boolean
@@ -60,6 +61,7 @@ export default class Settings {
     this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true
     this.contentLocation = settings.contentLocation || document.body
     this.contentPosition = settings.contentPosition || 'absolute'
+    this.contentWidth = settings.contentWidth || ''
     this.openPosition = settings.openPosition || 'auto' // options: auto, up, down
     this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value'
     this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false