@txstate-mws/svelte-components 1.1.0 → 1.1.1

package/actions/buttonify.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function buttonify(node: HTMLElement): {
+    destroy(): void;
+};

package/actions/buttonify.js

@@ -0,0 +1,26 @@
+/**
+ * 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) {
+    function keydown(e) {
+        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/actions/glue.d.ts

@@ -0,0 +1,16 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store';
+export declare 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';
+}
+export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
+    update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
+    destroy: () => void;
+};

package/actions/glue.js

@@ -0,0 +1,82 @@
+import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js';
+let setBodyRelative = false;
+export function glue(el, { target, align = 'auto', cover = false, store }) {
+    if (!setBodyRelative) {
+        setBodyRelative = true;
+        document.body.style.position = 'relative';
+    }
+    let halign;
+    let valign;
+    let sharedOffset = sharedOffsetParent(el, target);
+    function reposition(offset) {
+        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;
+        }
+        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 }) {
+            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/actions/index.d.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/actions/index.js

@@ -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/actions/offset.d.ts

@@ -0,0 +1,15 @@
+import { Store } from '@txstate-mws/svelte-store';
+import type { WritableSubject } from '@txstate-mws/svelte-store';
+import type { ElementOffsets } from '../util/index.js';
+interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
+    debounce?: boolean | number;
+    store?: WritableSubject<T>;
+}
+export declare class OffsetStore extends Store<ElementOffsets> {
+    constructor(initialState?: ElementOffsets);
+}
+export declare function offset(el: HTMLElement, config?: OffsetConfig): {
+    update(newConfig?: OffsetConfig): void;
+    destroy: () => void;
+};
+export {};

package/actions/offset.js

@@ -0,0 +1,35 @@
+import { Store } from '@txstate-mws/svelte-store';
+import { debounced, watchForPositionChange } from '../util/index.js';
+export class OffsetStore extends Store {
+    constructor(initialState) {
+        super(initialState ?? { top: 0, right: 0, bottom: 0, left: 0 });
+    }
+}
+export function offset(el, config) {
+    if (config?.debounce === true)
+        config.debounce = 100;
+    let lastOffset = {};
+    function lookforoffsetchange(current) {
+        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) {
+            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) : lookforoffsetchange;
+                update(el, resolvedchange);
+            }
+            config = newConfig;
+        },
+        destroy
+    };
+}

package/actions/portal.d.ts

@@ -0,0 +1,4 @@
+export declare function portal(el: HTMLElement, target?: HTMLElement | null): {
+    update: (target?: HTMLElement | null) => void;
+    destroy: () => void;
+};

package/actions/portal.js

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

package/actions/resize.d.ts

@@ -0,0 +1,20 @@
+import { Store } from '@txstate-mws/svelte-store';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
+export interface ElementSize {
+    clientWidth?: number;
+    clientHeight?: number;
+    offsetWidth?: number;
+    offsetHeight?: number;
+}
+interface ResizeConfig {
+    debounce?: boolean | number;
+    store?: SettableSubject<ElementSize>;
+}
+export declare class ResizeStore extends Store<ElementSize> {
+    constructor(initialState?: ElementSize);
+}
+export declare function resize(el: HTMLElement, config?: ResizeConfig): void | {
+    update(newConfig?: ResizeConfig): void;
+    destroy(): void;
+};
+export {};

package/actions/resize.js

@@ -0,0 +1,57 @@
+import { equal } from 'txstate-utils';
+import { Store } from '@txstate-mws/svelte-store';
+import { debounced } from '../util/index.js';
+export class ResizeStore extends Store {
+    constructor(initialState) {
+        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, config) {
+    if (config?.debounce === true)
+        config.debounce = 100;
+    let lastSize = {};
+    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) {
+            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/actions/sticky.d.ts

@@ -0,0 +1,33 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store';
+export interface StickyArgs<T extends StickyStore = StickyStore> {
+    target?: HTMLElement;
+    store?: SettableSubject<T>;
+}
+export interface StickyStore {
+    floating?: boolean;
+    translateY?: number;
+}
+/**
+ * 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 declare function sticky(el: HTMLElement, config?: StickyArgs): {
+    update: (newConfig?: StickyArgs) => void;
+    destroy: () => void;
+};

package/actions/sticky.js

@@ -0,0 +1,85 @@
+import { bodyOffset, watchForPositionChange } from '../util/index.js';
+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, config) {
+    let floating;
+    let translateY;
+    let scrollstart = Number.MAX_SAFE_INTEGER;
+    let scrollend = Number.MAX_SAFE_INTEGER;
+    function recalc(scroll) {
+        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(_) {
+        recalc(window.scrollY);
+    }
+    function onwheel(e) {
+        e.preventDefault();
+        const scroll = window.scrollY + e.deltaY;
+        recalc(scroll);
+        if (!scrolled) {
+            window.scrollTo({ top: scroll });
+            scrolled = true;
+            setTimeout(() => {
+                scrolled = false;
+            }, 0);
+        }
+    }
+    let lastOffsetParent = el.offsetParent;
+    function onpositionchange(offset) {
+        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, config?.target], onpositionchange);
+    window.addEventListener('scroll', onscroll, { passive: true });
+    window.addEventListener('wheel', onwheel, { passive: false });
+    function stickyUpdate(newConfig) {
+        if (newConfig?.store !== config?.store)
+            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
+        config = newConfig;
+        update([el.offsetParent, config?.target], onpositionchange);
+    }
+    function stickyDestroy() {
+        window.removeEventListener('scroll', onscroll);
+        window.removeEventListener('wheel', onwheel);
+        destroy();
+    }
+    return {
+        update: stickyUpdate,
+        destroy: stickyDestroy
+    };
+}

package/actions/stickyfixed.d.ts

@@ -0,0 +1,25 @@
+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 declare function stickyfixed(el: HTMLElement, config?: StickyArgs): {
+    update: (newConfig?: StickyArgs) => void;
+    destroy: () => void;
+};

package/actions/stickyfixed.js

@@ -0,0 +1,157 @@
+import { bodyOffset, watchForPositionChange } from '../util/index.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, config) {
+    let floating;
+    let translateY;
+    let scrollstart = Number.MAX_SAFE_INTEGER;
+    let scrollend = Number.MAX_SAFE_INTEGER;
+    let spacer;
+    let elheight;
+    let left;
+    let top = 0;
+    function generatespacer(mutations) {
+        if (mutations?.every(m => m.attributeName === 'style'))
+            return;
+        spacer?.remove();
+        spacer = el.cloneNode(true);
+        spacer.setAttribute('aria-hidden', 'true');
+        spacer.style.position = '';
+        spacer.style.top = '';
+        spacer.style.left = '';
+        spacer.style.width = '';
+        const tds = Array.from(spacer.querySelectorAll('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('td,th'));
+        if (floating) {
+            const spacertds = Array.from(spacer.querySelectorAll('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) {
+        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(_) {
+        recalc(window.scrollY);
+    }
+    let lastOffsetParent = el.offsetParent;
+    function onpositionchange(offset) {
+        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, config?.target], onpositionchange);
+    window.addEventListener('scroll', onscroll, { passive: true });
+    function stickyUpdate(newConfig) {
+        if (newConfig?.store !== config?.store)
+            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
+        config = newConfig;
+        update([el.offsetParent, config?.target], onpositionchange);
+    }
+    function stickyDestroy() {
+        resizeobserver.disconnect();
+        mutationobserver.disconnect();
+        window.removeEventListener('scroll', onscroll);
+        destroy();
+    }
+    return {
+        update: stickyUpdate,
+        destroy: stickyDestroy
+    };
+}

package/components/Card.svelte

@@ -0,0 +1,23 @@
+<script >export let className = '';
+import { getContext } from 'svelte';
+import { resize } from '../actions';
+import { CARDLAYOUT } from '../types';
+const block = { element: undefined };
+const { registerBlock, gutter, recalculate } = getContext(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/components/Card.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CardProps = typeof __propDef.props;
+export declare type CardEvents = typeof __propDef.events;
+export declare type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};