@txstate-mws/svelte-components 1.0.1 → 1.1.0

package/src/lib/actions/sticky.ts

@@ -0,0 +1,105 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store'
+import { bodyOffset, watchForPositionChange } from '../util/index.js'
+import type { ElementOffsets } from '../util/index.js'
+
+export interface StickyArgs <T extends StickyStore = StickyStore> {
+  target?: HTMLElement
+  store?: SettableSubject<T>
+}
+
+export interface StickyStore {
+  floating?: boolean
+  translateY?: number
+}
+
+let scrolled = false
+
+/**
+ * A robust implementation of stickyness based on `transform: translateY()`. Only use when
+ * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
+ * it performs better.
+ *
+ * Reasons `position: sticky` might not work:
+ * 1) it cannot work on a thead or tr, only td and th (and non-table elements)
+ * 2) it gets confused if any parent elements have an `overflow` set, even `overflow: hidden`
+ * 3) it always stays within the boundaries of the closest parent element that has a `position`
+ *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
+ *
+ * Note that if the element you place this on has other transforms, this is going to overwrite them.
+ *
+ * The main drawback to this approach is that it cannot do its work before scroll on mobile, only after,
+ * so on mobile you are going to see it visually lag a little during scrolling.
+ *
+ * You may also want to try use:stickyfixed. It is based on setting `position: fixed` when appropriate,
+ * and therefore animates better than this. However, it has a lot more work to do and is more
+ * fragile if your markup/CSS situation is very complex.
+ */
+export function sticky (el: HTMLElement, config?: StickyArgs) {
+  let floating: boolean
+  let translateY: number
+  let scrollstart = Number.MAX_SAFE_INTEGER
+  let scrollend = Number.MAX_SAFE_INTEGER
+
+  function recalc (scroll: number) {
+    const newTranslateY = Math.max(Math.min(scroll, scrollend) - scrollstart, 0)
+    if (newTranslateY !== translateY) {
+      el.style.transform = `translateY(${newTranslateY}px)`
+      translateY = newTranslateY
+      floating = scroll >= scrollstart
+      config?.store?.update(v => ({ ...v, translateY, floating }))
+    }
+  }
+
+  function onscroll (_: Event) {
+    recalc(window.scrollY)
+  }
+
+  function onwheel (e: WheelEvent) {
+    e.preventDefault()
+    const scroll = window.scrollY + e.deltaY
+    recalc(scroll)
+    if (!scrolled) {
+      window.scrollTo({ top: scroll })
+      scrolled = true
+      setTimeout(() => {
+        scrolled = false
+      }, 0)
+    }
+  }
+
+  let lastOffsetParent: HTMLElement = el.offsetParent as HTMLElement
+  function onpositionchange (offset: Required<ElementOffsets>[]) {
+    const offsetParent = el.offsetParent
+    if (!(offsetParent instanceof HTMLElement)) return
+    if (lastOffsetParent !== offsetParent) {
+      offset[0] = bodyOffset(offsetParent)
+      update(offsetParent, onpositionchange)
+      lastOffsetParent = offsetParent
+    }
+    scrollstart = offset[0].top + el.offsetTop
+    const containeroffset = config?.target ? offset[1] : offset[0]
+    scrollend = Math.max(scrollstart, containeroffset.top + (config?.target ?? offsetParent).clientHeight - el.offsetHeight)
+    recalc(window.scrollY)
+  }
+
+  const { destroy, update } = watchForPositionChange([el.offsetParent as HTMLElement, config?.target], onpositionchange)
+  window.addEventListener('scroll', onscroll, { passive: true })
+  window.addEventListener('wheel', onwheel, { passive: false })
+
+  function stickyUpdate (newConfig?: StickyArgs) {
+    if (newConfig?.store !== config?.store) newConfig?.store?.update(v => ({ ...v, translateY, floating }))
+    config = newConfig
+    update([el.offsetParent as HTMLElement, config?.target], onpositionchange)
+  }
+
+  function stickyDestroy () {
+    window.removeEventListener('scroll', onscroll)
+    window.removeEventListener('wheel', onwheel)
+    destroy()
+  }
+
+  return {
+    update: stickyUpdate,
+    destroy: stickyDestroy
+  }
+}

