@immich/ui 0.56.1 → 0.57.1

package/dist/common/context.svelte.d.ts

@@ -1,7 +1,446 @@
-import type { FieldContext } from '../types.js';
-export declare const setFieldContext: (field: FieldContext) => FieldContext;
-export declare const hasFieldContext: () => boolean;
-export declare const getFieldContext: () => {
+import type { FieldContext, TableContext } from '../types.js';
+export declare const setFieldContext: (context: () => FieldContext) => () => FieldContext;
+export declare const getFieldContext: () => () => {
+    class?: (string & (import("svelte/elements").ClassValue | null)) | undefined;
+    size?: import("../types.js").Size;
+    requiredIndicator?: boolean;
+    children?: import("svelte").Snippet;
+    form?: string | undefined | null;
+    for?: string | undefined | null;
+    accesskey?: string | undefined | null;
+    autocapitalize?: "characters" | "off" | "on" | "none" | "sentences" | "words" | undefined | null;
+    autofocus?: boolean | undefined | null;
+    contenteditable?: import("svelte/elements").Booleanish | "inherit" | "plaintext-only" | undefined | null;
+    contextmenu?: string | undefined | null;
+    dir?: "ltr" | "rtl" | "auto" | undefined | null;
+    draggable?: import("svelte/elements").Booleanish | undefined | null;
+    elementtiming?: string | undefined | null;
+    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | null;
+    hidden?: boolean | "until-found" | "" | undefined | null;
+    id?: string | undefined | null;
+    lang?: string | undefined | null;
+    part?: string | undefined | null;
+    placeholder?: string | undefined | null;
+    slot?: string | undefined | null;
+    spellcheck?: import("svelte/elements").Booleanish | undefined | null;
+    style?: string | undefined | null;
+    tabindex?: number | undefined | null;
+    title?: string | undefined | null;
+    translate?: "yes" | "no" | "" | undefined | null;
+    inert?: boolean | undefined | null;
+    popover?: "auto" | "manual" | "hint" | "" | undefined | null;
+    writingsuggestions?: import("svelte/elements").Booleanish | undefined | null;
+    radiogroup?: string | undefined | null;
+    role?: import("svelte/elements").AriaRole | undefined | null;
+    about?: string | undefined | null;
+    datatype?: string | undefined | null;
+    inlist?: any;
+    prefix?: string | undefined | null;
+    property?: string | undefined | null;
+    resource?: string | undefined | null;
+    typeof?: string | undefined | null;
+    vocab?: string | undefined | null;
+    autosave?: string | undefined | null;
+    itemprop?: string | undefined | null;
+    itemscope?: boolean | undefined | null;
+    itemtype?: string | undefined | null;
+    itemid?: string | undefined | null;
+    itemref?: string | undefined | null;
+    results?: number | undefined | null;
+    security?: string | undefined | null;
+    unselectable?: "on" | "off" | undefined | null;
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | null;
+    is?: string | undefined | null;
+    'bind:innerHTML'?: string | undefined | null;
+    'bind:textContent'?: string | undefined | null;
+    'bind:innerText'?: string | undefined | null;
+    'bind:focused'?: boolean | undefined | null;
+    'bind:offsetWidth'?: number | undefined | null;
+    'bind:offsetHeight'?: number | undefined | null;
+    'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
+    'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
+    'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
+    'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
+    'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
+    'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
+    'aria-activedescendant'?: string | undefined | null;
+    'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;
+    'aria-busy'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined | null;
+    'aria-colcount'?: number | undefined | null;
+    'aria-colindex'?: number | undefined | null;
+    'aria-colspan'?: number | undefined | null;
+    'aria-controls'?: string | undefined | null;
+    'aria-current'?: import("svelte/elements").Booleanish | "page" | "step" | "location" | "date" | "time" | undefined | null;
+    'aria-describedby'?: string | undefined | null;
+    'aria-details'?: string | undefined | null;
+    'aria-disabled'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | null;
+    'aria-errormessage'?: string | undefined | null;
+    'aria-expanded'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-flowto'?: string | undefined | null;
+    'aria-grabbed'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | null;
+    'aria-hidden'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | undefined | null;
+    'aria-keyshortcuts'?: string | undefined | null;
+    'aria-label'?: string | undefined | null;
+    'aria-labelledby'?: string | undefined | null;
+    'aria-level'?: number | undefined | null;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined | null;
+    'aria-modal'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-multiline'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-multiselectable'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined | null;
+    'aria-owns'?: string | undefined | null;
+    'aria-placeholder'?: string | undefined | null;
+    'aria-posinset'?: number | undefined | null;
+    'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined | null;
+    'aria-readonly'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | null;
+    'aria-required'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-roledescription'?: string | undefined | null;
+    'aria-rowcount'?: number | undefined | null;
+    'aria-rowindex'?: number | undefined | null;
+    'aria-rowspan'?: number | undefined | null;
+    'aria-selected'?: import("svelte/elements").Booleanish | undefined | null;
+    'aria-setsize'?: number | undefined | null;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | null;
+    'aria-valuemax'?: number | undefined | null;
+    'aria-valuemin'?: number | undefined | null;
+    'aria-valuenow'?: number | undefined | null;
+    'aria-valuetext'?: string | undefined | null;
+    'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    oncopy?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    oncopycapture?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    oncut?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    oncutcapture?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    onpaste?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    onpastecapture?: import("svelte/elements").ClipboardEventHandler<HTMLLabelElement> | null | undefined;
+    'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    oncompositionend?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    oncompositionendcapture?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    oncompositionstart?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    oncompositionstartcapture?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    oncompositionupdate?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    oncompositionupdatecapture?: import("svelte/elements").CompositionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onfocus?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onfocuscapture?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onfocusin?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onfocusincapture?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onfocusout?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onfocusoutcapture?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onblur?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    onblurcapture?: import("svelte/elements").FocusEventHandler<HTMLLabelElement> | null | undefined;
+    'on:change'?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    onchange?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    onchangecapture?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLLabelElement> | null | undefined;
+    onbeforeinput?: import("svelte/elements").EventHandler<InputEvent, HTMLLabelElement> | null | undefined;
+    onbeforeinputcapture?: import("svelte/elements").EventHandler<InputEvent, HTMLLabelElement> | null | undefined;
+    'on:input'?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    oninput?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    oninputcapture?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    'on:reset'?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    onreset?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    onresetcapture?: import("svelte/elements").FormEventHandler<HTMLLabelElement> | null | undefined;
+    'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLLabelElement> | null | undefined;
+    onsubmit?: import("svelte/elements").EventHandler<SubmitEvent, HTMLLabelElement> | null | undefined;
+    onsubmitcapture?: import("svelte/elements").EventHandler<SubmitEvent, HTMLLabelElement> | null | undefined;
+    'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oninvalid?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oninvalidcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLLabelElement> | null | undefined;
+    onformdata?: import("svelte/elements").EventHandler<FormDataEvent, HTMLLabelElement> | null | undefined;
+    onformdatacapture?: import("svelte/elements").EventHandler<FormDataEvent, HTMLLabelElement> | null | undefined;
+    'on:load'?: import("svelte/elements").EventHandler | undefined | null;
+    onload?: import("svelte/elements").EventHandler | undefined | null;
+    onloadcapture?: import("svelte/elements").EventHandler | undefined | null;
+    'on:error'?: import("svelte/elements").EventHandler | undefined | null;
+    onerror?: import("svelte/elements").EventHandler | undefined | null;
+    onerrorcapture?: import("svelte/elements").EventHandler | undefined | null;
+    'on:beforetoggle'?: import("svelte/elements").ToggleEventHandler<HTMLLabelElement> | null | undefined;
+    onbeforetoggle?: import("svelte/elements").ToggleEventHandler<HTMLLabelElement> | null | undefined;
+    onbeforetogglecapture?: import("svelte/elements").ToggleEventHandler<HTMLLabelElement> | null | undefined;
+    'on:toggle'?: import("svelte/elements").ToggleEventHandler<HTMLLabelElement> | null | undefined;
+    ontoggle?: import("svelte/elements").ToggleEventHandler<HTMLLabelElement> | null | undefined;
+    ontogglecapture?: import("svelte/elements").ToggleEventHandler<HTMLLabelElement> | null | undefined;
+    'on:contentvisibilityautostatechange'?: import("svelte/elements").ContentVisibilityAutoStateChangeEventHandler<HTMLLabelElement> | null | undefined;
+    oncontentvisibilityautostatechange?: import("svelte/elements").ContentVisibilityAutoStateChangeEventHandler<HTMLLabelElement> | null | undefined;
+    oncontentvisibilityautostatechangecapture?: import("svelte/elements").ContentVisibilityAutoStateChangeEventHandler<HTMLLabelElement> | null | undefined;
+    'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    onkeydown?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    onkeydowncapture?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    onkeypress?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    onkeypresscapture?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    onkeyup?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    onkeyupcapture?: import("svelte/elements").KeyboardEventHandler<HTMLLabelElement> | null | undefined;
+    'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onabort?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onabortcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncanplay?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncanplaycapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncanplaythrough?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncanplaythroughcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncuechange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncuechangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    ondurationchange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    ondurationchangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onemptied?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onemptiedcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onencrypted?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onencryptedcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onended?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onendedcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onloadeddata?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onloadeddatacapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onloadedmetadata?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onloadedmetadatacapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onloadstart?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onloadstartcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onpause?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onpausecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:play'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onplay?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onplaycapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onplaying?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onplayingcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onprogress?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onprogresscapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onratechange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onratechangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onseeked?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onseekedcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onseeking?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onseekingcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onstalled?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onstalledcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onsuspend?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onsuspendcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    ontimeupdate?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    ontimeupdatecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onvolumechange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onvolumechangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onwaiting?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onwaitingcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onauxclick?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onauxclickcapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:click'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onclick?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onclickcapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    oncontextmenu?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    oncontextmenucapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    ondblclick?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    ondblclickcapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:drag'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondrag?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragcapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragend?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragendcapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragenter?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragentercapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragexit?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragexitcapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragleave?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragleavecapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragover?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragovercapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragstart?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondragstartcapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:drop'?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondrop?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    ondropcapture?: import("svelte/elements").DragEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmousedown?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmousedowncapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseenter?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseleave?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmousemove?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmousemovecapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseout?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseoutcapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseover?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseovercapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseup?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    onmouseupcapture?: import("svelte/elements").MouseEventHandler<HTMLLabelElement> | null | undefined;
+    'on:select'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onselect?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onselectcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onselectionchange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onselectionchangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onselectstart?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onselectstartcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchcancel?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchcancelcapture?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchend?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchendcapture?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchmove?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchmovecapture?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchstart?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    ontouchstartcapture?: import("svelte/elements").TouchEventHandler<HTMLLabelElement> | null | undefined;
+    'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    ongotpointercapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    ongotpointercapturecapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointercancel?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointercancelcapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerdown?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerdowncapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerenter?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerentercapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerleave?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerleavecapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointermove?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointermovecapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerout?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointeroutcapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerover?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerovercapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerup?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onpointerupcapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onlostpointercapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    onlostpointercapturecapture?: import("svelte/elements").PointerEventHandler<HTMLLabelElement> | null | undefined;
+    'on:gamepadconnected'?: import("svelte/elements").GamepadEventHandler<HTMLLabelElement> | null | undefined;
+    ongamepadconnected?: import("svelte/elements").GamepadEventHandler<HTMLLabelElement> | null | undefined;
+    'on:gamepaddisconnected'?: import("svelte/elements").GamepadEventHandler<HTMLLabelElement> | null | undefined;
+    ongamepaddisconnected?: import("svelte/elements").GamepadEventHandler<HTMLLabelElement> | null | undefined;
+    'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    onscroll?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    onscrollcapture?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    'on:scrollend'?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    onscrollend?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    onscrollendcapture?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    'on:resize'?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    onresize?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    onresizecapture?: import("svelte/elements").UIEventHandler<HTMLLabelElement> | null | undefined;
+    'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLLabelElement> | null | undefined;
+    onwheel?: import("svelte/elements").WheelEventHandler<HTMLLabelElement> | null | undefined;
+    onwheelcapture?: import("svelte/elements").WheelEventHandler<HTMLLabelElement> | null | undefined;
+    'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    onanimationstart?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    onanimationstartcapture?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    onanimationend?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    onanimationendcapture?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    onanimationiteration?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    onanimationiterationcapture?: import("svelte/elements").AnimationEventHandler<HTMLLabelElement> | null | undefined;
+    'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitionstart?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitionstartcapture?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitionrun?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitionruncapture?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitionend?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitionendcapture?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitioncancel?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    ontransitioncancelcapture?: import("svelte/elements").TransitionEventHandler<HTMLLabelElement> | null | undefined;
+    'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onoutrostart?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onoutrostartcapture?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onoutroend?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onoutroendcapture?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onintrostart?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onintrostartcapture?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onintroend?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    onintroendcapture?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLLabelElement> | null | undefined;
+    'on:message'?: import("svelte/elements").MessageEventHandler<HTMLLabelElement> | null | undefined;
+    onmessage?: import("svelte/elements").MessageEventHandler<HTMLLabelElement> | null | undefined;
+    onmessagecapture?: import("svelte/elements").MessageEventHandler<HTMLLabelElement> | null | undefined;
+    'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLLabelElement> | null | undefined;
+    onmessageerror?: import("svelte/elements").MessageEventHandler<HTMLLabelElement> | null | undefined;
+    onmessageerrorcapture?: import("svelte/elements").MessageEventHandler<HTMLLabelElement> | null | undefined;
+    'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onvisibilitychange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onvisibilitychangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:beforematch'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onbeforematch?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onbeforematchcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncancel?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    oncancelcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:close'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onclose?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onclosecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onfullscreenchange?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onfullscreenchangecapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onfullscreenerror?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    onfullscreenerrorcapture?: import("svelte/elements").EventHandler<Event, HTMLLabelElement> | null | undefined;
+    'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+    'bind:contentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+    'bind:borderBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+    'bind:devicePixelContentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+    'bind:clientWidth'?: number | undefined | null;
+    'bind:clientHeight'?: number | undefined | null;
+    xmlns?: string | undefined | null;
     label: string | undefined;
     description: string | undefined;
     color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "muted";
@@ -10,3 +449,8 @@ export declare const getFieldContext: () => {
     required: boolean | "indicator";
     disabled: boolean;
 };
+export declare const setTableContext: (context: () => TableContext) => () => TableContext;
+export declare const getTableContext: () => () => {
+    spacing: import("../types.js").Size;
+    striped: boolean;
+};

package/dist/common/context.svelte.js

@@ -1,9 +1,20 @@
 import { withPrefix } from '../utilities/internal.js';
-import { getContext, hasContext, setContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 const fieldKey = Symbol(withPrefix('field'));
-export const setFieldContext = (field) => setContext(fieldKey, field);
-export const hasFieldContext = () => hasContext(fieldKey);
+export const setFieldContext = (context) => setContext(fieldKey, context);
 export const getFieldContext = () => {
-    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, description, } = getContext(fieldKey) || {};
-    return { label, description, color, invalid, readOnly, required, disabled };
+    return () => {
+        const context = getContext(fieldKey);
+        const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, description, ...restProps } = context?.() || {};
+        return { label, description, color, invalid, readOnly, required, disabled, ...restProps };
+    };
+};
+const tableKey = Symbol(withPrefix('table'));
+export const setTableContext = (context) => setContext(tableKey, context);
+export const getTableContext = () => {
+    return () => {
+        const context = getContext(tableKey);
+        const { spacing = 'medium', striped = false } = context?.() || {};
+        return { spacing, striped };
+    };
 };

package/dist/common/use-child.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ChildKey } from '../constants.js';
 import type { ChildData } from '../types.js';
 export declare const withChildrenSnippets: (key: ChildKey) => {
-    getChildren: (key: ChildKey) => ChildData | undefined;
+    getChildren: <T>(key: ChildKey) => ChildData<T> | undefined;
 };

