@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

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

@@ -1,6 +1,46 @@
 import { h } from "@stencil/core";
 import { handleDisabledAttribute, toBool, showTooltip, hideTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
+/**
+ * Multi-line plain-text editing control with a drag handle for vertical resizing. Shares
+ * most functionality with wm-input. Use instead of native `<textarea>` in all Watermark UI.
+ *
+ * @accessibility
+ * - `label` sets the accessible label for the textarea; required even when
+ *   `label-position="none"`.
+ * - When `character-limit` is set, a counter below the field turns red when exceeded; the
+ *   count is announced via `aria-live` when within 5 characters of the limit or exceeded.
+ * - Error messages are announced via an `aria-live` region.
+ * - `info` text is associated via `aria-describedby` and read by screen readers on focus.
+ *
+ * @usageNotes
+ * - In HTML, set the initial value via text content: `<wm-textarea>initial value</wm-textarea>`.
+ *   In React, use the `value` prop for controlled usage.
+ * - `wmTextareaValueChanged` fires on blur only when the value has changed; use the native
+ *   `input` event for per-keystroke updates.
+ * - `event.detail.value` is the current string value.
+ *
+ * @example {html} Basic textarea
+ * <wm-textarea label="Notes" placeholder="Enter notes here..."></wm-textarea>
+ *
+ * @example {react} Basic textarea
+ * // value + onWmTextareaValueChanged is the standard controlled pattern.
+ * const [notes, setNotes] = useState("");
+ *
+ * <WmTextarea
+ *   label="Notes"
+ *   placeholder="Enter notes here..."
+ *   value={notes}
+ *   onWmTextareaValueChanged={(e) => setNotes(e.detail.value)} />
+ *
+ * @example {html} With character limit
+ * <wm-textarea label="Summary" character-limit="500"></wm-textarea>
+ *
+ * @example {react} With character limit
+ * <WmTextarea label="Summary" characterLimit={500} />
+ *
+ * @category Form Inputs
+ */
 export class Textarea {
     constructor() {
         this.previousValue = "";
@@ -71,7 +111,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '35c5048f918ab18bc0adc8223f2321e363bd12d6', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '856cc26989cc86d19274101b0a24827951dfe12a', class: "label-wrapper" }, h("label", { key: '28475801b5c51f4f92efa43a57b68baeb524b64b', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '90595c60a3cd63093fc2d8c342a1c496dfdb3f1e', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: '1399946787ff019b38a5133cfffa48cab48f2acd', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '041cdc66b73a247dc0024a025955db41a84c8cef', class: "inner-wrapper" }, h("div", { key: 'b072be6d0a5637eaff95a11210e045931e28aead', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '51a70fd2d2814f66e8d2767b98a78bba9f1c201f', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '10e8dffe7fa9ca8a0f2ee1eae1cb64c269ffd525', id: "info", class: "info" }, this.info)), h("div", { key: '8f5a778b2f9d29650b74815b976b98b9eaff2cee', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a1eb19abf2ac8e09bab23e66a52c3b6a0fa7d456', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'db8960893db7400b6e9df53fc98ac16f4522ba46', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'b4681419e3354e19725cdd9e9ecf3dea565792eb', class: "label-wrapper" }, h("label", { key: '4e10dd8ad84eda66e3a8b3b204557b4b6fad21c9', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '6ae24fb92cac6fdb98f5f526e439d4d2af9a9e14', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'aafea7d9fa8474c482b92075e8ff81524b34226d', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '62802fb4c7688337126de11803a011209890eee0', class: "inner-wrapper" }, h("div", { key: '62c2dfd068a69a05c958cf60c24ad86ade453a3e', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '8a6f1ad2fdd8019b4371d4b94fbf11287960442d', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '4f8e50fbbda24c6a687bf1a558f162183e969cb9', id: "info", class: "info" }, this.info)), h("div", { key: 'cd1b582734f4104ddb65268ab72e628b0bbf4448', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '9532c1db53dc29bd69a43b63ffda5ac44741b10b', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +138,13 @@ export class Textarea {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Accessible label for the textarea. Required even when\n`label-position=\"none\"`."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "label",
@@ -115,7 +161,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls label placement. `'none'` hides the label visually but keeps it\naccessible."
+                        }, {
+                            "name": "default",
+                            "text": "\"top\""
+                        }],
                     "text": ""
                 },
                 "attribute": "label-position",
@@ -133,7 +185,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "The current value typed by the user. Line breaks are represented as `\\n`.\nTo set an initial value, use the element's text content instead:\n`<wm-textarea>initial value</wm-textarea>`."
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": ""
                 },
                 "attribute": "value",
