@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

package/dist/docs/skill/wm-chart.md

@@ -0,0 +1,92 @@
+### Chart
+- **Element:** `<wm-chart>`
+- **Status:** stable
+
+**Purpose:** Composition chart component rendering doughnut or stacked bar charts. Composed of a parent
+wm-chart element and wm-chart-slice children. Has 3 doughnut subtypes and 5 bar subtypes,
+each designed for a specific composition use case.
+
+**Important:** The bar subtypes (`bar2`-`bar7`) are COMPOSITION patterns -- they show parts
+of a whole for specific qualitative use cases. They are NOT general-purpose bar charts. For
+general comparison or distribution bar charts, use wm-chart-bar or wm-chart-column instead.
+
+**Variants / types:**
+
+- Slices without an `amount` are not rendered but still occupy a color slot, allowing
+  consistent color assignment when some data points are missing.
+- The `show-legend` prop controls legend visibility but the legend is always read by screen
+  readers regardless of visibility.
+- For data-driven bar charts (comparison, distribution), prefer wm-chart-bar or
+  wm-chart-column.
+
+**Props:**
+- `chart-type` -- Chart subtype. Doughnut subtypes (`doughnut1`-`doughnut3`) and bar composition
+subtypes (`bar2`-`bar7`) -- each tailored to a specific composition use case.
+- `label` -- Accessible label for the chart. Required -- the component throws an error if
+omitted. Used as the `aria-label` on the chart container and as the visual chart label.
+- `label-position` -- Position of the chart label relative to the chart. When `"none"`, no label is
+rendered -- an external label matching `label` must be visually grouped with the chart.
+- `label-width` -- Controls the bar label width. Only applies to `bar6` and `bar7` subtypes.
+- `not-started-color` -- When true, applies a gray color to the first slice to represent a
+"not started" state. Only applies to `bar5`.
+- `print-mode` -- When true, slice values are included in the legend and keyboard interaction
+instructions are removed from the DOM -- suitable for printed output.
+- `print-mode-format` -- Format for legend values when `print-mode` is enabled.
+- `show-bar-legend` -- Show or hide the y-axis bar legend. Only applies to `bar7`.
+- `show-grid` -- Show or hide the value grid lines. Only applies to `bar6`.
+- `show-legend` -- Show or hide the legend below the chart. The legend is still read by screen
+readers regardless of this setting.
+- `subinfo` -- Optional secondary text displayed beneath the chart label. Not shown when
+`label-position` is `"none"`.
+- `value-format` -- Controls how individual segment values are displayed on the chart.
+
+**Accessibility:**
+
+- `label` is required for accessibility -- the chart throws if omitted.
+- The chart renders with `role="application"` and an `aria-roledescription` of
+  "Interactive chart". Each segment is individually focusable with an `aria-label`.
+- `print-mode` removes keyboard interaction instructions for printed output.
+- **Keyboard:** - **Tab**: Enters the chart. Subsequent Tab exits the chart.
+- **Arrow keys**: Navigate between slices/segments.
+- **Enter / Space**: Opens the data popover for the focused segment.
+- **Escape**: Closes the popover and returns to the chart container.
+
+**Code example:**
+
+_Doughnut chart_
+
+```html
+<wm-chart label="Enrollment by status">
+<wm-chart-slice legend="Enrolled" amount="310"></wm-chart-slice>
+<wm-chart-slice legend="Not enrolled" amount="90"></wm-chart-slice>
+</wm-chart>
+```
+
+_Doughnut chart_
+
+```react
+<WmChart label="Enrollment by status">
+<WmChartSlice legend="Enrolled" amount="310" />
+<WmChartSlice legend="Not enrolled" amount="90" />
+</WmChart>
+```
+
+_Bar composition chart_
+
+```html
+<wm-chart label="Completion by cohort" chart-type="bar5">
+<wm-chart-slice legend="Completed" amount="200"></wm-chart-slice>
+<wm-chart-slice legend="In progress" amount="75"></wm-chart-slice>
+<wm-chart-slice legend="Not started" amount="25"></wm-chart-slice>
+</wm-chart>
+```
+
+_Bar composition chart_
+
+```react
+<WmChart label="Completion by cohort" chartType="bar5">
+<WmChartSlice legend="Completed" amount="200" />
+<WmChartSlice legend="In progress" amount="75" />
+<WmChartSlice legend="Not started" amount="25" />
+</WmChart>
+```