package/src/lib/actions/stickyfixed.ts

@@ -0,0 +1,160 @@
+import { bodyOffset, watchForPositionChange } from '../util/index.js'
+import type { ElementOffsets } from '../util/index.js'
+import type { StickyArgs } from './sticky.js'
+
+/**
+ * An implementation of stickyness based on `positon: fixed`. Only use when
+ * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
+ * it performs better.
+ *
+ * Reasons `position: sticky` might not work:
+ * 1) it cannot work on a thead or tr, only td and th (and non-table elements)
+ * 2) it gets confused if any parent elements have an `overflow` set, even `overflow: hidden`
+ * 3) it always stays within the boundaries of the closest parent element that has a `position`
+ *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
+ *
+ * Note that this implementation gets great animation performance at the cost of extra complexity.
+ * It does a lot of work like cloning the element you place it on, placing the cloned element next
+ * to yours in the DOM, setting widths to match between them, watching for mutations to keep them
+ * in sync, etc. Some of this work may get foiled if you have a complex html/css/js situation.
+ *
+ * You may also want to try use:sticky. It is based on setting `transform: translateY()` as appropriate,
+ * and is less fragile than this. However, it cannot do its work before the scroll on mobile, only after,
+ * so it will visually lag a bit on mobile.
+ */
+export function stickyfixed (el: HTMLElement, config?: StickyArgs) {
+  let floating: boolean
+  let translateY: number
+  let scrollstart = Number.MAX_SAFE_INTEGER
+  let scrollend = Number.MAX_SAFE_INTEGER
+  let spacer: HTMLElement
+  let elheight: number
+  let left: number
+  let top = 0
+
+  function generatespacer (mutations?: MutationRecord[]) {
+    if (mutations?.every(m => m.attributeName === 'style')) return
+    spacer?.remove()
+    spacer = el.cloneNode(true) as HTMLElement
+    spacer.setAttribute('aria-hidden', 'true')
+    spacer.style.position = ''
+    spacer.style.top = ''
+    spacer.style.left = ''
+    spacer.style.width = ''
+    const tds = Array.from(spacer.querySelectorAll<HTMLElement>('td,th'))
+    for (const td of tds) td.style.width = ''
+    if (floating) el.parentElement?.insertBefore(spacer, el)
+  }
+  const mutationobserver = new MutationObserver(generatespacer)
+  mutationobserver.observe(el, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    characterData: true
+  })
+  generatespacer()
+
+  function adjustwidths () {
+    const tds = Array.from(el.querySelectorAll<HTMLElement>('td,th'))
+    if (floating) {
+      const spacertds = Array.from(spacer.querySelectorAll<HTMLElement>('td,th'))
+      const widths = spacertds.map(td => window.getComputedStyle(td).width)
+      const table = spacer.closest('table')
+      let extrawidth = 0
+      if (table) {
+        const cell = el.querySelector('th:last-child,td:last-child')
+        if (cell) {
+          const tstyle = window.getComputedStyle(table)
+          extrawidth = tstyle.borderCollapse === 'collapse' ? parseInt(window.getComputedStyle(cell).borderRightWidth) : 0
+        }
+      }
+      const width = `${parseInt(window.getComputedStyle(spacer).width) + extrawidth}px`
+      elheight = spacer.offsetHeight
+      for (let i = 0; i < tds.length; i++) tds[i].style.width = widths[i]
+      el.style.width = width
+    } else {
+      for (const td of tds) td.style.width = ''
+      el.style.width = ''
+      elheight = el.offsetHeight
+    }
+  }
+
+  const resizeobserver = new ResizeObserver(adjustwidths)
+
+  function recalc (scroll: number) {
+    const newTranslateY = Math.max(Math.min(scroll - 1, scrollend) - scrollstart, 0)
+    const newFloating = newTranslateY > 0
+    const newTop = Math.max(Math.min(scrollend - scroll, 0), -2 * elheight)
+    if (newFloating !== floating) {
+      floating = newFloating
+      if (floating) {
+        el.parentElement?.insertBefore(spacer, el)
+        el.style.position = 'fixed'
+        el.style.top = `${Math.min(scrollend - scroll, 0)}px`
+        el.style.left = `${left}px`
+        resizeobserver.observe(spacer)
+      } else {
+        el.style.position = ''
+        el.style.top = ''
+        el.style.left = ''
+        resizeobserver.disconnect()
+        spacer.remove()
+      }
+      adjustwidths()
+    }
+    if (newTranslateY !== translateY) {
+      translateY = newTranslateY
+      config?.store?.update(v => ({ ...v, translateY, floating }))
+    }
+    if (top !== newTop) {
+      top = newTop
+      if (floating) el.style.top = `${top}px`
+    }
+  }
+
+  function onscroll (_: Event) {
+    recalc(window.scrollY)
+  }
+
+  let lastOffsetParent: HTMLElement = el.offsetParent as HTMLElement
+  function onpositionchange (offset: Required<ElementOffsets>[]) {
+    const offsetParent = el.offsetParent
+    if (!(offsetParent instanceof HTMLElement)) return
+    if (lastOffsetParent !== offsetParent) {
+      offset[0] = bodyOffset(offsetParent)
+      update(offsetParent, onpositionchange)
+      lastOffsetParent = offsetParent
+    }
+    const table = el.closest('table')
+    const borderspacing = (table ? parseInt(window.getComputedStyle(table).borderSpacing) : 0)
+    scrollstart = offset[0].top + el.offsetTop
+    left = offset[0].left + (spacer.parentElement ? spacer.offsetLeft : el.offsetLeft)
+    if (el.tagName === 'TR') {
+      scrollstart -= borderspacing
+    }
+    const containeroffset = config?.target ? offset[1] ?? offset[0] : offset[0]
+    scrollend = Math.max(scrollstart, containeroffset.top + (config?.target ?? offsetParent).clientHeight - el.offsetHeight)
+    recalc(window.scrollY)
+  }
+
+  const { destroy, update } = watchForPositionChange([el.offsetParent as HTMLElement, config?.target], onpositionchange)
+  window.addEventListener('scroll', onscroll, { passive: true })
+
+  function stickyUpdate (newConfig?: StickyArgs) {
+    if (newConfig?.store !== config?.store) newConfig?.store?.update(v => ({ ...v, translateY, floating }))
+    config = newConfig
+    update([el.offsetParent as HTMLElement, config?.target], onpositionchange)
+  }
+
+  function stickyDestroy () {
+    resizeobserver.disconnect()
+    mutationobserver.disconnect()
+    window.removeEventListener('scroll', onscroll)
+    destroy()
+  }
+
+  return {
+    update: stickyUpdate,
+    destroy: stickyDestroy
+  }
+}