package/dist/components/Checkbox/Checkbox.svelte

@@ -22,11 +22,13 @@
     class: className,
     color = 'primary',
     shape = 'semi-round',
-    size = 'small',
+    size: initialSize,
     ...restProps
   }: CheckboxProps = $props();
 
-  const { readOnly, required, invalid, disabled, label, description, ...labelProps } = $derived(getFieldContext());
+  const context = getFieldContext();
+  const { readOnly, required, invalid, disabled, label, description, ...labelProps } = $derived(context());
+  const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
   const containerStyles = tv({
     base: 'ring-offset-background focus-visible:ring-ring peer data-[state=checked]:bg-primary box-content overflow-hidden border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
@@ -81,7 +83,7 @@
 
 <div class="flex flex-col gap-1">
   {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
     {#if description}
       <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
     {/if}

package/dist/components/Field/Field.svelte

@@ -13,9 +13,9 @@
 
   const { class: className, children, ...props }: Props = $props();
 
-  const state = $state(props);
+  const state = $derived(props);
 
-  setFieldContext(state);
+  setFieldContext(() => state);
 
   const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Field);
   const helperTextChildren = $derived(getChildSnippet(ChildKey.HelperText));

package/dist/components/Input/Input.svelte

@@ -12,7 +12,7 @@
     ref = $bindable(null),
     containerRef = $bindable(null),
     shape = 'semi-round',
-    size = 'medium',
+    size: initialSize,
     class: className,
     value = $bindable<string>(),
     leadingIcon,
@@ -22,7 +22,10 @@
     ...restProps
   }: InputProps = $props();
 
-  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
+  const context = getFieldContext();
+
+  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(context());
+  const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
   const iconStyles = tv({
     base: 'flex shrink-0 items-center justify-center',
@@ -88,7 +91,7 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
   {/if}
 
   {#if description}

package/dist/components/Switch/Switch.svelte

@@ -23,7 +23,9 @@
     ...restProps
   }: Props = $props();
 
-  const { readOnly, required, disabled, label, description, ...labelProps } = $derived(getFieldContext());
+  const context = getFieldContext();
+  const { readOnly, required, disabled, label, description, ...labelProps } = $derived(context());
+  const size = $derived(labelProps.size ?? 'small');
 
   const enabled = $derived(checked && !disabled);
 
@@ -71,8 +73,8 @@
     },
   });
 
-  const inputId = `input-${id}`;
-  const labelId = `label-${id}`;
+  const inputId = $derived(`input-${id}`);
+  const labelId = $derived(`label-${id}`);
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 </script>
 
@@ -93,7 +95,14 @@
       <div class={cleanClass(label && 'flex items-center justify-between gap-1')}>
         {#if label}
           <div class="text-start">
-            <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+            <Label
+              id={labelId}
+              for={inputId}
+              {label}
+              requiredIndicator={required === 'indicator'}
+              {...labelProps}
+              {size}
+            />
             {#if description}
               <Text color="muted" size="small" id={descriptionId}>{description}</Text>
             {/if}

package/dist/components/Table/Table.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { setTableContext } from '../../common/context.svelte.js';
+  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { ChildKey } from '../../constants.js';
+  import { styleVariants } from '../../styles.js';
+  import type { TableContext } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { type Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+  type Props = {
+    class?: string;
+    ref?: HTMLTableElement | null;
+    children?: Snippet;
+  } & TableContext &
+    Omit<HTMLAttributes<HTMLTableElement>, 'color' | 'size'>;
+
+  let { ref = $bindable(null), class: className, striped = false, spacing, children, ...restProps }: Props = $props();
+
+  setTableContext(() => ({ spacing, striped }));
+
+  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Table);
+  const headerChild = $derived(getChildSnippet(ChildKey.TableHeader));
+  const bodyChild = $derived(getChildSnippet(ChildKey.TableBody));
+  const footerChild = $derived(getChildSnippet(ChildKey.TableFooter));
+
+  const headerRowStyles = tv({
+    base: 'bg-dark-900 flex w-full place-items-center',
+    variants: {
+      spacing: styleVariants.tableSpacing,
+    },
+  });
+</script>
+
+<table bind:this={ref} class={cleanClass('w-full text-center', className)} {...restProps}>
+  {#if headerChild}
+    <thead class="text-primary mb-4 flex w-full overflow-hidden rounded-md border">
+      <tr class={headerRowStyles({ spacing })}>
+        {@render headerChild?.snippet()}
+      </tr>
+    </thead>
+  {/if}
+
+  {#if bodyChild}
+    <tbody class={cleanClass('block w-full overflow-y-auto rounded-md border', bodyChild.class)}>
+      {@render bodyChild?.snippet()}
+    </tbody>
+  {/if}
+
+  {@render children?.()}
+</table>
+
+{#if footerChild}
+  <div class="text-primary bg-subtle mt-4 flex h-12 w-full place-items-center rounded-md border p-4">
+    {@render footerChild?.snippet()}
+  </div>
+{/if}

package/dist/components/Table/Table.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TableContext } from '../../types.js';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    ref?: HTMLTableElement | null;
+    children?: Snippet;
+} & TableContext & Omit<HTMLAttributes<HTMLTableElement>, 'color' | 'size'>;
+declare const Table: import("svelte").Component<Props, {}, "ref">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Table/TableBody.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Table} as={ChildKey.TableBody} class={className}>
+  {@render children?.()}
+</Child>

package/dist/components/Table/TableBody.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const TableBody: import("svelte").Component<Props, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/Table/TableCell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getTableContext } from '../../common/context.svelte.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  };
+
+  const { class: className, children }: Props = $props();
+
+  const context = getTableContext();
+
+  const { spacing } = $derived(context());
+
+  const styles = tv({
+    base: 'line-clamp-3 w-full overflow-hidden py-2 break-all text-ellipsis',
+    variants: {
+      spacing: {
+        tiny: 'px-0.5',
+        small: 'px-1',
+        medium: 'px-2',
+        large: 'px-2',
+        giant: 'px-2',
+      },
+    },
+  });
+</script>
+
+<td class={cleanClass(styles({ spacing }), className)}>
+  {@render children?.()}
+</td>

package/dist/components/Table/TableCell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children?: Snippet;
+};
+declare const TableCell: import("svelte").Component<Props, {}, "">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/components/Table/TableFooter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Table} as={ChildKey.TableFooter} class={className}>
+  {@render children?.()}
+</Child>