package/dist/docs/skill/wm-date-range.md

@@ -0,0 +1,153 @@
+### Date Range
+- **Element:** `<wm-date-range>`
+- **Status:** stable
+
+**Purpose:** Two linked date inputs (start and end) with a shared calendar popup for selecting a date
+range. Users can type or click to set each date. Provides separate error states for start
+and end, and emits distinct blur events for each input. Use instead of two native
+`<input type="date">` elements when a range is required.
+
+**When to use:**
+
+- **Collecting a bounded time period with a start and end** -- when a user needs to define a window of time (a reporting period, an enrollment window, a project timeline), use Date Range to capture both boundary dates as a single, semantically linked input rather than two independent Datepickers.
+- **Filtering data by a date range** -- when a user is narrowing results by a time window (e.g., "show records between these two dates"), Date Range provides the right interaction model with a shared calendar that highlights the selected span visually.
+- **Enforcing range integrity at the form level** -- when the application needs to validate that the start date precedes the end date, Date Range exposes the right blur events and standardized error messages to handle all range validation scenarios consistently.
+- **Allowing range selection via a shared calendar popup** -- when users benefit from seeing both dates in context on a calendar, Date Range's shared popup highlights the full selected range, which two independent Datepickers cannot do.
+
+**Do not use for:**
+
+- **Two separate dates that happen to be related** -- if the two dates are logically a range, use Date Range; two independent Datepickers have no shared calendar, no range highlighting, and no built-in mechanism to enforce that start precedes end.
+- **Selecting a single point in time** -- if the user is selecting one date rather than a span, use wm-datepicker; Date Range always manages two values and two validation states, which is unnecessary overhead for a single date.
+
+**Variants / types:**
+
+_None documented_
+
+**Props:**
+- `date-format` -- The date format shown in the input placeholders and announced to screen readers.
+- `disabled` -- Disables the entire date range component, preventing all interaction.
+- `error-message` -- Puts the component in an error state and displays this message below both
+inputs. Use with `invalid-start` and/or `invalid-end` to highlight specific fields.
+- `invalid-end` -- Puts the end date input in an error state (red border). Use with
+`error-message`.
+- `invalid-start` -- Puts the start date input in an error state (red border). Use with
+`error-message`.
+- `label-end` -- Visible label for the end date input. Required for accessibility.
+- `label-start` -- Visible label for the start date input. Required for accessibility.
+- `preselected` -- The ISO date (YYYY-MM-DD) the calendar popup opens to when first opened and
+no `value-start` is set. Falls back to today's date if omitted.
+- `required-field` -- Displays a required-field asterisk (*) next to each label.
+- `value-end` -- The value of the end date input, in the format specified by `date-format`.
+Updated as the user types or picks from the calendar.
+- `value-start` -- The value of the start date input, in the format specified by `date-format`.
+Updated as the user types or picks from the calendar.
+
+**Events:**
+- `wmEndInputBlur`
+- `wmRangeSelection`
+- `wmStartInputBlur`
+
+**Methods:**
+- `isValidISO(input?: string) => Promise<boolean>`
+- `reformatDate(inputFormat: string, outputFormat: string, date?: string) => Promise<string>`
+
+**Accessibility:**
+
+- `label-start` and `label-end` are required for accessibility -- always provide both even if
+  visually implied by context.
+- The calendar toggle announces "Select range" to screen readers and reflects `aria-expanded`.
+- Validation errors are announced via an `aria-live` region when `error-message` changes.
+- The calendar popup hides its toggle when there is no room to display it; users can still
+  type dates directly into the inputs.
+- **Keyboard:** - **Input fields**: Tab moves focus between start input, end input, and the calendar toggle.
+- **Calendar toggle**: Space / Enter opens the calendar; Escape closes it and returns focus.
+- **Day grid**: Arrow keys navigate dates; Enter selects. After selecting the first date,
+  the calendar resets for a second selection. Selecting a date earlier than the first date
+  automatically swaps start and end.
+- **Month/year selectors**: Arrow keys cycle values; Tab/Shift+Tab move focus through controls.
+
+**Related components:**
+
+- `<wm-datepicker>` -- if only a single date is needed rather than a start-and-end pair, use Datepicker; Date Range always manages two values and is only appropriate when both are required together.
+- `<wm-timepicker>` -- if the range also needs to capture times of day, Date Range has no time input; pair it with Timepicker fields for the start and end times separately.
+- `<wm-select>` -- if the user is choosing from a predefined list of named time periods (e.g., "Q1 2025", "Fall Semester") rather than specifying arbitrary dates, Select is more appropriate; Date Range is for open-ended date entry.
+
+**Code example:**
+
+_Basic date range_
+
+```html
+<wm-date-range label-start="Start date" label-end="End date"></wm-date-range>
+```
+
+_Basic date range_
+
+```react
+// The component does not update its own values after a calendar selection --
+// the app must call reformatDate and set valueStart/valueEnd imperatively via a ref.
+const ref = useRef(null);
+
+function getFormatName(format) {
+const map = { 'mm/dd/yyyy': 'US', 'dd/mm/yyyy': 'INT', 'yyyy/mm/dd': 'ISO' };
+return format ? map[format] : 'US';
+}
+
+// event.detail is { startDate: { iso, us, int }, endDate: { iso, us, int } }
+const handleRangeSelection = async (event) => {
+const dr = ref.current;
+const fmt = getFormatName(dr.getAttribute('date-format'));
+dr.valueStart = await dr.reformatDate('ISO', fmt, event.detail.startDate.iso);
+dr.valueEnd = await dr.reformatDate('ISO', fmt, event.detail.endDate.iso);
+dr.errorMessage = '';
+};
+
+const handleInputBlurred = async (field) => {
+const dr = ref.current;
+const fmt = getFormatName(dr.getAttribute('date-format'));
+const value = field === 'start' ? dr.valueStart : dr.valueEnd;
+if (value) {
+const iso = await dr.reformatDate(fmt, 'ISO', value);
+if (await dr.isValidISO(iso)) {
+const display = await dr.reformatDate('ISO', fmt, iso);
+if (field === 'start') dr.valueStart = display;
+else dr.valueEnd = display;
+dr.errorMessage = '';
+dr.invalidStart = false;
+dr.invalidEnd = false;
+} else {
+dr.errorMessage = `Please enter a valid date in the format ${dr.getAttribute('date-format') ?? 'mm/dd/yyyy'}`;
+if (field === 'start') dr.invalidStart = true;
+else dr.invalidEnd = true;
+}
+}
+};
+
+<WmDateRange
+ref={ref}
+labelStart="Start date"
+labelEnd="End date"
+onWmRangeSelection={handleRangeSelection}
+onWmStartInputBlur={() => handleInputBlurred('start')}
+onWmEndInputBlur={() => handleInputBlurred('end')}
+/>
+```
+
+_Required fields with validation_
+
+```html
+<wm-date-range label-start="From" label-end="To" required-field></wm-date-range>
+```
+
+_Required fields with validation_
+
+```react
+<WmDateRange
+ref={ref}
+labelStart="From"
+labelEnd="To"
+requiredField={true}
+onWmRangeSelection={handleRangeSelection}
+onWmStartInputBlur={() => handleInputBlurred('start')}
+onWmEndInputBlur={() => handleInputBlurred('end')}
+/>
+```

