udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/collection/components/fluent-ui/number-input/udp-fluent-number-input.js

@@ -0,0 +1,547 @@
+import { h, Host } from "@stencil/core";
+import "@fluentui/web-components/text-input.js";
+import "@fluentui/web-components/field.js";
+import "@fluentui/web-components/label.js";
+/**
+ * Number input component with min/max/step constraints and decimal capping.
+ *
+ * @slot start - Content to be displayed at the start of the input.
+ * @slot end - Content to be displayed at the end of the input.
+ */
+export class UdpFluentNumberInput {
+    constructor() {
+        this.liveValue = null;
+        /** Whether to include error padding below the input. */
+        this.includeErrorPadding = true;
+        /** Whether the input is required for form submission. */
+        this.required = false;
+        /** Whether the input is disabled and cannot be interacted with. */
+        this.disabled = false;
+        /** Whether the input is read-only. */
+        this.readonly = false;
+        /** Whether the input should automatically focus when the page loads. */
+        this.autofocus = false;
+        /** Hints to the browser about what kind of data is expected. Defaults to "off" to suppress the browser's recent-values dropdown. */
+        this.autocomplete = 'off';
+        /** The visual appearance of the input. */
+        this.appearance = 'outline';
+        /** The size of the input control. */
+        this.controlSize = 'medium';
+        this.handleInput = (ev) => {
+            ev.stopPropagation();
+            const target = ev.target;
+            this.liveValue = target.value;
+            this.valueChanged.emit(target.value);
+        };
+        this.handleBlur = () => {
+            var _a, _b;
+            if (this.decimals != null && this.internalInput) {
+                const raw = parseFloat((_b = (_a = this.liveValue) !== null && _a !== void 0 ? _a : this.value) !== null && _b !== void 0 ? _b : '');
+                if (!isNaN(raw)) {
+                    const formatted = raw.toFixed(this.decimals);
+                    this.internalInput.value = formatted;
+                    this.liveValue = formatted;
+                    this.valueChanged.emit(formatted);
+                }
+            }
+            this.inputBlur.emit();
+        };
+    }
+    componentDidLoad() {
+        if (this.internalInput && this.value != null) {
+            this.internalInput.value = this.value;
+        }
+        this.applyNumberAttrs();
+    }
+    componentDidUpdate() {
+        this.applyNumberAttrs();
+    }
+    // fluent-text-input doesn't proxy min/max/step to its inner <input>, so we set them directly.
+    // We also set inputmode="decimal" so mobile keyboards show a numeric pad.
+    // NOTE: we do NOT forward type="number" to fluent-text-input because FAST's inputHandler
+    // reads input.value and writes it back via its setter. For type="number" in Chrome, this
+    // resets the cursor to position 0 whenever an intermediate decimal value (e.g. "3.") causes
+    // the browser's value-sanitisation to return the previous valid number ("3"), scrambling
+    // subsequent keystrokes into the wrong order (e.g. "3.14159" → "141593").
+    applyNumberAttrs() {
+        var _a, _b, _c, _d, _e;
+        const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+        if (!nativeInput)
+            return;
+        nativeInput.setAttribute('inputmode', 'decimal');
+        nativeInput.min = (_c = this.min) !== null && _c !== void 0 ? _c : '';
+        nativeInput.max = (_d = this.max) !== null && _d !== void 0 ? _d : '';
+        nativeInput.step = (_e = this.step) !== null && _e !== void 0 ? _e : '';
+    }
+    /** Selects the text in the input. */
+    select() {
+        var _a;
+        (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.select();
+        return Promise.resolve();
+    }
+    render() {
+        const hasError = !!this.error;
+        const message = this.error || this.hint;
+        const noMessage = !message && !this.includeErrorPadding;
+        return (h(Host, { key: 'f87601660bf0d04ca3a617768a6178a9b83b3c39', class: { 'has-error': hasError } }, h("fluent-field", { key: '0a6bfa77b060b198f431cfd01dce8626d22b795c', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '70ee74cccec3b0223e4c36f6bec74a167dd66d8b', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: "false", appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onInvalid: (e) => e.preventDefault() }, h("slot", { key: '72120dfefa9008c4283629e119887ff3e32d3894', slot: "start", name: "start" }), h("slot", { key: '3df3db74bd839bab72aa758468359451e0019c0b', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: '9e4ad92775c6af795ffc5762b5f8045cd327ea6d', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '97261e93f5652e11beb4c92aad11ab1e6e76c877', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '30894a2646b319aaccd96618aa6d5a8f5509769b', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '34ba101a49953809cb238f2b1c1cb4709661707a', slot: "message", variant: "caption1", class: {
+                message: true,
+                error: hasError,
+                includeErrorPadding: this.includeErrorPadding,
+            } }, message))));
+    }
+    static get is() { return "udp-fluent-number-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-fluent-number-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-fluent-number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text displayed above the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint"
+            },
+            "popupHint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed on click of info icon in label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-hint"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message text displayed below the input when validation fails."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "includeErrorPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to include error padding below the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "include-error-padding",
+                "defaultValue": "true"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text displayed when the input is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled and cannot be interacted with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input should automatically focus when the page loads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hints to the browser about what kind of data is expected. Defaults to \"off\" to suppress the browser's recent-values dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'outline' | 'underline' | 'filled-lighter' | 'filled-darker'",
+                    "resolved": "\"filled-darker\" | \"filled-lighter\" | \"outline\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual appearance of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'outline'"
+            },
+            "controlSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "control-size",
+                "defaultValue": "'medium'"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum allowed value. Enforced by the browser via native input constraints."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed value. Enforced by the browser via native input constraints."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "step": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment for the spinner (e.g. \"0.5\", \"0.01\", \"1\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
+            },
+            "decimals": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of decimal places. On blur, the value is rounded to this precision."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decimals"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on each input change (every keystroke). Emits the new value as a `string`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputBlur",
+                "name": "inputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the input loses focus. Payload is `void`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "inputFocus",
+                "name": "inputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the input gains focus. Payload is `void`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects the text in the input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/fluent-ui/progress-bar/udp-progress-bar.js

@@ -19,7 +19,7 @@ export class UdpProgressBar {
         this.validationState = 'info';
     }
     render() {
-        return (h(Host, { key: 'ed081305f42309a9078c45f9b22e6c49e0a1a548' }, h("fluent-progress-bar", { key: 'f02abe008130ae9a1b8b1e35817ad64bd1243bf7', thickness: this.thickness, shape: this.shape, "validation-state": this.validationState, value: this.value, min: this.min, max: this.max })));
+        return (h(Host, { key: '0948de54e61747c0fc87ad8467391d475a8937b8' }, h("fluent-progress-bar", { key: '78cf79e927b60e3f1eb8bf165e490045da03a62f', thickness: this.thickness, shape: this.shape, "validation-state": this.validationState, value: this.value, min: this.min, max: this.max })));
     }
     static get is() { return "udp-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/radio-group/udp-fluent-radio-group.js

@@ -60,7 +60,7 @@ export class UdpFluentRadioGroup {
         var _a;
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'd362c805087543ed3781aaec4ce39faf1311af70' }, h("fluent-field", { key: 'e647409f786e725a45ead081a86164fb51616756', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '5480bdd2fcbfb0e248a5e65cb11c5e7f204c0827', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'd962af5d2625c558c20ad9e5e5e9da83a896503d', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'ca29d2ead9264be5bfd22d3acde71f9b19e3cfb7', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-radio-group", { key: '14a43823ad8f347082d2ba6e645a6c06c6cd6fcf', ref: el => (this.internalInput = el), slot: "input", name: this.name, disabled: this.disabled, orientation: this.orientation, onChange: this.handleChange }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => (h("fluent-field", { "label-position": "after" }, h("fluent-label", { slot: "label", onClick: () => this.handleLabelClick(item.value, item.disabled) }, item.label), h("fluent-radio", { slot: "input", value: item.value, disabled: item.disabled, ref: (el) => this.radioRefs.set(item.value, el) }))))), h("udp-text", { key: '6adbc14b96274ccba3d0d916f600b588dcf4e005', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '310105e91fd86663ac9db8daa7305f8c6dff9c27' }, h("fluent-field", { key: '88ac237d7e1f5700dec8be7f18ef057bc611f7db', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '1911ee90e0bf02780ddeb1ceec4d57d7c7c03170', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a917bcd2e9b5c583dfc1c2f582b21966dc1da1ff', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '149612a75db4b940228b65a45fcb398fe388dade', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-radio-group", { key: '4b7608cb7452a5a195c1e2b07e0b215899308d1c', ref: el => (this.internalInput = el), slot: "input", name: this.name, disabled: this.disabled, orientation: this.orientation, onChange: this.handleChange }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => (h("fluent-field", { "label-position": "after" }, h("fluent-label", { slot: "label", onClick: () => this.handleLabelClick(item.value, item.disabled) }, item.label), h("fluent-radio", { slot: "input", value: item.value, disabled: item.disabled, ref: (el) => this.radioRefs.set(item.value, el) }))))), h("udp-text", { key: '2902bac054f7096a946566bc494ef7783a958406', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/search-input/udp-search-input.js

@@ -73,14 +73,14 @@ export class UdpSearchInput {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '1283f99650dac71eaca68e07328317218d4a6706', class: { 'has-error': hasError } }, h("fluent-field", { key: '4c19532ddfb0e4c302b60131e01f8b1754f464ed', class: { 'no-message': !message && !this.includeErrorPadding } }, h("fluent-text-input", { key: '1aea377062cbd2460a5631aff912eb77931c2b82', ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, slot: "input", name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize,
+        return (h(Host, { key: 'c0ad7e57ba5f4a9eda2ce854c778ba559a0ab4c6', class: { 'has-error': hasError } }, h("fluent-field", { key: 'e8b058e088387a5c1b970d2a0c37515829c29789', class: { 'no-message': !message && !this.includeErrorPadding } }, h("fluent-text-input", { key: 'a80688686d5a642472aeb5edc64e059efe823d35', ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, slot: "input", name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize,
             // Events
             onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault() }, h("slot", { key: 'aeb7a77828c641c6250f1083365c8dbce921d504', slot: "start", name: "start" }, h("udp-fluent-icon", { key: '1a6fd88be4feb32e9edbff5af35858bde1850e06', name: "search", size: "xs" })), h("udp-fluent-icon-button", { key: '505a648b0d4a8a248541b4ae94babf4137eb7808', class: {
+            onInvalid: (e) => e.preventDefault() }, h("slot", { key: 'e286143785d07aed1ecbb7ae7aacc6185f3967da', slot: "start", name: "start" }, h("udp-fluent-icon", { key: '4ffcfbb08de2f19e78efa2b2654ea74ebf401a2a', name: "search", size: "xs" })), h("udp-fluent-icon-button", { key: '6271fb0be37b314c2a7ef01777e790cdfde4aafd', class: {
                 'clear-button': true,
                 'is-visible': !!this.internalValue && !this.disabled && !this.readonly,
-            }, slot: "end", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), this.label && (h("fluent-label", { key: 'c6ca422da68bc799733ac9a0e431125b21347647', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'b75b100acfdae25f5b0c589fd1d65ea0fb75e06c', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'eb813886f547c03d32d50ad714920213cb8fe048', name: "info", size: "xs", class: "popup-hint-icon" })))))), (!!message || this.includeErrorPadding) && (h("udp-text", { key: '54526ac7342d3c9dcc40a7ba6cae3c980fb45934', slot: "message", variant: "caption1", class: {
+            }, slot: "end", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), this.label && (h("fluent-label", { key: '76c6d879ab5081ebb682fb673ae4cc17cfed843d', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e9458ccc073f21a35e708913d01247b1cde0b4f7', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'e01470ae5dd057c2fd3f327269a8434669af0027', name: "info", size: "xs", class: "popup-hint-icon" })))))), (!!message || this.includeErrorPadding) && (h("udp-text", { key: '04724c87df263e121eca183b1c3b4f15a9e7c34e', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/signature-input/udp-fluent-signature-input.js

@@ -306,18 +306,18 @@ export class UdpFluentSignatureInput {
          */
         const clearVisible = !this.readonly && !this.disabled && !this.isEmpty;
         const showReadonlyEmpty = this.readonly && this.isEmpty && !((_a = this.value) === null || _a === void 0 ? void 0 : _a.file);
-        return (h(Host, { key: '43c407383f99db0efe1235923cda238f26707281', class: {
+        return (h(Host, { key: '03493208fa33b1639c1a905d4bb110e0bc25b65d', class: {
                 'has-error': hasError,
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("fluent-field", { key: 'b9a52f91217a1b3c1d064e65dac90ffc5c38b7cf', class: { 'no-message': noMessage } }, h("div", { key: '40b5b898279d05ba64aaa3035f5191b5de985fa9', slot: "input", class: "root" }, h("div", { key: '06e5e8026fb4fcfb2b394559f2c7889afb4173b6', class: "signature-group" }, h("div", { key: '0bb6ec85d256e5798ce972ab80f5aea21b5c3e56', class: "header" }, this.label && (h("fluent-label", { key: 'e60687488adf4030fe23ed716282ad2249ee24f5', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("udp-fluent-button", { key: '2b4d11e2fca09ecc250a8c1b791b87022c9b7939', class: { 'clear-button': true, hidden: !clearVisible }, appearance: "subtle", size: "small", disabled: !clearVisible, "aria-hidden": clearVisible ? 'false' : 'true', tabindex: clearVisible ? 0 : -1, onClick: this.handleClear }, "Clear")), h("div", { key: '1b4b5d3d046b0fddf6eb2b637fdd683907886a7b', class: {
+            } }, h("fluent-field", { key: '35746c3b524e6c90acbfad95d507d97bf77cea7f', class: { 'no-message': noMessage } }, h("div", { key: 'df4df120237a1feaa2ae8764012ff7f24586b1b6', slot: "input", class: "root" }, h("div", { key: '3b2438cbb3098e7235c08dddde07e75b933b954c', class: "signature-group" }, h("div", { key: '2315dad52c98e3ccb8aa1f36676ea702200c42c9', class: "header" }, this.label && (h("fluent-label", { key: '9cf87d09319ba3e678df71cd933996ec614c5842', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("udp-fluent-button", { key: 'a7a6bfbeff934155077f69c5c1115905d7f22abb', class: { 'clear-button': true, hidden: !clearVisible }, appearance: "subtle", size: "small", disabled: !clearVisible, "aria-hidden": clearVisible ? 'false' : 'true', tabindex: clearVisible ? 0 : -1, onClick: this.handleClear }, "Clear")), h("div", { key: '1cffa4b385cef82ec2609568b147e366fc6be3c1', class: {
                 'canvas-wrap': true,
                 empty: this.isEmpty,
-            }, "aria-busy": this.disabled ? 'true' : 'false' }, h("canvas", { key: 'bb42c3fe153828e8080cfbb509c6a4a110afbbc1', ref: el => (this.canvasEl = el), class: {
+            }, "aria-busy": this.disabled ? 'true' : 'false' }, h("canvas", { key: '8c436f1092bfda18d11c2660e28d92d1e41b2cd8', ref: el => (this.canvasEl = el), class: {
                 canvas: true,
                 'canvas-readonly': this.readonly || this.disabled,
-            }, "aria-label": this.label || 'Signature' }), showReadonlyEmpty && (h("div", { key: 'bbef2d7ba8db20d532af31066adc1277f031f377', class: "readonly-empty" }, h("span", { key: 'd3889ccad4d9654138432f8ebe2dddc55339b630', class: "readonly-empty-text" }, "No signature"))), this.isEmpty && !this.readonly && !this.disabled && (h("div", { key: '5975aa1b8ec87a9cdfe76503c20f25514768923c', class: "canvas-hint", "aria-hidden": "true" }, h("span", { key: '2241c4b4bead267624659d8dd2f28090b3c7fc34' }, "Sign here"))))), !this.hideFullNameInput && (h("udp-fluent-text-input", { key: '6a7427b7f6057553a677954fcead1c1b7ad64108', class: "fullname-input", label: this.fullNameLabel, placeholder: this.fullNamePlaceholder, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.fullName) !== null && _c !== void 0 ? _c : '', disabled: this.disabled, readonly: this.readonly, required: this.required, includeErrorPadding: false, appearance: this.appearance === 'filled' ? 'filled-lighter' : 'outline', onValueChanged: this.handleFullNameChange, onInputBlur: this.handleFullNameBlur, onInputFocus: this.handleFullNameFocus }))), h("udp-text", { key: '86acc410dab4171c460516d54a1ab228e5e67e32', slot: "message", variant: "caption1", class: {
+            }, "aria-label": this.label || 'Signature' }), showReadonlyEmpty && (h("div", { key: '5891e986e469ecb172ba3929f26caf6c9dbc3726', class: "readonly-empty" }, h("span", { key: '12a6b0bfbc8abe497b697b0c3961c9116103ad24', class: "readonly-empty-text" }, "No signature"))), this.isEmpty && !this.readonly && !this.disabled && (h("div", { key: '7f2471bffeca34e26bf42f909a77fd22da5f3742', class: "canvas-hint", "aria-hidden": "true" }, h("span", { key: 'b12b339e046131588b3d9420b5614c37deabb658' }, "Sign here"))))), !this.hideFullNameInput && (h("udp-fluent-text-input", { key: '8787867e2d2adbe040e1e56594eede43ba1100cc', class: "fullname-input", label: this.fullNameLabel, placeholder: this.fullNamePlaceholder, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.fullName) !== null && _c !== void 0 ? _c : '', disabled: this.disabled, readonly: this.readonly, required: this.required, includeErrorPadding: false, appearance: this.appearance === 'filled' ? 'filled-lighter' : 'outline', onValueChanged: this.handleFullNameChange, onInputBlur: this.handleFullNameBlur, onInputFocus: this.handleFullNameFocus }))), h("udp-text", { key: '6c2f9faf504def76567e4634fcb4bf82853bc241', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,

package/dist/collection/components/fluent-ui/slider/udp-slider.js

@@ -34,7 +34,7 @@ export class UdpSlider {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'cef8f14efca54b344bc573fb1f1a8c811ec1af4a' }, h("fluent-field", { key: '761880c96ef07fbeb57bd361836e9705bcffffa8', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '2db8d5b6a0af53c9639e799c218e1971c2f496c8', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'b00ca64c1def208c4272d2c872d7ee667a0fd145', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '50bfaa9ea09908d10e06cadf31867c3fe5e700a4', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-slider", { key: 'f71c30167f7c937e28a2d7999de6a57a28cf6b37', slot: "input", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, orientation: this.orientation, value: this.value, onChange: this.handleChange }), h("udp-text", { key: '4ba35ba746eebbf4bd4cba13bc9130feec8a4273', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '968e919a567381345434edbf781862a31dc91af3' }, h("fluent-field", { key: 'e86bf259ec53806c62aa0a0dcd61088088a80d91', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'e22647bd497fe52f2e393969e1443c20ea0f3a38', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e9814f13f25e7c0a4aad486bf3b01dbae3a6453e', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'bc4ca6609a1cb4e245d2e80f1ef664bf0f885be7', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-slider", { key: '921ee04d6b373be00cb96eda57c3c4bef4766c78', slot: "input", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, orientation: this.orientation, value: this.value, onChange: this.handleChange }), h("udp-text", { key: 'f16788b1ce17b13b2c98194324d66174d92b7369', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/spinner/udp-spinner.js

@@ -5,7 +5,7 @@ import "@fluentui/web-components/spinner.js";
  */
 export class UdpSpinner {
     render() {
-        return (h(Host, { key: 'a06546f301afdf9c10f6e3b12830e311842d68c4' }, h("fluent-spinner", { key: '0de1b3aaba7bd65d4282dae0ab773a4dbbbc1176', size: this.size, appearance: this.appearance })));
+        return (h(Host, { key: 'b2ebebedd1f2d8dc407f468ed5be898f18be92c4' }, h("fluent-spinner", { key: 'd5ffa74b2face2f7ccba2cda261bee48abbbceb6', size: this.size, appearance: this.appearance })));
     }
     static get is() { return "udp-spinner"; }
     static get encapsulation() { return "shadow"; }