@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

package/dist/collection/components/wm-file/wm-file.js

@@ -1,5 +1,48 @@
 import { h, Host, forceUpdate } from "@stencil/core";
 import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../global/functions";
+/**
+ * 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.
+ *
+ * @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.
+ *
+ * @usageNotes
+ * - 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.
+ *
+ * @example {html} Basic file row
+ * <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>
+ *
+ * @example {react} Basic file row
+ * <WmFileList>
+ *   <WmFile id="file-1" name="report" type="pdf" lastUpdated="1/28/2020 5:29 PM" />
+ * </WmFileList>
+ *
+ * @example {html} All metadata and all actions
+ * <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>
+ *
+ * @example {react} All metadata and all actions
+ * <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" />
+ *
+ * @example {html} File in error state
+ * <wm-file id="file-3" name="report" type="pdf" error-message="Upload failed. Please try again."></wm-file>
+ *
+ * @example {react} File in error state
+ * <WmFile id="file-3" name="report" type="pdf" errorMessage="Upload failed. Please try again." />
+ */
 export class File {
     constructor() {
         this.fullFilename = `${this.name}.${this.type}`;
@@ -187,7 +230,7 @@ export class File {
         return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""} ${this.isExtraCondensed ? "extra-condensed" : ""}` }, this.renderFileName(), showRightGroup && (h("div", { class: "right-group" }, !this.isExtraCondensed && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: 'e825957afa878743760074bf8a75afc943432249', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: 'ab1ef1bbd89e7b604f627fd11db96917cef07821', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }
@@ -215,7 +258,13 @@ export class File {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Filename without the extension."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "name",
@@ -232,7 +281,13 @@ export class File {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "File extension without the leading dot (e.g. `pdf`, `docx`). Not a MIME type."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "type",
@@ -249,7 +304,13 @@ export class File {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Space-separated list of action buttons to display. Accepts any combination of\n`preview`, `download`, and `delete`. Pass an empty string to show no actions."
+                        }, {
+                            "name": "default",
+                            "text": "\"download delete\""
+                        }],
                     "text": ""
                 },
                 "attribute": "file-actions",
@@ -267,7 +328,10 @@ export class File {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Upload date/time displayed as file metadata. Any display string is accepted\n(e.g. `\"1/28/2020 5:29 PM\"`)."
+                        }],
                     "text": ""
                 },
                 "attribute": "last-updated",
@@ -284,7 +348,10 @@ export class File {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Upload progress as a percentage (0\u2013100). When set and less than 100, the file\nrenders in an in-progress state with a progress bar."
+                        }],
                     "text": ""
                 },
                 "attribute": "progress",
@@ -301,7 +368,10 @@ export class File {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "File size displayed as file metadata. Include the unit in the string\n(e.g. `\"3 MB\"`)."
+                        }],
                     "text": ""
                 },
                 "attribute": "size",
@@ -318,7 +388,10 @@ export class File {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Uploader attribution displayed as file metadata\n(e.g. `\"Uploaded by Smith, John\"`)."
+                        }],
                     "text": ""
                 },
                 "attribute": "uploaded-by",
@@ -335,7 +408,10 @@ export class File {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the file row in an error state and displays this message below it."
+                        }],
                     "text": ""
                 },
                 "attribute": "error-message",
@@ -352,7 +428,13 @@ export class File {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Which metadata to display alongside the filename. Automatically inherited\nfrom the parent wm-file-list or wm-uploader when set there."
+                        }, {
+                            "name": "default",
+                            "text": "\"last-updated\""
+                        }],
                     "text": ""
                 },
                 "attribute": "show-info",
@@ -369,7 +451,10 @@ export class File {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the preview button is clicked."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -384,7 +469,10 @@ export class File {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the download button is clicked."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -399,7 +487,10 @@ export class File {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the delete button is clicked."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -414,7 +505,10 @@ export class File {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the user clears a file error by clicking the Clear button."
+                        }],
                     "text": ""
                 },
                 "complexType": {

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -1,10 +1,76 @@
 import { h } from "@stencil/core";
+/**
+ * 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.
+ *
+ * @slot - One or more wm-file child elements.
+ *
+ * @usageNotes
+ * - Each child wm-file requires a unique `id`, a `name`, and a `type` (file extension).
+ * - Set `show-info` on wm-file-list to apply the same metadata display to all children — each
+ *   wm-file inherits it automatically. Individual wm-file elements can still override it.
+ *
+ * @example {html} File list with default metadata (last-updated)
+ * <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>
+ *
+ * @example {react} File list with managed state
+ * // 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>
+ *
+ * @example {html} Show all metadata
+ * <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>
+ *
+ * @example {react} Show all metadata with preview and download handlers
+ * // 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>
+ *
+ * @category Form Inputs
+ */
 export class FileList {
     constructor() {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '85c0c57f99ff0d6b1a3bee24b63724853f37f2b2', role: "list", class: "list-wrapper" }, h("slot", { key: 'a05f7e5ebb27e57a23713a7e029c0bdb18d89286' })));