package/dist/docs/skill/wm-datepicker.md

@@ -0,0 +1,134 @@
+### Datepicker
+- **Element:** `<wm-datepicker>`
+- **Status:** stable
+
+**Purpose:** Date input that lets users type a date or pick one from a calendar popup. Supports
+configurable date formats, pre-selection, validation, and full keyboard navigation of the calendar.
+Use instead of native `<input type="date">`.
+
+**When to use:**
+
+- **Collecting a bounded time period with a start and end** -- when a user needs to define a window of time (a reporting period, an enrollment window, a project timeline), use Date Range to capture both boundary dates as a single, semantically linked input rather than two independent Datepickers.
+- **Filtering data by a date range** -- when a user is narrowing results by a time window (e.g., "show records between these two dates"), Date Range provides the right interaction model with a shared calendar that highlights the selected span visually.
+- **Enforcing range integrity at the form level** -- when the application needs to validate that the start date precedes the end date, Date Range exposes the right blur events and standardized error messages to handle all range validation scenarios consistently.
+- **Allowing range selection via a shared calendar popup** -- when users benefit from seeing both dates in context on a calendar, Date Range's shared popup highlights the full selected range, which two independent Datepickers cannot do.
+
+**Do not use for:**
+
+- **Two separate dates that happen to be related** -- if the two dates are logically a range, use Date Range; two independent Datepickers have no shared calendar, no range highlighting, and no built-in mechanism to enforce that start precedes end.
+- **Selecting a single point in time** -- if the user is selecting one date rather than a span, use wm-datepicker; Date Range always manages two values and two validation states, which is unnecessary overhead for a single date.
+
+**Variants / types:**
+
+_None documented_
+
+**Props:**
+- `date-format` -- The expected date format. Shown in the input placeholder and announced to screen reader users.
+- `disabled` -- Disables the datepicker, preventing all interaction.
+- `error-message` -- Puts the component in an error state and displays this message below the input.
+- `label` -- Visible label for the input. Required even when `label-position` is `'none'` -- used as the ARIA accessible name.
+- `label-position` -- Position of the label relative to the input. `'none'` hides the label visually but keeps it accessible via `aria-label`.
+- `preselected` -- The date the calendar popup focuses when first opened, in ISO format (YYYY-MM-DD). Falls back to the parsed `value`, then the current date if neither can be parsed.
+- `required-field` -- Displays a required-field asterisk (*) next to the label.
+- `value` -- The date displayed in the input field, in the format specified by `date-format`. Updated as the user types. Can also be set programmatically by the application.
+
+**Events:**
+- `wmDatepickerDateSelected`
+- `wmDatepickerInputBlurred`
+
+**Methods:**
+- `isValidIso(input?: string) => Promise<boolean>`
+- `reformatDate(inputFormat: "US" | "INT" | "ISO", outputFormat: "US" | "INT" | "ISO", date?: string) => Promise<string>`
+
+**Accessibility:**
+
+- `label` is required even when `label-position` is `"none"` -- it becomes the input's `aria-label`.
+- The calendar toggle button announces "Select date" to screen readers and reflects `aria-expanded`.
+- Validation errors are announced via an `aria-live` region when `error-message` changes.
+- When the input value cannot be parsed as a valid date, the calendar opens to the current date.
+- **Keyboard:** - **Input field**: Tab moves focus to the calendar toggle button.
+- **Calendar toggle**: Space / Enter / Down Arrow opens the calendar; Shift+Tab returns to the input.
+- **Day grid**: Arrow keys navigate dates; Enter selects; Escape closes and returns focus to the toggle;
+  Home/End jump to the first/last day of the month; Tab cycles through calendar controls.
+- **Month/year selectors**: Arrow keys cycle values; Tab/Shift+Tab move focus clockwise/counter-clockwise.
+
+**Related components:**
+
+- `<wm-datepicker>` -- if only a single date is needed rather than a start-and-end pair, use Datepicker; Date Range always manages two values and is only appropriate when both are required together.
+- `<wm-timepicker>` -- if the range also needs to capture times of day, Date Range has no time input; pair it with Timepicker fields for the start and end times separately.
+- `<wm-select>` -- if the user is choosing from a predefined list of named time periods (e.g., "Q1 2025", "Fall Semester") rather than specifying arbitrary dates, Select is more appropriate; Date Range is for open-ended date entry.
+
+**Code example:**
+
+_Basic datepicker_
+
+```html
+<wm-datepicker label="Start date"></wm-datepicker>
+```
+
+_Basic datepicker_
+
+```react
+// The component does not update its own value after a calendar selection --
+// the app must call reformatDate and set value/errorMessage imperatively via a ref.
+const ref = useRef(null);
+
+function getFormatName(format) {
+const map = { 'mm/dd/yyyy': 'US', 'dd/mm/yyyy': 'INT', 'yyyy/mm/dd': 'ISO' };
+return format ? map[format] : 'US';
+}
+
+// event.detail is { date: string } -- ISO 8601 (YYYY-MM-DD)
+const handleDateSelected = async (event) => {
+const dp = ref.current;
+const fmt = getFormatName(dp.getAttribute('date-format'));
+dp.value = await dp.reformatDate('ISO', fmt, event.detail.date);
+dp.errorMessage = '';
+};
+
+const handleInputBlurred = async () => {
+const dp = ref.current;
+const fmt = getFormatName(dp.getAttribute('date-format'));
+if (dp.value) {
+const iso = await dp.reformatDate(fmt, 'ISO', dp.value);
+if (await dp.isValidIso(iso)) {
+dp.value = await dp.reformatDate('ISO', fmt, iso);
+dp.errorMessage = '';
+} else {
+dp.errorMessage = `Please enter a valid date in the format ${dp.getAttribute('date-format') ?? 'mm/dd/yyyy'}`;
+}
+}
+};
+
+const handleBlur = () => {
+const dp = ref.current;
+if (dp.requiredField && dp.value === '') dp.errorMessage = 'A date is required';
+};
+
+<WmDatepicker
+ref={ref}
+label="Start date"
+onWmDatepickerDateSelected={handleDateSelected}
+onWmDatepickerInputBlurred={handleInputBlurred}
+onBlur={handleBlur}
+/>
+```
+
+_Required field with validation_
+
+```html
+<wm-datepicker label="Date of birth" required-field></wm-datepicker>
+```
+
+_Required field with validation_
+
+```react
+<WmDatepicker
+ref={ref}
+label="Date of birth"
+requiredField={true}
+onWmDatepickerDateSelected={handleDateSelected}
+onWmDatepickerInputBlurred={handleInputBlurred}
+onBlur={handleBlur}
+/>
+```