package/dist/components/Table/TableFooter.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const TableFooter: import("svelte").Component<Props, {}, "">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

package/dist/components/Table/TableHeader.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.Table} as={ChildKey.TableHeader} class={className}>
+  {@render children?.()}
+</Child>

package/dist/components/Table/TableHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/Table/TableHeading.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  };
+
+  const { class: className, children }: Props = $props();
+</script>
+
+<th class={cleanClass('w-full px-4 py-2', className)}>
+  {@render children?.()}
+</th>

package/dist/components/Table/TableHeading.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children?: Snippet;
+};
+declare const TableHeading: import("svelte").Component<Props, {}, "">;
+type TableHeading = ReturnType<typeof TableHeading>;
+export default TableHeading;

package/dist/components/Table/TableRow.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getTableContext } from '../../common/context.svelte.js';
+  import { styleVariants } from '../../styles.js';
+  import type { Color } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import type { Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+    center?: boolean;
+    color?: Color;
+  };
+
+  const { color, class: className, children }: Props = $props();
+
+  const context = getTableContext();
+
+  const { spacing, striped } = $derived(context());
+
+  const styles = tv({
+    base: 'flex w-full place-items-center',
+    variants: {
+      striped: {
+        true: 'odd:bg-dark-900 even:bg-dark-950',
+        false: '',
+      },
+      color: {
+        primary: 'bg-primary-100',
+        secondary: 'bg-light-200 dark:bg-light-300',
+        muted: 'bg-subtle text-subtle dark:bg-subtle',
+        info: 'bg-info-100',
+        warning: 'bg-warning-100',
+        danger: 'bg-danger-100',
+        success: 'bg-success-100',
+      },
+      spacing: styleVariants.tableSpacing,
+    },
+  });
+</script>
+
+<tr class={cleanClass(styles({ color, striped, spacing }), className)}>
+  {@render children?.()}
+</tr>