@@ -151,7 +209,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the component, preventing all interaction."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "disabled",
@@ -169,7 +233,10 @@ export class Textarea {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Hint text displayed below the textarea. Read by screen readers on focus via\n`aria-describedby`."
+                        }],
                     "text": ""
                 },
                 "attribute": "info",
@@ -186,7 +253,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Placeholder text shown inside the empty textarea."
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": ""
                 },
                 "attribute": "placeholder",
@@ -204,7 +277,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Displays a required-field asterisk next to the label."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "required-field",
@@ -222,7 +301,10 @@ export class Textarea {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the component in an error state and displays this message below the\ntextarea."
+                        }],
                     "text": ""
                 },
                 "attribute": "error-message",
@@ -239,7 +321,10 @@ export class Textarea {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Maximum number of characters allowed. Displays a live counter below the\nfield. Does not prevent typing beyond the limit (to allow pasting and editing) but the\ncounter turns red when exceeded. Disabled when unset."
+                        }],
                     "text": ""
                 },
                 "attribute": "character-limit",
@@ -256,7 +341,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "CSS width value for the textarea element itself, independent of the overall\ncomponent width. Useful when the label or error message should extend wider than the\nfield."
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": ""
                 },
                 "attribute": "input-width",
@@ -274,7 +365,13 @@ export class Textarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "CSS height value for the initial height of the textarea. The user can resize\nit with the drag handle."
+                        }, {
+                            "name": "default",
+                            "text": "\"\" (approximately 3 lines)"
+                        }],
                     "text": ""
                 },
                 "attribute": "input-height",