package/src/lib/components/Card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let className = ''
+  import { getContext } from 'svelte'
+  import { resize } from '$lib/actions'
+  import { CARDLAYOUT } from '$lib/types'
+  import type { CardLayoutContext, Block } from '$lib/types'
+  const block: Block = { element: undefined }
+  const { registerBlock, gutter, recalculate } = getContext<CardLayoutContext>(CARDLAYOUT)
+  const { width, order, linebreak } = registerBlock(block)
+</script>
+
+<li class="cardlayout-card {className}" bind:this={block.element} use:resize on:resize={recalculate} style="margin-bottom: {$gutter}px; width: {$width}; order: {$order};">
+  <slot></slot>
+</li>
+{#if $linebreak}
+  <li aria-hidden="true" class="cardlayout-columnbreak" style:order={$order}></li>
+{/if}
+
+<style>
+  .cardlayout-columnbreak {
+    width: 0;
+    height: 100%;
+    visibility: hidden;
+  }
+</style>

package/src/lib/components/CardLayout.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import { onDestroy, tick, setContext, onMount } from 'svelte'
+  import { writable } from 'svelte/store'
+  import { browser } from '$app/env'
+  import { ElementSize, resize } from '$lib/actions'
+  import { CARDLAYOUT } from '$lib/types'
+  import type { Block } from '$lib/types'
+  export let maxwidth = 500
+  export let preserveorder = false
+  export let gutter = 10
+  export let className = ''
+  const blocks = []
+  const gutterstore = writable(gutter)
+  let defaultOrder = 0
+  setContext(CARDLAYOUT, {
+    registerBlock: (block: Block) => {
+      blocks.push(block)
+      hardrecalc()
+      onDestroy(() => {
+        blocks.splice(blocks.indexOf(block), 1)
+        hardrecalc()
+      })
+      block.order = writable(defaultOrder++)
+      block.linebreak = writable(false)
+      const cols = savecolumns || Math.ceil(1024 / maxwidth)
+      block.width = writable(`calc(${100.0 / cols}% - ${gutter * (cols - 1) / cols}px)`)
+      return block
+    },
+    recalculate: () => {
+      hardrecalc()
+    },
+    gutter: gutterstore
+  })
+  $: gutterstore.set(gutter)
+  let layoutelement: HTMLElement
+  let cycle1 = 0
+  let cycle2 = 0
+  function detectcycle (w: number) {
+    if (cycle1 === 0 && Math.abs(w - cycle2) > 5) {
+      cycle1 = w
+    } else if (cycle2 === 0 && Math.abs(w - cycle1) > 5) {
+      cycle2 = w
+    } else if (w === cycle1 || w === cycle2) {
+      return true
+    } else {
+      cycle1 = 0
+      cycle2 = 0
+    }
+    return false
+  }
+  let savecolumns = 0
+  let optimal: Block[][]
+  let fullheight = 0
+  let hardrequired = false
+  async function recalculate (realw: number) {
+    const columns = Math.ceil(realw / maxwidth)
+    const guttereach = gutter * (columns - 1) / columns
+    const cycling = detectcycle(realw)
+    if (columns !== savecolumns) {
+      for (const block of blocks) block.width.set(`calc(${100.0 / columns}% - ${guttereach}px`)
+      await tick()
+    }
+    // collect all the card heights at this new column width
+    for (const block of blocks) block.height = block.element?.offsetHeight ?? 200
+    if (columns !== savecolumns || hardrequired) { // only do real work if number of columns has changed, recalculate triggers on resize
+      if (preserveorder) {
+        optimal = [blocks]
+        if (columns > 1) {
+          const totalheight = blocks.reduce((totalheight, block) => totalheight + block.height + gutter, 0)
+          const tallestblock = Math.max(...blocks.map(b => b.height))
+          const minheight = Math.max(totalheight / columns, tallestblock)
+          let shortestoverall = totalheight
+          // 2d packing problem is NP-hard so this is an O(n) heuristic
+          // optimal configuration would be if each column is `minheight` so start there
+          // then relax it in increments and see if the overall height shrinks
+          const increment = Math.max(1, Math.floor(Math.min(minheight, tallestblock) * 0.05))
+          for (let colmaxheight = minheight; colmaxheight < minheight + tallestblock + gutter; colmaxheight += increment) {
+            let colheight = 0
+            let colidx = 0
+            let tallestcol = 0
+            let tallestcolidx = 0
+            const arrangement = []
+            for (const block of blocks) {
+              if (colheight + block.height > colmaxheight && colidx < columns - 1) {
+                if (colheight > tallestcol) {
+                  tallestcol = colheight
+                  tallestcolidx = colidx
+                }
+                colidx++
+                colheight = 0
+              }
+              if (!arrangement[colidx]) arrangement[colidx] = []
+              arrangement[colidx].push(block)
+              colheight += block.height + gutter
+            }
+            if (colheight > tallestcol) {
+              tallestcol = colheight
+              tallestcolidx = colidx
+            }
+            if (tallestcol < shortestoverall) {
+              shortestoverall = tallestcol
+              optimal = arrangement
+            }
+            // if leftmost column is tallest, increasing the allowable height can never make the overall height shorter
+            if (tallestcolidx === 0) break
+          }
+        }
+      } else {
+        optimal = []
+        const heights: number[] = Array.apply(null, Array(columns)).map((_: any) => 0) // initializes heights to an array of zeroes
+        // begin sorting blocks into columns
+        for (const block of blocks) {
+          // find the column with the smallest current height
+          const colidx = heights.reduce((acc, curr, curridx) => curr < heights[acc] ? curridx : acc, 0)
+          // record the height we are adding to the chosen column
+          heights[colidx] += block.height + gutter
+          // move the current card to the chosen column
+          if (!optimal[colidx]) optimal[colidx] = []
+          optimal[colidx].push(block)
+        }
+      }
+      // we created the optimal arrangement, now move the block elements to
+      // reflect it
+      let order = 0
+      for (let i = 0; i < optimal.length; i++) {
+        for (let j = 0; j < optimal[i].length; j++) {
+          const block = optimal[i][j]
+          block.order.set(order++)
+          block.linebreak.set(j === optimal[i].length - 1 && i < optimal.length - 1)
+        }
+      }
+      savecolumns = columns
+      hardrequired = false
+    }
+    // re-adjust container height
+    const saveheight = fullheight
+    fullheight = 0
+    for (let i = 0; i < optimal.length; i++) {
+      let top = 0
+      for (const block of optimal[i]) {
+        top += block.height + gutter
+      }
+      fullheight = Math.max(fullheight, top)
+    }
+    if (cycling && saveheight < fullheight) fullheight = saveheight
+  }
+
+  let savewidth = 0
+  let timer = 0
+  function triggerrecalc (width: number) {
+    if (width === savewidth && !hardrequired) return
+    cancelAnimationFrame(timer)
+    timer = requestAnimationFrame(() => {
+      recalculate(width)
+      savewidth = width
+    })
+  }
+  function hardrecalc () {
+    if (!layoutelement) return
+    hardrequired = true
+    cycle1 = 0
+    cycle2 = 0
+    triggerrecalc(layoutelement.clientWidth)
+  }
+  function onResize (e: UIEvent & { currentTarget: any, detail: ElementSize }) {
+    triggerrecalc(e.detail.clientWidth)
+  }
+  onMount(() => triggerrecalc(layoutelement.clientWidth))
+</script>
+
+<ul class="cardlayout {className}" class:ssr={!browser} style:height={browser ? `${fullheight + gutter}px` : undefined} bind:this={layoutelement} use:resize on:resize={onResize}>
+  <slot></slot>
+</ul>
+
+<style>
+  .cardlayout {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: space-between;
+  }
+  .cardlayout.ssr {
+    flex-direction: row;
+  }
+</style>

package/{dist/ts → src/lib}/components/CollapsingTable.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { Store, classes } from '../lib'
-  import type { CollapsingTableColumn, PopupMenuItem } from '../types'
+  import { Store } from '@txstate-mws/svelte-store'
   import { derived } from 'svelte/store'
+  import type { CollapsingTableColumn, PopupMenuItem } from '$lib/types'
+  import { classes } from '$lib/util'
   import DefaultPopupMenu from './PopupMenu.svelte'
   import ScreenReaderOnly from './ScreenReaderOnly.svelte'
 
@@ -31,7 +32,7 @@
       columns[0].neverhide = true
     }
     const sortedcolumns = columns // stable sort
