@txstate-mws/svelte-components 1.0.4 → 1.1.0

package/playwright.config.js

@@ -0,0 +1,112 @@
+import { devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export const config = {
+
+  testDir: './tests',
+
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+
+  expect: {
+
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'line',
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+
+      /* Project-specific settings. */
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run build && npm run preview',
+    port: 3000,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

package/src/app.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
+		<link rel="stylesheet" href="/layout.css" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

package/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

package/src/lib/actions/buttonify.ts

@@ -0,0 +1,27 @@
+/**
+ * Turns any HTML element into an accessible button that responds to keyboard events and has
+ * role="button" and the tabindex attribute set. You are still responsible for making sure it has
+ * readable content or a good label.
+ */
+export function buttonify (node: HTMLElement) {
+  function keydown (e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        node.dispatchEvent(new CustomEvent('click'))
+      }
+    }
+  }
+
+  node.addEventListener('keydown', keydown)
+  if (node.tabIndex < 0) node.tabIndex = 0
+  node.setAttribute('role', 'button')
+  node.style.cursor = 'pointer'
+
+  return {
+    destroy () {
+      node.removeEventListener('keydown', keydown)
+    }
+  }
+}

package/src/lib/actions/glue.ts

@@ -0,0 +1,96 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store'
+import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js'
+import type { ElementOffsets } from '../util/index.js'
+export type GlueAlignOpts = 'auto'|'bottomleft'|'bottomright'|'topleft'|'topright'
+
+export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
+  target: HTMLElement
+  align?: GlueAlignOpts
+  cover?: boolean
+  store?: SettableSubject<T>
+}
+
+export interface GlueAlignStore {
+  valign: 'bottom'|'top'
+  halign: 'left'|'right'
+}
+
+let setBodyRelative = false
+export function glue (el: HTMLElement, { target, align = 'auto', cover = false, store }: GlueArgs) {
+  if (!setBodyRelative) {
+    setBodyRelative = true
+    document.body.style.position = 'relative'
+  }
+  let halign: GlueAlignStore['halign']
+  let valign: GlueAlignStore['valign']
+  let sharedOffset = sharedOffsetParent(el, target)
+
+  function reposition (offset: Required<ElementOffsets>) {
+    if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement)) return
+    let autoalign = align
+    const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : targetOffset(el.offsetParent, sharedOffset)
+    if (align === 'auto') {
+      const rect = target.getBoundingClientRect()
+      const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right'
+      const topbottom = window.innerHeight - rect.bottom > rect.top ? 'bottom' : 'top'
+      autoalign = topbottom + leftright as 'auto'
+    }
+    const targetHeight = target.offsetHeight
+    if (autoalign === 'bottomleft') {
+      requestAnimationFrame(() => {
+        el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`
+        el.style.left = `${offset.left - parentoffset.left}px`
+        el.style.bottom = ''
+        el.style.right = ''
+      })
+      valign = 'bottom'
+      halign = 'left'
+    } else if (autoalign === 'bottomright') {
+      requestAnimationFrame(() => {
+        el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`
+        el.style.left = ''
+        el.style.bottom = ''
+        el.style.right = `${offset.right - parentoffset.right}px`
+      })
+      valign = 'bottom'
+      halign = 'right'
+    } else if (autoalign === 'topleft') {
+      requestAnimationFrame(() => {
+        el.style.top = ''
+        el.style.left = `${offset.left - parentoffset.left}px`
+        el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`
+        el.style.right = ''
+      })
+      valign = 'top'
+      halign = 'left'
+    } else if (autoalign === 'topright') {
+      requestAnimationFrame(() => {
+        el.style.top = ''
+        el.style.left = ''
+        el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`
+        el.style.right = `${offset.right - parentoffset.right}px`
+      })
+      valign = 'top'
+      halign = 'right'
+    }
+    store?.update(v => ({ ...v, valign, halign }))
+  }
+  const { destroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition)
+
+  return {
+    update ({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }: GlueArgs) {
+      align = ualign
+      cover = ucover
+      if (ustore && ustore !== store) {
+        ustore.update(v => ({ ...v, valign, halign }))
+        store = ustore
+      }
+      if (target !== utarget) {
+        sharedOffset = sharedOffsetParent(el, utarget)
+        target = utarget
+        update(target, sharedOffset, reposition)
+      }
+    },
+    destroy
+  }
+}

package/src/lib/actions/index.ts

@@ -0,0 +1,7 @@
+export * from './buttonify.js'
+export * from './glue.js'
+export * from './offset.js'
+export * from './portal.js'
+export * from './resize.js'
+export * from './sticky.js'
+export * from './stickyfixed.js'

package/src/lib/actions/offset.ts