+        return (h("div", { key: 'c071d6aff339fe632763b226dc5d91b8df4bba25', role: "list", class: "list-wrapper" }, h("slot", { key: '46ea0a9a4461767f65a186b8e929bf11daeeef40' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }
@@ -32,7 +98,13 @@ export class FileList {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Which metadata to display for each file alongside its name. Propagated\nautomatically to all wm-file children."
+                        }, {
+                            "name": "default",
+                            "text": "\"last-updated\""
+                        }],
                     "text": ""
                 },
                 "attribute": "show-info",

package/dist/collection/components/wm-flyout/wm-flyout.js

@@ -1,6 +1,137 @@
 import { h, Host } from "@stencil/core";
 import { csvToArray, debounce, getLastFocusableDescendant } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
+/**
+ * Slide-in panel that renders over the main content as a modal dialog. Used for detail views,
+ * multi-step workflows, and forms that require focus without navigating away from the page.
+ *
+ * @slot - Main content of the flyout body.
+ *
+ * @keyboardInteraction
+ * - **Escape**: Fires `wmFlyoutCloseTriggered` (the host application is responsible for setting `open` to false).
+ * - **Tab**: Cycles forward through focusable elements; wraps from the last element back to the first.
+ * - **Shift+Tab**: Cycles backward; wraps from the first element to the last footer button.
+ *
+ * @accessibility
+ * - Rendered as a `<dialog>` element with `aria-labelledby` pointing to the heading.
+ * - Focus is trapped inside the flyout while open and returns to the trigger element on close.
+ * - Call `focusHeading()` after updating content in a multi-step workflow so screen readers
+ *   announce the new heading.
+ *
+ * @usageNotes
+ * - Always render the component on page load — do not conditionally mount/unmount based on
+ *   visibility. Control visibility with the `open` prop instead.
+ * - The flyout does not close on outside clicks; the host application must handle close events
+ *   and set `open` to false.
+ * - In React, set `open` imperatively via a ref (`ref.current.open = true/false`). Use a native
+ *   `onClick` on the trigger element rather than `onWmButtonClicked` to open the flyout.
+ * - Use `element-to-focus` to shift initial focus away from the default close button, e.g. to
+ *   the `primary` footer button or a specific element id for form workflows.
+ * - In a multi-step workflow, drive `heading`, `breadcrumb`, `primaryText`, and `secondaryText`
+ *   from React state so they update on re-render. Call `ref.current.focusHeading()` inside a
+ *   `useEffect` that runs after the step state change so screen readers announce the new heading.
+ * - Apply content padding via a container query on the flyout body wrapper so it reduces
+ *   automatically on narrower flyout widths:
+ *   ```css
+ *   .flyout-content { padding: 1.25rem 1.875rem; }
+ *   @container flyout (width <= 25.875rem) {
+ *     .flyout-content { padding: 0.75rem 1rem; }
+ *   }
+ *   ```
+ *
+ * @example {html} Basic flyout
+ * <button onclick="document.getElementById('edit-profile').open = true">Open flyout</button>
+ *
+ * <wm-flyout id="edit-profile" heading="Edit profile" eyebrow="Student"
+ *   subheading="Update your information below"
+ *   primary-text="Save" secondary-text="Cancel" info-text="* Required fields">
+ *   <div class="flyout-content">
+ *     <wm-input label="First name *"></wm-input>
+ *     <wm-input label="Last name *"></wm-input>
+ *     <wm-input label="Email" type="email"></wm-input>
+ *   </div>
+ * </wm-flyout>
+ *
+ * @example {react} Basic flyout
+ * // Set open imperatively via ref -- use onClick on the trigger, not onWmButtonClicked.
+ * const flyoutRef = useRef(null);
+ *
+ * const openFlyout = () => { flyoutRef.current.open = true; };
+ * const closeFlyout = () => { flyoutRef.current.open = false; };
+ *
+ * <WmButton onClick={openFlyout}>Open flyout</WmButton>
+ *
+ * <WmFlyout
+ *   ref={flyoutRef}
+ *   heading="Edit profile"
+ *   eyebrow="Student"
+ *   subheading="Update your information below"
+ *   primaryText="Save"
+ *   secondaryText="Cancel"
+ *   infoText="* Required fields"
+ *   onWmFlyoutCloseTriggered={closeFlyout}
+ *   onWmFlyoutSecondaryTriggered={closeFlyout}
+ *   onWmFlyoutPrimaryTriggered={closeFlyout}
+ * >
+ *   <div className="flyout-content">
+ *     <WmInput label="First name *" />
+ *     <WmInput label="Last name *" />
+ *     <WmInput label="Email" type="email" />
+ *   </div>
+ * </WmFlyout>
+ *
+ * @example {html} Multi-step flyout with breadcrumbs
+ * <button onclick="document.getElementById('multi-step').open = true">Open multi-step flyout</button>
+ *
+ * <wm-flyout id="multi-step" heading="Vestibulum convallis"
+ *   breadcrumb="Vestibulum convallis"
+ *   primary-text="Next" secondary-text="Cancel">
+ *   <div id="step1" class="flyout-content"><p>Step 1 content</p></div>
+ *   <div id="step2" class="flyout-content" style="display:none"><p>Step 2 content</p></div>
+ * </wm-flyout>
+ *
+ * @example {react} Multi-step flyout with breadcrumbs
+ * // Drive heading/breadcrumb/primaryText/secondaryText from step state so React keeps them
+ * // in sync on re-render. Use useEffect to call focusHeading() after the DOM has updated.
+ * const flyoutRef = useRef(null);
+ * const [step, setStep] = useState(0);
+ * const [focusHeading, setFocusHeading] = useState(false);
+ *
+ * const steps = [
+ *   { heading: "Vestibulum convallis", breadcrumb: "Vestibulum convallis", primaryText: "Next", secondaryText: "Cancel" },
+ *   { heading: "Dignissim magna", breadcrumb: "Vestibulum convallis,Dignissim magna", primaryText: "Submit", secondaryText: "Back" },
+ * ];
+ *
+ * useEffect(() => {
+ *   if (focusHeading) {
+ *     flyoutRef.current.focusHeading();
+ *     setFocusHeading(false);
+ *   }
+ * }, [step, focusHeading]);
+ *
+ * const goToStep = (idx) => { setStep(idx); setFocusHeading(true); };
+ * const handlePrimary = () => { step === 0 ? goToStep(1) : (flyoutRef.current.open = false); };
+ * const handleSecondary = () => { step === 0 ? (flyoutRef.current.open = false) : goToStep(0); };
+ *
+ * <WmButton onClick={() => { setStep(0); flyoutRef.current.open = true; }}>Open flyout</WmButton>
+ *
+ * <WmFlyout
+ *   ref={flyoutRef}
+ *   heading={steps[step].heading}
+ *   breadcrumb={steps[step].breadcrumb}
+ *   primaryText={steps[step].primaryText}
+ *   secondaryText={steps[step].secondaryText}
+ *   onWmFlyoutPrimaryTriggered={handlePrimary}
+ *   onWmFlyoutSecondaryTriggered={handleSecondary}
+ *   onWmFlyoutCloseTriggered={() => { flyoutRef.current.open = false; }}
+ *   onWmFlyoutBreadcrumbClicked={(ev) => goToStep(ev.detail.index)}
+ * >
+ *   {step === 0 && <div className="flyout-content"><WmInput label="Program name *" /></div>}
+ *   {step === 1 && <div className="flyout-content"><WmInput label="Start date" /></div>}
+ * </WmFlyout>
+ *
+ * @category Communication
+ */
 export class Flyout {
     constructor() {
         this.debouncedCheckBreadcrumbOverflow = debounce(this.checkBreadcrumbOverflow, 30);
@@ -81,6 +212,11 @@ export class Flyout {
     setFlyoutWidth() {
         this.el.style.setProperty("--flyout-width", this.flyoutWidth);
     }
+    /**
+     * @description Moves focus to the flyout's heading element. Call this after updating flyout
+     * content in a multi-step workflow so screen readers announce the new heading to the user.
+     * @returns A promise that resolves once focus has been applied.
+     */
     async focusHeading() {
         this.headingEl.focus();
     }
@@ -155,7 +291,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: 'edef60d2bbbed2d457e1cc1b85aa3f6381084d5b' }, h("dialog", { key: 'be1c6a36c8bd59cdf45590402d24ba94271ada78', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '115b32676ca1215698eeaccac059a1730a65e16b', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '45a0bc9e0c3366d2e35409712cc4f02566659373', class: "flyout-content" }, h("slot", { key: '4613ce4d6cac4126bb70ab6b0301b68294f0244f' })), this.renderFooter(), h("div", { key: '3646f8d1604cfdbdeb0ce3872431473943978ecb', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: 'eb123498c8c9452cae1d4c204842e45fb99a2aeb' }, h("dialog", { key: '17a8b8eea564bee116204049747e0e363e77007e', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '805423bf1ff579a534f05d10c7cc530f89d69c5f', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'cf31d451909506f531e753bc30c60bc2d0379870', class: "flyout-content" }, h("slot", { key: 'e9717213c3a2b075bb67296f5bff9793ec7c1eb2' })), this.renderFooter(), h("div", { key: 'ba7cf122b72c12e960bc606b463a045f38f2c1f6', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }
@@ -182,7 +318,10 @@ export class Flyout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Small label displayed above the heading. Useful for context like a category or record type."
+                        }],
                     "text": ""
                 },
                 "attribute": "eyebrow",
@@ -199,7 +338,13 @@ export class Flyout {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Heading text displayed at the top of the flyout. Also used as the dialog's accessible name."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "heading",
@@ -216,7 +361,10 @@ export class Flyout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Subtitle text displayed below the heading."
+                        }],
                     "text": ""
                 },
                 "attribute": "subheading",