-      .map((c, i) => ({ col: c, idx: i}))
+      .map((c, i) => ({ col: c, idx: i }))
       .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
       .map(o => o.col)
     if (!selected) {
@@ -69,7 +70,7 @@
     state.set({ keepcolumns, hiddencolumns, dropdowncolumn })
   }
   $: react(width, selected)
-  let headers: HTMLElement[] = []
+  const headers: HTMLElement[] = []
   $: menubuttonelement = headers[$state.keepcolumns.length - 1]
 </script>
 
@@ -113,7 +114,7 @@
   </table>
 </div>
 {#if $menuitems.length > 0}
-  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => selected = e.detail}></svelte:component>
+  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => { selected = e.detail }}></svelte:component>
 {/if}
 
 <style>

package/{dist/ts → src/lib}/components/FocusLock.svelte

@@ -6,7 +6,7 @@
   export let returnfocusto: HTMLElement|null|undefined = undefined
   export let initialfocus: string|undefined = undefined
   export let hidefocus = true
-  export let hidefocuslabel = "focus is above modal dialog, start tabbing"
+  export let hidefocuslabel = 'focus is above modal dialog, start tabbing'
   export let escapable = true
   let className = ''
   export { className as class }
@@ -33,13 +33,14 @@
       returnfocusto = document.querySelector(':focus') as HTMLElement
     }
     await sleep(1) // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