package/dist/components/Table/TableRow.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Color } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children?: Snippet;
+    center?: boolean;
+    color?: Color;
+};
+declare const TableRow: import("svelte").Component<Props, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/components/Textarea/Textarea.svelte

@@ -13,14 +13,16 @@
     ref = $bindable(null),
     containerRef = $bindable(null),
     shape = 'semi-round',
-    size = 'medium',
+    size: initialSize,
     class: className,
     grow,
     value = $bindable<string>(),
     ...restProps
   }: TextareaProps = $props();
 
-  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(getFieldContext());
+  const context = getFieldContext();
+  const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(context());
+  const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
   const styles = tv({
     base: 'focus-within:ring-primary dark:focus-within:ring-primary w-full bg-gray-100 ring-1 ring-gray-200 outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
@@ -83,7 +85,7 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
   {/if}
 
   {#if description}

package/dist/constants.d.ts

@@ -11,7 +11,11 @@ export declare enum ChildKey {
     Modal = "modal",
     ModalHeader = "modal-header",
     ModalBody = "modal-body",
-    ModalFooter = "modal-footer"
+    ModalFooter = "modal-footer",
+    Table = "table",
+    TableHeader = "table-header",
+    TableBody = "table-body",
+    TableFooter = "table-footer"
 }
 export declare const zIndex: {
     CarouselImage: string;

package/dist/constants.js

@@ -13,6 +13,10 @@ export var ChildKey;
     ChildKey["ModalHeader"] = "modal-header";
     ChildKey["ModalBody"] = "modal-body";
     ChildKey["ModalFooter"] = "modal-footer";
+    ChildKey["Table"] = "table";
+    ChildKey["TableHeader"] = "table-header";
+    ChildKey["TableBody"] = "table-body";
+    ChildKey["TableFooter"] = "table-footer";
 })(ChildKey || (ChildKey = {}));
 export const zIndex = {
     CarouselImage: 'z-1',

package/dist/index.d.ts

@@ -69,6 +69,13 @@ export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
+export { default as Table } from './components/Table/Table.svelte';
+export { default as TableBody } from './components/Table/TableBody.svelte';
+export { default as TableCell } from './components/Table/TableCell.svelte';
+export { default as TableFooter } from './components/Table/TableFooter.svelte';
+export { default as TableHeader } from './components/Table/TableHeader.svelte';
+export { default as TableHeading } from './components/Table/TableHeading.svelte';
+export { default as TableRow } from './components/Table/TableRow.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';

package/dist/index.js

@@ -71,6 +71,13 @@ export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
+export { default as Table } from './components/Table/Table.svelte';
+export { default as TableBody } from './components/Table/TableBody.svelte';
+export { default as TableCell } from './components/Table/TableCell.svelte';
+export { default as TableFooter } from './components/Table/TableFooter.svelte';
+export { default as TableHeader } from './components/Table/TableHeader.svelte';
+export { default as TableHeading } from './components/Table/TableHeading.svelte';
+export { default as TableRow } from './components/Table/TableRow.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as Textarea } from './components/Textarea/Textarea.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';

package/dist/internal/Child.svelte

@@ -12,13 +12,14 @@
     as: ChildKey;
     class?: string;
     children: Snippet;
+    props?: unknown;
   };
 
-  const { for: key, as, children, class: className }: Props = $props();
+  const { for: key, as, children, class: className, props = {} }: Props = $props();
 
   const context = getContext<ContextType>(withPrefix(key));
 
-  const data = $derived({ snippet: children, class: className });
+  const data = $derived({ snippet: children, class: className, props });
 
   if (context) {
     context.register(as, () => data);

package/dist/internal/Child.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     as: ChildKey;
     class?: string;
     children: Snippet;
+    props?: unknown;
 };
 declare const Child: import("svelte").Component<Props, {}, "">;
 type Child = ReturnType<typeof Child>;

package/dist/internal/DatePicker.svelte

@@ -29,10 +29,12 @@
     date = $bindable<DateValue | undefined>(undefined),
     class: className,
     shape = 'semi-round',
-    size = 'small',
+    size: initialSize,
   }: Props = $props();
 
-  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(getFieldContext());
+  const context = getFieldContext();
+  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(context());
+  const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
   const id = generateId();
   const inputId = `datepicker-${id}`;
@@ -64,7 +66,7 @@
 
 <div class={cleanClass('flex w-full flex-col gap-1', className)}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
   {/if}
 
   <DatePicker.Root

package/dist/internal/Select.svelte

@@ -23,7 +23,7 @@
   let {
     data,
     shape,
-    size = 'medium',
+    size: initialSize,
     multiple = false,
     values = $bindable([]),
     onChange,
@@ -45,7 +45,9 @@
 
   const options = $derived(asOptions(data));
 
-  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(getFieldContext());
+  const context = getFieldContext();
+  const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(context());
+  const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
   const id = generateId();
   const inputId = `input-${id}`;
@@ -78,7 +80,7 @@
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
   {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
   {/if}
 
   <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>

package/dist/styles.d.ts

@@ -80,4 +80,11 @@ export declare const styleVariants: {
         bold: string;
         'extra-bold': string;
     };
+    tableSpacing: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+        giant: string;
+    };
 };

package/dist/styles.js

@@ -12,8 +12,8 @@ export const styleVariants = {
         ...color,
         muted: 'text-gray-600 dark:text-gray-400',
     },
-    inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed ',
-    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-black',
+    inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed',
+    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900',
     shape: {
         rectangle: 'rounded-none',
         'semi-round': '',
@@ -76,4 +76,11 @@ export const styleVariants = {
         bold: 'font-bold',
         'extra-bold': 'font-extrabold',
     },
+    tableSpacing: {
+        tiny: '',
+        small: 'py-1',
+        medium: 'py-2',
+        large: 'py-3',
+        giant: 'py-4',
+    },
 };

package/dist/types.d.ts

@@ -90,9 +90,10 @@ type StackBaseProps = {
     fullWidth?: boolean;
     fullHeight?: boolean;
 };
-export type ChildData = {
+export type ChildData<T = unknown> = {
     snippet: Snippet;
     class?: string;
+    props?: T;
 };
 export type StackProps = StackBaseProps & {
     align?: 'start' | 'center' | 'end';
@@ -116,6 +117,11 @@ export type FieldContext = {
     required?: boolean | 'indicator';
     readOnly?: boolean;
 } & LabelProps;
+export type TableSpacing = Size;
+export type TableContext = {
+    spacing?: TableSpacing;
+    striped?: boolean;
+};
 type BaseInputProps<T> = {
     ref?: HTMLInputElement | null;
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.56.1",
+  "version": "0.57.1",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",