@@ -233,7 +381,13 @@ export class Flyout {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "CSS width value for the flyout panel. Capped at 90% of the viewport width,\nand at 100% on viewports narrower than 534px."
+                        }, {
+                            "name": "default",
+                            "text": "\"45rem\""
+                        }],
                     "text": ""
                 },
                 "attribute": "flyout-width",
@@ -251,7 +405,10 @@ export class Flyout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for the primary footer button. When set, a primary button is rendered\nin the footer. Fires `wmFlyoutPrimaryTriggered` when clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "primary-text",
@@ -268,7 +425,10 @@ export class Flyout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for the secondary footer button. When set, a secondary button is rendered\nin the footer. Fires `wmFlyoutSecondaryTriggered` when clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "secondary-text",
@@ -285,7 +445,10 @@ export class Flyout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Informational text displayed in the lower-left corner of the footer\n(e.g. `\"* Required fields\"`)."
+                        }],
                     "text": ""
                 },
                 "attribute": "info-text",
@@ -302,7 +465,10 @@ export class Flyout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Comma-separated list of breadcrumb labels rendered above the heading.\nThe last item is displayed as plain text (current step); earlier items are rendered as\nbuttons that fire `wmFlyoutBreadcrumbClicked`."
+                        }],
                     "text": ""
                 },
                 "attribute": "breadcrumb",
