The FilePondSourceListElement class is used to construct the <file-pond-source-list> element and extends the FilePondSvelteComponentElement class.

It renders the source buttons and creates a dialog element that is used to present the various sources. Whenever we create an extension using the createSourceExtension factor the sourceLabel and sourceIcon options are picked up by the FilePondSourceListElement and turned into a button.

Custom Properties

These are the custom properties that can be set on the <file-pond-source-list> element.

btn-color

Default text color to use on source buttons and dialog buttons.

file-pond-source-list {
  --btn-color: var(--default-color);;
}

btn-background-color

Default background color to use on source buttons and dialog buttons.

file-pond-source-list {
  --btn-background-color: color-mix(in srgb, CanvasText 10%, Canvas 100%);;
}

btn-border-radius

Default border radius to use on source buttons and dialog buttons.

file-pond-source-list {
  --btn-border-radius: calc(var(--default-border-radius, 0) * 0.25);;
}

btn-border-width

Default border to use on source buttons and dialog buttons.

file-pond-source-list {
  --btn-border-width: 0;;
}

dialog-timing

Animation duration of the dialog itself coming into view.

file-pond-source-list {
  --dialog-timing: var(--_250ms);;
}

dialog-content-timing

Animation duration when animating in content.

file-pond-source-list {
  --dialog-content-timing: var(--_250ms);;
}

dialog-content-delay

Delay to way before showing content when animating in dialog.

file-pond-source-list {
  --dialog-content-delay: var(--_100ms);;
}

dialog-padding

Padding of the dialog element.

file-pond-source-list {
  --dialog-padding: var(--default-padding, 0);;
}

dialog-color

Text color inside the dialog element.

file-pond-source-list {
  --dialog-color: var(--default-color);;
}

dialog-background-color

Background of the dialog element.

file-pond-source-list {
  --dialog-background-color: Canvas;;
}

dialog-border-radius

Border radius of the dialog element.

file-pond-source-list {
  --dialog-border-radius: var(--default-border-radius);;
}

dialog-shadow

Box shadow rendered behind the dialog element.

file-pond-source-list {
  --dialog-shadow: 0 3px 6px rgb(0 0 0 / 0.25);;
}

input-border

Border style to use for input elements inside the dialog content.

file-pond-source-list {
  --input-border: 1px solid rgb(from var(--default-color) r g b / 0.5);;
}

input-border-radius

Border radius to use for input elements inside the dialog content.

file-pond-source-list {
  --input-border-radius: calc(var(--default-border-radius, 0) * 0.25);;
}

input-color

Color to use for text in input elements inside the dialog content.

file-pond-source-list {
  --input-color: var(--default-color);;
}

input-background-color

Background color to use on input elements inside the dialog content.

file-pond-source-list {
  --input-background-color: Canvas;;
}

Parts

The <file-pond-source-list> element exports a selection of parts that we can use to more finely style its inner elements.

source-list

Selects the list of source buttons.

source-list-item

Selects a list item in the list of source buttons.

source-button

Selects a source button inside the source button list.

file-pond-source-list::part(source-button) {
–btn-color: white;
–btn-background-color: black;
}

dialog

Selects the dialog element.

dialog-header

Selects the dialog header which contains the title and close button.

dialog-title

Selects the dialog title inside the dialog header.

dialog-button-close

Selects the close button in the dialog header.

dialog-form

Selects the dialog form which wraps the content.

dialog-content

Selects the dialog content.

Selects the dialog footer which contains the cancel and import buttons.

dialog-button-cancel

Selects the cancel button in the dialog footer.

dialog-button-import

Selects the import button in the dialog footer.

file-pond-source-list::part(dialog-button-import) {
–btn-color: white;
–btn-background-color: black;
}