diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c48ec72e..c204b6b9 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1250,24 +1250,27 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- |
-| files | No | let
| Yes | ReadonlyArray
| []
| Obtain a reference to the uploaded files |
-| status | No | let
| No | "uploading" | "edit" | "complete"
| "uploading"
| Specify the file uploader status |
-| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the file uploader |
-| accept | No | let
| No | ReadonlyArray
| []
| Specify the accepted file types |
-| multiple | No | let
| No | boolean
| false
| Set to `true` to allow multiple files |
-| clearFiles | No | const
| No | () => void
| () => { files = []; }
| Programmatically clear the uploaded files |
-| labelDescription | No | let
| No | string
| ""
| Specify the label description |
-| labelTitle | No | let
| No | string
| ""
| Specify the label title |
-| kind | No | let
| No | "primary" | "secondary" | "tertiary" | "ghost" | "danger"
| "primary"
| Specify the kind of file uploader button |
-| buttonLabel | No | let
| No | string
| ""
| Specify the button label |
-| iconDescription | No | let
| No | string
| "Provide icon description"
| Specify the ARIA label used for the status icons |
-| name | No | let
| No | string
| ""
| Specify a name attribute for the file button uploader input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| files | No | let
| Yes | ReadonlyArray
| []
| Obtain a reference to the uploaded files |
+| status | No | let
| No | "uploading" | "edit" | "complete"
| "uploading"
| Specify the file uploader status |
+| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the file uploader |
+| accept | No | let
| No | ReadonlyArray
| []
| Specify the accepted file types |
+| multiple | No | let
| No | boolean
| false
| Set to `true` to allow multiple files |
+| clearFiles | No | const
| No | () => void
| () => { files = []; }
| Programmatically clear the uploaded files |
+| labelTitle | No | let
| No | string
| ""
| Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) |
+| labelDescription | No | let
| No | string
| ""
| Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) |
+| kind | No | let
| No | "primary" | "secondary" | "tertiary" | "ghost" | "danger"
| "primary"
| Specify the kind of file uploader button |
+| buttonLabel | No | let
| No | string
| ""
| Specify the button label |
+| iconDescription | No | let
| No | string
| "Provide icon description"
| Specify the ARIA label used for the status icons |
+| name | No | let
| No | string
| ""
| Specify a name attribute for the file button uploader input |
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :--------------- | :------ | :---- | :------------------------------ |
+| labelDescription | No | -- | {labelDescription}
|
+| labelTitle | No | -- | {labelTitle}
|
### Events
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 381a6bcc..e5b079ce 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -3795,9 +3795,9 @@
"reactive": false
},
{
- "name": "labelDescription",
+ "name": "labelTitle",
"kind": "let",
- "description": "Specify the label description",
+ "description": "Specify the label title.\nAlternatively, use the named slot \"labelTitle\" (e.g., `...`)",
"type": "string",
"value": "\"\"",
"isFunction": false,
@@ -3807,9 +3807,9 @@
"reactive": false
},
{
- "name": "labelTitle",
+ "name": "labelDescription",
"kind": "let",
- "description": "Specify the label title",
+ "description": "Specify the label description.\nAlternatively, use the named slot \"labelDescription\" (e.g., `...`)",
"type": "string",
"value": "\"\"",
"isFunction": false,
@@ -3868,7 +3868,20 @@
}
],
"moduleExports": [],
- "slots": [],
+ "slots": [
+ {
+ "name": "labelDescription",
+ "default": false,
+ "fallback": "{labelDescription}",
+ "slot_props": "{}"
+ },
+ {
+ "name": "labelTitle",
+ "default": false,
+ "fallback": "{labelTitle}",
+ "slot_props": "{}"
+ }
+ ],
"events": [
{
"type": "dispatched",
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 168bbaa1..dc887999 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -37,12 +37,18 @@
files = [];
};
- /** Specify the label description */
- export let labelDescription = "";
-
- /** Specify the label title */
+ /**
+ * Specify the label title.
+ * Alternatively, use the named slot "labelTitle" (e.g., `...`)
+ */
export let labelTitle = "";
+ /**
+ * Specify the label description.
+ * Alternatively, use the named slot "labelDescription" (e.g., `...`)
+ */
+ export let labelDescription = "";
+
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}
@@ -103,20 +109,24 @@
on:mouseenter
on:mouseleave
>
- {#if labelTitle}
+ {#if labelTitle || $$slots.labelTitle}
- {labelTitle}
+
- {labelDescription}
+