+    if (!lockelement) return // in case we already unmounted
     if (initialfocus) {
       const focusEl = lockelement.querySelector(initialfocus)
       if (focusEl instanceof HTMLElement) focusEl.focus()
     } else {
       setInitialFocus()
     }
-    setTimeout(() => listenforescape = true, 0)
+    setTimeout(() => { listenforescape = true }, 0)
   })
   onDestroy(async () => {
     const wasactive = active
@@ -53,19 +54,19 @@
     if (prevFocusLock) prevFocusLock.unpause()
   })
   const setInitialFocus = () => {
-    const firstfocus = tabbable(lockelement)[0]
+    const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined
     if (firstfocus && firstfocus.focus) {
       firstfocus.focus()
     }
   }
   const setLastFocus = () => {
-    const lastfocus = tabbable(lockelement).slice(-1)[0]
+    const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined
     if (lastfocus && lastfocus.focus) {
       lastfocus.focus()
     }
   }
   const keydown = (e: KeyboardEvent) => {
-    if (active && e.key === "Escape" && escapable) {
+    if (active && e.key === 'Escape' && escapable) {
       e.preventDefault()
       dispatch('escape')
     }
@@ -87,7 +88,7 @@
 <div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
   <div bind:this={abovelockelement} tabindex="0"></div>
   <div bind:this={lockelement} on:keydown={keydown}>
-    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
+    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() => { hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
     <slot></slot>
   </div>
   <div tabindex="0"></div>

package/{dist/ts → src/lib}/components/Modal.svelte

@@ -6,9 +6,10 @@
   export let initialfocus: string|undefined = undefined
   export let containerClass = ''
   export let opaque = false
-  import FocusLock from './FocusLock.svelte'
+  export let usePortal: HTMLElement|undefined = undefined
   import { createEventDispatcher, onMount } from 'svelte'
-  import { portal } from '../actions';
+  import FocusLock from './FocusLock.svelte'
+  import { portal } from '$lib/actions'
 
   const dispatch = createEventDispatcher()
   const endmodal = () => {
@@ -24,7 +25,7 @@
   })
 </script>
 
-<div use:portal class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
+<div use:portal={usePortal} class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
   <FocusLock class="modal-container {containerClass}" {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
     <slot></slot>
   </FocusLock>
@@ -38,7 +39,7 @@
     width: 100vw;
     height: 100vh;
     background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
-    z-index: 100;
+    z-index: 2147483000;
     display: flex;
     justify-content: center;
     align-items: center