package/dist/docs/skill/wm-file-list.md

@@ -0,0 +1,97 @@
+### File List
+- **Element:** `<wm-file-list>`
+- **Status:** stable
+
+**Purpose:** Read-only list of files with optional preview and download actions. Visually similar to the
+Uploader but with no upload capability. Use when displaying existing files users can view or
+download, not when they need to upload new ones.
+
+**When to use:**
+
+- **Displaying files already associated with a record** -- when a page or form needs to show files that have previously been uploaded or attached (e.g., supporting documents on a profile, attachments on a submission), use File List to surface them with consistent metadata and actions.
+- **Allowing users to download or preview existing files** -- when the user's relationship to the files is read-access (they need to open or save a file but not replace it), use File List with file-actions="preview download" on each wm-file.
+- **Surfacing file-level error states** -- when a specific file in the list has failed validation or processing, use the error-message property on the individual wm-file to communicate the problem at the file level rather than at the form level.
+
+**Do not use for:**
+
+- **Accepting new file uploads** -- File List is explicitly read-only and has no upload mechanism; if users need to add files, use wm-uploader instead, and pair it with File List to show what has already been uploaded.
+- **Empty states** -- File List has no empty state handling built in; if the list may be empty and that state needs a message or call to action, the surrounding page must handle that.
+- **General-purpose lists of records** -- File List is purpose-built for files with extensions, metadata, and file-specific actions; it is not a substitute for a generic list or table of records.
+
+**Variants / types:**
+
+_None documented_
+
+**Props:**
+- `show-info` -- Which metadata to display for each file alongside its name. Propagated
+automatically to all wm-file children.
+
+**Related components:**
+
+- `<wm-uploader>` -- if users need to add new files, use Uploader; File List is strictly for displaying and acting on files that already exist. The two are commonly paired: Uploader to add, File List to review what has been added.
+
+**Code example:**
+
+_File list with default metadata (last-updated)_
+
+```html
+<wm-file-list>
+<wm-file id="file-1" name="report" type="pdf" last-updated="1/28/2020 5:29 PM"></wm-file>
+<wm-file id="file-2" name="thesis" type="docx" last-updated="3/15/2024 9:00 AM"></wm-file>
+</wm-file-list>
+```
+
+_File list with managed state_
+
+```react
+// wm-file-list does not manage its own state -- drive the file list from React state.
+// wmFileDelete fires on the wm-file element; use e.target.id to remove the matching entry.
+// showInfo on wm-file-list propagates automatically to all wm-file children.
+const [files, setFiles] = useState([
+{ id: "file-1", name: "annual-report", type: "pdf", lastUpdated: "1/28/2024 5:29 PM" },
+{ id: "file-2", name: "budget-summary", type: "xlsx", lastUpdated: "3/15/2024 9:00 AM" },
+]);
+
+<WmFileList>
+{files.map((f) => (
+<WmFile key={f.id} id={f.id} name={f.name} type={f.type} lastUpdated={f.lastUpdated}
+onWmFileDelete={(e) => setFiles((prev) => prev.filter((f) => f.id !== e.target.id))} />
+))}
+</WmFileList>
+```
+
+_Show all metadata_
+
+```html
+<wm-file-list show-info="all">
+<wm-file id="file-1" name="report" type="pdf"
+size="3 MB" last-updated="1/28/2020 5:29 PM" uploaded-by="Uploaded by Smith, John">
+</wm-file>
+</wm-file-list>
+```
+
+_Show all metadata with preview and download handlers_
+
+```react
+// fileActions controls which buttons appear; omit delete or pass fileActions="" for none.
+// onWmFilePreview and onWmFileDownload fire on the wm-file element; e.target.name is the filename.
+const [files, setFiles] = useState([
+{ id: "file-3", name: "thesis", type: "docx", size: "3.2 MB",
+lastUpdated: "1/28/2024 5:29 PM", uploadedBy: "Uploaded by Smith, John",
+fileActions: "preview download delete" },
+{ id: "file-4", name: "presentation", type: "pptx", size: "8.5 MB",
+lastUpdated: "3/15/2024 9:00 AM", uploadedBy: "Uploaded by Doe, Jane",
+fileActions: "download delete" },
+]);
+
+<WmFileList showInfo="all">
+{files.map((f) => (
+<WmFile key={f.id} id={f.id} name={f.name} type={f.type}
+size={f.size} lastUpdated={f.lastUpdated} uploadedBy={f.uploadedBy}
+fileActions={f.fileActions}
+onWmFilePreview={(e) => alert(`Preview: ${e.target.name}`)}
+onWmFileDownload={(e) => alert(`Download: ${e.target.name}`)}
+onWmFileDelete={(e) => setFiles((prev) => prev.filter((f) => f.id !== e.target.id))} />
+))}
+</WmFileList>
+```