@@ -0,0 +1,43 @@
+import { Store } from '@txstate-mws/svelte-store'
+import type { WritableSubject } from '@txstate-mws/svelte-store'
+import { debounced, watchForPositionChange } from '../util/index.js'
+import type { ElementOffsets } from '../util/index.js'
+
+interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
+  debounce?: boolean|number
+  store?: WritableSubject<T>
+}
+
+export class OffsetStore extends Store<ElementOffsets> {
+  constructor (initialState?: ElementOffsets) {
+    super(initialState ?? { top: 0, right: 0, bottom: 0, left: 0 })
+  }
+}
+
+export function offset (el: HTMLElement, config?: OffsetConfig) {
+  if (config?.debounce === true) config.debounce = 100
+  let lastOffset: ElementOffsets = {}
+  function lookforoffsetchange (current: ElementOffsets) {
+    lastOffset = current
+    if (config?.store) config.store.update(v => ({ ...v, ...current }))
+    el.dispatchEvent(new CustomEvent('offset', { detail: current }))
+  }
+  let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange
+
+  const { destroy, update } = watchForPositionChange(el, resolvedchange)
+
+  return {
+    update (newConfig?: OffsetConfig) {
+      if (newConfig?.debounce === true) newConfig.debounce = 100
+      if (newConfig?.store !== config?.store) {
+        newConfig?.store?.update(v => ({ ...v, ...lastOffset }))
+      }
+      if (newConfig?.debounce !== config?.debounce) {
+        resolvedchange = newConfig?.debounce ? debounced(lookforoffsetchange, newConfig.debounce as any) : lookforoffsetchange
+        update(el, resolvedchange)
+      }
+      config = newConfig
+    },
+    destroy
+  }
+}

package/src/lib/actions/portal.ts

@@ -0,0 +1,13 @@
+export function portal (el: HTMLElement, target: HTMLElement|null = document.body) {
+  function update (target: HTMLElement|null = document.body) {
+    target?.appendChild(el)
+  }
+  function destroy () {
+    el.parentElement?.removeChild(el)
+  }
+  update(target)
+  return {
+    update,
+    destroy
+  }
+}

package/src/lib/actions/resize.ts

@@ -0,0 +1,72 @@
+import { equal } from 'txstate-utils'
+import { Store } from '@txstate-mws/svelte-store'
+import type { SettableSubject } from '@txstate-mws/svelte-store'
+import { debounced } from '../util/index.js'
+
+export interface ElementSize {
+  clientWidth?: number
+  clientHeight?: number
+  offsetWidth?: number
+  offsetHeight?: number
+}
+
+interface ResizeConfig {
+  debounce?: boolean|number
+  store?: SettableSubject<ElementSize>
+}
+
+export class ResizeStore extends Store<ElementSize> {
+  constructor (initialState?: ElementSize) {
+    super(initialState ?? typeof window === 'undefined'
+      ? {
+          clientWidth: 1024,
+          clientHeight: 1024,
+          offsetWidth: 1024,
+          offsetHeight: 1024
+        }
+      : {
+          clientWidth: window.innerWidth,
+          clientHeight: window.innerHeight,
+          offsetWidth: window.innerWidth,
+          offsetHeight: window.innerHeight
+        }
+    )
+  }
+}
+
+export function resize (el: HTMLElement, config?: ResizeConfig) {
+  if (config?.debounce === true) config.debounce = 100
+  let lastSize: ElementSize = {}
+  function watch () {
+    const current = { clientWidth: el.clientWidth, clientHeight: el.clientHeight, offsetWidth: el.offsetWidth, offsetHeight: el.offsetHeight }
+    if (!equal(lastSize, current)) {
+      lastSize = current
+      if (config?.store) config.store.set(current)
+      el.dispatchEvent(new CustomEvent('resize', { detail: current }))
+    }
+  }
+
+  if (typeof ResizeObserver === 'undefined') return watch() // support SSR
+
+  let observer = new ResizeObserver(config?.debounce ? debounced(watch, config.debounce) : watch)
+  observer.observe(el)
+  watch()
+
+  return {
+    update (newConfig?: ResizeConfig) {
+      if (newConfig?.debounce === true) newConfig.debounce = 100
+      if (newConfig?.store !== config?.store) {
+        newConfig?.store?.set(lastSize)
+      }
+      if (!!newConfig?.debounce !== !!config?.debounce) {
+        observer.disconnect()
+        observer = new ResizeObserver(newConfig?.debounce ? debounced(watch, newConfig.debounce) : watch)
+        observer.observe(el)
+      }
+      config = newConfig
+    },
+    destroy () {
+      observer.disconnect()
+    }
+  }
+}

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>