@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/forms/field/field-content.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const FieldContent: import("svelte").Component<FieldContentProps, {}, "ref">;
+type FieldContent = ReturnType<typeof FieldContent>;
+export default FieldContent;

package/dist/components/forms/field/field-description.svelte

@@ -0,0 +1,40 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldDescription`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldDescriptionProps = WithElementRef<
+    HTMLAttributes<HTMLParagraphElement>,
+    HTMLParagraphElement
+  >
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: FieldDescriptionProps = $props()
+</script>
+
+<p
+  bind:this={ref}
+  data-slot="field-description"
+  class={cn(
+    'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+    'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+    '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</p>

package/dist/components/forms/field/field-description.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldDescriptionProps = WithElementRef<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+declare const FieldDescription: import("svelte").Component<FieldDescriptionProps, {}, "ref">;
+type FieldDescription = ReturnType<typeof FieldDescription>;
+export default FieldDescription;

package/dist/components/forms/field/field-error.svelte

@@ -0,0 +1,57 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldError`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The field's error, announced as an alert. Children win; otherwise
+   * `errors` is de-duplicated by message, one shown as text and several as a
+   * list. Nothing renders when there is nothing to say.
+   */
+  export type FieldErrorProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    errors?: Array<{ message?: string } | undefined>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    errors,
+    class: className,
+    children,
+    ...rest
+  }: FieldErrorProps = $props()
+
+  const messages = $derived([
+    ...new Set((errors ?? []).map((error) => error?.message).filter((message) => !!message)),
+  ] as string[])
+</script>
+
+{#if children || messages.length > 0}
+  <div
+    bind:this={ref}
+    role="alert"
+    data-slot="field-error"
+    class={cn('text-destructive text-sm font-normal', className)}
+    {...rest}
+  >
+    {#if children}
+      {@render children()}
+    {:else if messages.length === 1}
+      {messages[0]}
+    {:else}
+      <ul class="ml-4 flex list-disc flex-col gap-1">
+        {#each messages as message}
+          <li>{message}</li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+{/if}

package/dist/components/forms/field/field-error.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The field's error, announced as an alert. Children win; otherwise
+ * `errors` is de-duplicated by message, one shown as text and several as a
+ * list. Nothing renders when there is nothing to say.
+ */
+export type FieldErrorProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+};
+declare const FieldError: import("svelte").Component<FieldErrorProps, {}, "ref">;
+type FieldError = ReturnType<typeof FieldError>;
+export default FieldError;

package/dist/components/forms/field/field-group.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldGroup`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: FieldGroupProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="field-group"
+  class={cn(
+    'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/forms/field/field-group.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const FieldGroup: import("svelte").Component<FieldGroupProps, {}, "ref">;
+type FieldGroup = ReturnType<typeof FieldGroup>;
+export default FieldGroup;

package/dist/components/forms/field/field-label.svelte

@@ -0,0 +1,49 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldLabel`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port. The React divergence (`required`) carries over.
+-->
+<script lang="ts" module>
+  import type { LabelProps } from '../label/label.svelte'
+
+  export type FieldLabelProps = LabelProps & {
+    /**
+     * Marks the field as required: an `aria-hidden` asterisk beside a real
+     * sr-only "(required)", because a screen reader announcing "asterisk" tells
+     * you nothing.
+     */
+    required?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Label from '../label/label.svelte'
+
+  let {
+    ref = $bindable(null),
+    required = false,
+    class: className,
+    children,
+    ...rest
+  }: FieldLabelProps = $props()
+</script>
+
+<Label
+  bind:ref
+  data-slot="field-label"
+  class={cn(
+    'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+    'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+    'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+  {#if required}
+    <!-- -ml-2 cancels the label's gap, so the mark reads "Status*", not "Status *". -->
+    <span aria-hidden="true" class="text-destructive -ml-2">*</span>
+    <span class="sr-only">(required)</span>
+  {/if}
+</Label>

package/dist/components/forms/field/field-label.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { LabelProps } from '../label/label.svelte';
+export type FieldLabelProps = LabelProps & {
+    /**
+     * Marks the field as required: an `aria-hidden` asterisk beside a real
+     * sr-only "(required)", because a screen reader announcing "asterisk" tells
+     * you nothing.
+     */
+    required?: boolean;
+};
+declare const FieldLabel: import("svelte").Component<FieldLabelProps, {}, "ref">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;

package/dist/components/forms/field/field-legend.svelte

@@ -0,0 +1,44 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldLegend`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldLegendProps = WithElementRef<
+    HTMLAttributes<HTMLLegendElement>,
+    HTMLLegendElement
+  > & {
+    variant?: 'legend' | 'label'
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    variant = 'legend',
+    class: className,
+    children,
+    ...rest
+  }: FieldLegendProps = $props()
+</script>
+
+<legend
+  bind:this={ref}
+  data-slot="field-legend"
+  data-variant={variant}
+  class={cn(
+    'mb-3 font-medium',
+    'data-[variant=legend]:text-base',
+    'data-[variant=label]:text-sm',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</legend>

package/dist/components/forms/field/field-legend.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldLegendProps = WithElementRef<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement> & {
+    variant?: 'legend' | 'label';
+};
+declare const FieldLegend: import("svelte").Component<FieldLegendProps, {}, "ref">;
+type FieldLegend = ReturnType<typeof FieldLegend>;
+export default FieldLegend;

package/dist/components/forms/field/field-separator.svelte

@@ -0,0 +1,37 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldSeparator`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: the label in the middle is the children snippet.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldSeparatorProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Separator from '../../layout/separator/separator.svelte'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: FieldSeparatorProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="field-separator"
+  data-content={!!children}
+  class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
+  {...rest}
+>
+  <Separator class="absolute inset-0 top-1/2" />
+  {#if children}
+    <span
+      class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+      data-slot="field-separator-content"
+    >
+      {@render children()}
+    </span>
+  {/if}
+</div>

package/dist/components/forms/field/field-separator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldSeparatorProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const FieldSeparator: import("svelte").Component<FieldSeparatorProps, {}, "ref">;
+type FieldSeparator = ReturnType<typeof FieldSeparator>;
+export default FieldSeparator;

package/dist/components/forms/field/field-set.svelte

@@ -0,0 +1,31 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldSet`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLFieldsetAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldSetProps = WithElementRef<HTMLFieldsetAttributes, HTMLFieldSetElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: FieldSetProps = $props()
+</script>
+
+<fieldset
+  bind:this={ref}
+  data-slot="field-set"
+  class={cn(
+    'flex flex-col gap-6',
+    'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</fieldset>

package/dist/components/forms/field/field-set.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldSetProps = WithElementRef<HTMLFieldsetAttributes, HTMLFieldSetElement>;
+declare const FieldSet: import("svelte").Component<FieldSetProps, {}, "ref">;
+type FieldSet = ReturnType<typeof FieldSet>;
+export default FieldSet;

package/dist/components/forms/field/field-title.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldTitle`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: FieldTitleProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="field-label"
+  class={cn(
+    'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/forms/field/field-title.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type FieldTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const FieldTitle: import("svelte").Component<FieldTitleProps, {}, "ref">;
+type FieldTitle = ReturnType<typeof FieldTitle>;
+export default FieldTitle;

package/dist/components/forms/field/field-variants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Origin: the React package 2.23.0 `field.tsx` (`fieldVariants`), itself shadcn/ui new-york `field`
+ * Diverged: split out of the component file, as badge-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FieldOrientation = NonNullable<VariantProps<typeof fieldVariants>['orientation']>;

package/dist/components/forms/field/field-variants.js

@@ -0,0 +1,26 @@
+/**
+ * Origin: the React package 2.23.0 `field.tsx` (`fieldVariants`), itself shadcn/ui new-york `field`
+ * Diverged: split out of the component file, as badge-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { cva } from 'class-variance-authority';
+export const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+    variants: {
+        orientation: {
+            vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+            horizontal: [
+                'flex-row items-center',
+                '[&>[data-slot=field-label]]:flex-auto',
+                'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            ],
+            responsive: [
+                'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+                '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            ],
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});

package/dist/components/forms/field/field.svelte

@@ -0,0 +1,45 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`Field`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { FieldOrientation } from './field-variants.js'
+
+  /**
+   * One control with its label, description and error. `horizontal` puts the
+   * label beside the control; `responsive` does so from the field group's `md`
+   * container width.
+   */
+  export type FieldProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: FieldOrientation
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { fieldVariants } from './field-variants.js'
+
+  let {
+    ref = $bindable(null),
+    orientation = 'vertical',
+    class: className,
+    children,
+    ...rest
+  }: FieldProps = $props()
+</script>
+
+<!-- biome-ignore lint/a11y/useSemanticElements: a styling wrapper carrying a grouping role, as upstream -->
+<div
+  bind:this={ref}
+  role="group"
+  data-slot="field"
+  data-orientation={orientation}
+  class={cn(fieldVariants({ orientation }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/forms/field/field.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { FieldOrientation } from './field-variants.js';
+/**
+ * One control with its label, description and error. `horizontal` puts the
+ * label beside the control; `responsive` does so from the field group's `md`
+ * container width.
+ */
+export type FieldProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: FieldOrientation;
+};
+declare const Field: import("svelte").Component<FieldProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/forms/field/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Field, type FieldProps } from './field.svelte';
+export { default as FieldContent, type FieldContentProps } from './field-content.svelte';
+export { default as FieldDescription, type FieldDescriptionProps } from './field-description.svelte';
+export { default as FieldError, type FieldErrorProps } from './field-error.svelte';
+export { default as FieldGroup, type FieldGroupProps } from './field-group.svelte';
+export { default as FieldLabel, type FieldLabelProps } from './field-label.svelte';
+export { default as FieldLegend, type FieldLegendProps } from './field-legend.svelte';
+export { default as FieldSeparator, type FieldSeparatorProps } from './field-separator.svelte';
+export { default as FieldSet, type FieldSetProps } from './field-set.svelte';
+export { default as FieldTitle, type FieldTitleProps } from './field-title.svelte';
+export { type FieldOrientation, fieldVariants } from './field-variants.js';

package/dist/components/forms/field/index.js

@@ -0,0 +1,11 @@
+export { default as Field } from './field.svelte';
+export { default as FieldContent } from './field-content.svelte';
+export { default as FieldDescription } from './field-description.svelte';
+export { default as FieldError } from './field-error.svelte';
+export { default as FieldGroup } from './field-group.svelte';
+export { default as FieldLabel } from './field-label.svelte';
+export { default as FieldLegend } from './field-legend.svelte';
+export { default as FieldSeparator } from './field-separator.svelte';
+export { default as FieldSet } from './field-set.svelte';
+export { default as FieldTitle } from './field-title.svelte';
+export { fieldVariants } from './field-variants.js';

package/dist/components/forms/form/form-button.svelte

@@ -0,0 +1,19 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx`, itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: a submit Button, which React's form had none of. Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type { ButtonProps } from '../../actions/button/button.svelte'
+
+  /** The form's submit button: a `Button` with `type="submit"`. */
+  export type FormButtonProps = ButtonProps
+</script>
+
+<script lang="ts">
+  import Button from '../../actions/button/button.svelte'
+
+  let { ref = $bindable(null), ...rest }: FormButtonProps = $props()
+</script>
+
+<Button bind:ref type="submit" {...rest} />

package/dist/components/forms/form/form-button.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '../../actions/button/button.svelte';
+/** The form's submit button: a `Button` with `type="submit"`. */
+export type FormButtonProps = ButtonProps;
+declare const FormButton: import("svelte").Component<ButtonProps, {}, "ref">;
+type FormButton = ReturnType<typeof FormButton>;
+export default FormButton;

package/dist/components/forms/form/form-description.svelte

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormDescription`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's Description, which takes its id from the field. Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type * as FormPrimitive from 'formsnap'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /** The line under a field, which formsnap links to the control with `aria-describedby`. */
+  export type FormDescriptionProps = WithoutChild<FormPrimitive.DescriptionProps>
+</script>
+
+<script lang="ts">
+  import * as FormPrimitiveRuntime from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: FormDescriptionProps = $props()
+</script>
+
+<FormPrimitiveRuntime.Description
+  bind:ref
+  data-slot="form-description"
+  class={cn('text-muted-foreground text-sm', className)}
+  {...rest}
+/>

package/dist/components/forms/form/form-description.svelte.d.ts

@@ -0,0 +1,7 @@
+import type * as FormPrimitive from 'formsnap';
+import type { WithoutChild } from '../../../utils/types.js';
+/** The line under a field, which formsnap links to the control with `aria-describedby`. */
+export type FormDescriptionProps = WithoutChild<FormPrimitive.DescriptionProps>;
+declare const FormDescription: import("svelte").Component<Omit<FormPrimitive.DescriptionProps, "child">, {}, "ref">;
+type FormDescription = ReturnType<typeof FormDescription>;
+export default FormDescription;

package/dist/components/forms/form/form-element-field.svelte

@@ -0,0 +1,47 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormElementField`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's ElementField, for one element of an array
+    field, drawn as FormField is. Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { FormPathLeaves } from 'sveltekit-superforms'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { FormFieldState, FsSuperForm } from './form-types.js'
+
+  /** One element of an array field (`tags[0]`), drawn as `FormField` is. */
+  export type FormElementFieldProps<
+    T extends Record<string, unknown>,
+    U extends FormPathLeaves<T>,
+  > = Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, 'children'> & {
+    form: FsSuperForm<T>
+    name: U
+    children?: Snippet<[FormFieldState<T[U]>]>
+  }
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+  import * as FormPrimitive from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    form,
+    name,
+    class: className,
+    children: content,
+    ...rest
+  }: FormElementFieldProps<T, U> = $props()
+</script>
+
+<FormPrimitive.ElementField {form} {name}>
+  {#snippet children({ constraints, errors, tainted, value })}
+    <div bind:this={ref} data-slot="form-item" class={cn('space-y-2', className)} {...rest}>
+      {@render content?.({ constraints, errors, tainted, value: value as T[U] })}
+    </div>
+  {/snippet}
+</FormPrimitive.ElementField>