package/dist/docs/skill/wm-file.md

@@ -0,0 +1,78 @@
+### File
+- **Element:** `<wm-file>`
+- **Status:** stable
+
+**Purpose:** Displays a single file row with its name, optional metadata, and configurable action buttons
+(preview, download, delete). Adapts responsively -- at narrow widths action buttons collapse
+into an action menu. Used as a child of wm-file-list or wm-uploader.
+
+**Variants / types:**
+
+- A unique `id` is required on every wm-file element.
+- `name` and `type` are both required; `type` is the file extension only (e.g. `pdf`, not a MIME type).
+- `show-info` is automatically inherited from the parent wm-file-list or wm-uploader when set there.
+- Pass an empty string to `file-actions` to render no action buttons.
+
+**Props:**
+- `error-message` -- Puts the file row in an error state and displays this message below it.
+- `file-actions` -- Space-separated list of action buttons to display. Accepts any combination of
+`preview`, `download`, and `delete`. Pass an empty string to show no actions.
+- `last-updated` -- Upload date/time displayed as file metadata. Any display string is accepted
+(e.g. `"1/28/2020 5:29 PM"`).
+- `name` -- Filename without the extension. _(required)_
+- `progress` -- Upload progress as a percentage (0-100). When set and less than 100, the file
+renders in an in-progress state with a progress bar.
+- `show-info` -- Which metadata to display alongside the filename. Automatically inherited
+from the parent wm-file-list or wm-uploader when set there.
+- `size` -- File size displayed as file metadata. Include the unit in the string
+(e.g. `"3 MB"`).
+- `type` -- File extension without the leading dot (e.g. `pdf`, `docx`). Not a MIME type. _(required)_
+- `uploaded-by` -- Uploader attribution displayed as file metadata
+(e.g. `"Uploaded by Smith, John"`).
+
+**Events:**
+- `wmFileDelete`
+- `wmFileDownload`
+- `wmFileErrorCleared`
+- `wmFilePreview`
+
+**Accessibility:**
+
+- Icon-only action buttons include context-specific aria labels that embed the filename
+  (e.g. "Download report.pdf") so screen reader users know which file each button acts on.
+- A visually-hidden `aria-live` region announces upload progress and validation errors.
+
+**Code example:**
+
+_Basic file row_
+
+```html
+<wm-file-list>
+<wm-file id="file-1" name="report" type="pdf" last-updated="1/28/2020 5:29 PM"></wm-file>
+</wm-file-list>
+```
+
+_Basic file row_
+
+```react
+<WmFileList>
+<WmFile id="file-1" name="report" type="pdf" lastUpdated="1/28/2020 5:29 PM" />
+</WmFileList>
+```
+
+_All metadata and all actions_
+
+```html
+<wm-file id="file-2" name="thesis" type="docx" file-actions="preview download delete"
+show-info="all" size="3 MB" last-updated="3/15/2024 9:00 AM"
+uploaded-by="Uploaded by Smith, John">
+</wm-file>
+```
+
+_All metadata and all actions_
+
+```react
+<WmFile id="file-2" name="thesis" type="docx" fileActions="preview download delete"
+showInfo="all" size="3 MB" lastUpdated="3/15/2024 9:00 AM"
+uploadedBy="Uploaded by Smith, John" />
+```