@@ -296,7 +393,13 @@ export class Textarea {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires on blur when the value has changed since load or the last blur. Use\nthe native `input` event for per-keystroke updates."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "{{ value: string }} value \u2014 the current textarea value at the time of blur."
+                        }],
                     "text": ""
                 },
                 "complexType": {

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

@@ -1,5 +1,101 @@
 import { h, Host } from "@stencil/core";
 import { intl, shouldOpenUp, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../global/functions";
+/**
+ * Time input that lets users type a time or pick one from a dropdown list of 15-minute
+ * intervals. Supports 12-hour and 24-hour display and provides `reformatTime` and
+ * `isValidTime` utility methods. Use instead of native `<input type="time">`.
+ *
+ * @keyboardInteraction
+ * **Input field:**
+ * - **Arrow Down / Arrow Up**: Open the dropdown focused on the nearest time interval.
+ *
+ * **Dropdown button:**
+ * - **Enter / Space**: Open the dropdown.
+ *
+ * **Dropdown list:**
+ * - **Arrow Down / Arrow Up**: Move focus to the next/previous option; wraps at both ends.
+ * - **Home / End**: Move focus to the first/last option.
+ * - **Enter / Space**: Select the focused time and close the dropdown.
+ * - **Tab**: Close the dropdown and advance focus (without selecting).
+ * - **Escape**: Close the dropdown without selecting.
+ *
+ * @accessibility
+ * - `label` sets the accessible name on the input; required even when `label-position="none"`.
+ * - Error messages are announced via an `aria-live` region.
+ *
+ * @usageNotes
+ * - The dropdown displays 15-minute intervals (00:00–23:45) in 12-hour format; typed input
+ *   is accepted in both 12-hour and 24-hour formats.
+ * - `wmTimepickerTimeSelected` emits `{ time: string }` in 24-hour `hh:mm` format. Always
+ *   call `reformatTime("12", ...)` on the result and write it back to `value` so the input
+ *   displays the formatted string.
+ * - Use `reformatTime` and `isValidTime` via an imperative ref — they are async component
+ *   methods, not props.
+ * - When writing a curried event-handler factory, the outer function must NOT be async;
+ *   only the inner handler should be async, otherwise the factory returns a Promise instead
+ *   of a function.
+ *
+ * @example {html} Basic timepicker
+ * <wm-timepicker label="Start time"></wm-timepicker>
+ *
+ * @example {react} Basic timepicker
+ * // wmTimepickerTimeSelected emits { time } in 24hr format.
+ * // Call reformatTime and write back to value so the input displays the result.
+ * // handleInputBlur validates free-form typed input on blur using isValidTime.
+ * // NOTE: the outer factory function must NOT be async — only the inner handler should be.
+ * const startRef = useRef(null);
+ * const [startValue, setStartValue] = useState("");
+ * const [startError, setStartError] = useState("");
+ *
+ * const handleTimeSelected = (ref, setValue, setError) => async (e) => {
+ *   const time12 = await ref.current.reformatTime("12", e.detail.time);
+ *   setError("");
+ *   setValue(time12);
+ * };
+ *
+ * const handleInputBlur = (ref, value, setValue, setError) => async () => {
+ *   if (!value) return;
+ *   const valid = await ref.current.isValidTime(value);
+ *   if (valid) {
+ *     const time12 = await ref.current.reformatTime("12", value);
+ *     setError("");
+ *     setValue(time12);
+ *   } else {
+ *     setError("Please enter a valid time.");
+ *   }
+ * };
+ *
+ * <WmTimepicker
+ *   ref={startRef}
+ *   label="Start time"
+ *   value={startValue}
+ *   errorMessage={startError}
+ *   onWmTimepickerTimeSelected={handleTimeSelected(startRef, setStartValue, setStartError)}
+ *   onWmTimepickerInputBlurred={handleInputBlur(startRef, startValue, setStartValue, setStartError)}
+ * />
+ *
+ * @example {html} With pre-selected time
+ * <wm-timepicker label="Meeting time" preselected="14:30" value="2:30 PM"></wm-timepicker>
+ *
+ * @example {react} With pre-selected time
+ * // preselected (24hr) controls where the dropdown focuses on open.
+ * // value sets the initial display string in the input.
+ * const meetingRef = useRef(null);
+ * const [meetingValue, setMeetingValue] = useState("2:30 PM");
+ * const [meetingError, setMeetingError] = useState("");
+ *
+ * <WmTimepicker
+ *   ref={meetingRef}
+ *   label="Meeting time"
+ *   preselected="14:30"
+ *   value={meetingValue}
+ *   errorMessage={meetingError}
+ *   onWmTimepickerTimeSelected={handleTimeSelected(meetingRef, setMeetingValue, setMeetingError)}
+ *   onWmTimepickerInputBlurred={handleInputBlur(meetingRef, meetingValue, setMeetingValue, setMeetingError)}
+ * />
+ *
+ * @category Form Inputs
+ */
 export class Timepicker {
     constructor() {
         this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
@@ -31,12 +127,24 @@ export class Timepicker {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
     }
+    /**
+     * @description Validates a time string against both 12-hour and 24-hour formats.
+     * @param input The time string to validate.
+     * @returns `true` if the string is a valid time, `false` otherwise.
+     */
     async isValidTime(input) {
         return this.isValidTimeInternal(input);
     }
     isValidTimeInternal(input) {
         return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);
     }
+    /**
+     * @description Converts a time string between 12-hour and 24-hour formats.
+     * @param format The target format: `"12"` for 12-hour (e.g. `"02:30 PM"`), `"24"` for
+     *   24-hour (e.g. `"14:30"`).
+     * @param time The time string to convert. Accepts both 12-hour and 24-hour input.
+     * @returns The reformatted time string.
+     */
     async reformatTime(format, time) {
         return this.reformatTimeInternal(format, time);
     }
@@ -281,13 +389,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: '41725899f3e7e7a125aa0e1d5134840af5c08312', onBlur: () => this.close(false) }, h("div", { key: 'dd62c1ed75e942c4dfb0a4672922cc9e36ffcfa0', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '8bb7976c75147040b386a64670883146b5cea3c6', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '16f4c69d31ba9378aa4ed143f80928f90ed0cdba', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'c8b660189ca66ad9b3babc6c8db9df6dd399e247', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'f661fd356437e5436114223cc29a52eb3118a2a7' }, h("div", { key: 'bebf84a5162d0627df72859ea959b61ef70b00f1', class: "inner-wrapper" }, h("input", { key: '9688fcfe498c440294507e1c0ff2932f57077251', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: 'd6368dac8c9623bb1d6fa4d9620c2ee4f3bd9f95', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: '1831afe766153cef35d069831724265be8648796', onBlur: () => this.close(false) }, h("div", { key: '20aba83b2b72108b4b5e958896b33ff6ea948daa', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '890f7200653f77315cb9a16414a229bb0217eb69', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '866856e67edf3ab87d82ce38ac5df95a2ca2c3b2', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '7eb6c6987c41a6816db95238d82c3de9a987f975', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '3b779c734e9be5f59535d48b9b4c90b508a61a6a' }, h("div", { key: '07e1c25e4c09d0be324ab21c73419710e27475e0', class: "inner-wrapper" }, h("input", { key: '0443feb1b7a9c02fdb3230d420f7dc398f5f5aab', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: 'f34364aa09c04761d53ecb74a6bfca976e19e1a5', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: '8ddfb5aa572f502289371b6beb019ef3175c7320', class: "svg-icon svg-time" })), h("ul", { key: 'ff8533f5da516e128f3dc94dd00f0c4389f1d081', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '11fd0c06d8e314c1e49994ae7c26c87dbc7a5256', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'd3064458d445c31f95dedfd6bd43d42dcfa9b0f7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '68eae4f78064e5aad61db87234db57ff1e4ad6d1', class: "svg-icon svg-time" })), h("ul", { key: '3addacc9ac7614159e4875832b9540a295fbab23', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '90044d1948a90a9d97d936f3c0097480eec53e2b', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '436ed4ccb47cca85c3655adaf8f34fe3eaa7243a', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -315,7 +423,13 @@ export class Timepicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the timepicker, preventing all interaction."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "disabled",
@@ -333,7 +447,13 @@ export class Timepicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "The time displayed in the input field. Updated as the user types. Can also\nbe set programmatically by the application."
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": ""
                 },
                 "attribute": "value",
@@ -351,7 +471,10 @@ export class Timepicker {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the component in an error state and displays this message below the\ninput."
+                        }],
                     "text": ""
                 },
                 "attribute": "error-message",
@@ -368,7 +491,13 @@ export class Timepicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Accessible label for the input. Required even when `label-position=\"none\"`."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "label",
@@ -386,7 +515,13 @@ export class Timepicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls label placement. `'none'` hides the label visually but keeps it\naccessible."
+                        }, {
+                            "name": "default",
+                            "text": "\"top\""
+                        }],
                     "text": ""
                 },
                 "attribute": "label-position",
@@ -404,7 +539,13 @@ export class Timepicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Displays a required-field asterisk next to the label."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "required-field",
@@ -422,7 +563,10 @@ export class Timepicker {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "The time the dropdown scrolls to and focuses when opened, in 24-hour format\n(e.g. `'14:30'`). Falls back to parsing `value`; defaults to `'09:00'` if unparseable."
+                        }],
                     "text": ""
                 },
                 "attribute": "preselected",