@@ -319,7 +485,13 @@ export class Flyout {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Element to focus when the flyout opens. Pass `\"primary\"` or `\"secondary\"` to\nfocus the corresponding footer button, or an element `id` to focus a specific element in the\nflyout body. Defaults to the close button."
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": ""
                 },
                 "attribute": "element-to-focus",
@@ -337,7 +509,13 @@ export class Flyout {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls the open/closed state of the flyout. Always render the component on\npage load and toggle this prop rather than conditionally mounting/unmounting the element."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "open",
@@ -360,7 +538,10 @@ export class Flyout {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the close button is clicked, Escape is pressed, or the native\ndialog close event fires. The host application must set `open` to false in response."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -375,7 +556,10 @@ export class Flyout {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the primary footer button is clicked."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -390,7 +574,10 @@ export class Flyout {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the secondary footer button is clicked."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -405,7 +592,13 @@ export class Flyout {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when a breadcrumb button (any non-last breadcrumb) is clicked."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "{{ breadcrumb: string, index: number }} breadcrumb \u2014 the label of the clicked breadcrumb; index \u2014 its zero-based position in the original CSV list."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -431,7 +624,13 @@ export class Flyout {
                 },
                 "docs": {
                     "text": "",
-                    "tags": []
+                    "tags": [{
+                            "name": "description",
+                            "text": "Moves focus to the flyout's heading element. Call this after updating flyout\ncontent in a multi-step workflow so screen readers announce the new heading to the user."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves once focus has been applied."
+                        }]
                 }
             }
         };