udp-stencil-component-library 26.5.0-beta.4 → 26.5.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ag-grid-base_65.cjs.entry.js +8 -8
- package/dist/cjs/udp-fluent-image.cjs.entry.js +1 -1
- package/dist/collection/components/fluent-ui/avatar/udp-fluent-avatar.js +7 -2
- package/dist/collection/components/fluent-ui/checkbox/udp-fluent-checkbox.js +3 -1
- package/dist/collection/components/fluent-ui/dialog/udp-fluent-dialog.js +3 -1
- package/dist/collection/components/fluent-ui/icon/udp-fluent-icon.js +3 -1
- package/dist/collection/components/fluent-ui/icon-button/udp-fluent-icon-button.js +3 -1
- package/dist/collection/components/fluent-ui/image/udp-fluent-image.js +6 -1
- package/dist/collection/components/fluent-ui/switch/udp-fluent-switch.js +3 -1
- package/dist/collection/components/fluent-ui/tooltip/udp-tooltip.js +4 -2
- package/dist/components/udp-fluent-avatar2.js +1 -1
- package/dist/components/udp-fluent-checkbox2.js +1 -1
- package/dist/components/udp-fluent-dialog2.js +1 -1
- package/dist/components/udp-fluent-icon-button2.js +1 -1
- package/dist/components/udp-fluent-icon2.js +1 -1
- package/dist/components/udp-fluent-image.js +1 -1
- package/dist/components/udp-fluent-switch2.js +1 -1
- package/dist/components/udp-tooltip2.js +1 -1
- package/dist/docs.json +10 -10
- package/dist/esm/ag-grid-base_65.entry.js +8 -8
- package/dist/esm/udp-fluent-image.entry.js +1 -1
- package/dist/stencil-library/ag-grid-base_65.entry.js +1 -1
- package/dist/stencil-library/udp-fluent-image.entry.js +1 -1
- package/dist/types/components/fluent-ui/avatar/udp-fluent-avatar.d.ts +6 -1
- package/dist/types/components/fluent-ui/checkbox/udp-fluent-checkbox.d.ts +2 -0
- package/dist/types/components/fluent-ui/dialog/udp-fluent-dialog.d.ts +2 -0
- package/dist/types/components/fluent-ui/icon/udp-fluent-icon.d.ts +2 -0
- package/dist/types/components/fluent-ui/icon-button/udp-fluent-icon-button.d.ts +2 -0
- package/dist/types/components/fluent-ui/image/udp-fluent-image.d.ts +5 -0
- package/dist/types/components/fluent-ui/switch/udp-fluent-switch.d.ts +2 -0
- package/dist/types/components/fluent-ui/tooltip/udp-tooltip.d.ts +2 -0
- package/dist/types/components.d.ts +58 -2
- package/package.json +1 -1
|
@@ -7182,7 +7182,7 @@ const UdpFluentAvatar = class {
|
|
|
7182
7182
|
}
|
|
7183
7183
|
render() {
|
|
7184
7184
|
const imgBorderRadius = this.getImageBorderRadius();
|
|
7185
|
-
return (index.h(index.Host, { key: '
|
|
7185
|
+
return (index.h(index.Host, { key: '0af87d484918f9a909b8aee8b20f107585338920' }, index.h("fluent-avatar", { key: '971a0edc9169ce5c97160211ba76698af978f8c8', active: this.active, shape: this.shape, appearance: this.appearance, size: this.size, color: this.color, name: this.name, initials: this.initials }, this.src ? (index.h("img", { src: this.src, alt: this.alt, style: Object.assign({ objectFit: 'cover' }, (imgBorderRadius ? { borderRadius: imgBorderRadius } : {})) })) : this.iconName ? (index.h("udp-fluent-icon", { name: this.iconName, variant: this.iconVariant, size: this.getIconSize() })) : null, index.h("slot", { key: 'a6467a06f9e48f3bfc5b3caafcbb8ae39c06b721', name: "badge", slot: "badge" }))));
|
|
7186
7186
|
}
|
|
7187
7187
|
};
|
|
7188
7188
|
UdpFluentAvatar.style = udpFluentAvatarCss();
|
|
@@ -7442,7 +7442,7 @@ const UdpFluentCheckbox = class {
|
|
|
7442
7442
|
render() {
|
|
7443
7443
|
const hasError = !!this.error;
|
|
7444
7444
|
const message = this.error || this.hint;
|
|
7445
|
-
return (index.h(index.Host, { key: '
|
|
7445
|
+
return (index.h(index.Host, { key: '5935d2466eb58d8f91aee016525648b75ce89f84' }, index.h("fluent-field", { key: 'a4afddeb7489f0ee2726edbc4574def553aeaaf6', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, index.h("fluent-label", { key: '6965d0311c254a3fc66c4faebe80d4ba43398c48', slot: "label", disabled: this.disabled, onClick: this.handleLabelClick }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '1899850c5c2fadaf5d36ee51c8e916da50d6e4c6', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '30812527d10ffebec8b87d5c75d954d0126043c5', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("fluent-checkbox", { key: '158cb4cb4a1932385c865119060c8532b59c03e7', ref: (el) => (this.internalCheckbox = el), slot: "input", name: this.name, checked: this.checked, indeterminate: this.indeterminate, disabled: this.disabled, shape: this.shape, size: this.controlSize, autofocus: this.autofocus, onChange: this.handleChange }), index.h("udp-text", { key: '4fcaf9ebe4c0c0d60150d66382f88b2774600c64', slot: "message", variant: "caption1", class: {
|
|
7446
7446
|
message: true,
|
|
7447
7447
|
error: hasError,
|
|
7448
7448
|
includeErrorPadding: this.includeErrorPadding,
|
|
@@ -7532,7 +7532,7 @@ const UdpFluentDialog = class {
|
|
|
7532
7532
|
}
|
|
7533
7533
|
}
|
|
7534
7534
|
render() {
|
|
7535
|
-
return (index.h(index.Host, { key: '
|
|
7535
|
+
return (index.h(index.Host, { key: 'ba65bbcd29ad4839cc5221b736cc79df42825bb0', style: { '--dialog-max-height': this.maxHeight } }, index.h("fluent-dialog", { key: '4d84a1fe555e4b82bf336fa2038d5b02499c3a7e', ref: this.setDialogRef, type: this.type, onToggle: this.handleToggle }, index.h("fluent-dialog-body", { key: '29dd6a9472fa56d7ea01b3fd6ec92dc22bcf8ac6' }, index.h("slot", { key: '5601346d02cc72cb6e602cd95e99b33b4863987c', name: "header", slot: "title" }, this.dialogTitle && index.h("udp-fluent-text", { key: '4dae89fdd1a89de136e62a944ce672d863de3798' }, this.dialogTitle)), this.showHeaderCloseButton && (index.h("udp-fluent-icon-button", { key: 'aaf4bd18e466e4fb4994565425568d8060322cb2', slot: "close", appearance: "subtle", iconName: "dismiss", ariaLabel: "Close Dialog" })), index.h("div", { key: 'cc04024d8235d927f45c9ff4f18eadd952726e36', class: "dialog-content" }, index.h("slot", { key: '49eac8bab21d0b4630b8e417a7b0aec1f081b69f' })), index.h("udp-flexbox", { key: 'e6fd4bf61f17f913e7fec73f94492b26ba75e30f', slot: "action", direction: "row" }, index.h("slot", { key: '7f59e6068c3642aaaf76c187540236a5044b43ef', name: "action" }))))));
|
|
7536
7536
|
}
|
|
7537
7537
|
get el() { return index.getElement(this); }
|
|
7538
7538
|
static get watchers() { return {
|
|
@@ -8635,7 +8635,7 @@ const UdpFluentIcon = class {
|
|
|
8635
8635
|
};
|
|
8636
8636
|
if (this.color)
|
|
8637
8637
|
hostStyle.color = this.color;
|
|
8638
|
-
return (index.h(index.Host, { key: '
|
|
8638
|
+
return (index.h(index.Host, { key: '08c7564690ab3710735133112154318b2909bd95', style: hostStyle }, this.svgContent && (index.h("div", { key: '3d7c4ed8f026876f2331de8bb47cbd2aadc9da40', class: "icon-inner", innerHTML: this.svgContent, role: "img", "aria-label": this.name }))));
|
|
8639
8639
|
}
|
|
8640
8640
|
static get watchers() { return {
|
|
8641
8641
|
"name": [{
|
|
@@ -8694,7 +8694,7 @@ const UdpFluentIconButton = class {
|
|
|
8694
8694
|
const hoverActive = this.fillOnHover && this.isHovered;
|
|
8695
8695
|
const effectiveVariant = hoverActive ? 'filled' : this.iconVariant;
|
|
8696
8696
|
const effectiveColor = hoverActive ? 'var(--colorBrandForeground1)' : this.iconColor;
|
|
8697
|
-
return (index.h(index.Host, { key: '
|
|
8697
|
+
return (index.h(index.Host, { key: '926b721df2a83c7224caeaf9b6eac7c45396bfa9', exportparts: "button", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("udp-fluent-button", { key: 'ebebed1ec6b26285dff7f983a00f61fa3c72c847', appearance: this.appearance, disabled: this.disabled, "disabled-focusable": this.disabledFocusable, loading: this.loading, shape: this.shape, size: this.size, iconOnly: true, "aria-label": this.ariaLabel, tabIndex: this.tabIndex }, index.h("udp-fluent-icon", { key: '77951a84585e8beef552f3b8f6f1db1fa31961cc', name: this.iconName, size: getIconSize(this.size, 'standard'), variant: effectiveVariant, color: effectiveColor }))));
|
|
8698
8698
|
}
|
|
8699
8699
|
};
|
|
8700
8700
|
UdpFluentIconButton.style = udpFluentIconButtonCss();
|
|
@@ -9006,7 +9006,7 @@ const UdpFluentSwitch = class {
|
|
|
9006
9006
|
render() {
|
|
9007
9007
|
const hasError = !!this.error;
|
|
9008
9008
|
const message = this.error || this.hint;
|
|
9009
|
-
return (index.h(index.Host, { key: '
|
|
9009
|
+
return (index.h(index.Host, { key: 'b33ca1ff48aabd27b5e1a14de682276a97836ba1' }, index.h("fluent-field", { key: '3c517a48e6052b4850b785e530bc9c080f58a8d5', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, index.h("fluent-label", { key: 'c8baa2710ade264cd06b5473b09b71b7c732aef8', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '1ef2713802ea6fdee2f66df59e225e477919fe0a', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '51000fc82c56b0921b6d5538a337515bd9ccf87d', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("fluent-switch", { key: '035acc24987fdab47ee9d1013af0f3f6207cce25', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), index.h("udp-text", { key: '14ad064b04ba8fa033a723b48c4e394871724b47', slot: "message", variant: "caption1", class: {
|
|
9010
9010
|
message: true,
|
|
9011
9011
|
error: hasError,
|
|
9012
9012
|
includeErrorPadding: this.includeErrorPadding,
|
|
@@ -11857,13 +11857,13 @@ const UdpTooltip = class {
|
|
|
11857
11857
|
render() {
|
|
11858
11858
|
// A stable, internal ID is safe because it is scoped to this Shadow Root
|
|
11859
11859
|
const anchorId = 'internal-anchor';
|
|
11860
|
-
return (index.h(index.Host, { key: '
|
|
11860
|
+
return (index.h(index.Host, { key: 'bb46b4bdf7dee129c45c96e4bd17a9c878232ec6' }, index.h("div", { key: '0ceac6a12a6d513ee1e4e729cd75dbdba82b440b', id: anchorId, onFocusin: (e) => {
|
|
11861
11861
|
var _a, _b;
|
|
11862
11862
|
// Only show on keyboard-driven focus, not pointer clicks or programmatic focus restoration
|
|
11863
11863
|
if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) {
|
|
11864
11864
|
(_b = this.tooltipRef) === null || _b === void 0 ? void 0 : _b.showTooltip(0);
|
|
11865
11865
|
}
|
|
11866
|
-
}, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, index.h("slot", { key: '
|
|
11866
|
+
}, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, index.h("slot", { key: '8dc55ba644793085d4eddca3a2df74b6ed61590f' })), index.h("fluent-tooltip", { key: 'ce2cc6858a33f0ae6fc9a9bc6b7df8bb7dbca74a', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
|
|
11867
11867
|
}
|
|
11868
11868
|
};
|
|
11869
11869
|
UdpTooltip.style = udpTooltipCss();
|
|
@@ -20,7 +20,7 @@ const UdpFluentImage = class {
|
|
|
20
20
|
this.shadow = false;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (index.h(index.Host, { key: '
|
|
23
|
+
return (index.h(index.Host, { key: '322161c1df0ebd8a52ac77e9106e8250f065d560' }, index.h("fluent-image", { key: '5629618de41e51052c18b6f2264b7f79adf42a7e', block: this.block, bordered: this.bordered, shadow: this.shadow, fit: this.fit, shape: this.shape }, index.h("slot", { key: '641c7116bf42bdc57404dcfdf6f794c8abdb5c91' }))));
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import "@fluentui/web-components/avatar.js";
|
|
3
|
+
/**
|
|
4
|
+
* Avatar component — shows a user/entity image, initials, or icon.
|
|
5
|
+
*
|
|
6
|
+
* Default to `color="colorful"` when it suits the use case — it gives each avatar a distinct, name-derived colour, which helps tell people and entities apart in lists, grids, and other multi-avatar views. A single brand or entity avatar can keep the default colour.
|
|
7
|
+
*/
|
|
3
8
|
export class UdpFluentAvatar {
|
|
4
9
|
constructor() {
|
|
5
10
|
/**
|
|
@@ -39,7 +44,7 @@ export class UdpFluentAvatar {
|
|
|
39
44
|
}
|
|
40
45
|
render() {
|
|
41
46
|
const imgBorderRadius = this.getImageBorderRadius();
|
|
42
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: '0af87d484918f9a909b8aee8b20f107585338920' }, h("fluent-avatar", { key: '971a0edc9169ce5c97160211ba76698af978f8c8', active: this.active, shape: this.shape, appearance: this.appearance, size: this.size, color: this.color, name: this.name, initials: this.initials }, this.src ? (h("img", { src: this.src, alt: this.alt, style: Object.assign({ objectFit: 'cover' }, (imgBorderRadius ? { borderRadius: imgBorderRadius } : {})) })) : this.iconName ? (h("udp-fluent-icon", { name: this.iconName, variant: this.iconVariant, size: this.getIconSize() })) : null, h("slot", { key: 'a6467a06f9e48f3bfc5b3caafcbb8ae39c06b721', name: "badge", slot: "badge" }))));
|
|
43
48
|
}
|
|
44
49
|
static get is() { return "udp-fluent-avatar"; }
|
|
45
50
|
static get encapsulation() { return "shadow"; }
|
|
@@ -143,7 +148,7 @@ export class UdpFluentAvatar {
|
|
|
143
148
|
"optional": false,
|
|
144
149
|
"docs": {
|
|
145
150
|
"tags": [],
|
|
146
|
-
"text": "The color when displaying
|
|
151
|
+
"text": "The color when displaying an icon or initials. Prefer `\"colorful\"` where it fits the use case \u2014 it derives a stable colour from the name so multiple avatars are visually distinct, rather than sharing the single flat default."
|
|
147
152
|
},
|
|
148
153
|
"getter": false,
|
|
149
154
|
"setter": false,
|
|
@@ -4,6 +4,8 @@ import "@fluentui/web-components/field.js";
|
|
|
4
4
|
import "@fluentui/web-components/label.js";
|
|
5
5
|
/**
|
|
6
6
|
* Checkbox component. Can be used as a standalone component or within udp-field component.
|
|
7
|
+
*
|
|
8
|
+
* Use a checkbox for a boolean value submitted with a form's Save/Apply button, and for multi-select lists where each option is independent. For a setting that takes effect immediately when toggled, use a switch instead (Fluent UX guideline).
|
|
7
9
|
*/
|
|
8
10
|
export class UdpFluentCheckbox {
|
|
9
11
|
constructor() {
|
|
@@ -59,7 +61,7 @@ export class UdpFluentCheckbox {
|
|
|
59
61
|
render() {
|
|
60
62
|
const hasError = !!this.error;
|
|
61
63
|
const message = this.error || this.hint;
|
|
62
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: '5935d2466eb58d8f91aee016525648b75ce89f84' }, h("fluent-field", { key: 'a4afddeb7489f0ee2726edbc4574def553aeaaf6', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '6965d0311c254a3fc66c4faebe80d4ba43398c48', slot: "label", disabled: this.disabled, onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '1899850c5c2fadaf5d36ee51c8e916da50d6e4c6', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '30812527d10ffebec8b87d5c75d954d0126043c5', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-checkbox", { key: '158cb4cb4a1932385c865119060c8532b59c03e7', ref: (el) => (this.internalCheckbox = el), slot: "input", name: this.name, checked: this.checked, indeterminate: this.indeterminate, disabled: this.disabled, shape: this.shape, size: this.controlSize, autofocus: this.autofocus, onChange: this.handleChange }), h("udp-text", { key: '4fcaf9ebe4c0c0d60150d66382f88b2774600c64', slot: "message", variant: "caption1", class: {
|
|
63
65
|
message: true,
|
|
64
66
|
error: hasError,
|
|
65
67
|
includeErrorPadding: this.includeErrorPadding,
|
|
@@ -4,6 +4,8 @@ import "@fluentui/web-components/dialog-body.js";
|
|
|
4
4
|
/**
|
|
5
5
|
* Dialog component.
|
|
6
6
|
*
|
|
7
|
+
* Use a dialog for a short, focused decision or confirmation — especially destructive or irreversible actions — that the user must resolve before continuing. Keep dialog content minimal; for multi-field editing or longer tasks use a drawer instead (Fluent UX guideline).
|
|
8
|
+
*
|
|
7
9
|
* @slot - Content to be placed inside the dialog
|
|
8
10
|
* @slot header - Header content to be placed inside the dialog
|
|
9
11
|
* @slot action - Action buttons to be placed at the bottom of the dialog (provide one or many buttons/components here)
|
|
@@ -63,7 +65,7 @@ export class UdpFluentDialog {
|
|
|
63
65
|
}
|
|
64
66
|
}
|
|
65
67
|
render() {
|
|
66
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: 'ba65bbcd29ad4839cc5221b736cc79df42825bb0', style: { '--dialog-max-height': this.maxHeight } }, h("fluent-dialog", { key: '4d84a1fe555e4b82bf336fa2038d5b02499c3a7e', ref: this.setDialogRef, type: this.type, onToggle: this.handleToggle }, h("fluent-dialog-body", { key: '29dd6a9472fa56d7ea01b3fd6ec92dc22bcf8ac6' }, h("slot", { key: '5601346d02cc72cb6e602cd95e99b33b4863987c', name: "header", slot: "title" }, this.dialogTitle && h("udp-fluent-text", { key: '4dae89fdd1a89de136e62a944ce672d863de3798' }, this.dialogTitle)), this.showHeaderCloseButton && (h("udp-fluent-icon-button", { key: 'aaf4bd18e466e4fb4994565425568d8060322cb2', slot: "close", appearance: "subtle", iconName: "dismiss", ariaLabel: "Close Dialog" })), h("div", { key: 'cc04024d8235d927f45c9ff4f18eadd952726e36', class: "dialog-content" }, h("slot", { key: '49eac8bab21d0b4630b8e417a7b0aec1f081b69f' })), h("udp-flexbox", { key: 'e6fd4bf61f17f913e7fec73f94492b26ba75e30f', slot: "action", direction: "row" }, h("slot", { key: '7f59e6068c3642aaaf76c187540236a5044b43ef', name: "action" }))))));
|
|
67
69
|
}
|
|
68
70
|
static get is() { return "udp-fluent-dialog"; }
|
|
69
71
|
static get encapsulation() { return "shadow"; }
|
|
@@ -10,6 +10,8 @@ const loadIconsModule = () => (iconsModulePromise !== null && iconsModulePromise
|
|
|
10
10
|
* Icon renderer component. Uses Fluent UI SVG icons (and optional custom SVGs via the
|
|
11
11
|
* registry's `source: "custom"` field).
|
|
12
12
|
*
|
|
13
|
+
* Icons are decorative and expose no accessible name — never rely on an icon alone to convey meaning. Pair it with visible text, or set an `ariaLabel` on the interactive control that contains it (e.g. `UdpIconButton`).
|
|
14
|
+
*
|
|
13
15
|
* @example
|
|
14
16
|
* <udp-fluent-icon name="add" size="md" variant="filled" />
|
|
15
17
|
*/
|
|
@@ -132,7 +134,7 @@ export class UdpFluentIcon {
|
|
|
132
134
|
};
|
|
133
135
|
if (this.color)
|
|
134
136
|
hostStyle.color = this.color;
|
|
135
|
-
return (h(Host, { key: '
|
|
137
|
+
return (h(Host, { key: '08c7564690ab3710735133112154318b2909bd95', style: hostStyle }, this.svgContent && (h("div", { key: '3d7c4ed8f026876f2331de8bb47cbd2aadc9da40', class: "icon-inner", innerHTML: this.svgContent, role: "img", "aria-label": this.name }))));
|
|
136
138
|
}
|
|
137
139
|
static get is() { return "udp-fluent-icon"; }
|
|
138
140
|
static get encapsulation() { return "shadow"; }
|
|
@@ -3,6 +3,8 @@ import "@fluentui/web-components/button.js";
|
|
|
3
3
|
import { getIconSize } from "../../../utilities/icon-size-helpers";
|
|
4
4
|
/**
|
|
5
5
|
* Icon button component.
|
|
6
|
+
*
|
|
7
|
+
* Icon-only — it has no visible text, so `ariaLabel` is required to give the button an accessible name for screen readers (Fluent UX / accessibility guideline).
|
|
6
8
|
*/
|
|
7
9
|
export class UdpFluentIconButton {
|
|
8
10
|
constructor() {
|
|
@@ -44,7 +46,7 @@ export class UdpFluentIconButton {
|
|
|
44
46
|
const hoverActive = this.fillOnHover && this.isHovered;
|
|
45
47
|
const effectiveVariant = hoverActive ? 'filled' : this.iconVariant;
|
|
46
48
|
const effectiveColor = hoverActive ? 'var(--colorBrandForeground1)' : this.iconColor;
|
|
47
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '926b721df2a83c7224caeaf9b6eac7c45396bfa9', exportparts: "button", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("udp-fluent-button", { key: 'ebebed1ec6b26285dff7f983a00f61fa3c72c847', appearance: this.appearance, disabled: this.disabled, "disabled-focusable": this.disabledFocusable, loading: this.loading, shape: this.shape, size: this.size, iconOnly: true, "aria-label": this.ariaLabel, tabIndex: this.tabIndex }, h("udp-fluent-icon", { key: '77951a84585e8beef552f3b8f6f1db1fa31961cc', name: this.iconName, size: getIconSize(this.size, 'standard'), variant: effectiveVariant, color: effectiveColor }))));
|
|
48
50
|
}
|
|
49
51
|
static get is() { return "udp-fluent-icon-button"; }
|
|
50
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import "@fluentui/web-components/image.js";
|
|
3
|
+
/**
|
|
4
|
+
* Image component — a styling wrapper (fit, shape, border, shadow) around a slotted image.
|
|
5
|
+
*
|
|
6
|
+
* Provide your own `<img>` in the default slot and put the alt text on it — `<UdpImage><img src="…" alt="Company logo" /></UdpImage>` — using `alt=""` for purely decorative images. There is no `alt` prop: the accessible text belongs on the slotted `<img>`.
|
|
7
|
+
*/
|
|
3
8
|
export class UdpFluentImage {
|
|
4
9
|
constructor() {
|
|
5
10
|
/**
|
|
@@ -16,7 +21,7 @@ export class UdpFluentImage {
|
|
|
16
21
|
this.shadow = false;
|
|
17
22
|
}
|
|
18
23
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: '322161c1df0ebd8a52ac77e9106e8250f065d560' }, h("fluent-image", { key: '5629618de41e51052c18b6f2264b7f79adf42a7e', block: this.block, bordered: this.bordered, shadow: this.shadow, fit: this.fit, shape: this.shape }, h("slot", { key: '641c7116bf42bdc57404dcfdf6f794c8abdb5c91' }))));
|
|
20
25
|
}
|
|
21
26
|
static get is() { return "udp-fluent-image"; }
|
|
22
27
|
static get encapsulation() { return "shadow"; }
|
|
@@ -4,6 +4,8 @@ import "@fluentui/web-components/field.js";
|
|
|
4
4
|
import "@fluentui/web-components/label.js";
|
|
5
5
|
/**
|
|
6
6
|
* Switch component. Can be used standalone or as part of a udp-field.
|
|
7
|
+
*
|
|
8
|
+
* Use a switch only for a setting that takes effect the moment it is toggled, with no separate Save or Apply step. If the value is part of a form submitted with a Save/Apply button, use a checkbox instead — a switch wrongly signals that the change has already been applied (Fluent UX guideline).
|
|
7
9
|
*/
|
|
8
10
|
export class UdpFluentSwitch {
|
|
9
11
|
constructor() {
|
|
@@ -43,7 +45,7 @@ export class UdpFluentSwitch {
|
|
|
43
45
|
render() {
|
|
44
46
|
const hasError = !!this.error;
|
|
45
47
|
const message = this.error || this.hint;
|
|
46
|
-
return (h(Host, { key: '
|
|
48
|
+
return (h(Host, { key: 'b33ca1ff48aabd27b5e1a14de682276a97836ba1' }, h("fluent-field", { key: '3c517a48e6052b4850b785e530bc9c080f58a8d5', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'c8baa2710ade264cd06b5473b09b71b7c732aef8', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '1ef2713802ea6fdee2f66df59e225e477919fe0a', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '51000fc82c56b0921b6d5538a337515bd9ccf87d', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: '035acc24987fdab47ee9d1013af0f3f6207cce25', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: '14ad064b04ba8fa033a723b48c4e394871724b47', slot: "message", variant: "caption1", class: {
|
|
47
49
|
message: true,
|
|
48
50
|
error: hasError,
|
|
49
51
|
includeErrorPadding: this.includeErrorPadding,
|
|
@@ -3,6 +3,8 @@ import "@fluentui/web-components/tooltip.js";
|
|
|
3
3
|
/**
|
|
4
4
|
* Tooltip component.
|
|
5
5
|
*
|
|
6
|
+
* A tooltip holds brief, supplementary text shown on hover or focus. Never place essential information or interactive content (links, buttons, inputs) in a tooltip — it is not reliably reachable by keyboard or touch and is hidden from many users. Use a popover for rich or interactive content, and put information the user must see inline (Fluent UX / accessibility guideline).
|
|
7
|
+
*
|
|
6
8
|
* @slot - The content of the tooltip.
|
|
7
9
|
*/
|
|
8
10
|
export class UdpTooltip {
|
|
@@ -19,13 +21,13 @@ export class UdpTooltip {
|
|
|
19
21
|
render() {
|
|
20
22
|
// A stable, internal ID is safe because it is scoped to this Shadow Root
|
|
21
23
|
const anchorId = 'internal-anchor';
|
|
22
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: 'bb46b4bdf7dee129c45c96e4bd17a9c878232ec6' }, h("div", { key: '0ceac6a12a6d513ee1e4e729cd75dbdba82b440b', id: anchorId, onFocusin: (e) => {
|
|
23
25
|
var _a, _b;
|
|
24
26
|
// Only show on keyboard-driven focus, not pointer clicks or programmatic focus restoration
|
|
25
27
|
if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) {
|
|
26
28
|
(_b = this.tooltipRef) === null || _b === void 0 ? void 0 : _b.showTooltip(0);
|
|
27
29
|
}
|
|
28
|
-
}, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, h("slot", { key: '
|
|
30
|
+
}, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, h("slot", { key: '8dc55ba644793085d4eddca3a2df74b6ed61590f' })), h("fluent-tooltip", { key: 'ce2cc6858a33f0ae6fc9a9bc6b7df8bb7dbca74a', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
|
|
29
31
|
}
|
|
30
32
|
static get is() { return "udp-tooltip"; }
|
|
31
33
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,h as
|
|
1
|
+
import{p as t,H as e,h as a,d as s,t as i}from"./index2.js";import"@fluentui/web-components/avatar.js";import{d as n}from"./udp-fluent-icon2.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.iconVariant="regular"}getIconSize(){var t;if(this.iconSize)return this.iconSize;const e=null!==(t=this.size)&&void 0!==t?t:32;return e<=20?"xs":e<=28?"sm":e<=48?"md":"lg"}getImageBorderRadius(){var t;if("square"!==this.shape)return"";const e=null!==(t=this.size)&&void 0!==t?t:32;return e<=24?"2px":e<=48?"4px":e<=72?"6px":"8px"}render(){const t=this.getImageBorderRadius();return a(s,{key:"0af87d484918f9a909b8aee8b20f107585338920"},a("fluent-avatar",{key:"971a0edc9169ce5c97160211ba76698af978f8c8",active:this.active,shape:this.shape,appearance:this.appearance,size:this.size,color:this.color,name:this.name,initials:this.initials},this.src?a("img",{src:this.src,alt:this.alt,style:Object.assign({objectFit:"cover"},t?{borderRadius:t}:{})}):this.iconName?a("udp-fluent-icon",{name:this.iconName,variant:this.iconVariant,size:this.getIconSize()}):null,a("slot",{key:"a6467a06f9e48f3bfc5b3caafcbb8ae39c06b721",name:"badge",slot:"badge"})))}static get style(){return":host{display:inline-flex;align-items:center;vertical-align:middle}"}},[257,"udp-fluent-avatar",{active:[1],shape:[1],appearance:[1],size:[2],color:[1],name:[1],src:[1],initials:[1],alt:[1],iconName:[1,"icon-name"],iconVariant:[1,"icon-variant"],iconSize:[1,"icon-size"]}]);function c(){"undefined"!=typeof customElements&&["udp-fluent-avatar","udp-fluent-icon"].forEach((t=>{switch(t){case"udp-fluent-avatar":customElements.get(i(t))||customElements.define(i(t),r);break;case"udp-fluent-icon":customElements.get(i(t))||n()}}))}export{r as U,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,d as o,t as n}from"./index2.js";import"@fluentui/web-components/checkbox.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as a}from"./udp-fluent-icon2.js";import{d as l}from"./udp-text2.js";import{d}from"./udp-tooltip2.js";const
|
|
1
|
+
import{p as e,H as t,c as s,h as i,d as o,t as n}from"./index2.js";import"@fluentui/web-components/checkbox.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as a}from"./udp-fluent-icon2.js";import{d as l}from"./udp-text2.js";import{d as c}from"./udp-tooltip2.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=s(this,"valueChanged",7),this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.shape="square",this.controlSize="medium",this.autofocus=!1,this.labelPosition="after",this.includeErrorPadding=!0,this.handleChange=e=>{e.stopPropagation(),this.valueChanged.emit(e.target.checked)},this.handleLabelClick=()=>{!this.disabled&&this.internalCheckbox&&this.internalCheckbox.click()}}componentDidRender(){this.internalCheckbox&&this.internalCheckbox.toggleAttribute("disabled",this.disabled)}render(){const e=!!this.error,t=this.error||this.hint;return i(o,{key:"5935d2466eb58d8f91aee016525648b75ce89f84"},i("fluent-field",{key:"a4afddeb7489f0ee2726edbc4574def553aeaaf6","label-position":this.labelPosition,class:{"no-label":!this.label,"no-message":!t&&!this.includeErrorPadding}},i("fluent-label",{key:"6965d0311c254a3fc66c4faebe80d4ba43398c48",slot:"label",disabled:this.disabled,onClick:this.handleLabelClick},this.label,this.popupHint&&i("udp-tooltip",{key:"1899850c5c2fadaf5d36ee51c8e916da50d6e4c6",content:this.popupHint,positioning:"above"},i("udp-fluent-icon",{key:"30812527d10ffebec8b87d5c75d954d0126043c5",name:"info",size:"xs",class:"popup-hint-icon"}))),i("fluent-checkbox",{key:"158cb4cb4a1932385c865119060c8532b59c03e7",ref:e=>this.internalCheckbox=e,slot:"input",name:this.name,checked:this.checked,indeterminate:this.indeterminate,disabled:this.disabled,shape:this.shape,size:this.controlSize,autofocus:this.autofocus,onChange:this.handleChange}),i("udp-text",{key:"4fcaf9ebe4c0c0d60150d66382f88b2774600c64",slot:"message",variant:"caption1",class:{message:!0,error:e,includeErrorPadding:this.includeErrorPadding}},t)))}static get delegatesFocus(){return!0}get el(){return this}static get style(){return".message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-field.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}fluent-label{cursor:pointer}:host([disabled]) fluent-label{cursor:default}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-field[label-position='before']{align-items:start}"}},[17,"udp-fluent-checkbox",{checked:[4],name:[1],indeterminate:[4],disabled:[4],shape:[1],controlSize:[1,"control-size"],autofocus:[4],label:[1],labelPosition:[1,"label-position"],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"]}]);function r(){"undefined"!=typeof customElements&&["udp-fluent-checkbox","udp-fluent-icon","udp-text","udp-tooltip"].forEach((e=>{switch(e){case"udp-fluent-checkbox":customElements.get(n(e))||customElements.define(n(e),d);break;case"udp-fluent-icon":customElements.get(n(e))||a();break;case"udp-text":customElements.get(n(e))||l();break;case"udp-tooltip":customElements.get(n(e))||c()}}))}export{d as U,r as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as o,h as
|
|
1
|
+
import{p as e,H as t,c as o,h as s,d as a,t as n}from"./index2.js";import"@fluentui/web-components/dialog.js";import"@fluentui/web-components/dialog-body.js";import{d}from"./udp-flexbox2.js";import{d as i}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as u}from"./udp-fluent-icon-button2.js";import{d as c}from"./udp-spinner2.js";const f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogCloseEvent=o(this,"dialogClose",7),this.open=!1,this.dialogTitle="",this.showHeaderCloseButton=!0,this.maxHeight="300px",this.type="modal",this.handleToggle=e=>{var t;e.stopPropagation(),"closed"===(null===(t=e.detail)||void 0===t?void 0:t.newState)&&this.dialogCloseEvent.emit()},this.setDialogRef=e=>{this.dialogRef=e}}handleOpenChange(e){var t,o;e?null===(t=this.dialogRef)||void 0===t||t.show():null===(o=this.dialogRef)||void 0===o||o.hide()}componentDidLoad(){var e;this.open&&(null===(e=this.dialogRef)||void 0===e||e.show())}render(){return s(a,{key:"ba65bbcd29ad4839cc5221b736cc79df42825bb0",style:{"--dialog-max-height":this.maxHeight}},s("fluent-dialog",{key:"4d84a1fe555e4b82bf336fa2038d5b02499c3a7e",ref:this.setDialogRef,type:this.type,onToggle:this.handleToggle},s("fluent-dialog-body",{key:"29dd6a9472fa56d7ea01b3fd6ec92dc22bcf8ac6"},s("slot",{key:"5601346d02cc72cb6e602cd95e99b33b4863987c",name:"header",slot:"title"},this.dialogTitle&&s("udp-fluent-text",{key:"4dae89fdd1a89de136e62a944ce672d863de3798"},this.dialogTitle)),this.showHeaderCloseButton&&s("udp-fluent-icon-button",{key:"aaf4bd18e466e4fb4994565425568d8060322cb2",slot:"close",appearance:"subtle",iconName:"dismiss",ariaLabel:"Close Dialog"}),s("div",{key:"cc04024d8235d927f45c9ff4f18eadd952726e36",class:"dialog-content"},s("slot",{key:"49eac8bab21d0b4630b8e417a7b0aec1f081b69f"})),s("udp-flexbox",{key:"e6fd4bf61f17f913e7fec73f94492b26ba75e30f",slot:"action",direction:"row"},s("slot",{key:"7f59e6068c3642aaaf76c187540236a5044b43ef",name:"action"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return":host{display:block}fluent-dialog::part(dialog){outline:none}.dialog-content{max-height:var(--dialog-max-height, 300px);overflow-y:auto;margin:-2px;padding:2px}"}},[257,"udp-fluent-dialog",{open:[4],dialogTitle:[1,"dialog-title"],showHeaderCloseButton:[4,"show-header-close-button"],maxHeight:[1,"max-height"],type:[1]},void 0,{open:[{handleOpenChange:0}]}]);function p(){"undefined"!=typeof customElements&&["udp-fluent-dialog","udp-flexbox","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner"].forEach((e=>{switch(e){case"udp-fluent-dialog":customElements.get(n(e))||customElements.define(n(e),f);break;case"udp-flexbox":customElements.get(n(e))||d();break;case"udp-fluent-button":customElements.get(n(e))||i();break;case"udp-fluent-icon":customElements.get(n(e))||l();break;case"udp-fluent-icon-button":customElements.get(n(e))||u();break;case"udp-spinner":customElements.get(n(e))||c()}}))}export{f as U,p as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as r,h as o,d as t,t as a}from"./index2.js";import"@fluentui/web-components/button.js";import{a as s}from"./icon-size-helpers.js";import{d as n}from"./udp-fluent-button2.js";import{d as i}from"./udp-fluent-icon2.js";import{d as l}from"./udp-spinner2.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.iconVariant="regular",this.appearance="secondary",this.shape="circular",this.size="medium",this.disabled=!1,this.loading=!1,this.disabledFocusable=!1,this.fillOnHover=!1,this.isHovered=!1}render(){const e=this.fillOnHover&&this.isHovered,r=e?"filled":this.iconVariant,a=e?"var(--colorBrandForeground1)":this.iconColor;return o(t,{key:"
|
|
1
|
+
import{p as e,H as r,h as o,d as t,t as a}from"./index2.js";import"@fluentui/web-components/button.js";import{a as s}from"./icon-size-helpers.js";import{d as n}from"./udp-fluent-button2.js";import{d as i}from"./udp-fluent-icon2.js";import{d as l}from"./udp-spinner2.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.iconVariant="regular",this.appearance="secondary",this.shape="circular",this.size="medium",this.disabled=!1,this.loading=!1,this.disabledFocusable=!1,this.fillOnHover=!1,this.isHovered=!1}render(){const e=this.fillOnHover&&this.isHovered,r=e?"filled":this.iconVariant,a=e?"var(--colorBrandForeground1)":this.iconColor;return o(t,{key:"926b721df2a83c7224caeaf9b6eac7c45396bfa9",exportparts:"button",onMouseEnter:()=>this.isHovered=!0,onMouseLeave:()=>this.isHovered=!1},o("udp-fluent-button",{key:"ebebed1ec6b26285dff7f983a00f61fa3c72c847",appearance:this.appearance,disabled:this.disabled,"disabled-focusable":this.disabledFocusable,loading:this.loading,shape:this.shape,size:this.size,iconOnly:!0,"aria-label":this.ariaLabel,tabIndex:this.tabIndex},o("udp-fluent-icon",{key:"77951a84585e8beef552f3b8f6f1db1fa31961cc",name:this.iconName,size:s(this.size,"standard"),variant:r,color:a})))}static get style(){return':host{display:inline-block;--_hover-overlay:color-mix(in srgb, currentColor 6%, transparent);--_pressed-overlay:color-mix(in srgb, currentColor 12%, transparent);--colorNeutralBackground1Hover:color-mix(in srgb, currentColor 6%, var(--colorNeutralBackground1));--colorNeutralBackground1Pressed:color-mix(in srgb, currentColor 12%, var(--colorNeutralBackground1));--colorSubtleBackground:transparent;--colorSubtleBackgroundHover:var(--_hover-overlay);--colorSubtleBackgroundPressed:var(--_pressed-overlay);--colorTransparentBackgroundHover:var(--_hover-overlay);--colorTransparentBackgroundPressed:var(--_pressed-overlay)}:host([appearance="transparent"]),:host([appearance="subtle"]){--colorNeutralStroke1:transparent;--colorNeutralStroke1Hover:transparent;--colorNeutralStroke1Pressed:transparent;--colorNeutralStroke1Selected:transparent}'}},[1,"udp-fluent-icon-button",{iconName:[1,"icon-name"],iconVariant:[1,"icon-variant"],appearance:[513],shape:[1],size:[1],disabled:[4],loading:[516],disabledFocusable:[4,"disabled-focusable"],ariaLabel:[1,"aria-label"],fillOnHover:[4,"fill-on-hover"],iconColor:[1,"icon-color"],tabIndex:[2,"tab-index"],isHovered:[32]}]);function u(){"undefined"!=typeof customElements&&["udp-fluent-icon-button","udp-fluent-button","udp-fluent-icon","udp-spinner"].forEach((e=>{switch(e){case"udp-fluent-icon-button":customElements.get(a(e))||customElements.define(a(e),c);break;case"udp-fluent-button":customElements.get(a(e))||n();break;case"udp-fluent-icon":customElements.get(a(e))||i();break;case"udp-spinner":customElements.get(a(e))||l()}}))}export{c as U,u as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as n,h as a,d as t,t as i}from"./index2.js";const r={xs:16,sm:20,md:24,lg:28},o={add:{name:"add"},add32:{name:"add"},addAlt:{name:"add-circle"},addFilled:{name:"add",variant:"filled"},arrowsHorizontal16:{name:"arrow-horizontal"},arrowRight16:{name:"arrow-right"},arrowLeft16:{name:"arrow-left"},attachment:{name:"attach"},box:{name:"box"},close16:{name:"dismiss"},close24:{name:"dismiss"},close32:{name:"dismiss"},closeFilled16:{name:"dismiss",variant:"filled"},closeOutlined16:{name:"dismiss-circle"},checkMark:{name:"checkmark"},checkMark24:{name:"checkmark"},checkMark32:{name:"checkmark"},checkMarkOutlined:{name:"checkmark-circle"},chevronLeft16:{name:"chevron-left"},chevronRight16:{name:"chevron-right"},chevronDown:{name:"chevron-down"},dashboard:{name:"home"},document:{name:"document"},documentAdd:{name:"document-add"},documentAttachment:{name:"attach"},documentPdf:{name:"document-pdf"},documentAudio:{name:"document"},documentVideo:{name:"video"},draggable:{name:"drag"},edit:{name:"edit"},export:{name:"export"},flag:{name:"flag"},information:{name:"info"},information32:{name:"info"},link:{name:"link"},location:{name:"location"},opportunities:{name:"lightbulb"},overflowMenuVertical:{name:"more-vertical"},overflowMenuVertical32:{name:"more-vertical"},return16:{name:"arrow-return"},save:{name:"save"},settings:{name:"settings"},subtract:{name:"subtract"},subtractAlt:{name:"subtract"},subtractFilled:{name:"subtract",variant:"filled"},trashCan:{name:"delete"},user:{name:"person"},view:{name:"eye"},wizard:{name:"apps-list"},workorder:{name:"task-list"},arrowUp:{name:"arrow-up"},arrowDown:{name:"arrow-down"},copy:{name:"copy"},star:{name:"star"},warning:{name:"warning"},warning32:{name:"warning"},warningAlt:{name:"warning"},warningAlt32:{name:"warning"},time:{name:"clock"},text:{name:"text-paragraph"},list:{name:"list"},calendar:{name:"calendar"},formTextField:{name:"text-font"},formTextArea:{name:"text-paragraph"},formNumberField:{name:"number"},formDateField:{name:"calendar"},formCheckbox:{name:"checkbox-checked"},formFileUpload:{name:"cloud-upload"},formRadioButton:{name:"radio-button"},formHiddenField:{name:"eye-off"},formTimeField:{name:"clock"},formDateTimeField:{name:"calendar"},formMultiSelectField:{name:"list"},formSingleSelectField:{name:"list"},dataTable:{name:"table"},fitToWidth:{name:"fit-width"},search:{name:"search"},reset:{name:"arrow-reset"},column:{name:"column"},hideColumn:{name:"column"},rotate:{name:"arrow-rotate"},lock:{name:"lock"},pause:{name:"pause"},filter:{name:"filter"},relationshipDiagram:{name:"diagram"},unlock:{name:"unlock"},send:{name:"send"},email:{name:"mail"},migrateAlt:{name:"panel-left-expand"},checkboxCheckedFilled:{name:"checkbox-checked",variant:"filled"},checkbox:{name:"checkbox-unchecked"},zip:{name:"archive"},image:{name:"image"},xls:{name:"table"},ppt:{name:"slide-text"},override:{name:"arrow-swap"},undo:{name:"arrow-return"},table:{name:"table"},catalog:{name:"folder"}};let m=null;const l=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.variant="regular",this.size="md",this.svgContent=null,this.resolveGeneration=0}componentWillLoad(){return this.resolveIcon()}onNameChange(){this.resolveIcon()}onSizeChange(){this.resolveIcon()}onVariantChange(){this.resolveIcon()}async resolveIcon(){const e=++this.resolveGeneration;if(!this.name)return void(this.svgContent=null);const n=await(null!=m?m:m=import("./fluent-icons.js"));if(e!==this.resolveGeneration)return;const a=this.resolveIconKey(n.iconMetadata);if(!a)return void(this.svgContent=null);let t=n.fluentIcons[a];if(!t)return console.warn(`[udp-fluent-icon] Icon "${a}" not found in generated icons.`),void(this.svgContent=null);if(t.startsWith("data:image/svg+xml;base64,")){const e=t.split(",")[1];try{t=atob(e)}catch(e){return console.error("[udp-fluent-icon] Could not decode SVG icon",e),void(this.svgContent=null)}}this.svgContent=t}resolveEffectiveProps(){var e;const n=function(e){if(!e)return null;const n=o[e];return void 0===n?null:n}(this.name);return n?{name:n.name,variant:null!==(e=n.variant)&&void 0!==e?e:this.variant}:{name:this.name,variant:this.variant}}resolveIconKey(e){var n,a;const{name:t,variant:i}=this.resolveEffectiveProps(),o=e[t];if(!o)return console.warn(`[udp-fluent-icon] Icon "${this.name}" not found in registry. Did you add it to icon-registry.json and run "pnpm generate:icons"?`),null;const m=r[this.size],l=null!==(n=o.sizes)&&void 0!==n?n:[],c=null!==(a=o.variants)&&void 0!==a?a:[],s=l.includes(m)?m:this.findClosestSize(l,m);let d=i;return c.includes(i)||(console.warn(`[udp-fluent-icon] Variant "${i}" not available for "${this.name}". Using "regular".`),d="regular"),`${o.baseName}_${s}_${d}`}findClosestSize(e,n){return e.reduce(((e,a)=>{const t=Math.abs(e-n),i=Math.abs(a-n);return i<t||i===t&&a>e?a:e}))}render(){const e={"--udp-icon-size":`${r[this.size]}px`};return this.color&&(e.color=this.color),a(t,{key:"
|
|
1
|
+
import{p as e,H as n,h as a,d as t,t as i}from"./index2.js";const r={xs:16,sm:20,md:24,lg:28},o={add:{name:"add"},add32:{name:"add"},addAlt:{name:"add-circle"},addFilled:{name:"add",variant:"filled"},arrowsHorizontal16:{name:"arrow-horizontal"},arrowRight16:{name:"arrow-right"},arrowLeft16:{name:"arrow-left"},attachment:{name:"attach"},box:{name:"box"},close16:{name:"dismiss"},close24:{name:"dismiss"},close32:{name:"dismiss"},closeFilled16:{name:"dismiss",variant:"filled"},closeOutlined16:{name:"dismiss-circle"},checkMark:{name:"checkmark"},checkMark24:{name:"checkmark"},checkMark32:{name:"checkmark"},checkMarkOutlined:{name:"checkmark-circle"},chevronLeft16:{name:"chevron-left"},chevronRight16:{name:"chevron-right"},chevronDown:{name:"chevron-down"},dashboard:{name:"home"},document:{name:"document"},documentAdd:{name:"document-add"},documentAttachment:{name:"attach"},documentPdf:{name:"document-pdf"},documentAudio:{name:"document"},documentVideo:{name:"video"},draggable:{name:"drag"},edit:{name:"edit"},export:{name:"export"},flag:{name:"flag"},information:{name:"info"},information32:{name:"info"},link:{name:"link"},location:{name:"location"},opportunities:{name:"lightbulb"},overflowMenuVertical:{name:"more-vertical"},overflowMenuVertical32:{name:"more-vertical"},return16:{name:"arrow-return"},save:{name:"save"},settings:{name:"settings"},subtract:{name:"subtract"},subtractAlt:{name:"subtract"},subtractFilled:{name:"subtract",variant:"filled"},trashCan:{name:"delete"},user:{name:"person"},view:{name:"eye"},wizard:{name:"apps-list"},workorder:{name:"task-list"},arrowUp:{name:"arrow-up"},arrowDown:{name:"arrow-down"},copy:{name:"copy"},star:{name:"star"},warning:{name:"warning"},warning32:{name:"warning"},warningAlt:{name:"warning"},warningAlt32:{name:"warning"},time:{name:"clock"},text:{name:"text-paragraph"},list:{name:"list"},calendar:{name:"calendar"},formTextField:{name:"text-font"},formTextArea:{name:"text-paragraph"},formNumberField:{name:"number"},formDateField:{name:"calendar"},formCheckbox:{name:"checkbox-checked"},formFileUpload:{name:"cloud-upload"},formRadioButton:{name:"radio-button"},formHiddenField:{name:"eye-off"},formTimeField:{name:"clock"},formDateTimeField:{name:"calendar"},formMultiSelectField:{name:"list"},formSingleSelectField:{name:"list"},dataTable:{name:"table"},fitToWidth:{name:"fit-width"},search:{name:"search"},reset:{name:"arrow-reset"},column:{name:"column"},hideColumn:{name:"column"},rotate:{name:"arrow-rotate"},lock:{name:"lock"},pause:{name:"pause"},filter:{name:"filter"},relationshipDiagram:{name:"diagram"},unlock:{name:"unlock"},send:{name:"send"},email:{name:"mail"},migrateAlt:{name:"panel-left-expand"},checkboxCheckedFilled:{name:"checkbox-checked",variant:"filled"},checkbox:{name:"checkbox-unchecked"},zip:{name:"archive"},image:{name:"image"},xls:{name:"table"},ppt:{name:"slide-text"},override:{name:"arrow-swap"},undo:{name:"arrow-return"},table:{name:"table"},catalog:{name:"folder"}};let m=null;const l=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.variant="regular",this.size="md",this.svgContent=null,this.resolveGeneration=0}componentWillLoad(){return this.resolveIcon()}onNameChange(){this.resolveIcon()}onSizeChange(){this.resolveIcon()}onVariantChange(){this.resolveIcon()}async resolveIcon(){const e=++this.resolveGeneration;if(!this.name)return void(this.svgContent=null);const n=await(null!=m?m:m=import("./fluent-icons.js"));if(e!==this.resolveGeneration)return;const a=this.resolveIconKey(n.iconMetadata);if(!a)return void(this.svgContent=null);let t=n.fluentIcons[a];if(!t)return console.warn(`[udp-fluent-icon] Icon "${a}" not found in generated icons.`),void(this.svgContent=null);if(t.startsWith("data:image/svg+xml;base64,")){const e=t.split(",")[1];try{t=atob(e)}catch(e){return console.error("[udp-fluent-icon] Could not decode SVG icon",e),void(this.svgContent=null)}}this.svgContent=t}resolveEffectiveProps(){var e;const n=function(e){if(!e)return null;const n=o[e];return void 0===n?null:n}(this.name);return n?{name:n.name,variant:null!==(e=n.variant)&&void 0!==e?e:this.variant}:{name:this.name,variant:this.variant}}resolveIconKey(e){var n,a;const{name:t,variant:i}=this.resolveEffectiveProps(),o=e[t];if(!o)return console.warn(`[udp-fluent-icon] Icon "${this.name}" not found in registry. Did you add it to icon-registry.json and run "pnpm generate:icons"?`),null;const m=r[this.size],l=null!==(n=o.sizes)&&void 0!==n?n:[],c=null!==(a=o.variants)&&void 0!==a?a:[],s=l.includes(m)?m:this.findClosestSize(l,m);let d=i;return c.includes(i)||(console.warn(`[udp-fluent-icon] Variant "${i}" not available for "${this.name}". Using "regular".`),d="regular"),`${o.baseName}_${s}_${d}`}findClosestSize(e,n){return e.reduce(((e,a)=>{const t=Math.abs(e-n),i=Math.abs(a-n);return i<t||i===t&&a>e?a:e}))}render(){const e={"--udp-icon-size":`${r[this.size]}px`};return this.color&&(e.color=this.color),a(t,{key:"08c7564690ab3710735133112154318b2909bd95",style:e},this.svgContent&&a("div",{key:"3d7c4ed8f026876f2331de8bb47cbd2aadc9da40",class:"icon-inner",innerHTML:this.svgContent,role:"img","aria-label":this.name}))}static get watchers(){return{name:[{onNameChange:0}],size:[{onSizeChange:0}],variant:[{onVariantChange:0}]}}static get style(){return":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:var(--udp-icon-size, 24px);height:var(--udp-icon-size, 24px)}.icon-inner{display:inline-flex;align-items:center;justify-content:center;line-height:0;width:100%;height:100%;animation:var(--udp-icon-animation, none);transform-origin:var(--udp-icon-transform-origin, center center)}.icon-inner svg{fill:currentColor;display:block;width:100%;height:100%}@keyframes udp-icon-spin{to{transform:rotate(360deg)}}"}},[1,"udp-fluent-icon",{name:[1],variant:[1],size:[1],color:[1],svgContent:[32]},void 0,{name:[{onNameChange:0}],size:[{onSizeChange:0}],variant:[{onVariantChange:0}]}]);function c(){"undefined"!=typeof customElements&&["udp-fluent-icon"].forEach((e=>{"udp-fluent-icon"===e&&(customElements.get(i(e))||customElements.define(i(e),l))}))}export{l as U,c as d}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "../stencil-library/stencil-library.css";
|
|
2
|
-
import{p as e,H as t,h as s,d,t as i}from"./index2.js";import"@fluentui/web-components/image.js";const
|
|
2
|
+
import{p as e,H as t,h as s,d,t as i}from"./index2.js";import"@fluentui/web-components/image.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.block=!1,this.bordered=!1,this.shadow=!1}render(){return s(d,{key:"322161c1df0ebd8a52ac77e9106e8250f065d560"},s("fluent-image",{key:"5629618de41e51052c18b6f2264b7f79adf42a7e",block:this.block,bordered:this.bordered,shadow:this.shadow,fit:this.fit,shape:this.shape},s("slot",{key:"641c7116bf42bdc57404dcfdf6f794c8abdb5c91"})))}},[257,"udp-fluent-image",{block:[4],bordered:[4],shadow:[4],fit:[1],shape:[1]}]),f=o,n=function(){"undefined"!=typeof customElements&&["udp-fluent-image"].forEach((e=>{"udp-fluent-image"===e&&(customElements.get(i(e))||customElements.define(i(e),o))}))};export{f as UdpFluentImage,n as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,d as o,t as
|
|
1
|
+
import{p as e,H as t,c as s,h as i,d as o,t as a}from"./index2.js";import"@fluentui/web-components/switch.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as n}from"./udp-fluent-icon2.js";import{d as l}from"./udp-text2.js";import{d}from"./udp-tooltip2.js";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=s(this,"valueChanged",7),this.checked=!1,this.disabled=!1,this.labelPosition="after",this.includeErrorPadding=!0,this.handleChange=e=>{e.stopPropagation(),this.valueChanged.emit(e.target.checked)},this.handleLabelClick=()=>{!this.disabled&&this.internalSwitch&&this.internalSwitch.click()}}componentDidRender(){this.internalSwitch&&this.internalSwitch.toggleAttribute("disabled",this.disabled)}render(){const e=!!this.error,t=this.error||this.hint;return i(o,{key:"b33ca1ff48aabd27b5e1a14de682276a97836ba1"},i("fluent-field",{key:"3c517a48e6052b4850b785e530bc9c080f58a8d5","label-position":this.labelPosition,class:{"no-label":!this.label,"no-message":!t&&!this.includeErrorPadding}},i("fluent-label",{key:"c8baa2710ade264cd06b5473b09b71b7c732aef8",slot:"label",onClick:this.handleLabelClick},this.label,this.popupHint&&i("udp-tooltip",{key:"1ef2713802ea6fdee2f66df59e225e477919fe0a",content:this.popupHint,positioning:"above"},i("udp-fluent-icon",{key:"51000fc82c56b0921b6d5538a337515bd9ccf87d",name:"info",size:"xs",class:"popup-hint-icon"}))),i("fluent-switch",{key:"035acc24987fdab47ee9d1013af0f3f6207cce25",slot:"input",name:this.name,checked:this.checked,disabled:this.disabled,onChange:this.handleChange,ref:e=>this.internalSwitch=e}),i("udp-text",{key:"14ad064b04ba8fa033a723b48c4e394871724b47",slot:"message",variant:"caption1",class:{message:!0,error:e,includeErrorPadding:this.includeErrorPadding}},t)))}static get delegatesFocus(){return!0}static get style(){return".message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-field.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}fluent-field[label-position='before']{align-items:start}fluent-label{cursor:pointer}:host([disabled]) fluent-label{cursor:default}"}},[17,"udp-fluent-switch",{checked:[4],name:[1],disabled:[4],label:[1],labelPosition:[1,"label-position"],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"]}]);function c(){"undefined"!=typeof customElements&&["udp-fluent-switch","udp-fluent-icon","udp-text","udp-tooltip"].forEach((e=>{switch(e){case"udp-fluent-switch":customElements.get(a(e))||customElements.define(a(e),r);break;case"udp-fluent-icon":customElements.get(a(e))||n();break;case"udp-text":customElements.get(a(e))||l();break;case"udp-tooltip":customElements.get(a(e))||d()}}))}export{r as U,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,d as n,t as o}from"./index2.js";import"@fluentui/web-components/tooltip.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.delay=200,this.positioning="above"}render(){const e="internal-anchor";return i(n,{key:"
|
|
1
|
+
import{p as e,H as t,h as i,d as n,t as o}from"./index2.js";import"@fluentui/web-components/tooltip.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.delay=200,this.positioning="above"}render(){const e="internal-anchor";return i(n,{key:"bb46b4bdf7dee129c45c96e4bd17a9c878232ec6"},i("div",{key:"0ceac6a12a6d513ee1e4e729cd75dbdba82b440b",id:e,onFocusin:e=>{var t,i;(null===(t=e.target)||void 0===t?void 0:t.matches(":focus-visible"))&&(null===(i=this.tooltipRef)||void 0===i||i.showTooltip(0))},onFocusout:()=>{var e;return null===(e=this.tooltipRef)||void 0===e?void 0:e.hideTooltip(0)}},i("slot",{key:"8dc55ba644793085d4eddca3a2df74b6ed61590f"})),i("fluent-tooltip",{key:"ce2cc6858a33f0ae6fc9a9bc6b7df8bb7dbca74a",ref:e=>this.tooltipRef=e,anchor:e,delay:this.delay,positioning:this.positioning},this.content))}static get style(){return":host{display:inline-flex;align-items:center;vertical-align:middle}#internal-anchor{display:inline-flex;align-items:center}fluent-tooltip{padding-block:5px;white-space:pre-line;}"}},[257,"udp-tooltip",{content:[1],delay:[2],positioning:[1]}]);function d(){"undefined"!=typeof customElements&&["udp-tooltip"].forEach((e=>{"udp-tooltip"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{s as U,d}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-07-
|
|
2
|
+
"timestamp": "2026-07-07T19:29:50",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.41.3",
|
|
@@ -45613,7 +45613,7 @@
|
|
|
45613
45613
|
"encapsulation": "shadow",
|
|
45614
45614
|
"tag": "udp-fluent-avatar",
|
|
45615
45615
|
"readme": "# udp-fluent-avatar\n\n\n",
|
|
45616
|
-
"docs": "",
|
|
45616
|
+
"docs": "Avatar component — shows a user/entity image, initials, or icon.\n\nDefault to `color=\"colorful\"` when it suits the use case — it gives each avatar a distinct, name-derived colour, which helps tell people and entities apart in lists, grids, and other multi-avatar views. A single brand or entity avatar can keep the default colour.",
|
|
45617
45617
|
"docsTags": [],
|
|
45618
45618
|
"usage": {},
|
|
45619
45619
|
"props": [
|
|
@@ -45711,7 +45711,7 @@
|
|
|
45711
45711
|
"mutable": false,
|
|
45712
45712
|
"attr": "color",
|
|
45713
45713
|
"reflectToAttr": false,
|
|
45714
|
-
"docs": "The color when displaying
|
|
45714
|
+
"docs": "The color when displaying an icon or initials. Prefer `\"colorful\"` where it fits the use case — it derives a stable colour from the name so multiple avatars are visually distinct, rather than sharing the single flat default.",
|
|
45715
45715
|
"docsTags": [],
|
|
45716
45716
|
"values": [
|
|
45717
45717
|
{
|
|
@@ -47227,7 +47227,7 @@
|
|
|
47227
47227
|
"encapsulation": "shadow",
|
|
47228
47228
|
"tag": "udp-fluent-checkbox",
|
|
47229
47229
|
"readme": "# udp-fluent-checkbox\n\n\n",
|
|
47230
|
-
"docs": "Checkbox component. Can be used as a standalone component or within udp-field component.",
|
|
47230
|
+
"docs": "Checkbox component. Can be used as a standalone component or within udp-field component.\n\nUse a checkbox for a boolean value submitted with a form's Save/Apply button, and for multi-select lists where each option is independent. For a setting that takes effect immediately when toggled, use a switch instead (Fluent UX guideline).",
|
|
47231
47231
|
"docsTags": [],
|
|
47232
47232
|
"usage": {},
|
|
47233
47233
|
"props": [
|
|
@@ -47929,7 +47929,7 @@
|
|
|
47929
47929
|
"encapsulation": "shadow",
|
|
47930
47930
|
"tag": "udp-fluent-dialog",
|
|
47931
47931
|
"readme": "# udp-fluent-dialog\n\n\n",
|
|
47932
|
-
"docs": "Dialog component.",
|
|
47932
|
+
"docs": "Dialog component.\n\nUse a dialog for a short, focused decision or confirmation — especially destructive or irreversible actions — that the user must resolve before continuing. Keep dialog content minimal; for multi-field editing or longer tasks use a drawer instead (Fluent UX guideline).",
|
|
47933
47933
|
"docsTags": [
|
|
47934
47934
|
{
|
|
47935
47935
|
"name": "slot",
|
|
@@ -50233,7 +50233,7 @@
|
|
|
50233
50233
|
"encapsulation": "shadow",
|
|
50234
50234
|
"tag": "udp-fluent-icon",
|
|
50235
50235
|
"readme": "# udp-fluent-icon\n\n\n",
|
|
50236
|
-
"docs": "Icon renderer component. Uses Fluent UI SVG icons (and optional custom SVGs via the\nregistry's `source: \"custom\"` field).",
|
|
50236
|
+
"docs": "Icon renderer component. Uses Fluent UI SVG icons (and optional custom SVGs via the\nregistry's `source: \"custom\"` field).\n\nIcons are decorative and expose no accessible name — never rely on an icon alone to convey meaning. Pair it with visible text, or set an `ariaLabel` on the interactive control that contains it (e.g. `UdpIconButton`).",
|
|
50237
50237
|
"docsTags": [
|
|
50238
50238
|
{
|
|
50239
50239
|
"name": "example",
|
|
@@ -50536,7 +50536,7 @@
|
|
|
50536
50536
|
"encapsulation": "shadow",
|
|
50537
50537
|
"tag": "udp-fluent-icon-button",
|
|
50538
50538
|
"readme": "# udp-fluent-icon-button\n\n\n",
|
|
50539
|
-
"docs": "Icon button component.",
|
|
50539
|
+
"docs": "Icon button component.\n\nIcon-only — it has no visible text, so `ariaLabel` is required to give the button an accessible name for screen readers (Fluent UX / accessibility guideline).",
|
|
50540
50540
|
"docsTags": [],
|
|
50541
50541
|
"usage": {},
|
|
50542
50542
|
"props": [
|
|
@@ -51013,7 +51013,7 @@
|
|
|
51013
51013
|
"encapsulation": "shadow",
|
|
51014
51014
|
"tag": "udp-fluent-image",
|
|
51015
51015
|
"readme": "# udp-fluent-image\n\n\n",
|
|
51016
|
-
"docs": "",
|
|
51016
|
+
"docs": "Image component — a styling wrapper (fit, shape, border, shadow) around a slotted image.\n\nProvide your own `<img>` in the default slot and put the alt text on it — `<UdpImage><img src=\"…\" alt=\"Company logo\" /></UdpImage>` — using `alt=\"\"` for purely decorative images. There is no `alt` prop: the accessible text belongs on the slotted `<img>`.",
|
|
51017
51017
|
"docsTags": [],
|
|
51018
51018
|
"usage": {},
|
|
51019
51019
|
"props": [
|
|
@@ -54990,7 +54990,7 @@
|
|
|
54990
54990
|
"encapsulation": "shadow",
|
|
54991
54991
|
"tag": "udp-fluent-switch",
|
|
54992
54992
|
"readme": "# udp-fluent-switch\n\n\n",
|
|
54993
|
-
"docs": "Switch component. Can be used standalone or as part of a udp-field.",
|
|
54993
|
+
"docs": "Switch component. Can be used standalone or as part of a udp-field.\n\nUse a switch only for a setting that takes effect the moment it is toggled, with no separate Save or Apply step. If the value is part of a form submitted with a Save/Apply button, use a checkbox instead — a switch wrongly signals that the change has already been applied (Fluent UX guideline).",
|
|
54994
54994
|
"docsTags": [],
|
|
54995
54995
|
"usage": {},
|
|
54996
54996
|
"props": [
|
|
@@ -77916,7 +77916,7 @@
|
|
|
77916
77916
|
"encapsulation": "shadow",
|
|
77917
77917
|
"tag": "udp-tooltip",
|
|
77918
77918
|
"readme": "# udp-fluent-tooltip\n\n\n",
|
|
77919
|
-
"docs": "Tooltip component.",
|
|
77919
|
+
"docs": "Tooltip component.\n\nA tooltip holds brief, supplementary text shown on hover or focus. Never place essential information or interactive content (links, buttons, inputs) in a tooltip — it is not reliably reachable by keyboard or touch and is hidden from many users. Use a popover for rich or interactive content, and put information the user must see inline (Fluent UX / accessibility guideline).",
|
|
77920
77920
|
"docsTags": [
|
|
77921
77921
|
{
|
|
77922
77922
|
"name": "slot",
|