@@ -443,7 +587,10 @@ export class Timepicker {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the input field loses focus."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -458,7 +605,13 @@ export class Timepicker {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the user selects a time from the dropdown list."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "{{ time: string }} time \u2014 the selected time in 24-hour `hh:mm` format."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -476,7 +629,7 @@ export class Timepicker {
                     "parameters": [{
                             "name": "input",
                             "type": "string",
-                            "docs": ""
+                            "docs": "The time string to validate."
                         }],
                     "references": {
                         "Promise": {
@@ -488,7 +641,16 @@ export class Timepicker {
                 },
                 "docs": {
                     "text": "",
-                    "tags": []
+                    "tags": [{
+                            "name": "description",
+                            "text": "Validates a time string against both 12-hour and 24-hour formats."
+                        }, {
+                            "name": "param",
+                            "text": "input The time string to validate."
+                        }, {
+                            "name": "returns",
+                            "text": "`true` if the string is a valid time, `false` otherwise."
+                        }]
                 }
             },
             "reformatTime": {
@@ -497,11 +659,11 @@ export class Timepicker {
                     "parameters": [{
                             "name": "format",
                             "type": "\"12\" | \"24\"",
-                            "docs": ""
+                            "docs": "The target format: `\"12\"` for 12-hour (e.g. `\"02:30 PM\"`), `\"24\"` for\n24-hour (e.g. `\"14:30\"`)."
                         }, {
                             "name": "time",
                             "type": "string",
-                            "docs": ""
+                            "docs": "The time string to convert. Accepts both 12-hour and 24-hour input."
                         }],
                     "references": {
                         "Promise": {
@@ -523,7 +685,19 @@ export class Timepicker {
                 },
                 "docs": {
                     "text": "",
-                    "tags": []
+                    "tags": [{
+                            "name": "description",
+                            "text": "Converts a time string between 12-hour and 24-hour formats."
+                        }, {
+                            "name": "param",
+                            "text": "format The target format: `\"12\"` for 12-hour (e.g. `\"02:30 PM\"`), `\"24\"` for\n24-hour (e.g. `\"14:30\"`)."
+                        }, {
+                            "name": "param",
+                            "text": "time The time string to convert. Accepts both 12-hour and 24-hour input."
+                        }, {
+                            "name": "returns",
+                            "text": "The reformatted time string."
+                        }]
                 }
             }
         };