@nvidia-elements/core 2.1.6 → 2.2.1
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/CHANGELOG.md +24 -0
- package/dist/accordion/accordion.d.ts +7 -5
- package/dist/accordion/accordion2.js +4 -4
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group.d.ts +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar-group2.js.map +1 -1
- package/dist/avatar/avatar.d.ts +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/avatar/avatar2.js.map +1 -1
- package/dist/badge/badge.d.ts +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/badge/badge2.js.map +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +81 -45
- package/dist/bundles/index.js +2 -2
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card.d.ts +3 -1
- package/dist/card/card2.js +4 -4
- package/dist/card/card2.js.map +1 -1
- package/dist/chat-message/chat-message.d.ts +3 -1
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/chat-message/chat-message2.js.map +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button.d.ts +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/custom-elements-jsx.d.ts +1340 -982
- package/dist/custom-elements-vue.d.ts +1048 -859
- package/dist/custom-elements.json +1382 -1948
- package/dist/data.html.json +330 -510
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog.d.ts +1 -1
- package/dist/dialog/dialog2.js +1 -1
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer.d.ts +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/drawer/drawer2.js.map +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown.d.ts +1 -0
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown/dropdown2.js.map +1 -1
- package/dist/dropdown-group/dropdown-group.d.ts +1 -2
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/dropzone.d.ts +6 -3
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number.d.ts +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-number/format-number2.js.map +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message.d.ts +2 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/forms/control-message/control-message2.js.map +1 -1
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell.d.ts +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/cell/cell2.js.map +1 -1
- package/dist/grid/column/column.d.ts +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/footer/footer.d.ts +2 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/footer/footer2.js.map +1 -1
- package/dist/grid/grid.d.ts +1 -1
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder.d.ts +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js.map +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/services/i18n.service.d.ts +14 -0
- package/dist/internal/services/i18n.service.js +15 -1
- package/dist/internal/services/i18n.service.js.map +1 -1
- package/dist/internal/types/index.d.ts +3 -3
- package/dist/internal/types/index.js.map +1 -1
- package/dist/logo/logo.d.ts +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/logo/logo2.js.map +1 -1
- package/dist/menu/menu-item.d.ts +2 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu-item2.js.map +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification.d.ts +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/notification/notification2.js.map +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer.d.ts +1 -0
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js.map +1 -1
- package/dist/page/page-panel/page-panel-header.d.ts +1 -0
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js.map +1 -1
- package/dist/page/page-panel/page-panel.d.ts +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page-panel/page-panel2.js.map +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.d.ts +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/page-loader/page-loader2.js.map +1 -1
- package/dist/pagination/pagination.d.ts +4 -3
- package/dist/pagination/pagination2.js +5 -2
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input.d.ts +2 -0
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton.d.ts +2 -2
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/skeleton/skeleton2.js.map +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps.d.ts +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/steps/steps2.js.map +1 -1
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs.d.ts +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/tag.d.ts +1 -1
- package/dist/tag/tag2.js +1 -1
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast.d.ts +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toast/toast2.js.map +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip.d.ts +1 -0
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toggletip/toggletip2.js.map +1 -1
- package/dist/toolbar/toolbar.d.ts +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/tooltip.d.ts +2 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tooltip/tooltip2.js.map +1 -1
- package/dist/tree/tree-node.d.ts +3 -0
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +5 -5
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
import type { DefineComponent } from "vue";
|
|
2
2
|
|
|
3
|
-
type AccordionHeaderProps = {
|
|
4
|
-
/** */
|
|
5
|
-
slot?: string;
|
|
6
|
-
};
|
|
3
|
+
type AccordionHeaderProps = {};
|
|
7
4
|
|
|
8
5
|
type AccordionContentProps = {};
|
|
9
6
|
|
|
10
7
|
type AccordionProps = {
|
|
11
8
|
/** Enables updating internal string values for internationalization. */
|
|
12
9
|
i18n?: string;
|
|
13
|
-
/**
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
- `inset` Element container optimizes for embedding or inset placement inside another containing element. */
|
|
17
|
-
container?: "flat" | "inset" | "default";
|
|
10
|
+
/** Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation. */
|
|
11
|
+
container?: "flat" | "inset" | undefined;
|
|
18
12
|
/** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
|
|
19
13
|
- `true` The associated content expands and becomes visible to the user.
|
|
20
14
|
|
|
@@ -26,19 +20,16 @@ type AccordionProps = {
|
|
|
26
20
|
- `false` The element has an enabled state and accepts interaction. */
|
|
27
21
|
disabled?: boolean;
|
|
28
22
|
/** Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) */
|
|
29
|
-
|
|
23
|
+
behaviorExpand?: boolean;
|
|
30
24
|
};
|
|
31
25
|
|
|
32
26
|
type AccordionGroupProps = {
|
|
33
27
|
/** Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) */
|
|
34
|
-
|
|
28
|
+
behaviorExpand?: boolean;
|
|
35
29
|
/** Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time */
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
- `inset` Element container optimizes for embedding or inset placement inside another containing element. */
|
|
41
|
-
container?: "flat" | "inset" | "default";
|
|
30
|
+
behaviorExpandSingle?: boolean;
|
|
31
|
+
/** Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation. */
|
|
32
|
+
container?: "flat" | "inset" | undefined;
|
|
42
33
|
};
|
|
43
34
|
|
|
44
35
|
type AlertGroupProps = {
|
|
@@ -50,10 +41,9 @@ type AlertGroupProps = {
|
|
|
50
41
|
- `success` Represents positive outcomes, confirmations, or constructive actions.
|
|
51
42
|
|
|
52
43
|
- `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */
|
|
53
|
-
status?: "accent" | "warning" | "success" | "danger" |
|
|
54
|
-
/**
|
|
55
|
-
|
|
56
|
-
prominence?: "emphasis" | "default";
|
|
44
|
+
status?: "accent" | "warning" | "success" | "danger" | undefined;
|
|
45
|
+
/** Determines the visual prominence or weight, emphasis applies banner style alerts */
|
|
46
|
+
prominence?: "emphasis" | undefined;
|
|
57
47
|
/** Defines a base color from the theme color palette */
|
|
58
48
|
color?:
|
|
59
49
|
| "red-cardinal"
|
|
@@ -78,13 +68,12 @@ type AlertGroupProps = {
|
|
|
78
68
|
| "lime-pear"
|
|
79
69
|
| "yellow-nova"
|
|
80
70
|
| "brand-green";
|
|
81
|
-
/**
|
|
82
|
-
|
|
83
|
-
container?: "full" | "default";
|
|
71
|
+
/** Determines the container bounds of the element */
|
|
72
|
+
container?: "full" | undefined;
|
|
84
73
|
};
|
|
85
74
|
|
|
86
75
|
type AlertProps = {
|
|
87
|
-
/**
|
|
76
|
+
/** Defines visual treatment to represent a ongoing task or support status.
|
|
88
77
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
89
78
|
|
|
90
79
|
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
@@ -131,7 +120,7 @@ type AlertProps = {
|
|
|
131
120
|
| "unknown"
|
|
132
121
|
| "ignored"
|
|
133
122
|
| "muted"
|
|
134
|
-
|
|
|
123
|
+
| undefined;
|
|
135
124
|
/** Indicates whether the user can dismiss or close the element.
|
|
136
125
|
- `true` The element displays a close control and the user can dismiss it.
|
|
137
126
|
|
|
@@ -139,7 +128,6 @@ type AlertProps = {
|
|
|
139
128
|
closable?: boolean;
|
|
140
129
|
/** Enables updating internal string values for internationalization. */
|
|
141
130
|
i18n?: string;
|
|
142
|
-
|
|
143
131
|
/** Dispatched when the alert closes within an alert group. */
|
|
144
132
|
onclose?: (e: CustomEvent<never>) => void;
|
|
145
133
|
};
|
|
@@ -147,13 +135,13 @@ type AlertProps = {
|
|
|
147
135
|
type AvatarGroupProps = {};
|
|
148
136
|
|
|
149
137
|
type AvatarProps = {
|
|
150
|
-
/**
|
|
138
|
+
/** Sets size of the avatar component. Update size through the `width + height` css props as an alternative.
|
|
151
139
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
152
140
|
|
|
153
141
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
154
142
|
|
|
155
143
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
156
|
-
size?: "sm" | "md" | "lg" | "xs" |
|
|
144
|
+
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
157
145
|
/** Defines a base color from the theme color palette */
|
|
158
146
|
color?:
|
|
159
147
|
| "red-cardinal"
|
|
@@ -181,7 +169,7 @@ type AvatarProps = {
|
|
|
181
169
|
};
|
|
182
170
|
|
|
183
171
|
type BadgeProps = {
|
|
184
|
-
/**
|
|
172
|
+
/** Visual treatment to represent a ongoing task, support status.
|
|
185
173
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
186
174
|
|
|
187
175
|
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
@@ -251,12 +239,10 @@ type BadgeProps = {
|
|
|
251
239
|
| "lime-pear"
|
|
252
240
|
| "yellow-nova"
|
|
253
241
|
| "brand-green";
|
|
254
|
-
/**
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
- `emphasis` Increases visual weight to draw attention and highlight important elements. */
|
|
259
|
-
prominence?: "emphasis" | "default";
|
|
242
|
+
/** Determines the container styles of component. Flat suits nesting within other containers. */
|
|
243
|
+
container?: "flat" | undefined;
|
|
244
|
+
/** Determines the visual prominence or weight */
|
|
245
|
+
prominence?: "emphasis" | undefined;
|
|
260
246
|
/** Enables updating internal string values for internationalization. */
|
|
261
247
|
i18n?: string;
|
|
262
248
|
};
|
|
@@ -266,14 +252,15 @@ type BreadcrumbProps = {};
|
|
|
266
252
|
type ButtonGroupProps = {
|
|
267
253
|
/** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */
|
|
268
254
|
"behavior-select"?: "single" | "multi";
|
|
269
|
-
/**
|
|
270
|
-
|
|
271
|
-
container
|
|
255
|
+
/** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */
|
|
256
|
+
behaviorSelect?: "single" | "multi";
|
|
257
|
+
/** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */
|
|
258
|
+
container?: "flat" | "rounded" | undefined;
|
|
272
259
|
/** Controls the directional flow of the element's layout and interaction pattern.
|
|
273
260
|
- `horizontal` Element orients horizontally with left-to-right flow.
|
|
274
261
|
|
|
275
262
|
- `vertical` Element orients vertically with top-to-bottom flow. */
|
|
276
|
-
orientation?: "horizontal" | "vertical" |
|
|
263
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
277
264
|
/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
|
|
278
265
|
- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
|
|
279
266
|
|
|
@@ -285,22 +272,31 @@ type ButtonGroupProps = {
|
|
|
285
272
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
286
273
|
|
|
287
274
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
288
|
-
size?: "sm" | "md" | "lg" |
|
|
275
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
289
276
|
};
|
|
290
277
|
|
|
291
278
|
type ButtonProps = {
|
|
292
|
-
/**
|
|
293
|
-
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
279
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
280
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
281
|
+
popovertarget?: string;
|
|
282
|
+
/** The popover target action to perform on the popover target element.
|
|
283
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
284
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
285
|
+
/** The element that receives the command.
|
|
286
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
287
|
+
commandfor?: string;
|
|
288
|
+
/** The element that receives the interest.
|
|
289
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
290
|
+
interestfor?: string;
|
|
291
|
+
/** Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text. */
|
|
292
|
+
container?: "flat" | "inline" | undefined;
|
|
297
293
|
/** Controls the visual scale of an element to match its importance and available space.
|
|
298
294
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
299
295
|
|
|
300
296
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
301
297
|
|
|
302
298
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
303
|
-
size?: "sm" | "md" | "lg" |
|
|
299
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
304
300
|
/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
|
|
305
301
|
- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
|
|
306
302
|
|
|
@@ -316,14 +312,15 @@ type ButtonProps = {
|
|
|
316
312
|
|
|
317
313
|
- `false` The associated content collapses and hides from the user. */
|
|
318
314
|
expanded?: boolean;
|
|
319
|
-
/**
|
|
315
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
320
316
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
321
|
-
|
|
322
|
-
/**
|
|
323
|
-
|
|
317
|
+
readOnly?: boolean;
|
|
318
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
319
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
324
320
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
325
321
|
form?: string | HTMLFormElement | null;
|
|
326
|
-
/** The name of the
|
|
322
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
323
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
327
324
|
name?: string;
|
|
328
325
|
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
329
326
|
value?: string;
|
|
@@ -347,53 +344,36 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
347
344
|
current?: "page" | "step";
|
|
348
345
|
/** Establishes a relationship between a popover and its invoker button.
|
|
349
346
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
350
|
-
|
|
347
|
+
popoverTargetElement?: HTMLElement | null;
|
|
351
348
|
/** The popover target action to perform on the popover target element.
|
|
352
349
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
353
|
-
|
|
350
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
354
351
|
/** The element that receives the command.
|
|
355
352
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
356
|
-
|
|
353
|
+
commandForElement?: HTMLElement | null;
|
|
357
354
|
/** The command to execute on the element.
|
|
358
355
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
359
356
|
command?: string;
|
|
360
357
|
/** The element that receives the interest.
|
|
361
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
362
|
-
interestfor?: string;
|
|
363
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
364
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
365
|
-
popoverTargetElement?: HTMLElement | null;
|
|
366
|
-
/** The element that receives the command.
|
|
367
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
368
|
-
commandForElement?: HTMLElement | null;
|
|
369
|
-
/** The element that receives the interest.
|
|
370
358
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
371
359
|
interestForElement?: HTMLElement | null;
|
|
372
360
|
};
|
|
373
361
|
|
|
374
362
|
type CardProps = {
|
|
375
|
-
/**
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
- `full` Element container optimizes for filling its container bounds. */
|
|
379
|
-
container?: "flat" | "full" | "default";
|
|
363
|
+
/** flat (embed into parent container) or full (width of viewport) */
|
|
364
|
+
container?: "flat" | "full" | undefined;
|
|
380
365
|
};
|
|
381
366
|
|
|
382
|
-
type CardHeaderProps = {
|
|
383
|
-
/** */
|
|
384
|
-
slot?: string;
|
|
385
|
-
};
|
|
367
|
+
type CardHeaderProps = {};
|
|
386
368
|
|
|
387
369
|
type CardContentProps = {};
|
|
388
370
|
|
|
389
|
-
type CardFooterProps = {
|
|
390
|
-
/** */
|
|
391
|
-
slot?: string;
|
|
392
|
-
};
|
|
371
|
+
type CardFooterProps = {};
|
|
393
372
|
|
|
394
373
|
type ChatMessageProps = {
|
|
395
|
-
/**
|
|
396
|
-
-
|
|
374
|
+
/** Removes the border radius from the selected message corner to indicate the speaker direction. */
|
|
375
|
+
"arrow-position"?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
|
|
376
|
+
/** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */
|
|
397
377
|
container?: "flat";
|
|
398
378
|
/** Defines a base color from the theme color palette */
|
|
399
379
|
color?:
|
|
@@ -419,8 +399,8 @@ type ChatMessageProps = {
|
|
|
419
399
|
| "lime-pear"
|
|
420
400
|
| "yellow-nova"
|
|
421
401
|
| "brand-green";
|
|
422
|
-
/**
|
|
423
|
-
|
|
402
|
+
/** Removes the border radius from the selected message corner to indicate the speaker direction. */
|
|
403
|
+
arrowPosition?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
|
|
424
404
|
};
|
|
425
405
|
|
|
426
406
|
type CheckboxGroupProps = {
|
|
@@ -433,16 +413,12 @@ type CheckboxGroupProps = {
|
|
|
433
413
|
|
|
434
414
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
435
415
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
436
|
-
/**
|
|
437
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
416
|
+
/** Set the visual prominence of the control group */
|
|
438
417
|
prominence?: "muted";
|
|
439
418
|
};
|
|
440
419
|
|
|
441
420
|
type CheckboxProps = {
|
|
442
|
-
/**
|
|
443
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
444
|
-
|
|
445
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
421
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
446
422
|
status?: "warning" | "error" | "success" | "disabled";
|
|
447
423
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
448
424
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -453,28 +429,19 @@ type CheckboxProps = {
|
|
|
453
429
|
|
|
454
430
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
455
431
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
456
|
-
/**
|
|
457
|
-
"fit-text"?: boolean;
|
|
458
|
-
/** Sets the input to match native default content block */
|
|
459
|
-
"fit-content"?: boolean;
|
|
460
|
-
/** Enables updating internal string values for internationalization. */
|
|
432
|
+
/** Enables internal string values to update for internationalization. */
|
|
461
433
|
i18n?: string;
|
|
462
|
-
/**
|
|
463
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
434
|
+
/** Set the visual prominence of the control */
|
|
464
435
|
prominence?: "muted";
|
|
465
|
-
|
|
466
436
|
/** */
|
|
467
437
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
468
438
|
};
|
|
469
439
|
|
|
470
440
|
type ColorProps = {
|
|
471
|
-
/**
|
|
472
|
-
|
|
473
|
-
container?: "flat" |
|
|
474
|
-
/**
|
|
475
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
476
|
-
|
|
477
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
441
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
442
|
+
Use when embedding within another container such as a toolbar. */
|
|
443
|
+
container?: "flat" | undefined;
|
|
444
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
478
445
|
status?: "warning" | "error" | "success" | "disabled";
|
|
479
446
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
480
447
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -486,31 +453,28 @@ type ColorProps = {
|
|
|
486
453
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
487
454
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
488
455
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
489
|
-
|
|
456
|
+
fitText?: boolean;
|
|
490
457
|
/** Sets the input to match native default content block */
|
|
491
|
-
|
|
492
|
-
/** Enables
|
|
458
|
+
fitContent?: boolean;
|
|
459
|
+
/** Enables internal string values to update for internationalization. */
|
|
493
460
|
i18n?: string;
|
|
494
|
-
/**
|
|
495
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
461
|
+
/** Set the visual prominence of the control */
|
|
496
462
|
prominence?: "muted";
|
|
497
|
-
|
|
498
463
|
/** */
|
|
499
464
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
500
465
|
};
|
|
501
466
|
|
|
502
467
|
type ComboboxProps = {
|
|
503
|
-
/** Demonstrates different container styles to accommodate visual weight and context.
|
|
504
|
-
- `flat` Element has white space bounds but reduced visual container. */
|
|
505
|
-
container?: "flat";
|
|
506
468
|
/** Manage inline tag rendering for many-item select */
|
|
507
469
|
"tag-layout"?: "hidden" | "wrap";
|
|
470
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
471
|
+
Use when embedding within another container such as a toolbar. */
|
|
472
|
+
container?: "flat";
|
|
473
|
+
/** Manage inline tag rendering for many-item select */
|
|
474
|
+
tagLayout?: "hidden" | "wrap";
|
|
508
475
|
/** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */
|
|
509
|
-
|
|
510
|
-
/**
|
|
511
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
512
|
-
|
|
513
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
476
|
+
behaviorCreate?: boolean;
|
|
477
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
514
478
|
status?: "warning" | "error" | "success" | "disabled";
|
|
515
479
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
516
480
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -522,15 +486,13 @@ type ComboboxProps = {
|
|
|
522
486
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
523
487
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
524
488
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
525
|
-
|
|
489
|
+
fitText?: boolean;
|
|
526
490
|
/** Sets the input to match native default content block */
|
|
527
|
-
|
|
528
|
-
/** Enables
|
|
491
|
+
fitContent?: boolean;
|
|
492
|
+
/** Enables internal string values to update for internationalization. */
|
|
529
493
|
i18n?: string;
|
|
530
|
-
/**
|
|
531
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
494
|
+
/** Set the visual prominence of the control */
|
|
532
495
|
prominence?: "muted";
|
|
533
|
-
|
|
534
496
|
/** Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. */
|
|
535
497
|
oncreate?: (e: CustomEvent<CustomEvent>) => void;
|
|
536
498
|
/** Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. */
|
|
@@ -540,24 +502,33 @@ type ComboboxProps = {
|
|
|
540
502
|
};
|
|
541
503
|
|
|
542
504
|
type CopyButtonProps = {
|
|
543
|
-
/**
|
|
505
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
506
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
507
|
+
popovertarget?: string;
|
|
508
|
+
/** The popover target action to perform on the popover target element.
|
|
509
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
510
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
511
|
+
/** The element that receives the command.
|
|
512
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
513
|
+
commandfor?: string;
|
|
514
|
+
/** The element that receives the interest.
|
|
515
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
516
|
+
interestfor?: string;
|
|
517
|
+
/** Enables internal string values to update for internationalization. */
|
|
544
518
|
i18n?: string;
|
|
545
519
|
/** Determines if the copy button should auto write to clipboard by the trigger. */
|
|
546
|
-
|
|
547
|
-
/** Defines the value
|
|
520
|
+
behaviorCopy?: boolean;
|
|
521
|
+
/** Defines the value that copies to the user clipboard. Use `aria-label` to set the tooltip hint. */
|
|
548
522
|
value?: string;
|
|
549
|
-
/**
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
- `inline` Element container reduces to fit within inline content such as a block of text. */
|
|
553
|
-
container?: "flat" | "inline" | "default";
|
|
523
|
+
/** Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text. */
|
|
524
|
+
container?: "flat" | "inline" | undefined;
|
|
554
525
|
/** Controls the visual scale of an element to match its importance and available space.
|
|
555
526
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
556
527
|
|
|
557
528
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
558
529
|
|
|
559
530
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
560
|
-
size?: "sm" | "md" | "lg" |
|
|
531
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
561
532
|
/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
|
|
562
533
|
- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
|
|
563
534
|
|
|
@@ -573,14 +544,15 @@ type CopyButtonProps = {
|
|
|
573
544
|
|
|
574
545
|
- `false` The associated content collapses and hides from the user. */
|
|
575
546
|
expanded?: boolean;
|
|
576
|
-
/**
|
|
547
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
577
548
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
578
|
-
|
|
579
|
-
/**
|
|
580
|
-
|
|
549
|
+
readOnly?: boolean;
|
|
550
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
551
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
581
552
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
582
553
|
form?: string | HTMLFormElement | null;
|
|
583
|
-
/** The name of the
|
|
554
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
555
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
584
556
|
name?: string;
|
|
585
557
|
/** Defines the button behavior when associated within a form element.
|
|
586
558
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
@@ -602,38 +574,26 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
602
574
|
current?: "page" | "step";
|
|
603
575
|
/** Establishes a relationship between a popover and its invoker button.
|
|
604
576
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
605
|
-
|
|
577
|
+
popoverTargetElement?: HTMLElement | null;
|
|
606
578
|
/** The popover target action to perform on the popover target element.
|
|
607
579
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
608
|
-
|
|
580
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
609
581
|
/** The element that receives the command.
|
|
610
582
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
611
|
-
|
|
583
|
+
commandForElement?: HTMLElement | null;
|
|
612
584
|
/** The command to execute on the element.
|
|
613
585
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
614
586
|
command?: string;
|
|
615
587
|
/** The element that receives the interest.
|
|
616
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
617
|
-
interestfor?: string;
|
|
618
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
619
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
620
|
-
popoverTargetElement?: HTMLElement | null;
|
|
621
|
-
/** The element that receives the command.
|
|
622
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
623
|
-
commandForElement?: HTMLElement | null;
|
|
624
|
-
/** The element that receives the interest.
|
|
625
588
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
626
589
|
interestForElement?: HTMLElement | null;
|
|
627
590
|
};
|
|
628
591
|
|
|
629
592
|
type DateProps = {
|
|
630
|
-
/**
|
|
631
|
-
|
|
632
|
-
container?: "flat" |
|
|
633
|
-
/**
|
|
634
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
635
|
-
|
|
636
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
593
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
594
|
+
Use when embedding within another container such as a toolbar. */
|
|
595
|
+
container?: "flat" | undefined;
|
|
596
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
637
597
|
status?: "warning" | "error" | "success" | "disabled";
|
|
638
598
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
639
599
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -645,27 +605,22 @@ type DateProps = {
|
|
|
645
605
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
646
606
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
647
607
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
648
|
-
|
|
608
|
+
fitText?: boolean;
|
|
649
609
|
/** Sets the input to match native default content block */
|
|
650
|
-
|
|
651
|
-
/** Enables
|
|
610
|
+
fitContent?: boolean;
|
|
611
|
+
/** Enables internal string values to update for internationalization. */
|
|
652
612
|
i18n?: string;
|
|
653
|
-
/**
|
|
654
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
613
|
+
/** Set the visual prominence of the control */
|
|
655
614
|
prominence?: "muted";
|
|
656
|
-
|
|
657
615
|
/** */
|
|
658
616
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
659
617
|
};
|
|
660
618
|
|
|
661
619
|
type DatetimeProps = {
|
|
662
|
-
/**
|
|
663
|
-
|
|
664
|
-
container?: "flat" |
|
|
665
|
-
/**
|
|
666
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
667
|
-
|
|
668
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
620
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
621
|
+
Use when embedding within another container such as a toolbar. */
|
|
622
|
+
container?: "flat" | undefined;
|
|
623
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
669
624
|
status?: "warning" | "error" | "success" | "disabled";
|
|
670
625
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
671
626
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -677,15 +632,13 @@ type DatetimeProps = {
|
|
|
677
632
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
678
633
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
679
634
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
680
|
-
|
|
635
|
+
fitText?: boolean;
|
|
681
636
|
/** Sets the input to match native default content block */
|
|
682
|
-
|
|
683
|
-
/** Enables
|
|
637
|
+
fitContent?: boolean;
|
|
638
|
+
/** Enables internal string values to update for internationalization. */
|
|
684
639
|
i18n?: string;
|
|
685
|
-
/**
|
|
686
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
640
|
+
/** Set the visual prominence of the control */
|
|
687
641
|
prominence?: "muted";
|
|
688
|
-
|
|
689
642
|
/** */
|
|
690
643
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
691
644
|
};
|
|
@@ -695,7 +648,8 @@ type DialogFooterProps = {};
|
|
|
695
648
|
type DialogHeaderProps = {};
|
|
696
649
|
|
|
697
650
|
type DialogProps = {
|
|
698
|
-
/**
|
|
651
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
652
|
+
For dialog the anchor defaults to the document body.
|
|
699
653
|
- `center` Centers the popover directly over the anchor element.
|
|
700
654
|
|
|
701
655
|
- `top` Positions the popover above the anchor element.
|
|
@@ -719,7 +673,7 @@ type DialogProps = {
|
|
|
719
673
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
720
674
|
|
|
721
675
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
722
|
-
size?: "sm" | "md" | "lg" |
|
|
676
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
723
677
|
/** Indicates whether the user can dismiss or close the element.
|
|
724
678
|
- `true` The element displays a close control and the user can dismiss it.
|
|
725
679
|
|
|
@@ -727,18 +681,17 @@ type DialogProps = {
|
|
|
727
681
|
closable?: boolean;
|
|
728
682
|
/** Determines if a dialog should have a modal backdrop that visually overlays the UI. */
|
|
729
683
|
modal?: boolean;
|
|
730
|
-
/** Provides the element that the popover should position relative to.
|
|
684
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
731
685
|
anchor?: string | HTMLElement;
|
|
732
686
|
/** @deprecated Use the popover API instead.
|
|
733
687
|
The trigger defines what element triggers an `open` interaction event.
|
|
734
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
688
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
735
689
|
trigger?: string | HTMLElement;
|
|
736
690
|
/** @deprecated Use the popover API instead.
|
|
737
691
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
738
|
-
|
|
739
|
-
/** Enables
|
|
692
|
+
behaviorTrigger?: boolean;
|
|
693
|
+
/** Enables internal string values to update for internationalization. */
|
|
740
694
|
i18n?: string;
|
|
741
|
-
|
|
742
695
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
743
696
|
onbeforetoggle?: (e: CustomEvent<never>) => void;
|
|
744
697
|
/** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
|
|
@@ -758,7 +711,7 @@ type DividerProps = {
|
|
|
758
711
|
};
|
|
759
712
|
|
|
760
713
|
type DotProps = {
|
|
761
|
-
/**
|
|
714
|
+
/** Defines visual treatment to represent a ongoing task or support status.
|
|
762
715
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
763
716
|
|
|
764
717
|
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
@@ -820,7 +773,8 @@ type DrawerFooterProps = {};
|
|
|
820
773
|
type DrawerHeaderProps = {};
|
|
821
774
|
|
|
822
775
|
type DrawerProps = {
|
|
823
|
-
/**
|
|
776
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
777
|
+
For drawer the anchor defaults to the document body. */
|
|
824
778
|
position?: "left" | "right" | "bottom" | "top";
|
|
825
779
|
/** Controls the visual scale of an element to match its importance and available space.
|
|
826
780
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
@@ -828,7 +782,7 @@ type DrawerProps = {
|
|
|
828
782
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
829
783
|
|
|
830
784
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
831
|
-
size?: "sm" | "md" | "lg" |
|
|
785
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
832
786
|
/** Indicates whether the user can dismiss or close the element.
|
|
833
787
|
- `true` The element displays a close control and the user can dismiss it.
|
|
834
788
|
|
|
@@ -836,21 +790,20 @@ type DrawerProps = {
|
|
|
836
790
|
closable?: boolean;
|
|
837
791
|
/** Determines if a drawer should have a modal backdrop that visually overlays the UI. */
|
|
838
792
|
modal?: boolean;
|
|
839
|
-
/** Provides the element that the popover should position relative to.
|
|
793
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
840
794
|
anchor?: string | HTMLElement;
|
|
841
795
|
/** @deprecated Use the popover API instead.
|
|
842
796
|
The trigger defines what element triggers an `open` interaction event.
|
|
843
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
797
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
844
798
|
trigger?: string | HTMLElement;
|
|
845
799
|
/** Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)
|
|
846
800
|
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ */
|
|
847
801
|
inline?: boolean;
|
|
848
802
|
/** @deprecated Use the popover API instead.
|
|
849
803
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
850
|
-
|
|
851
|
-
/** Enables
|
|
804
|
+
behaviorTrigger?: boolean;
|
|
805
|
+
/** Enables internal string values to update for internationalization. */
|
|
852
806
|
i18n?: string;
|
|
853
|
-
|
|
854
807
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
855
808
|
onbeforetoggle?: (e: CustomEvent<never>) => void;
|
|
856
809
|
/** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
|
|
@@ -873,13 +826,13 @@ type DropdownFooterProps = {};
|
|
|
873
826
|
type DropdownHeaderProps = {};
|
|
874
827
|
|
|
875
828
|
type DropdownProps = {
|
|
876
|
-
/** Provides the element that the popover should position relative to.
|
|
829
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
877
830
|
anchor?: string | HTMLElement;
|
|
878
831
|
/** @deprecated Use the popover API instead.
|
|
879
832
|
The trigger defines what element triggers an `open` interaction event.
|
|
880
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
833
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
881
834
|
trigger?: string | HTMLElement;
|
|
882
|
-
/**
|
|
835
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
883
836
|
- `center` Centers the popover directly over the anchor element.
|
|
884
837
|
|
|
885
838
|
- `top` Positions the popover above the anchor element.
|
|
@@ -899,7 +852,7 @@ A trigger can accept a idref string within the same render root or a HTMLElement
|
|
|
899
852
|
alignment?: "start" | "end" | "center";
|
|
900
853
|
/** @deprecated Use the popover API instead.
|
|
901
854
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
902
|
-
|
|
855
|
+
behaviorTrigger?: boolean;
|
|
903
856
|
/** Indicates whether the user can dismiss or close the element.
|
|
904
857
|
- `true` The element displays a close control and the user can dismiss it.
|
|
905
858
|
|
|
@@ -907,14 +860,8 @@ Determines if popover visibility behavior should be automatically controlled by
|
|
|
907
860
|
closable?: boolean;
|
|
908
861
|
/** Determines if an arrow renders. */
|
|
909
862
|
arrow?: boolean;
|
|
910
|
-
/**
|
|
911
|
-
modal?: boolean;
|
|
912
|
-
/** */
|
|
913
|
-
"popover-type"?: "auto" | "manual" | "hint" | "inline";
|
|
914
|
-
/** Enables updating internal string values for internationalization. */
|
|
863
|
+
/** Enables internal string values to update for internationalization. */
|
|
915
864
|
i18n?: string;
|
|
916
|
-
/** */
|
|
917
|
-
popoverArrow?: HTMLElement;
|
|
918
865
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
919
866
|
onbeforetoggle?: (e: CustomEvent<never>) => void;
|
|
920
867
|
/** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
|
|
@@ -926,15 +873,29 @@ Determines if popover visibility behavior should be automatically controlled by
|
|
|
926
873
|
};
|
|
927
874
|
|
|
928
875
|
type DropzoneProps = {
|
|
929
|
-
/**
|
|
930
|
-
accept?: string;
|
|
931
|
-
/** */
|
|
876
|
+
/** File size limit in bytes. */
|
|
932
877
|
"max-file-size"?: number;
|
|
933
|
-
/**
|
|
878
|
+
/** Defines the minimum text length.
|
|
879
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
880
|
+
minlength?: number;
|
|
881
|
+
/** Defines the maximum text length.
|
|
882
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
883
|
+
maxlength?: number;
|
|
884
|
+
/** Comma-separated file extensions or MIME types accepted by the dropzone. */
|
|
885
|
+
accept?: string;
|
|
886
|
+
/** File size limit in bytes. */
|
|
887
|
+
maxFileSize?: number;
|
|
888
|
+
/** Enables internal string values to update for internationalization. */
|
|
934
889
|
i18n?: string;
|
|
935
|
-
/**
|
|
936
|
-
|
|
937
|
-
|
|
890
|
+
/** Files selected or dropped by the user. Assign files through the JavaScript property; the HTML `value` attribute is not supported. */
|
|
891
|
+
value?: File[];
|
|
892
|
+
/** The initial value used when the parent form resets. */
|
|
893
|
+
defaultValue?: string;
|
|
894
|
+
/** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
|
|
895
|
+
- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
|
|
896
|
+
|
|
897
|
+
- `false` The element allows editing and the user can change its value through interaction. */
|
|
898
|
+
readOnly?: boolean;
|
|
938
899
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
939
900
|
- `true` The element has a disabled state and does not accept interaction.
|
|
940
901
|
|
|
@@ -957,19 +918,16 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step */
|
|
|
957
918
|
step?: number | null;
|
|
958
919
|
/** Defines the minimum text length.
|
|
959
920
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
960
|
-
|
|
921
|
+
minLength?: number;
|
|
961
922
|
/** Defines the maximum text length.
|
|
962
923
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
963
|
-
|
|
964
|
-
/** The name
|
|
924
|
+
maxLength?: number;
|
|
925
|
+
/** The name submitted with the control value as part of the form data.
|
|
926
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */
|
|
965
927
|
name?: string;
|
|
966
928
|
/** Disables constraint validation for this control.
|
|
967
929
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */
|
|
968
|
-
|
|
969
|
-
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
970
|
-
value?: File[];
|
|
971
|
-
/** The initial value used when the parent form resets. */
|
|
972
|
-
defaultValue?: string;
|
|
930
|
+
noValidate?: boolean;
|
|
973
931
|
/** The form associated with the control.
|
|
974
932
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
975
933
|
form?: HTMLFormElement | null;
|
|
@@ -998,10 +956,7 @@ https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */
|
|
|
998
956
|
};
|
|
999
957
|
|
|
1000
958
|
type FileProps = {
|
|
1001
|
-
/**
|
|
1002
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
1003
|
-
|
|
1004
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
959
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
1005
960
|
status?: "warning" | "error" | "success" | "disabled";
|
|
1006
961
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
1007
962
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -1013,98 +968,128 @@ type FileProps = {
|
|
|
1013
968
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
1014
969
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
1015
970
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
1016
|
-
|
|
971
|
+
fitText?: boolean;
|
|
1017
972
|
/** Sets the input to match native default content block */
|
|
1018
|
-
|
|
1019
|
-
/** Enables
|
|
973
|
+
fitContent?: boolean;
|
|
974
|
+
/** Enables internal string values to update for internationalization. */
|
|
1020
975
|
i18n?: string;
|
|
1021
|
-
/**
|
|
1022
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
976
|
+
/** Set the visual prominence of the control */
|
|
1023
977
|
prominence?: "muted";
|
|
1024
|
-
|
|
1025
978
|
/** */
|
|
1026
979
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
1027
980
|
};
|
|
1028
981
|
|
|
1029
982
|
type FormatDatetimeProps = {
|
|
983
|
+
/** Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
|
|
984
|
+
Preset styles take precedence over granular date and time part options. */
|
|
985
|
+
"date-style"?: "full" | "long" | "medium" | "short" | undefined;
|
|
986
|
+
/** Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.
|
|
987
|
+
Preset styles take precedence over granular date and time part options. */
|
|
988
|
+
"time-style"?: "full" | "long" | "medium" | "short" | undefined;
|
|
989
|
+
/** Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it. */
|
|
990
|
+
"time-zone-name"?: "long" | "short" | undefined;
|
|
991
|
+
/** IANA time zone identifier (such as 'America/New_York', 'UTC'). */
|
|
992
|
+
"time-zone"?: string | undefined;
|
|
1030
993
|
/** Optional date string for values supplied by JavaScript or bound data.
|
|
1031
994
|
By default, the component formats the element's text content, which also serves as the SSR fallback.
|
|
1032
995
|
When both are present, this property takes precedence. */
|
|
1033
|
-
date?: string |
|
|
996
|
+
date?: string | undefined;
|
|
1034
997
|
/** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */
|
|
1035
|
-
locale?: string |
|
|
998
|
+
locale?: string | undefined;
|
|
1036
999
|
/** Weekday representation: 'long' | 'short' | 'narrow'. */
|
|
1037
|
-
weekday?: "long" | "short" | "narrow" |
|
|
1000
|
+
weekday?: "long" | "short" | "narrow" | undefined;
|
|
1038
1001
|
/** Year representation: 'numeric' | '2-digit'. */
|
|
1039
|
-
year?: "numeric" | "2-digit" |
|
|
1002
|
+
year?: "numeric" | "2-digit" | undefined;
|
|
1040
1003
|
/** Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'. */
|
|
1041
|
-
month?: "numeric" | "2-digit" | "long" | "short" | "narrow" |
|
|
1004
|
+
month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined;
|
|
1042
1005
|
/** Day representation: 'numeric' | '2-digit'. */
|
|
1043
|
-
day?: "numeric" | "2-digit" |
|
|
1006
|
+
day?: "numeric" | "2-digit" | undefined;
|
|
1044
1007
|
/** Hour representation: 'numeric' | '2-digit'. */
|
|
1045
|
-
hour?: "numeric" | "2-digit" |
|
|
1008
|
+
hour?: "numeric" | "2-digit" | undefined;
|
|
1046
1009
|
/** Minute representation: 'numeric' | '2-digit'. */
|
|
1047
|
-
minute?: "numeric" | "2-digit" |
|
|
1010
|
+
minute?: "numeric" | "2-digit" | undefined;
|
|
1048
1011
|
/** Second representation: 'numeric' | '2-digit'. */
|
|
1049
|
-
second?: "numeric" | "2-digit" |
|
|
1012
|
+
second?: "numeric" | "2-digit" | undefined;
|
|
1050
1013
|
/** Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
|
|
1051
1014
|
Preset styles take precedence over granular date and time part options. */
|
|
1052
|
-
|
|
1015
|
+
dateStyle?: "full" | "long" | "medium" | "short" | undefined;
|
|
1053
1016
|
/** Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.
|
|
1054
1017
|
Preset styles take precedence over granular date and time part options. */
|
|
1055
|
-
|
|
1018
|
+
timeStyle?: "full" | "long" | "medium" | "short" | undefined;
|
|
1056
1019
|
/** Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it. */
|
|
1057
|
-
|
|
1020
|
+
timeZoneName?: "long" | "short" | undefined;
|
|
1058
1021
|
/** IANA time zone identifier (such as 'America/New_York', 'UTC'). */
|
|
1059
|
-
|
|
1022
|
+
timeZone?: string | undefined;
|
|
1060
1023
|
};
|
|
1061
1024
|
|
|
1062
1025
|
type FormatNumberProps = {
|
|
1026
|
+
/** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */
|
|
1027
|
+
"format-style"?: "decimal" | "currency" | "percent" | "unit";
|
|
1028
|
+
/** Currency sign style: 'standard' | 'accounting'. */
|
|
1029
|
+
"currency-sign"?: "standard" | "accounting" | undefined;
|
|
1030
|
+
/** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */
|
|
1031
|
+
"currency-display"?: "symbol" | "code" | "name" | "narrowSymbol" | undefined;
|
|
1032
|
+
/** Unit display style: 'short' | 'long' | 'narrow'. */
|
|
1033
|
+
"unit-display"?: "short" | "long" | "narrow" | undefined;
|
|
1034
|
+
/** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */
|
|
1035
|
+
"compact-display"?: "short" | "long" | undefined;
|
|
1036
|
+
/** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */
|
|
1037
|
+
"sign-display"?: "auto" | "never" | "always" | "exceptZero" | undefined;
|
|
1038
|
+
/** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */
|
|
1039
|
+
"use-grouping"?: "auto" | "always" | "min2" | "true" | "false" | boolean | undefined;
|
|
1040
|
+
/** Pad fraction output to at least this many digits (0-20). */
|
|
1041
|
+
"minimum-fraction-digits"?: number | undefined;
|
|
1042
|
+
/** Round fraction output to at most this many digits (0-20). */
|
|
1043
|
+
"maximum-fraction-digits"?: number | undefined;
|
|
1044
|
+
/** Pad integer output to at least this many digits (1-21). */
|
|
1045
|
+
"minimum-integer-digits"?: number | undefined;
|
|
1063
1046
|
/** Optional numeric string for values supplied by JavaScript or bound data.
|
|
1064
1047
|
By default, the component formats the element's text content, which also serves as the SSR fallback.
|
|
1065
1048
|
When both are present, this property takes precedence. */
|
|
1066
|
-
number?: string |
|
|
1049
|
+
number?: string | undefined;
|
|
1067
1050
|
/** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */
|
|
1068
|
-
locale?: string |
|
|
1051
|
+
locale?: string | undefined;
|
|
1069
1052
|
/** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */
|
|
1070
|
-
|
|
1053
|
+
formatStyle?: "decimal" | "currency" | "percent" | "unit";
|
|
1071
1054
|
/** ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency. */
|
|
1072
|
-
currency?: string |
|
|
1055
|
+
currency?: string | undefined;
|
|
1073
1056
|
/** Currency sign style: 'standard' | 'accounting'. */
|
|
1074
|
-
|
|
1057
|
+
currencySign?: "standard" | "accounting" | undefined;
|
|
1075
1058
|
/** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */
|
|
1076
|
-
|
|
1059
|
+
currencyDisplay?: "symbol" | "code" | "name" | "narrowSymbol" | undefined;
|
|
1077
1060
|
/** Unit identifier (such as kilometer or byte). Required when formatStyle is unit. */
|
|
1078
|
-
unit?: string |
|
|
1061
|
+
unit?: string | undefined;
|
|
1079
1062
|
/** Unit display style: 'short' | 'long' | 'narrow'. */
|
|
1080
|
-
|
|
1063
|
+
unitDisplay?: "short" | "long" | "narrow" | undefined;
|
|
1081
1064
|
/** Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'. */
|
|
1082
|
-
notation?: "standard" | "scientific" | "engineering" | "compact" |
|
|
1065
|
+
notation?: "standard" | "scientific" | "engineering" | "compact" | undefined;
|
|
1083
1066
|
/** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */
|
|
1084
|
-
|
|
1067
|
+
compactDisplay?: "short" | "long" | undefined;
|
|
1085
1068
|
/** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */
|
|
1086
|
-
|
|
1069
|
+
signDisplay?: "auto" | "never" | "always" | "exceptZero" | undefined;
|
|
1087
1070
|
/** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */
|
|
1088
|
-
"
|
|
1071
|
+
useGrouping?: "auto" | "always" | "min2" | "true" | "false" | boolean | undefined;
|
|
1089
1072
|
/** Pad fraction output to at least this many digits (0-20). */
|
|
1090
|
-
|
|
1073
|
+
minimumFractionDigits?: number | undefined;
|
|
1091
1074
|
/** Round fraction output to at most this many digits (0-20). */
|
|
1092
|
-
|
|
1075
|
+
maximumFractionDigits?: number | undefined;
|
|
1093
1076
|
/** Pad integer output to at least this many digits (1-21). */
|
|
1094
|
-
|
|
1077
|
+
minimumIntegerDigits?: number | undefined;
|
|
1095
1078
|
};
|
|
1096
1079
|
|
|
1097
1080
|
type FormatRelativeTimeProps = {
|
|
1081
|
+
/** Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option. */
|
|
1082
|
+
"format-style"?: "long" | "short" | "narrow";
|
|
1098
1083
|
/** Optional date string for values supplied by JavaScript or bound data.
|
|
1099
1084
|
By default, the component formats the element's text content, which also serves as the SSR fallback.
|
|
1100
1085
|
When both are present, this property takes precedence. */
|
|
1101
|
-
date?: string |
|
|
1086
|
+
date?: string | undefined;
|
|
1102
1087
|
/** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */
|
|
1103
|
-
locale?: string |
|
|
1088
|
+
locale?: string | undefined;
|
|
1104
1089
|
/** Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'. */
|
|
1105
1090
|
numeric?: "always" | "auto";
|
|
1106
1091
|
/** Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option. */
|
|
1107
|
-
|
|
1092
|
+
formatStyle?: "long" | "short" | "narrow";
|
|
1108
1093
|
/** Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference. */
|
|
1109
1094
|
unit?: "second" | "minute" | "hour" | "day" | "week" | "month" | "year" | "auto";
|
|
1110
1095
|
/** When present, auto-updates the displayed relative time at appropriate intervals. */
|
|
@@ -1121,17 +1106,13 @@ type ControlGroupProps = {
|
|
|
1121
1106
|
|
|
1122
1107
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
1123
1108
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
1124
|
-
/**
|
|
1125
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
1109
|
+
/** Set the visual prominence of the control group */
|
|
1126
1110
|
prominence?: "muted";
|
|
1127
1111
|
};
|
|
1128
1112
|
|
|
1129
1113
|
type ControlMessageProps = {
|
|
1130
|
-
/**
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
1134
|
-
status?: "warning" | "error" | "success" | "disabled" | "default";
|
|
1114
|
+
/** Visual treatment for current form control validation status */
|
|
1115
|
+
status?: "warning" | "error" | "success" | "disabled" | undefined;
|
|
1135
1116
|
/** Validation error code for current form control
|
|
1136
1117
|
https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
|
|
1137
1118
|
error?:
|
|
@@ -1147,15 +1128,10 @@ https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
|
|
|
1147
1128
|
| "valid"
|
|
1148
1129
|
| "valueMissing"
|
|
1149
1130
|
| null;
|
|
1150
|
-
/** */
|
|
1151
|
-
slot?: string;
|
|
1152
1131
|
};
|
|
1153
1132
|
|
|
1154
1133
|
type ControlProps = {
|
|
1155
|
-
/**
|
|
1156
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
1157
|
-
|
|
1158
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
1134
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
1159
1135
|
status?: "warning" | "error" | "success" | "disabled";
|
|
1160
1136
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
1161
1137
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -1167,25 +1143,23 @@ type ControlProps = {
|
|
|
1167
1143
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
1168
1144
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
1169
1145
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
1170
|
-
|
|
1146
|
+
fitText?: boolean;
|
|
1171
1147
|
/** Sets the input to match native default content block */
|
|
1172
|
-
|
|
1173
|
-
/** Enables
|
|
1148
|
+
fitContent?: boolean;
|
|
1149
|
+
/** Enables internal string values to update for internationalization. */
|
|
1174
1150
|
i18n?: string;
|
|
1175
|
-
/**
|
|
1176
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
1151
|
+
/** Set the visual prominence of the control */
|
|
1177
1152
|
prominence?: "muted";
|
|
1178
|
-
|
|
1179
1153
|
/** */
|
|
1180
1154
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
1181
1155
|
};
|
|
1182
1156
|
|
|
1183
1157
|
type GaugeProps = {
|
|
1184
|
-
/**
|
|
1158
|
+
/** The current `value` of the gauge. */
|
|
1185
1159
|
value?: number;
|
|
1186
1160
|
/** The `max` value of the gauge that the `value` is proportionally scaled to. */
|
|
1187
1161
|
max?: number;
|
|
1188
|
-
/**
|
|
1162
|
+
/** Four visual treatments represent the `status` of tasks.
|
|
1189
1163
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
1190
1164
|
|
|
1191
1165
|
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
@@ -1193,9 +1167,9 @@ type GaugeProps = {
|
|
|
1193
1167
|
- `success` Represents positive outcomes, confirmations, or constructive actions.
|
|
1194
1168
|
|
|
1195
1169
|
- `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */
|
|
1196
|
-
status?: "accent" | "warning" | "success" | "danger" | "neutral" |
|
|
1170
|
+
status?: "accent" | "warning" | "success" | "danger" | "neutral" | undefined;
|
|
1197
1171
|
/** Determines the gauge shape. Set `half` for a compact semi-circular arc. */
|
|
1198
|
-
shape?: "half" |
|
|
1172
|
+
shape?: "half" | undefined;
|
|
1199
1173
|
/** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */
|
|
1200
1174
|
thumb?: "fill" | "dot" | "needle";
|
|
1201
1175
|
/** Controls the visual scale of an element to match its importance and available space.
|
|
@@ -1204,7 +1178,7 @@ type GaugeProps = {
|
|
|
1204
1178
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
1205
1179
|
|
|
1206
1180
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
1207
|
-
size?: "sm" | "md" | "lg" |
|
|
1181
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
1208
1182
|
/** Enables updating internal string values for internationalization. */
|
|
1209
1183
|
i18n?: string;
|
|
1210
1184
|
};
|
|
@@ -1212,32 +1186,27 @@ type GaugeProps = {
|
|
|
1212
1186
|
type GridCellProps = {};
|
|
1213
1187
|
|
|
1214
1188
|
type GridColumnProps = {
|
|
1189
|
+
/** Control the content alignment within a given column. */
|
|
1190
|
+
"column-align"?: "start" | "center" | "end";
|
|
1215
1191
|
/** Only set a fixed px width when you know the grid width. Most cases this should remain unset.
|
|
1216
1192
|
If the total width of all columns is less than the grid width then the last column fills the remaining space.
|
|
1217
1193
|
By default column widths are evenly divided unless width is explicitly provided. */
|
|
1218
1194
|
width?: string;
|
|
1219
|
-
/**
|
|
1195
|
+
/** Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.
|
|
1196
|
+
Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid
|
|
1197
|
+
until the column reaches the edge of the grid. */
|
|
1220
1198
|
position?: "fixed" | "sticky" | "";
|
|
1221
1199
|
/** Control the content alignment within a given column. */
|
|
1222
|
-
|
|
1223
|
-
/** */
|
|
1224
|
-
"aria-colindex"?: string;
|
|
1225
|
-
|
|
1200
|
+
columnAlign?: "start" | "center" | "end";
|
|
1226
1201
|
/** */
|
|
1227
1202
|
"onnve-grid-column-resize"?: (e: CustomEvent<CustomEvent>) => void;
|
|
1228
1203
|
};
|
|
1229
1204
|
|
|
1230
|
-
type GridFooterProps = {
|
|
1231
|
-
/** */
|
|
1232
|
-
slot?: string;
|
|
1233
|
-
};
|
|
1205
|
+
type GridFooterProps = {};
|
|
1234
1206
|
|
|
1235
1207
|
type GridProps = {
|
|
1236
|
-
/**
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
- `full` Element container optimizes for filling its container bounds. */
|
|
1240
|
-
container?: "flat" | "full" | "default";
|
|
1208
|
+
/** Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width. */
|
|
1209
|
+
container?: "flat" | "full" | undefined;
|
|
1241
1210
|
/** Determine style variant stripe rows */
|
|
1242
1211
|
stripe?: boolean;
|
|
1243
1212
|
};
|
|
@@ -1532,65 +1501,6 @@ type IconButtonProps = {
|
|
|
1532
1501
|
| "x-circle"
|
|
1533
1502
|
| "zoom-in"
|
|
1534
1503
|
| "zoom-out";
|
|
1535
|
-
/** Sets the direction of the icon.
|
|
1536
|
-
Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */
|
|
1537
|
-
direction?: "up" | "down" | "left" | "right";
|
|
1538
|
-
/** Controls the visual scale of an element to match its importance and available space.
|
|
1539
|
-
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
1540
|
-
|
|
1541
|
-
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
1542
|
-
|
|
1543
|
-
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
1544
|
-
size?: "sm" | "md" | "lg" | "default";
|
|
1545
|
-
/** Demonstrates different container styles to accommodate visual weight and context.
|
|
1546
|
-
- `flat` Element has white space bounds but reduced visual container.
|
|
1547
|
-
|
|
1548
|
-
- `inline` Element container reduces to fit within inline content such as a block of text. */
|
|
1549
|
-
container?: "flat" | "inline" | "default";
|
|
1550
|
-
/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
|
|
1551
|
-
- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
|
|
1552
|
-
|
|
1553
|
-
- `destructive` Shows the interaction targets destructive actions such as deleting or removing. */
|
|
1554
|
-
interaction?: "emphasis" | "destructive";
|
|
1555
|
-
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
1556
|
-
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
1557
|
-
|
|
1558
|
-
- `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */
|
|
1559
|
-
pressed?: boolean;
|
|
1560
|
-
/** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
|
|
1561
|
-
- `true` The associated content expands and becomes visible to the user.
|
|
1562
|
-
|
|
1563
|
-
- `false` The associated content collapses and hides from the user. */
|
|
1564
|
-
expanded?: boolean;
|
|
1565
|
-
/** Like input readonly, sets a button semantically as visual treatment only.
|
|
1566
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
1567
|
-
readonly?: boolean;
|
|
1568
|
-
/** Like input form, sets a button to submit a form outside its parent form.
|
|
1569
|
-
Returns a reference to the form element if available.
|
|
1570
|
-
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
1571
|
-
form?: string | HTMLFormElement | null;
|
|
1572
|
-
/** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */
|
|
1573
|
-
name?: string;
|
|
1574
|
-
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
1575
|
-
value?: string;
|
|
1576
|
-
/** Defines the button behavior when associated within a form element.
|
|
1577
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
1578
|
-
type?: "button" | "submit" | "reset";
|
|
1579
|
-
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
1580
|
-
- `true` The element has a disabled state and does not accept interaction.
|
|
1581
|
-
|
|
1582
|
-
- `false` The element has an enabled state and accepts interaction. */
|
|
1583
|
-
disabled?: boolean;
|
|
1584
|
-
/** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
|
|
1585
|
-
- `true` The element holds selection and represents the user's current choice within the group.
|
|
1586
|
-
|
|
1587
|
-
- `false` The element does not hold selection and the user can choose it. */
|
|
1588
|
-
selected?: boolean;
|
|
1589
|
-
/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
|
|
1590
|
-
- `page` Marks the current page within a set of navigation links.
|
|
1591
|
-
|
|
1592
|
-
- `step` Marks the current step within a multi-step process or workflow. */
|
|
1593
|
-
current?: "page" | "step";
|
|
1594
1504
|
/** Establishes a relationship between a popover and its invoker button.
|
|
1595
1505
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
1596
1506
|
popovertarget?: string;
|
|
@@ -1600,43 +1510,380 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetA
|
|
|
1600
1510
|
/** The element that receives the command.
|
|
1601
1511
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
1602
1512
|
commandfor?: string;
|
|
1603
|
-
/** The command to execute on the element.
|
|
1604
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
1605
|
-
command?: string;
|
|
1606
1513
|
/** The element that receives the interest.
|
|
1607
1514
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
1608
1515
|
interestfor?: string;
|
|
1609
|
-
/**
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
-
|
|
1516
|
+
/** Sets the icon name, which determines which icon to display. */
|
|
1517
|
+
iconName?:
|
|
1518
|
+
| "placeholder"
|
|
1519
|
+
| "caret"
|
|
1520
|
+
| "person"
|
|
1521
|
+
| "menu"
|
|
1522
|
+
| "cancel"
|
|
1523
|
+
| "gear"
|
|
1524
|
+
| "chevron"
|
|
1525
|
+
| "logout"
|
|
1526
|
+
| "copy"
|
|
1527
|
+
| "more-actions"
|
|
1528
|
+
| "add"
|
|
1529
|
+
| "arrow"
|
|
1530
|
+
| "delete"
|
|
1531
|
+
| "download"
|
|
1532
|
+
| "search"
|
|
1533
|
+
| "split-vertical"
|
|
1534
|
+
| "sparkles"
|
|
1535
|
+
| "branch"
|
|
1536
|
+
| "refresh"
|
|
1537
|
+
| "double-chevron"
|
|
1538
|
+
| "academic-cap"
|
|
1539
|
+
| "add-asset"
|
|
1540
|
+
| "add-comment"
|
|
1541
|
+
| "add-grid"
|
|
1542
|
+
| "add-user"
|
|
1543
|
+
| "ancestors"
|
|
1544
|
+
| "archive"
|
|
1545
|
+
| "arrow-angle"
|
|
1546
|
+
| "arrow-both"
|
|
1547
|
+
| "arrow-cycle"
|
|
1548
|
+
| "arrow-path-rounded-square"
|
|
1549
|
+
| "arrow-stop"
|
|
1550
|
+
| "at-symbol"
|
|
1551
|
+
| "backspace"
|
|
1552
|
+
| "bar-pill-stack"
|
|
1553
|
+
| "bars-3"
|
|
1554
|
+
| "bars-3-bottom-left"
|
|
1555
|
+
| "bars-3-bottom-right"
|
|
1556
|
+
| "bars-3-center-left"
|
|
1557
|
+
| "bars-4"
|
|
1558
|
+
| "beaker"
|
|
1559
|
+
| "bell"
|
|
1560
|
+
| "bell-slash"
|
|
1561
|
+
| "bell-stroke"
|
|
1562
|
+
| "bold"
|
|
1563
|
+
| "book"
|
|
1564
|
+
| "bookmark"
|
|
1565
|
+
| "bookmark-stroke"
|
|
1566
|
+
| "bounding-box"
|
|
1567
|
+
| "briefcase"
|
|
1568
|
+
| "broadcast"
|
|
1569
|
+
| "browser"
|
|
1570
|
+
| "bug"
|
|
1571
|
+
| "calendar"
|
|
1572
|
+
| "camera"
|
|
1573
|
+
| "carets-closed-square"
|
|
1574
|
+
| "carousel"
|
|
1575
|
+
| "category-list"
|
|
1576
|
+
| "chart-bar"
|
|
1577
|
+
| "chat-bubble"
|
|
1578
|
+
| "chat-bubbles"
|
|
1579
|
+
| "check"
|
|
1580
|
+
| "check-badge"
|
|
1581
|
+
| "checklist"
|
|
1582
|
+
| "checkmark-circle"
|
|
1583
|
+
| "chip"
|
|
1584
|
+
| "circle"
|
|
1585
|
+
| "circle-angled-line"
|
|
1586
|
+
| "circle-dash"
|
|
1587
|
+
| "circle-dot"
|
|
1588
|
+
| "circle-dot-arrows"
|
|
1589
|
+
| "circle-half"
|
|
1590
|
+
| "circle-rule"
|
|
1591
|
+
| "circle-tick"
|
|
1592
|
+
| "clipboard"
|
|
1593
|
+
| "clock"
|
|
1594
|
+
| "clock-circle-arrow"
|
|
1595
|
+
| "cloud"
|
|
1596
|
+
| "cloud-download"
|
|
1597
|
+
| "cloud-upload"
|
|
1598
|
+
| "code"
|
|
1599
|
+
| "collapse-all"
|
|
1600
|
+
| "collapse-details"
|
|
1601
|
+
| "color-palette"
|
|
1602
|
+
| "columns"
|
|
1603
|
+
| "compare"
|
|
1604
|
+
| "computer"
|
|
1605
|
+
| "connect-node"
|
|
1606
|
+
| "connected-blocks"
|
|
1607
|
+
| "cross-hairs"
|
|
1608
|
+
| "cursor-rays"
|
|
1609
|
+
| "cursor-ripples"
|
|
1610
|
+
| "data-management"
|
|
1611
|
+
| "delete-node"
|
|
1612
|
+
| "doc-checkmark"
|
|
1613
|
+
| "dock-bottom"
|
|
1614
|
+
| "dock-none"
|
|
1615
|
+
| "dock-side"
|
|
1616
|
+
| "document"
|
|
1617
|
+
| "document-clipboard"
|
|
1618
|
+
| "dot"
|
|
1619
|
+
| "dot-stroke"
|
|
1620
|
+
| "drag"
|
|
1621
|
+
| "dropper"
|
|
1622
|
+
| "duplicate"
|
|
1623
|
+
| "edit"
|
|
1624
|
+
| "ellipses"
|
|
1625
|
+
| "envelope"
|
|
1626
|
+
| "exclamation-circle"
|
|
1627
|
+
| "exclamation-mark"
|
|
1628
|
+
| "exclamation-triangle"
|
|
1629
|
+
| "expand-all"
|
|
1630
|
+
| "expand-details"
|
|
1631
|
+
| "expression"
|
|
1632
|
+
| "eye"
|
|
1633
|
+
| "eye-hidden"
|
|
1634
|
+
| "face-frown"
|
|
1635
|
+
| "face-smile"
|
|
1636
|
+
| "fast-forward"
|
|
1637
|
+
| "fast-forward-10"
|
|
1638
|
+
| "film"
|
|
1639
|
+
| "filter"
|
|
1640
|
+
| "filter-stroke"
|
|
1641
|
+
| "flag"
|
|
1642
|
+
| "flag-stroke"
|
|
1643
|
+
| "fold"
|
|
1644
|
+
| "folder"
|
|
1645
|
+
| "fork"
|
|
1646
|
+
| "globe"
|
|
1647
|
+
| "globe-alt-stroke"
|
|
1648
|
+
| "group"
|
|
1649
|
+
| "group-boxes"
|
|
1650
|
+
| "hand"
|
|
1651
|
+
| "hash"
|
|
1652
|
+
| "heading"
|
|
1653
|
+
| "home"
|
|
1654
|
+
| "horizontal-rule"
|
|
1655
|
+
| "hourglass"
|
|
1656
|
+
| "hourglass-end"
|
|
1657
|
+
| "hourglass-mid"
|
|
1658
|
+
| "hourglass-start"
|
|
1659
|
+
| "identification"
|
|
1660
|
+
| "image"
|
|
1661
|
+
| "inbox"
|
|
1662
|
+
| "infinity"
|
|
1663
|
+
| "information-circle-stroke"
|
|
1664
|
+
| "inspect"
|
|
1665
|
+
| "italic"
|
|
1666
|
+
| "key"
|
|
1667
|
+
| "keyboard"
|
|
1668
|
+
| "laptop-phone"
|
|
1669
|
+
| "layers"
|
|
1670
|
+
| "lifebuoy"
|
|
1671
|
+
| "lightbulb"
|
|
1672
|
+
| "lightning-bolt"
|
|
1673
|
+
| "link"
|
|
1674
|
+
| "list-ordered"
|
|
1675
|
+
| "list-unordered"
|
|
1676
|
+
| "lock"
|
|
1677
|
+
| "login"
|
|
1678
|
+
| "looping"
|
|
1679
|
+
| "looping-off"
|
|
1680
|
+
| "map"
|
|
1681
|
+
| "map-drives"
|
|
1682
|
+
| "map-pin"
|
|
1683
|
+
| "markdown"
|
|
1684
|
+
| "maximize"
|
|
1685
|
+
| "megaphone"
|
|
1686
|
+
| "merge"
|
|
1687
|
+
| "meter"
|
|
1688
|
+
| "minimize"
|
|
1689
|
+
| "minus"
|
|
1690
|
+
| "minus-circle"
|
|
1691
|
+
| "moon"
|
|
1692
|
+
| "multiselect"
|
|
1693
|
+
| "music-note"
|
|
1694
|
+
| "newspaper"
|
|
1695
|
+
| "not-allowed"
|
|
1696
|
+
| "numbers"
|
|
1697
|
+
| "office-building"
|
|
1698
|
+
| "outline"
|
|
1699
|
+
| "paper-airplane"
|
|
1700
|
+
| "paper-clip"
|
|
1701
|
+
| "pause"
|
|
1702
|
+
| "pencil-square"
|
|
1703
|
+
| "person-2"
|
|
1704
|
+
| "person-3"
|
|
1705
|
+
| "person-circle"
|
|
1706
|
+
| "phone"
|
|
1707
|
+
| "picture-in-picture"
|
|
1708
|
+
| "pie-chart"
|
|
1709
|
+
| "pin"
|
|
1710
|
+
| "pizza-slice"
|
|
1711
|
+
| "play"
|
|
1712
|
+
| "plug"
|
|
1713
|
+
| "plus-circle"
|
|
1714
|
+
| "plus-minus"
|
|
1715
|
+
| "pointer"
|
|
1716
|
+
| "pointer-stroke"
|
|
1717
|
+
| "priority-high"
|
|
1718
|
+
| "priority-low"
|
|
1719
|
+
| "priority-medium"
|
|
1720
|
+
| "projector"
|
|
1721
|
+
| "pull-close"
|
|
1722
|
+
| "pull-draft"
|
|
1723
|
+
| "pull-open"
|
|
1724
|
+
| "pulse"
|
|
1725
|
+
| "puzzle-piece"
|
|
1726
|
+
| "question-mark-circle"
|
|
1727
|
+
| "question-mark-circle-stroke"
|
|
1728
|
+
| "rectangle-group"
|
|
1729
|
+
| "rectangle-stack-horizontal"
|
|
1730
|
+
| "rectangle-stack-vertical"
|
|
1731
|
+
| "redo"
|
|
1732
|
+
| "reply"
|
|
1733
|
+
| "rewind"
|
|
1734
|
+
| "rewind-10"
|
|
1735
|
+
| "rocketship"
|
|
1736
|
+
| "running"
|
|
1737
|
+
| "scale"
|
|
1738
|
+
| "scissors"
|
|
1739
|
+
| "sensor"
|
|
1740
|
+
| "server"
|
|
1741
|
+
| "server-stack"
|
|
1742
|
+
| "shapes"
|
|
1743
|
+
| "share"
|
|
1744
|
+
| "signal"
|
|
1745
|
+
| "signal-slash"
|
|
1746
|
+
| "signpost"
|
|
1747
|
+
| "sort-ascending"
|
|
1748
|
+
| "sort-descending"
|
|
1749
|
+
| "soundwave"
|
|
1750
|
+
| "split-horizontal"
|
|
1751
|
+
| "split-none"
|
|
1752
|
+
| "star"
|
|
1753
|
+
| "star-half"
|
|
1754
|
+
| "star-stroke"
|
|
1755
|
+
| "start"
|
|
1756
|
+
| "status-offline"
|
|
1757
|
+
| "status-online"
|
|
1758
|
+
| "stop"
|
|
1759
|
+
| "stop-sign"
|
|
1760
|
+
| "stopwatch"
|
|
1761
|
+
| "strikethrough"
|
|
1762
|
+
| "sun"
|
|
1763
|
+
| "swatch"
|
|
1764
|
+
| "switch"
|
|
1765
|
+
| "switch-apps"
|
|
1766
|
+
| "table"
|
|
1767
|
+
| "tag"
|
|
1768
|
+
| "task"
|
|
1769
|
+
| "telescope"
|
|
1770
|
+
| "template"
|
|
1771
|
+
| "terminal"
|
|
1772
|
+
| "thumb"
|
|
1773
|
+
| "thumb-stroke"
|
|
1774
|
+
| "traffic-cone"
|
|
1775
|
+
| "transparent-box"
|
|
1776
|
+
| "trend-down"
|
|
1777
|
+
| "trend-up"
|
|
1778
|
+
| "trophy"
|
|
1779
|
+
| "truck"
|
|
1780
|
+
| "typography"
|
|
1781
|
+
| "undo"
|
|
1782
|
+
| "unlock"
|
|
1783
|
+
| "upload"
|
|
1784
|
+
| "video-camera"
|
|
1785
|
+
| "view-as-grid"
|
|
1786
|
+
| "volume"
|
|
1787
|
+
| "volume-muted"
|
|
1788
|
+
| "wifi"
|
|
1789
|
+
| "wrench"
|
|
1790
|
+
| "x-circle"
|
|
1791
|
+
| "zoom-in"
|
|
1792
|
+
| "zoom-out";
|
|
1793
|
+
/** Sets the direction of the icon.
|
|
1794
|
+
Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */
|
|
1795
|
+
direction?: "up" | "down" | "left" | "right";
|
|
1796
|
+
/** Controls the visual scale of an element to match its importance and available space.
|
|
1797
|
+
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
1798
|
+
|
|
1799
|
+
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
1800
|
+
|
|
1801
|
+
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
1802
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
1803
|
+
/** Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text. */
|
|
1804
|
+
container?: "flat" | "inline" | undefined;
|
|
1805
|
+
/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
|
|
1806
|
+
- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
|
|
1807
|
+
|
|
1808
|
+
- `destructive` Shows the interaction targets destructive actions such as deleting or removing. */
|
|
1809
|
+
interaction?: "emphasis" | "destructive";
|
|
1810
|
+
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
1811
|
+
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
1812
|
+
|
|
1813
|
+
- `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */
|
|
1814
|
+
pressed?: boolean;
|
|
1815
|
+
/** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
|
|
1816
|
+
- `true` The associated content expands and becomes visible to the user.
|
|
1817
|
+
|
|
1818
|
+
- `false` The associated content collapses and hides from the user. */
|
|
1819
|
+
expanded?: boolean;
|
|
1820
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
1821
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
1822
|
+
readOnly?: boolean;
|
|
1823
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
1824
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
1825
|
+
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
1826
|
+
form?: string | HTMLFormElement | null;
|
|
1827
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
1828
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
1829
|
+
name?: string;
|
|
1830
|
+
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
1831
|
+
value?: string;
|
|
1832
|
+
/** Defines the button behavior when associated within a form element.
|
|
1833
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
1834
|
+
type?: "button" | "submit" | "reset";
|
|
1835
|
+
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
1836
|
+
- `true` The element has a disabled state and does not accept interaction.
|
|
1837
|
+
|
|
1838
|
+
- `false` The element has an enabled state and accepts interaction. */
|
|
1839
|
+
disabled?: boolean;
|
|
1840
|
+
/** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
|
|
1841
|
+
- `true` The element holds selection and represents the user's current choice within the group.
|
|
1842
|
+
|
|
1843
|
+
- `false` The element does not hold selection and the user can choose it. */
|
|
1844
|
+
selected?: boolean;
|
|
1845
|
+
/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
|
|
1846
|
+
- `page` Marks the current page within a set of navigation links.
|
|
1847
|
+
|
|
1848
|
+
- `step` Marks the current step within a multi-step process or workflow. */
|
|
1849
|
+
current?: "page" | "step";
|
|
1850
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
1851
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
1852
|
+
popoverTargetElement?: HTMLElement | null;
|
|
1853
|
+
/** The popover target action to perform on the popover target element.
|
|
1854
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
1855
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
1856
|
+
/** The element that receives the command.
|
|
1857
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
1858
|
+
commandForElement?: HTMLElement | null;
|
|
1859
|
+
/** The command to execute on the element.
|
|
1860
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
1861
|
+
command?: string;
|
|
1862
|
+
/** The element that receives the interest.
|
|
1863
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
1864
|
+
interestForElement?: HTMLElement | null;
|
|
1865
|
+
};
|
|
1866
|
+
|
|
1867
|
+
type IconProps = {
|
|
1868
|
+
/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
|
|
1869
|
+
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
1870
|
+
|
|
1871
|
+
- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.
|
|
1872
|
+
|
|
1873
|
+
- `success` Represents positive outcomes, confirmations, or constructive actions.
|
|
1874
|
+
|
|
1875
|
+
- `accent` Highlights important actions or draws attention to primary interactive elements. */
|
|
1876
|
+
status?: "warning" | "danger" | "success" | "accent" | undefined;
|
|
1877
|
+
/** Controls the bounding box size of the icon given a t-shirt style value.
|
|
1878
|
+
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
1632
1879
|
|
|
1633
1880
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
1634
1881
|
|
|
1635
1882
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
1636
|
-
size?: "sm" | "md" | "lg" | "xs" | "xl" |
|
|
1883
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
1637
1884
|
/** Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */
|
|
1638
|
-
direction?: "up" | "down" | "left" | "right" |
|
|
1639
|
-
/** The name of the
|
|
1885
|
+
direction?: "up" | "down" | "left" | "right" | undefined;
|
|
1886
|
+
/** The name of the icon SVG sprite to render. */
|
|
1640
1887
|
name?:
|
|
1641
1888
|
| "placeholder"
|
|
1642
1889
|
| "caret"
|
|
@@ -1913,7 +2160,7 @@ type IconProps = {
|
|
|
1913
2160
|
| "x-circle"
|
|
1914
2161
|
| "zoom-in"
|
|
1915
2162
|
| "zoom-out"
|
|
1916
|
-
|
|
|
2163
|
+
| undefined;
|
|
1917
2164
|
};
|
|
1918
2165
|
|
|
1919
2166
|
type InputGroupProps = {
|
|
@@ -1926,21 +2173,17 @@ type InputGroupProps = {
|
|
|
1926
2173
|
|
|
1927
2174
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
1928
2175
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
1929
|
-
/**
|
|
1930
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2176
|
+
/** Set the visual prominence of the control group */
|
|
1931
2177
|
prominence?: "muted";
|
|
1932
2178
|
};
|
|
1933
2179
|
|
|
1934
2180
|
type InputProps = {
|
|
1935
|
-
/**
|
|
1936
|
-
|
|
1937
|
-
container?: "flat" |
|
|
2181
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
2182
|
+
Use when embedding within another container such as a toolbar. */
|
|
2183
|
+
container?: "flat" | undefined;
|
|
1938
2184
|
/** Sets the rounded visual style of the input. */
|
|
1939
2185
|
rounded?: boolean;
|
|
1940
|
-
/**
|
|
1941
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
1942
|
-
|
|
1943
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2186
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
1944
2187
|
status?: "warning" | "error" | "success" | "disabled";
|
|
1945
2188
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
1946
2189
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -1952,15 +2195,13 @@ type InputProps = {
|
|
|
1952
2195
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
1953
2196
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
1954
2197
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
1955
|
-
|
|
2198
|
+
fitText?: boolean;
|
|
1956
2199
|
/** Sets the input to match native default content block */
|
|
1957
|
-
|
|
1958
|
-
/** Enables
|
|
2200
|
+
fitContent?: boolean;
|
|
2201
|
+
/** Enables internal string values to update for internationalization. */
|
|
1959
2202
|
i18n?: string;
|
|
1960
|
-
/**
|
|
1961
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2203
|
+
/** Set the visual prominence of the control */
|
|
1962
2204
|
prominence?: "muted";
|
|
1963
|
-
|
|
1964
2205
|
/** */
|
|
1965
2206
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
1966
2207
|
};
|
|
@@ -1996,13 +2237,27 @@ type LogoProps = {
|
|
|
1996
2237
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
1997
2238
|
|
|
1998
2239
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
1999
|
-
size?: "sm" | "md" | "lg" |
|
|
2240
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
2000
2241
|
};
|
|
2001
2242
|
|
|
2002
2243
|
type MenuItemProps = {
|
|
2003
|
-
/**
|
|
2004
|
-
-
|
|
2244
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
2245
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2246
|
+
popovertarget?: string;
|
|
2247
|
+
/** The popover target action to perform on the popover target element.
|
|
2248
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
2249
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
2250
|
+
/** The element that receives the command.
|
|
2251
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2252
|
+
commandfor?: string;
|
|
2253
|
+
/** The element that receives the interest.
|
|
2254
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
2255
|
+
interestfor?: string;
|
|
2256
|
+
/** Applies danger styling to destructive or high-risk menu actions. */
|
|
2005
2257
|
status?: "danger";
|
|
2258
|
+
/** Defines the button behavior when associated within a form element.
|
|
2259
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
2260
|
+
type?: "button" | "submit" | "reset";
|
|
2006
2261
|
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
2007
2262
|
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
2008
2263
|
|
|
@@ -2013,20 +2268,18 @@ type MenuItemProps = {
|
|
|
2013
2268
|
|
|
2014
2269
|
- `false` The associated content collapses and hides from the user. */
|
|
2015
2270
|
expanded?: boolean;
|
|
2016
|
-
/**
|
|
2271
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
2017
2272
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
2018
|
-
|
|
2019
|
-
/**
|
|
2020
|
-
|
|
2273
|
+
readOnly?: boolean;
|
|
2274
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
2275
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
2021
2276
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
2022
2277
|
form?: string | HTMLFormElement | null;
|
|
2023
|
-
/** The name of the
|
|
2278
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
2279
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
2024
2280
|
name?: string;
|
|
2025
2281
|
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2026
2282
|
value?: string;
|
|
2027
|
-
/** Defines the button behavior when associated within a form element.
|
|
2028
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
2029
|
-
type?: "button" | "submit" | "reset";
|
|
2030
2283
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
2031
2284
|
- `true` The element has a disabled state and does not accept interaction.
|
|
2032
2285
|
|
|
@@ -2044,26 +2297,17 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
2044
2297
|
current?: "page" | "step";
|
|
2045
2298
|
/** Establishes a relationship between a popover and its invoker button.
|
|
2046
2299
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2047
|
-
|
|
2300
|
+
popoverTargetElement?: HTMLElement | null;
|
|
2048
2301
|
/** The popover target action to perform on the popover target element.
|
|
2049
2302
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
2050
|
-
|
|
2303
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
2051
2304
|
/** The element that receives the command.
|
|
2052
2305
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2053
|
-
|
|
2306
|
+
commandForElement?: HTMLElement | null;
|
|
2054
2307
|
/** The command to execute on the element.
|
|
2055
2308
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2056
2309
|
command?: string;
|
|
2057
2310
|
/** The element that receives the interest.
|
|
2058
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
2059
|
-
interestfor?: string;
|
|
2060
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
2061
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2062
|
-
popoverTargetElement?: HTMLElement | null;
|
|
2063
|
-
/** The element that receives the command.
|
|
2064
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2065
|
-
commandForElement?: HTMLElement | null;
|
|
2066
|
-
/** The element that receives the interest.
|
|
2067
2311
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
2068
2312
|
interestForElement?: HTMLElement | null;
|
|
2069
2313
|
};
|
|
@@ -2074,13 +2318,10 @@ type MenuProps = {
|
|
|
2074
2318
|
};
|
|
2075
2319
|
|
|
2076
2320
|
type MonthProps = {
|
|
2077
|
-
/**
|
|
2078
|
-
|
|
2079
|
-
container?: "flat" |
|
|
2080
|
-
/**
|
|
2081
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2082
|
-
|
|
2083
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2321
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
2322
|
+
Use when embedding within another container such as a toolbar. */
|
|
2323
|
+
container?: "flat" | undefined;
|
|
2324
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2084
2325
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2085
2326
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2086
2327
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2092,23 +2333,21 @@ type MonthProps = {
|
|
|
2092
2333
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2093
2334
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2094
2335
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
2095
|
-
|
|
2336
|
+
fitText?: boolean;
|
|
2096
2337
|
/** Sets the input to match native default content block */
|
|
2097
|
-
|
|
2098
|
-
/** Enables
|
|
2338
|
+
fitContent?: boolean;
|
|
2339
|
+
/** Enables internal string values to update for internationalization. */
|
|
2099
2340
|
i18n?: string;
|
|
2100
|
-
/**
|
|
2101
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2341
|
+
/** Set the visual prominence of the control */
|
|
2102
2342
|
prominence?: "muted";
|
|
2103
|
-
|
|
2104
2343
|
/** */
|
|
2105
2344
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2106
2345
|
};
|
|
2107
2346
|
|
|
2108
2347
|
type NotificationGroupProps = {
|
|
2109
|
-
/** Provides the element that the popover should position relative to.
|
|
2348
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
2110
2349
|
anchor?: string | HTMLElement;
|
|
2111
|
-
/**
|
|
2350
|
+
/** Sets the position of the popover relative to the anchor element.
|
|
2112
2351
|
- `center` Centers the popover directly over the anchor element.
|
|
2113
2352
|
|
|
2114
2353
|
- `top` Positions the popover above the anchor element.
|
|
@@ -2129,13 +2368,15 @@ type NotificationGroupProps = {
|
|
|
2129
2368
|
};
|
|
2130
2369
|
|
|
2131
2370
|
type NotificationProps = {
|
|
2132
|
-
/**
|
|
2371
|
+
/** A delayed `close` event will occur determined from the provided millisecond value. */
|
|
2372
|
+
"close-timeout"?: number;
|
|
2373
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
2133
2374
|
anchor?: string | HTMLElement;
|
|
2134
2375
|
/** @deprecated Use the popover API instead.
|
|
2135
2376
|
The trigger defines what element triggers an `open` interaction event.
|
|
2136
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
2377
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
2137
2378
|
trigger?: string | HTMLElement;
|
|
2138
|
-
/**
|
|
2379
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
2139
2380
|
- `center` Centers the popover directly over the anchor element.
|
|
2140
2381
|
|
|
2141
2382
|
- `top` Positions the popover above the anchor element.
|
|
@@ -2155,14 +2396,21 @@ A trigger can accept a idref string within the same render root or a HTMLElement
|
|
|
2155
2396
|
alignment?: "start" | "end" | "center";
|
|
2156
2397
|
/** @deprecated Use the popover API instead.
|
|
2157
2398
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
2158
|
-
|
|
2399
|
+
behaviorTrigger?: boolean;
|
|
2159
2400
|
/** Indicates whether the user can dismiss or close the element.
|
|
2160
2401
|
- `true` The element displays a close control and the user can dismiss it.
|
|
2161
2402
|
|
|
2162
2403
|
- `false` The user cannot close the element and must dismiss it programmatically. */
|
|
2163
2404
|
closable?: boolean;
|
|
2164
|
-
/**
|
|
2165
|
-
|
|
2405
|
+
/** Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.
|
|
2406
|
+
- `0` Warning or error messages requiring immediate acknowledgment.
|
|
2407
|
+
|
|
2408
|
+
- `3000` Brief success or confirmation messages.
|
|
2409
|
+
|
|
2410
|
+
- `7000` Standard informational messages.
|
|
2411
|
+
|
|
2412
|
+
- `10000` Messages with actions or requiring user decision. */
|
|
2413
|
+
closeTimeout?: number;
|
|
2166
2414
|
/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
|
|
2167
2415
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
2168
2416
|
|
|
@@ -2172,14 +2420,10 @@ Determines if popover visibility behavior should be automatically controlled by
|
|
|
2172
2420
|
|
|
2173
2421
|
- `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */
|
|
2174
2422
|
status?: "accent" | "warning" | "success" | "danger";
|
|
2175
|
-
/**
|
|
2176
|
-
|
|
2177
|
-
container?: "flat" | "default";
|
|
2423
|
+
/** Flat container option applies when embedding within another containing element such as a drawer. */
|
|
2424
|
+
container?: "flat" | undefined;
|
|
2178
2425
|
/** Enables updating internal string values for internationalization. */
|
|
2179
2426
|
i18n?: string;
|
|
2180
|
-
/** */
|
|
2181
|
-
inline?: boolean;
|
|
2182
|
-
|
|
2183
2427
|
/** Dispatched when the notification closes. */
|
|
2184
2428
|
onclose?: (e: CustomEvent<CustomEvent>) => void;
|
|
2185
2429
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
@@ -2196,15 +2440,9 @@ type PageLoaderProps = {};
|
|
|
2196
2440
|
|
|
2197
2441
|
type PagePanelContentProps = {};
|
|
2198
2442
|
|
|
2199
|
-
type PagePanelFooterProps = {
|
|
2200
|
-
/** */
|
|
2201
|
-
slot?: string;
|
|
2202
|
-
};
|
|
2443
|
+
type PagePanelFooterProps = {};
|
|
2203
2444
|
|
|
2204
|
-
type PagePanelHeaderProps = {
|
|
2205
|
-
/** */
|
|
2206
|
-
slot?: string;
|
|
2207
|
-
};
|
|
2445
|
+
type PagePanelHeaderProps = {};
|
|
2208
2446
|
|
|
2209
2447
|
type PagePanelProps = {
|
|
2210
2448
|
/** Controls the visual scale of an element to match its importance and available space.
|
|
@@ -2213,10 +2451,9 @@ type PagePanelProps = {
|
|
|
2213
2451
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
2214
2452
|
|
|
2215
2453
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
2216
|
-
size?: "sm" | "md" | "lg" |
|
|
2454
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
2217
2455
|
/** Enables updating internal string values for internationalization. */
|
|
2218
2456
|
i18n?: string;
|
|
2219
|
-
|
|
2220
2457
|
/** Dispatched after an invoker command removes `hidden` and opens the panel. */
|
|
2221
2458
|
onopen?: (e: CustomEvent<never>) => void;
|
|
2222
2459
|
/** Dispatched after an invoker command sets `hidden` and closes the panel. */
|
|
@@ -2225,30 +2462,41 @@ type PagePanelProps = {
|
|
|
2225
2462
|
|
|
2226
2463
|
type PageProps = {
|
|
2227
2464
|
/** Enables the page to use the document content scroll rather than its internal fixed scroll. */
|
|
2228
|
-
|
|
2465
|
+
documentScroll?: boolean;
|
|
2229
2466
|
};
|
|
2230
2467
|
|
|
2231
2468
|
type PaginationProps = {
|
|
2469
|
+
/** A JSON-serialized array of page-size options available in the selector. */
|
|
2470
|
+
"step-sizes"?: string;
|
|
2471
|
+
/** Defines the minimum text length.
|
|
2472
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
2473
|
+
minlength?: number;
|
|
2474
|
+
/** Defines the maximum text length.
|
|
2475
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
2476
|
+
maxlength?: number;
|
|
2232
2477
|
/** The number of items per page. */
|
|
2233
2478
|
step?: number;
|
|
2234
|
-
/**
|
|
2479
|
+
/** Page-size options available in the selector. */
|
|
2235
2480
|
stepSizes?: number[];
|
|
2236
2481
|
/** The total number of items. */
|
|
2237
2482
|
items?: number;
|
|
2238
2483
|
/** Whether the pagination is skippable to start/end. */
|
|
2239
2484
|
skippable?: boolean;
|
|
2240
2485
|
/** Whether the step selector has a disabled state. */
|
|
2241
|
-
|
|
2242
|
-
/**
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
- `inline` Element container reduces to fit within inline content such as a block of text. */
|
|
2246
|
-
container?: "flat" | "inline" | "default";
|
|
2486
|
+
disableStep?: boolean;
|
|
2487
|
+
/** Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content. */
|
|
2488
|
+
container?: "flat" | "inline" | undefined;
|
|
2247
2489
|
/** Enables updating internal string values for internationalization. */
|
|
2248
2490
|
i18n?: string;
|
|
2249
|
-
/**
|
|
2250
|
-
|
|
2251
|
-
|
|
2491
|
+
/** value the current page number */
|
|
2492
|
+
value?: number;
|
|
2493
|
+
/** The initial value used when the parent form resets. */
|
|
2494
|
+
defaultValue?: string;
|
|
2495
|
+
/** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
|
|
2496
|
+
- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
|
|
2497
|
+
|
|
2498
|
+
- `false` The element allows editing and the user can change its value through interaction. */
|
|
2499
|
+
readOnly?: boolean;
|
|
2252
2500
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
2253
2501
|
- `true` The element has a disabled state and does not accept interaction.
|
|
2254
2502
|
|
|
@@ -2268,19 +2516,16 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max */
|
|
|
2268
2516
|
max?: number | null;
|
|
2269
2517
|
/** Defines the minimum text length.
|
|
2270
2518
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
2271
|
-
|
|
2519
|
+
minLength?: number;
|
|
2272
2520
|
/** Defines the maximum text length.
|
|
2273
2521
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
2274
|
-
|
|
2275
|
-
/** The name
|
|
2522
|
+
maxLength?: number;
|
|
2523
|
+
/** The name submitted with the control value as part of the form data.
|
|
2524
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */
|
|
2276
2525
|
name?: string;
|
|
2277
2526
|
/** Disables constraint validation for this control.
|
|
2278
2527
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */
|
|
2279
|
-
|
|
2280
|
-
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2281
|
-
value?: number;
|
|
2282
|
-
/** The initial value used when the parent form resets. */
|
|
2283
|
-
defaultValue?: string;
|
|
2528
|
+
noValidate?: boolean;
|
|
2284
2529
|
/** The form associated with the control.
|
|
2285
2530
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
2286
2531
|
form?: HTMLFormElement | null;
|
|
@@ -2304,7 +2549,7 @@ https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */
|
|
|
2304
2549
|
labels?: NodeList;
|
|
2305
2550
|
/** Text content from labels associated with the control. */
|
|
2306
2551
|
composedLabel?: string;
|
|
2307
|
-
/**
|
|
2552
|
+
/** Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries. */
|
|
2308
2553
|
"onstep-change"?: (e: CustomEvent<CustomEvent>) => void;
|
|
2309
2554
|
/** Dispatched when the last page is active */
|
|
2310
2555
|
"onlast-page"?: (e: CustomEvent<CustomEvent>) => void;
|
|
@@ -2334,12 +2579,11 @@ type PanelProps = {
|
|
|
2334
2579
|
- `false` The user cannot close the element and must dismiss it programmatically. */
|
|
2335
2580
|
closable?: boolean;
|
|
2336
2581
|
/** Determines whether the panel should handle auto-closing behavior vs. defaults to off. */
|
|
2337
|
-
|
|
2582
|
+
behaviorExpand?: boolean;
|
|
2338
2583
|
/** Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. */
|
|
2339
2584
|
side?: "left" | "right";
|
|
2340
2585
|
/** Enables updating internal string values for internationalization. */
|
|
2341
2586
|
i18n?: string;
|
|
2342
|
-
|
|
2343
2587
|
/** Dispatched when the panel opens. */
|
|
2344
2588
|
onopen?: (e: CustomEvent<never>) => void;
|
|
2345
2589
|
/** Dispatched when the panel closes. */
|
|
@@ -2347,13 +2591,10 @@ type PanelProps = {
|
|
|
2347
2591
|
};
|
|
2348
2592
|
|
|
2349
2593
|
type PasswordProps = {
|
|
2350
|
-
/**
|
|
2351
|
-
|
|
2352
|
-
container?: "flat" |
|
|
2353
|
-
/**
|
|
2354
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2355
|
-
|
|
2356
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2594
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
2595
|
+
Use when embedding within another container such as a toolbar. */
|
|
2596
|
+
container?: "flat" | undefined;
|
|
2597
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2357
2598
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2358
2599
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2359
2600
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2365,25 +2606,35 @@ type PasswordProps = {
|
|
|
2365
2606
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2366
2607
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2367
2608
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
2368
|
-
|
|
2609
|
+
fitText?: boolean;
|
|
2369
2610
|
/** Sets the input to match native default content block */
|
|
2370
|
-
|
|
2371
|
-
/** Enables
|
|
2611
|
+
fitContent?: boolean;
|
|
2612
|
+
/** Enables internal string values to update for internationalization. */
|
|
2372
2613
|
i18n?: string;
|
|
2373
|
-
/**
|
|
2374
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2614
|
+
/** Set the visual prominence of the control */
|
|
2375
2615
|
prominence?: "muted";
|
|
2376
|
-
|
|
2377
2616
|
/** */
|
|
2378
2617
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2379
2618
|
};
|
|
2380
2619
|
|
|
2381
2620
|
type PreferencesInputProps = {
|
|
2621
|
+
/** Defines the minimum text length.
|
|
2622
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
2623
|
+
minlength?: number;
|
|
2624
|
+
/** Defines the maximum text length.
|
|
2625
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
2626
|
+
maxlength?: number;
|
|
2382
2627
|
/** Enables updating internal string values for internationalization. */
|
|
2383
2628
|
i18n?: string;
|
|
2384
|
-
/**
|
|
2385
|
-
|
|
2386
|
-
|
|
2629
|
+
/** Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute. */
|
|
2630
|
+
value?: { "color-scheme"?: string; scale?: string; "reduced-motion"?: boolean };
|
|
2631
|
+
/** The initial value used when the parent form resets. */
|
|
2632
|
+
defaultValue?: string;
|
|
2633
|
+
/** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
|
|
2634
|
+
- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
|
|
2635
|
+
|
|
2636
|
+
- `false` The element allows editing and the user can change its value through interaction. */
|
|
2637
|
+
readOnly?: boolean;
|
|
2387
2638
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
2388
2639
|
- `true` The element has a disabled state and does not accept interaction.
|
|
2389
2640
|
|
|
@@ -2406,19 +2657,16 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step */
|
|
|
2406
2657
|
step?: number | null;
|
|
2407
2658
|
/** Defines the minimum text length.
|
|
2408
2659
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
2409
|
-
|
|
2660
|
+
minLength?: number;
|
|
2410
2661
|
/** Defines the maximum text length.
|
|
2411
2662
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
2412
|
-
|
|
2413
|
-
/** The name
|
|
2663
|
+
maxLength?: number;
|
|
2664
|
+
/** The name submitted with the control value as part of the form data.
|
|
2665
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */
|
|
2414
2666
|
name?: string;
|
|
2415
2667
|
/** Disables constraint validation for this control.
|
|
2416
2668
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */
|
|
2417
|
-
|
|
2418
|
-
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2419
|
-
value?: { "color-scheme"?: string; scale?: string; "reduced-motion"?: boolean };
|
|
2420
|
-
/** The initial value used when the parent form resets. */
|
|
2421
|
-
defaultValue?: string;
|
|
2669
|
+
noValidate?: boolean;
|
|
2422
2670
|
/** The form associated with the control.
|
|
2423
2671
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
2424
2672
|
form?: HTMLFormElement | null;
|
|
@@ -2449,8 +2697,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */
|
|
|
2449
2697
|
};
|
|
2450
2698
|
|
|
2451
2699
|
type ProgressBarProps = {
|
|
2452
|
-
/**
|
|
2453
|
-
value?: number |
|
|
2700
|
+
/** The current `value` of the progress indicator, set to the native HTML progress element. */
|
|
2701
|
+
value?: number | undefined;
|
|
2454
2702
|
/** The `max` property sets the highest value that `value` scales to. */
|
|
2455
2703
|
max?: number;
|
|
2456
2704
|
/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
|
|
@@ -2465,11 +2713,11 @@ type ProgressBarProps = {
|
|
|
2465
2713
|
};
|
|
2466
2714
|
|
|
2467
2715
|
type ProgressRingProps = {
|
|
2468
|
-
/**
|
|
2469
|
-
value?: number |
|
|
2716
|
+
/** The current `value` of the progress ring. When not set, an indeterminate animation will show. */
|
|
2717
|
+
value?: number | undefined;
|
|
2470
2718
|
/** The `max` value of the progress ring that the `value` is proportionally scaled to. */
|
|
2471
2719
|
max?: number;
|
|
2472
|
-
/**
|
|
2720
|
+
/** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons.
|
|
2473
2721
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
2474
2722
|
|
|
2475
2723
|
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
@@ -2477,14 +2725,14 @@ type ProgressRingProps = {
|
|
|
2477
2725
|
- `success` Represents positive outcomes, confirmations, or constructive actions.
|
|
2478
2726
|
|
|
2479
2727
|
- `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */
|
|
2480
|
-
status?: "accent" | "warning" | "success" | "danger" | "neutral" |
|
|
2481
|
-
/**
|
|
2728
|
+
status?: "accent" | "warning" | "success" | "danger" | "neutral" | undefined;
|
|
2729
|
+
/** T-shirt `size` of the progress indicator, used to scale the ring.
|
|
2482
2730
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
2483
2731
|
|
|
2484
2732
|
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
2485
2733
|
|
|
2486
2734
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
2487
|
-
size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" |
|
|
2735
|
+
size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" | undefined;
|
|
2488
2736
|
/** Enables updating internal string values for internationalization. */
|
|
2489
2737
|
i18n?: string;
|
|
2490
2738
|
};
|
|
@@ -2497,26 +2745,20 @@ type ProgressiveFilterChipProps = {
|
|
|
2497
2745
|
closable?: boolean;
|
|
2498
2746
|
/** Enables updating internal string values for internationalization. */
|
|
2499
2747
|
i18n?: string;
|
|
2500
|
-
|
|
2501
2748
|
/** Dispatched when the filter chip closes. */
|
|
2502
2749
|
onclose?: (e: CustomEvent<never>) => void;
|
|
2503
2750
|
};
|
|
2504
2751
|
|
|
2505
2752
|
type PulseProps = {
|
|
2506
|
-
/**
|
|
2753
|
+
/** Sets size of the pulse component. You can also update size using the `width + height` css props.
|
|
2507
2754
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
2508
2755
|
|
|
2509
|
-
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
2510
|
-
|
|
2511
|
-
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
2512
|
-
size?: "sm" | "md" | "lg" | "xs" | "default";
|
|
2513
|
-
/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
|
|
2514
|
-
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
2515
|
-
|
|
2516
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2756
|
+
- `md` Standard size that works well in most contexts and provides balanced visibility.
|
|
2517
2757
|
|
|
2518
|
-
- `
|
|
2519
|
-
|
|
2758
|
+
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */
|
|
2759
|
+
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
2760
|
+
/** These visual treatments represent the `status` of different tasks. When `status` changes to `accent`, `warning` or `danger`, the component embeds appropriate colors. */
|
|
2761
|
+
status?: "accent" | "warning" | "danger" | undefined;
|
|
2520
2762
|
};
|
|
2521
2763
|
|
|
2522
2764
|
type RadioGroupProps = {
|
|
@@ -2529,16 +2771,12 @@ type RadioGroupProps = {
|
|
|
2529
2771
|
|
|
2530
2772
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2531
2773
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2532
|
-
/**
|
|
2533
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2774
|
+
/** Set the visual prominence of the control group */
|
|
2534
2775
|
prominence?: "muted";
|
|
2535
2776
|
};
|
|
2536
2777
|
|
|
2537
2778
|
type RadioProps = {
|
|
2538
|
-
/**
|
|
2539
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2540
|
-
|
|
2541
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2779
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2542
2780
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2543
2781
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2544
2782
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2549,16 +2787,10 @@ type RadioProps = {
|
|
|
2549
2787
|
|
|
2550
2788
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2551
2789
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2552
|
-
/**
|
|
2553
|
-
"fit-text"?: boolean;
|
|
2554
|
-
/** Sets the input to match native default content block */
|
|
2555
|
-
"fit-content"?: boolean;
|
|
2556
|
-
/** Enables updating internal string values for internationalization. */
|
|
2790
|
+
/** Enables internal string values to update for internationalization. */
|
|
2557
2791
|
i18n?: string;
|
|
2558
|
-
/**
|
|
2559
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2792
|
+
/** Set the visual prominence of the control */
|
|
2560
2793
|
prominence?: "muted";
|
|
2561
|
-
|
|
2562
2794
|
/** */
|
|
2563
2795
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2564
2796
|
};
|
|
@@ -2569,10 +2801,7 @@ type RangeProps = {
|
|
|
2569
2801
|
|
|
2570
2802
|
- `horizontal` Element orients horizontally with left-to-right flow. */
|
|
2571
2803
|
orientation?: "vertical" | "horizontal";
|
|
2572
|
-
/**
|
|
2573
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2574
|
-
|
|
2575
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2804
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2576
2805
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2577
2806
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2578
2807
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2584,36 +2813,47 @@ type RangeProps = {
|
|
|
2584
2813
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2585
2814
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2586
2815
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
2587
|
-
|
|
2816
|
+
fitText?: boolean;
|
|
2588
2817
|
/** Sets the input to match native default content block */
|
|
2589
|
-
|
|
2590
|
-
/** Enables
|
|
2818
|
+
fitContent?: boolean;
|
|
2819
|
+
/** Enables internal string values to update for internationalization. */
|
|
2591
2820
|
i18n?: string;
|
|
2592
|
-
/**
|
|
2593
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2821
|
+
/** Set the visual prominence of the control */
|
|
2594
2822
|
prominence?: "muted";
|
|
2595
|
-
|
|
2596
2823
|
/** */
|
|
2597
2824
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2598
2825
|
};
|
|
2599
2826
|
|
|
2600
2827
|
type ResizeHandleProps = {
|
|
2828
|
+
/** Defines the minimum text length.
|
|
2829
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
2830
|
+
minlength?: number;
|
|
2831
|
+
/** Defines the maximum text length.
|
|
2832
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
2833
|
+
maxlength?: number;
|
|
2601
2834
|
/** Controls the directional flow of the element's layout and interaction pattern.
|
|
2602
2835
|
- `horizontal` Element orients horizontally with left-to-right flow.
|
|
2603
2836
|
|
|
2604
2837
|
- `vertical` Element orients vertically with top-to-bottom flow. */
|
|
2605
|
-
orientation?: "horizontal" | "vertical" |
|
|
2838
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
2606
2839
|
/** Determines the min resize value. */
|
|
2607
2840
|
min?: number;
|
|
2608
2841
|
/** Determines the max resize value. */
|
|
2609
2842
|
max?: number;
|
|
2610
2843
|
/** Determines the value step change. */
|
|
2611
2844
|
step?: number;
|
|
2612
|
-
/**
|
|
2845
|
+
/** Updates internal string values for internationalization. */
|
|
2613
2846
|
i18n?: string;
|
|
2614
|
-
/**
|
|
2615
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
|
|
2616
|
-
|
|
2847
|
+
/** The current form control value.
|
|
2848
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/value */
|
|
2849
|
+
value?: string;
|
|
2850
|
+
/** The initial value used when the parent form resets. */
|
|
2851
|
+
defaultValue?: string;
|
|
2852
|
+
/** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
|
|
2853
|
+
- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
|
|
2854
|
+
|
|
2855
|
+
- `false` The element allows editing and the user can change its value through interaction. */
|
|
2856
|
+
readOnly?: boolean;
|
|
2617
2857
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
2618
2858
|
- `true` The element has a disabled state and does not accept interaction.
|
|
2619
2859
|
|
|
@@ -2627,19 +2867,16 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern */
|
|
|
2627
2867
|
pattern?: string;
|
|
2628
2868
|
/** Defines the minimum text length.
|
|
2629
2869
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */
|
|
2630
|
-
|
|
2870
|
+
minLength?: number;
|
|
2631
2871
|
/** Defines the maximum text length.
|
|
2632
2872
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */
|
|
2633
|
-
|
|
2634
|
-
/** The name
|
|
2873
|
+
maxLength?: number;
|
|
2874
|
+
/** The name submitted with the control value as part of the form data.
|
|
2875
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */
|
|
2635
2876
|
name?: string;
|
|
2636
2877
|
/** Disables constraint validation for this control.
|
|
2637
2878
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */
|
|
2638
|
-
|
|
2639
|
-
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2640
|
-
value?: number;
|
|
2641
|
-
/** The initial value used when the parent form resets. */
|
|
2642
|
-
defaultValue?: string;
|
|
2879
|
+
noValidate?: boolean;
|
|
2643
2880
|
/** The form associated with the control.
|
|
2644
2881
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
2645
2882
|
form?: HTMLFormElement | null;
|
|
@@ -2668,15 +2905,12 @@ https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */
|
|
|
2668
2905
|
};
|
|
2669
2906
|
|
|
2670
2907
|
type SearchProps = {
|
|
2671
|
-
/**
|
|
2672
|
-
|
|
2673
|
-
container?: "flat" |
|
|
2908
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
2909
|
+
Use when embedding within another container such as a toolbar. */
|
|
2910
|
+
container?: "flat" | undefined;
|
|
2674
2911
|
/** Sets the rounded visual style of the input. */
|
|
2675
2912
|
rounded?: boolean;
|
|
2676
|
-
/**
|
|
2677
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2678
|
-
|
|
2679
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2913
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2680
2914
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2681
2915
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2682
2916
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2688,31 +2922,23 @@ type SearchProps = {
|
|
|
2688
2922
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2689
2923
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2690
2924
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
2691
|
-
|
|
2925
|
+
fitText?: boolean;
|
|
2692
2926
|
/** Sets the input to match native default content block */
|
|
2693
|
-
|
|
2694
|
-
/** Enables
|
|
2927
|
+
fitContent?: boolean;
|
|
2928
|
+
/** Enables internal string values to update for internationalization. */
|
|
2695
2929
|
i18n?: string;
|
|
2696
|
-
/**
|
|
2697
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2930
|
+
/** Set the visual prominence of the control */
|
|
2698
2931
|
prominence?: "muted";
|
|
2699
|
-
|
|
2700
2932
|
/** */
|
|
2701
2933
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2702
2934
|
};
|
|
2703
2935
|
|
|
2704
2936
|
type SelectProps = {
|
|
2705
|
-
/**
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
- `inline` Element container reduces to fit within inline content such as a block of text. */
|
|
2709
|
-
container?: "flat" | "inline" | "default";
|
|
2710
|
-
/** Enables updating internal string values for internationalization. */
|
|
2937
|
+
/** Flat container option applies when embedding the component within another containing element */
|
|
2938
|
+
container?: "flat" | "inline" | undefined;
|
|
2939
|
+
/** Updates internal string values for internationalization. */
|
|
2711
2940
|
i18n?: string;
|
|
2712
|
-
/**
|
|
2713
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2714
|
-
|
|
2715
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
2941
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2716
2942
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2717
2943
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2718
2944
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2724,13 +2950,11 @@ type SelectProps = {
|
|
|
2724
2950
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2725
2951
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2726
2952
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
2727
|
-
|
|
2953
|
+
fitText?: boolean;
|
|
2728
2954
|
/** Sets the input to match native default content block */
|
|
2729
|
-
|
|
2730
|
-
/**
|
|
2731
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
2955
|
+
fitContent?: boolean;
|
|
2956
|
+
/** Set the visual prominence of the control */
|
|
2732
2957
|
prominence?: "muted";
|
|
2733
|
-
|
|
2734
2958
|
/** */
|
|
2735
2959
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2736
2960
|
};
|
|
@@ -2740,15 +2964,30 @@ type SkeletonProps = {
|
|
|
2740
2964
|
effect?: "shimmer" | "pulse";
|
|
2741
2965
|
/** Geometry of the placeholder — rounded corners or a full pill outline. */
|
|
2742
2966
|
shape?: "round" | "pill";
|
|
2743
|
-
/**
|
|
2967
|
+
/** Hides the skeleton host when `true` and sets `aria-busy` to the inverse visibility state. */
|
|
2744
2968
|
hidden?: boolean;
|
|
2745
2969
|
};
|
|
2746
2970
|
|
|
2747
2971
|
type SortButtonProps = {
|
|
2972
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
2973
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2974
|
+
popovertarget?: string;
|
|
2975
|
+
/** The popover target action to perform on the popover target element.
|
|
2976
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
2977
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
2978
|
+
/** The element that receives the command.
|
|
2979
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2980
|
+
commandfor?: string;
|
|
2981
|
+
/** The element that receives the interest.
|
|
2982
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
2983
|
+
interestfor?: string;
|
|
2748
2984
|
/** The current sort value, can be ascending, descending, or none. */
|
|
2749
2985
|
sort?: "ascending" | "descending" | "none";
|
|
2750
|
-
/**
|
|
2986
|
+
/** Updates internal string values for internationalization. */
|
|
2751
2987
|
i18n?: string;
|
|
2988
|
+
/** Defines the button behavior when associated within a form element.
|
|
2989
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
2990
|
+
type?: "button" | "submit" | "reset";
|
|
2752
2991
|
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
2753
2992
|
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
2754
2993
|
|
|
@@ -2759,20 +2998,18 @@ type SortButtonProps = {
|
|
|
2759
2998
|
|
|
2760
2999
|
- `false` The associated content collapses and hides from the user. */
|
|
2761
3000
|
expanded?: boolean;
|
|
2762
|
-
/**
|
|
3001
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
2763
3002
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
2764
|
-
|
|
2765
|
-
/**
|
|
2766
|
-
|
|
3003
|
+
readOnly?: boolean;
|
|
3004
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
3005
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
2767
3006
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
2768
3007
|
form?: string | HTMLFormElement | null;
|
|
2769
|
-
/** The name of the
|
|
3008
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
3009
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
2770
3010
|
name?: string;
|
|
2771
3011
|
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2772
3012
|
value?: string;
|
|
2773
|
-
/** Defines the button behavior when associated within a form element.
|
|
2774
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
2775
|
-
type?: "button" | "submit" | "reset";
|
|
2776
3013
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
2777
3014
|
- `true` The element has a disabled state and does not accept interaction.
|
|
2778
3015
|
|
|
@@ -2790,26 +3027,17 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
2790
3027
|
current?: "page" | "step";
|
|
2791
3028
|
/** Establishes a relationship between a popover and its invoker button.
|
|
2792
3029
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2793
|
-
|
|
3030
|
+
popoverTargetElement?: HTMLElement | null;
|
|
2794
3031
|
/** The popover target action to perform on the popover target element.
|
|
2795
3032
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
2796
|
-
|
|
3033
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
2797
3034
|
/** The element that receives the command.
|
|
2798
3035
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2799
|
-
|
|
3036
|
+
commandForElement?: HTMLElement | null;
|
|
2800
3037
|
/** The command to execute on the element.
|
|
2801
3038
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2802
3039
|
command?: string;
|
|
2803
3040
|
/** The element that receives the interest.
|
|
2804
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
2805
|
-
interestfor?: string;
|
|
2806
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
2807
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2808
|
-
popoverTargetElement?: HTMLElement | null;
|
|
2809
|
-
/** The element that receives the command.
|
|
2810
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
2811
|
-
commandForElement?: HTMLElement | null;
|
|
2812
|
-
/** The element that receives the interest.
|
|
2813
3041
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
2814
3042
|
interestForElement?: HTMLElement | null;
|
|
2815
3043
|
/** Dispatched on activation with `detail: { value, next }`, where `value` is the current sort and `next` follows the cycle `none` → `ascending` → `descending` → `none`. */
|
|
@@ -2817,6 +3045,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
|
|
|
2817
3045
|
};
|
|
2818
3046
|
|
|
2819
3047
|
type SparklineProps = {
|
|
3048
|
+
/** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */
|
|
3049
|
+
"interval-length"?: number;
|
|
2820
3050
|
/** Numeric values representing a data series. */
|
|
2821
3051
|
data?: number[];
|
|
2822
3052
|
/** Controls the visual representation of data points.
|
|
@@ -2837,7 +3067,7 @@ type SparklineProps = {
|
|
|
2837
3067
|
|
|
2838
3068
|
- `step` Connects points with horizontal and vertical step segments. */
|
|
2839
3069
|
interpolation?: "linear" | "smooth" | "step";
|
|
2840
|
-
/**
|
|
3070
|
+
/** Applies semantic status colors used across Elements status patterns.
|
|
2841
3071
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
2842
3072
|
|
|
2843
3073
|
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
@@ -2883,8 +3113,8 @@ type SparklineProps = {
|
|
|
2883
3113
|
| "warning"
|
|
2884
3114
|
| "success"
|
|
2885
3115
|
| "danger"
|
|
2886
|
-
|
|
|
2887
|
-
/** Controls the
|
|
3116
|
+
| undefined;
|
|
3117
|
+
/** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em).
|
|
2888
3118
|
- `xs` Extra small size for minimal elements or highly dense layouts.
|
|
2889
3119
|
|
|
2890
3120
|
- `sm` Compact size for dense layouts or secondary elements with less visual prominence.
|
|
@@ -2894,28 +3124,25 @@ type SparklineProps = {
|
|
|
2894
3124
|
- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.
|
|
2895
3125
|
|
|
2896
3126
|
- `xl` Extra large size for emphasizing elements or sparse layouts. */
|
|
2897
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" |
|
|
3127
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
|
2898
3128
|
/** Denotes the first data point by rendering a symbol at its position. */
|
|
2899
|
-
|
|
3129
|
+
denoteFirst?: boolean;
|
|
2900
3130
|
/** Denotes the last data point by rendering a symbol at its position. */
|
|
2901
|
-
|
|
3131
|
+
denoteLast?: boolean;
|
|
2902
3132
|
/** Denotes all minimum-value data points by rendering symbols at their positions. */
|
|
2903
|
-
|
|
3133
|
+
denoteMin?: boolean;
|
|
2904
3134
|
/** Denotes all maximum-value data points by rendering symbols at their positions. */
|
|
2905
|
-
|
|
3135
|
+
denoteMax?: boolean;
|
|
2906
3136
|
/** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */
|
|
2907
|
-
|
|
3137
|
+
intervalLength?: number;
|
|
2908
3138
|
/** Lower bound for the y-axis domain. When undefined, derives the bound from data. */
|
|
2909
|
-
min?: number |
|
|
3139
|
+
min?: number | undefined;
|
|
2910
3140
|
/** Upper bound for the y-axis domain. When undefined, derives the bound from data. */
|
|
2911
|
-
max?: number |
|
|
3141
|
+
max?: number | undefined;
|
|
2912
3142
|
};
|
|
2913
3143
|
|
|
2914
3144
|
type StarRatingProps = {
|
|
2915
|
-
/**
|
|
2916
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
2917
|
-
|
|
2918
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
3145
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
2919
3146
|
status?: "warning" | "error" | "success" | "disabled";
|
|
2920
3147
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
2921
3148
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -2927,39 +3154,42 @@ type StarRatingProps = {
|
|
|
2927
3154
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
2928
3155
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
2929
3156
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
2930
|
-
|
|
3157
|
+
fitText?: boolean;
|
|
2931
3158
|
/** Sets the input to match native default content block */
|
|
2932
|
-
|
|
2933
|
-
/** Enables
|
|
3159
|
+
fitContent?: boolean;
|
|
3160
|
+
/** Enables internal string values to update for internationalization. */
|
|
2934
3161
|
i18n?: string;
|
|
2935
|
-
/**
|
|
2936
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3162
|
+
/** Set the visual prominence of the control */
|
|
2937
3163
|
prominence?: "muted";
|
|
2938
|
-
|
|
2939
3164
|
/** */
|
|
2940
3165
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
2941
3166
|
};
|
|
2942
3167
|
|
|
2943
3168
|
type StepsItemProps = {
|
|
3169
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
3170
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3171
|
+
popovertarget?: string;
|
|
3172
|
+
/** The popover target action to perform on the popover target element.
|
|
3173
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
3174
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
3175
|
+
/** The element that receives the command.
|
|
3176
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3177
|
+
commandfor?: string;
|
|
3178
|
+
/** The element that receives the interest.
|
|
3179
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3180
|
+
interestfor?: string;
|
|
2944
3181
|
/** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
|
|
2945
3182
|
- `true` The element holds selection and represents the user's current choice within the group.
|
|
2946
3183
|
|
|
2947
3184
|
- `false` The element does not hold selection and the user can choose it. */
|
|
2948
3185
|
selected?: boolean;
|
|
2949
|
-
/**
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
-
|
|
2955
|
-
|
|
2956
|
-
/**
|
|
2957
|
-
Demonstrates different container styles to accommodate visual weight and context.
|
|
2958
|
-
- `flat` Element has white space bounds but reduced visual container.
|
|
2959
|
-
- `inline` Element container reduces to fit within inline content such as a block of text.
|
|
2960
|
-
- `inset` Element container optimizes for embedding or inset placement inside another containing element.
|
|
2961
|
-
- `full` Element container optimizes for filling its container bounds. */
|
|
2962
|
-
container?: "condensed" | "default";
|
|
3186
|
+
/** Controls the step status. `accent` has no default status icon, `danger` displays an alert icon, `success` displays a check icon, and `pending` displays a progress indicator. Omit the property to display the step number. */
|
|
3187
|
+
status?: "accent" | "danger" | "success" | "pending" | undefined;
|
|
3188
|
+
/** Determines whether the steps should display in condensed format with no text labels. */
|
|
3189
|
+
container?: "condensed" | undefined;
|
|
3190
|
+
/** Defines the button behavior when associated within a form element.
|
|
3191
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
3192
|
+
type?: "button" | "submit" | "reset";
|
|
2963
3193
|
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
2964
3194
|
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
2965
3195
|
|
|
@@ -2970,20 +3200,18 @@ Demonstrates different container styles to accommodate visual weight and context
|
|
|
2970
3200
|
|
|
2971
3201
|
- `false` The associated content collapses and hides from the user. */
|
|
2972
3202
|
expanded?: boolean;
|
|
2973
|
-
/**
|
|
3203
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
2974
3204
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
2975
|
-
|
|
2976
|
-
/**
|
|
2977
|
-
|
|
3205
|
+
readOnly?: boolean;
|
|
3206
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
3207
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
2978
3208
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
2979
3209
|
form?: string | HTMLFormElement | null;
|
|
2980
|
-
/** The name of the
|
|
3210
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
3211
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
2981
3212
|
name?: string;
|
|
2982
3213
|
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
2983
3214
|
value?: string;
|
|
2984
|
-
/** Defines the button behavior when associated within a form element.
|
|
2985
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
2986
|
-
type?: "button" | "submit" | "reset";
|
|
2987
3215
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
2988
3216
|
- `true` The element has a disabled state and does not accept interaction.
|
|
2989
3217
|
|
|
@@ -2996,26 +3224,17 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
2996
3224
|
current?: "page" | "step";
|
|
2997
3225
|
/** Establishes a relationship between a popover and its invoker button.
|
|
2998
3226
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
2999
|
-
|
|
3227
|
+
popoverTargetElement?: HTMLElement | null;
|
|
3000
3228
|
/** The popover target action to perform on the popover target element.
|
|
3001
3229
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
3002
|
-
|
|
3230
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
3003
3231
|
/** The element that receives the command.
|
|
3004
3232
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3005
|
-
|
|
3233
|
+
commandForElement?: HTMLElement | null;
|
|
3006
3234
|
/** The command to execute on the element.
|
|
3007
3235
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3008
3236
|
command?: string;
|
|
3009
3237
|
/** The element that receives the interest.
|
|
3010
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3011
|
-
interestfor?: string;
|
|
3012
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
3013
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3014
|
-
popoverTargetElement?: HTMLElement | null;
|
|
3015
|
-
/** The element that receives the command.
|
|
3016
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3017
|
-
commandForElement?: HTMLElement | null;
|
|
3018
|
-
/** The element that receives the interest.
|
|
3019
3238
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3020
3239
|
interestForElement?: HTMLElement | null;
|
|
3021
3240
|
};
|
|
@@ -3023,15 +3242,10 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
|
|
|
3023
3242
|
type StepsProps = {
|
|
3024
3243
|
/** Determines whether the steps should display in a vertical layout vs. defaulting to horizontal. */
|
|
3025
3244
|
vertical?: boolean;
|
|
3026
|
-
/**
|
|
3027
|
-
|
|
3028
|
-
- `flat` Element has white space bounds but reduced visual container.
|
|
3029
|
-
- `inline` Element container reduces to fit within inline content such as a block of text.
|
|
3030
|
-
- `inset` Element container optimizes for embedding or inset placement inside another containing element.
|
|
3031
|
-
- `full` Element container optimizes for filling its container bounds. */
|
|
3032
|
-
container?: "condensed" | "default";
|
|
3245
|
+
/** Determines whether the steps should display in condensed format with no text labels. */
|
|
3246
|
+
container?: "condensed" | undefined;
|
|
3033
3247
|
/** Determines whether the steps should handle selection behavior vs. defaults to off. */
|
|
3034
|
-
|
|
3248
|
+
behaviorSelect?: boolean;
|
|
3035
3249
|
};
|
|
3036
3250
|
|
|
3037
3251
|
type SwitchGroupProps = {
|
|
@@ -3044,16 +3258,12 @@ type SwitchGroupProps = {
|
|
|
3044
3258
|
|
|
3045
3259
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
3046
3260
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
3047
|
-
/**
|
|
3048
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3261
|
+
/** Set the visual prominence of the control group */
|
|
3049
3262
|
prominence?: "muted";
|
|
3050
3263
|
};
|
|
3051
3264
|
|
|
3052
3265
|
type SwitchProps = {
|
|
3053
|
-
/**
|
|
3054
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
3055
|
-
|
|
3056
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
3266
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
3057
3267
|
status?: "warning" | "error" | "success" | "disabled";
|
|
3058
3268
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
3059
3269
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -3065,33 +3275,46 @@ type SwitchProps = {
|
|
|
3065
3275
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
3066
3276
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
3067
3277
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
3068
|
-
|
|
3278
|
+
fitText?: boolean;
|
|
3069
3279
|
/** Sets the input to match native default content block */
|
|
3070
|
-
|
|
3071
|
-
/** Enables
|
|
3280
|
+
fitContent?: boolean;
|
|
3281
|
+
/** Enables internal string values to update for internationalization. */
|
|
3072
3282
|
i18n?: string;
|
|
3073
|
-
/**
|
|
3074
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3283
|
+
/** Set the visual prominence of the control */
|
|
3075
3284
|
prominence?: "muted";
|
|
3076
|
-
|
|
3077
3285
|
/** */
|
|
3078
3286
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
3079
3287
|
};
|
|
3080
3288
|
|
|
3081
3289
|
type TabsGroupProps = {
|
|
3082
|
-
/**
|
|
3290
|
+
/** Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at
|
|
3291
|
+
inline-start (`start`) or inline-end (`end`) beside the panel region. */
|
|
3083
3292
|
alignment?: "top" | "start" | "end";
|
|
3084
|
-
|
|
3085
3293
|
/** Dispatched when the selected tab value changes after an invoker `--toggle` updates selection */
|
|
3086
3294
|
onselect?: (e: CustomEvent<CustomEvent>) => void;
|
|
3087
3295
|
};
|
|
3088
3296
|
|
|
3089
3297
|
type TabsItemProps = {
|
|
3298
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
3299
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3300
|
+
popovertarget?: string;
|
|
3301
|
+
/** The popover target action to perform on the popover target element.
|
|
3302
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
3303
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
3304
|
+
/** The element that receives the command.
|
|
3305
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3306
|
+
commandfor?: string;
|
|
3307
|
+
/** The element that receives the interest.
|
|
3308
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3309
|
+
interestfor?: string;
|
|
3090
3310
|
/** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
|
|
3091
3311
|
- `true` The element holds selection and represents the user's current choice within the group.
|
|
3092
3312
|
|
|
3093
3313
|
- `false` The element does not hold selection and the user can choose it. */
|
|
3094
3314
|
selected?: boolean;
|
|
3315
|
+
/** Defines the button behavior when associated within a form element.
|
|
3316
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
3317
|
+
type?: "button" | "submit" | "reset";
|
|
3095
3318
|
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
3096
3319
|
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
3097
3320
|
|
|
@@ -3102,20 +3325,18 @@ type TabsItemProps = {
|
|
|
3102
3325
|
|
|
3103
3326
|
- `false` The associated content collapses and hides from the user. */
|
|
3104
3327
|
expanded?: boolean;
|
|
3105
|
-
/**
|
|
3328
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
3106
3329
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
3107
|
-
|
|
3108
|
-
/**
|
|
3109
|
-
|
|
3330
|
+
readOnly?: boolean;
|
|
3331
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
3332
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
3110
3333
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
3111
3334
|
form?: string | HTMLFormElement | null;
|
|
3112
|
-
/** The name of the
|
|
3335
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
3336
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
3113
3337
|
name?: string;
|
|
3114
3338
|
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
3115
3339
|
value?: string;
|
|
3116
|
-
/** Defines the button behavior when associated within a form element.
|
|
3117
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
3118
|
-
type?: "button" | "submit" | "reset";
|
|
3119
3340
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
3120
3341
|
- `true` The element has a disabled state and does not accept interaction.
|
|
3121
3342
|
|
|
@@ -3128,26 +3349,17 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
3128
3349
|
current?: "page" | "step";
|
|
3129
3350
|
/** Establishes a relationship between a popover and its invoker button.
|
|
3130
3351
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3131
|
-
|
|
3352
|
+
popoverTargetElement?: HTMLElement | null;
|
|
3132
3353
|
/** The popover target action to perform on the popover target element.
|
|
3133
3354
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
3134
|
-
|
|
3355
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
3135
3356
|
/** The element that receives the command.
|
|
3136
3357
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3137
|
-
|
|
3358
|
+
commandForElement?: HTMLElement | null;
|
|
3138
3359
|
/** The command to execute on the element.
|
|
3139
3360
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3140
3361
|
command?: string;
|
|
3141
3362
|
/** The element that receives the interest.
|
|
3142
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3143
|
-
interestfor?: string;
|
|
3144
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
3145
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3146
|
-
popoverTargetElement?: HTMLElement | null;
|
|
3147
|
-
/** The element that receives the command.
|
|
3148
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3149
|
-
commandForElement?: HTMLElement | null;
|
|
3150
|
-
/** The element that receives the interest.
|
|
3151
3363
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3152
3364
|
interestForElement?: HTMLElement | null;
|
|
3153
3365
|
};
|
|
@@ -3158,10 +3370,22 @@ type TabsProps = {
|
|
|
3158
3370
|
/** Determines whether the tabs should display a border on selected items vs. defaults to show border. */
|
|
3159
3371
|
borderless?: boolean;
|
|
3160
3372
|
/** Determines whether the tabs should handle selection behavior vs. defaults to off. */
|
|
3161
|
-
|
|
3373
|
+
behaviorSelect?: boolean;
|
|
3162
3374
|
};
|
|
3163
3375
|
|
|
3164
3376
|
type TagProps = {
|
|
3377
|
+
/** Establishes a relationship between a popover and its invoker button.
|
|
3378
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3379
|
+
popovertarget?: string;
|
|
3380
|
+
/** The popover target action to perform on the popover target element.
|
|
3381
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
3382
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
3383
|
+
/** The element that receives the command.
|
|
3384
|
+
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3385
|
+
commandfor?: string;
|
|
3386
|
+
/** The element that receives the interest.
|
|
3387
|
+
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3388
|
+
interestfor?: string;
|
|
3165
3389
|
/** Indicates whether the user can dismiss or close the element.
|
|
3166
3390
|
- `true` The element displays a close control and the user can dismiss it.
|
|
3167
3391
|
|
|
@@ -3191,11 +3415,13 @@ type TagProps = {
|
|
|
3191
3415
|
| "lime-pear"
|
|
3192
3416
|
| "yellow-nova"
|
|
3193
3417
|
| "brand-green";
|
|
3194
|
-
/**
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
/** Enables updating internal string values for internationalization. */
|
|
3418
|
+
/** Determines the visual prominence or weight */
|
|
3419
|
+
prominence?: "emphasis" | undefined;
|
|
3420
|
+
/** Updates internal string values for internationalization. */
|
|
3198
3421
|
i18n?: string;
|
|
3422
|
+
/** Defines the button behavior when associated within a form element.
|
|
3423
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
3424
|
+
type?: "button" | "submit" | "reset";
|
|
3199
3425
|
/** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
|
|
3200
3426
|
- `true` The button is in the pressed (on) state and the associated action or setting is active.
|
|
3201
3427
|
|
|
@@ -3206,20 +3432,18 @@ type TagProps = {
|
|
|
3206
3432
|
|
|
3207
3433
|
- `false` The associated content collapses and hides from the user. */
|
|
3208
3434
|
expanded?: boolean;
|
|
3209
|
-
/**
|
|
3435
|
+
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
3210
3436
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
3211
|
-
|
|
3212
|
-
/**
|
|
3213
|
-
|
|
3437
|
+
readOnly?: boolean;
|
|
3438
|
+
/** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only
|
|
3439
|
+
the form ID. Reading the property returns the associated form element or `null`.
|
|
3214
3440
|
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */
|
|
3215
3441
|
form?: string | HTMLFormElement | null;
|
|
3216
|
-
/** The name of the
|
|
3442
|
+
/** The name of the button, submitted as a pair with the button value as part of the form data.
|
|
3443
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */
|
|
3217
3444
|
name?: string;
|
|
3218
3445
|
/** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
|
|
3219
3446
|
value?: string;
|
|
3220
|
-
/** Defines the button behavior when associated within a form element.
|
|
3221
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
3222
|
-
type?: "button" | "submit" | "reset";
|
|
3223
3447
|
/** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
3224
3448
|
- `true` The element has a disabled state and does not accept interaction.
|
|
3225
3449
|
|
|
@@ -3237,35 +3461,23 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */
|
|
|
3237
3461
|
current?: "page" | "step";
|
|
3238
3462
|
/** Establishes a relationship between a popover and its invoker button.
|
|
3239
3463
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3240
|
-
|
|
3464
|
+
popoverTargetElement?: HTMLElement | null;
|
|
3241
3465
|
/** The popover target action to perform on the popover target element.
|
|
3242
3466
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */
|
|
3243
|
-
|
|
3467
|
+
popoverTargetAction?: "show" | "hide" | "toggle";
|
|
3244
3468
|
/** The element that receives the command.
|
|
3245
3469
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3246
|
-
|
|
3470
|
+
commandForElement?: HTMLElement | null;
|
|
3247
3471
|
/** The command to execute on the element.
|
|
3248
3472
|
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3249
3473
|
command?: string;
|
|
3250
3474
|
/** The element that receives the interest.
|
|
3251
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3252
|
-
interestfor?: string;
|
|
3253
|
-
/** Establishes a relationship between a popover and its invoker button.
|
|
3254
|
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
3255
|
-
popoverTargetElement?: HTMLElement | null;
|
|
3256
|
-
/** The element that receives the command.
|
|
3257
|
-
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */
|
|
3258
|
-
commandForElement?: HTMLElement | null;
|
|
3259
|
-
/** The element that receives the interest.
|
|
3260
3475
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
|
|
3261
3476
|
interestForElement?: HTMLElement | null;
|
|
3262
3477
|
};
|
|
3263
3478
|
|
|
3264
3479
|
type TextareaProps = {
|
|
3265
|
-
/**
|
|
3266
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
3267
|
-
|
|
3268
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
3480
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
3269
3481
|
status?: "warning" | "error" | "success" | "disabled";
|
|
3270
3482
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
3271
3483
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -3277,27 +3489,22 @@ type TextareaProps = {
|
|
|
3277
3489
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
3278
3490
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
3279
3491
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
3280
|
-
|
|
3492
|
+
fitText?: boolean;
|
|
3281
3493
|
/** Sets the input to match native default content block */
|
|
3282
|
-
|
|
3283
|
-
/** Enables
|
|
3494
|
+
fitContent?: boolean;
|
|
3495
|
+
/** Enables internal string values to update for internationalization. */
|
|
3284
3496
|
i18n?: string;
|
|
3285
|
-
/**
|
|
3286
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3497
|
+
/** Set the visual prominence of the control */
|
|
3287
3498
|
prominence?: "muted";
|
|
3288
|
-
|
|
3289
3499
|
/** */
|
|
3290
3500
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
3291
3501
|
};
|
|
3292
3502
|
|
|
3293
3503
|
type TimeProps = {
|
|
3294
|
-
/**
|
|
3295
|
-
|
|
3296
|
-
container?: "flat" |
|
|
3297
|
-
/**
|
|
3298
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
3299
|
-
|
|
3300
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
3504
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
3505
|
+
Use when embedding within another container such as a toolbar. */
|
|
3506
|
+
container?: "flat" | undefined;
|
|
3507
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
3301
3508
|
status?: "warning" | "error" | "success" | "disabled";
|
|
3302
3509
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
3303
3510
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -3309,27 +3516,27 @@ type TimeProps = {
|
|
|
3309
3516
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
3310
3517
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
3311
3518
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
3312
|
-
|
|
3519
|
+
fitText?: boolean;
|
|
3313
3520
|
/** Sets the input to match native default content block */
|
|
3314
|
-
|
|
3315
|
-
/** Enables
|
|
3521
|
+
fitContent?: boolean;
|
|
3522
|
+
/** Enables internal string values to update for internationalization. */
|
|
3316
3523
|
i18n?: string;
|
|
3317
|
-
/**
|
|
3318
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3524
|
+
/** Set the visual prominence of the control */
|
|
3319
3525
|
prominence?: "muted";
|
|
3320
|
-
|
|
3321
3526
|
/** */
|
|
3322
3527
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
3323
3528
|
};
|
|
3324
3529
|
|
|
3325
3530
|
type ToastProps = {
|
|
3326
|
-
/**
|
|
3531
|
+
/** A delayed `close` event occurs after the provided millisecond value elapses. */
|
|
3532
|
+
"close-timeout"?: number;
|
|
3533
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
3327
3534
|
anchor?: string | HTMLElement;
|
|
3328
3535
|
/** @deprecated Use the popover API instead.
|
|
3329
3536
|
The trigger defines what element triggers an `open` interaction event.
|
|
3330
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
3537
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
3331
3538
|
trigger?: string | HTMLElement;
|
|
3332
|
-
/**
|
|
3539
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
3333
3540
|
- `center` Centers the popover directly over the anchor element.
|
|
3334
3541
|
|
|
3335
3542
|
- `top` Positions the popover above the anchor element.
|
|
@@ -3347,19 +3554,25 @@ A trigger can accept a idref string within the same render root or a HTMLElement
|
|
|
3347
3554
|
|
|
3348
3555
|
- `center` Centers the popover along the anchor's edge for balanced positioning. */
|
|
3349
3556
|
alignment?: "start" | "end" | "center";
|
|
3350
|
-
/**
|
|
3351
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3557
|
+
/** Sets the visual prominence of the toast. */
|
|
3352
3558
|
prominence?: "muted";
|
|
3353
3559
|
/** @deprecated Use the popover API instead.
|
|
3354
3560
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
3355
|
-
|
|
3561
|
+
behaviorTrigger?: boolean;
|
|
3356
3562
|
/** Indicates whether the user can dismiss or close the element.
|
|
3357
3563
|
- `true` The element displays a close control and the user can dismiss it.
|
|
3358
3564
|
|
|
3359
3565
|
- `false` The user cannot close the element and must dismiss it programmatically. */
|
|
3360
3566
|
closable?: boolean;
|
|
3361
|
-
/**
|
|
3362
|
-
|
|
3567
|
+
/** Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.
|
|
3568
|
+
- `0` Warning or error messages requiring immediate acknowledgment.
|
|
3569
|
+
|
|
3570
|
+
- `3000` Brief success or confirmation messages.
|
|
3571
|
+
|
|
3572
|
+
- `7000` Standard informational messages.
|
|
3573
|
+
|
|
3574
|
+
- `10000` Messages with actions or requiring user decision. */
|
|
3575
|
+
closeTimeout?: number;
|
|
3363
3576
|
/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
|
|
3364
3577
|
- `accent` Highlights important actions or draws attention to primary interactive elements.
|
|
3365
3578
|
|
|
@@ -3369,9 +3582,8 @@ Determines if popover visibility behavior should be automatically controlled by
|
|
|
3369
3582
|
|
|
3370
3583
|
- `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */
|
|
3371
3584
|
status?: "accent" | "warning" | "success" | "danger";
|
|
3372
|
-
/**
|
|
3585
|
+
/** Updates internal string values for internationalization. */
|
|
3373
3586
|
i18n?: string;
|
|
3374
|
-
|
|
3375
3587
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
3376
3588
|
onbeforetoggle?: (e: CustomEvent<never>) => void;
|
|
3377
3589
|
/** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
|
|
@@ -3387,13 +3599,13 @@ type ToggletipFooterProps = {};
|
|
|
3387
3599
|
type ToggletipHeaderProps = {};
|
|
3388
3600
|
|
|
3389
3601
|
type ToggletipProps = {
|
|
3390
|
-
/** Provides the element that the popover should position relative to.
|
|
3602
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
3391
3603
|
anchor?: string | HTMLElement;
|
|
3392
3604
|
/** @deprecated Use the popover API instead.
|
|
3393
3605
|
The trigger defines what element triggers an `open` interaction event.
|
|
3394
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
3606
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
3395
3607
|
trigger?: string | HTMLElement;
|
|
3396
|
-
/**
|
|
3608
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
3397
3609
|
- `center` Centers the popover directly over the anchor element.
|
|
3398
3610
|
|
|
3399
3611
|
- `top` Positions the popover above the anchor element.
|
|
@@ -3413,7 +3625,7 @@ A trigger can accept a idref string within the same render root or a HTMLElement
|
|
|
3413
3625
|
alignment?: "start" | "end" | "center";
|
|
3414
3626
|
/** @deprecated Use the popover API instead.
|
|
3415
3627
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
3416
|
-
|
|
3628
|
+
behaviorTrigger?: boolean;
|
|
3417
3629
|
/** Indicates whether the user can dismiss or close the element.
|
|
3418
3630
|
- `true` The element displays a close control and the user can dismiss it.
|
|
3419
3631
|
|
|
@@ -3421,10 +3633,8 @@ Determines if popover visibility behavior should be automatically controlled by
|
|
|
3421
3633
|
closable?: boolean;
|
|
3422
3634
|
/** Determines if the component renders an arrow. */
|
|
3423
3635
|
arrow?: boolean;
|
|
3424
|
-
/**
|
|
3636
|
+
/** Updates internal string values for internationalization. */
|
|
3425
3637
|
i18n?: string;
|
|
3426
|
-
/** */
|
|
3427
|
-
popoverArrow?: HTMLElement;
|
|
3428
3638
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
3429
3639
|
onbeforetoggle?: (e: CustomEvent<never>) => void;
|
|
3430
3640
|
/** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
|
|
@@ -3436,33 +3646,29 @@ Determines if popover visibility behavior should be automatically controlled by
|
|
|
3436
3646
|
};
|
|
3437
3647
|
|
|
3438
3648
|
type ToolbarProps = {
|
|
3439
|
-
/**
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
- `inset` Element container optimizes for embedding or inset placement inside another containing element.
|
|
3443
|
-
|
|
3444
|
-
- `full` Element container optimizes for filling its container bounds. */
|
|
3445
|
-
container?: "flat" | "inset" | "full" | "default";
|
|
3649
|
+
/** Determines the container styles of component. Flat applies when nesting elements within other containers or for a more muted style. Full applies when the element expands the full width of the viewport. */
|
|
3650
|
+
container?: "flat" | "inset" | "full" | undefined;
|
|
3446
3651
|
/** Determines the primary content overflow behavior. */
|
|
3447
|
-
content?: "scroll" | "wrap" |
|
|
3652
|
+
content?: "scroll" | "wrap" | undefined;
|
|
3448
3653
|
/** Controls the directional flow of the element's layout and interaction pattern.
|
|
3449
3654
|
- `horizontal` Element orients horizontally with left-to-right flow.
|
|
3450
3655
|
|
|
3451
3656
|
- `vertical` Element orients vertically with top-to-bottom flow. */
|
|
3452
|
-
orientation?: "horizontal" | "vertical" |
|
|
3453
|
-
/**
|
|
3454
|
-
- `accent` Highlights important actions or draws attention to primary interactive elements. */
|
|
3657
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
3658
|
+
/** Visual treatment to represent accent color for interactive selections */
|
|
3455
3659
|
status?: "accent";
|
|
3456
3660
|
};
|
|
3457
3661
|
|
|
3458
3662
|
type TooltipProps = {
|
|
3459
|
-
/**
|
|
3663
|
+
/** @deprecated Use interest-delay-start css property instead */
|
|
3664
|
+
"open-delay"?: number;
|
|
3665
|
+
/** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
3460
3666
|
anchor?: string | HTMLElement;
|
|
3461
3667
|
/** @deprecated Use the popover API instead.
|
|
3462
3668
|
The trigger defines what element triggers an `open` interaction event.
|
|
3463
|
-
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines
|
|
3669
|
+
A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */
|
|
3464
3670
|
trigger?: string | HTMLElement;
|
|
3465
|
-
/**
|
|
3671
|
+
/** Sets the side position of the popover relative to the provided anchor element.
|
|
3466
3672
|
- `center` Centers the popover directly over the anchor element.
|
|
3467
3673
|
|
|
3468
3674
|
- `top` Positions the popover above the anchor element.
|
|
@@ -3482,17 +3688,14 @@ A trigger can accept a idref string within the same render root or a HTMLElement
|
|
|
3482
3688
|
alignment?: "start" | "end" | "center";
|
|
3483
3689
|
/** @deprecated Use the popover API instead.
|
|
3484
3690
|
Determines if popover visibility behavior should be automatically controlled by the trigger. */
|
|
3485
|
-
|
|
3486
|
-
/**
|
|
3487
|
-
- `accent` - Highlights important actions or draws attention to primary interactive elements.
|
|
3488
|
-
- `warning` - Indicates cautionary actions that require careful consideration before proceeding.
|
|
3489
|
-
- `success` - Represents positive outcomes, confirmations, or constructive actions.
|
|
3490
|
-
- `danger` - Signals destructive or irreversible actions that need extra attention and confirmation. */
|
|
3691
|
+
behaviorTrigger?: boolean;
|
|
3692
|
+
/** visual treatment to represent a ongoing task or support status */
|
|
3491
3693
|
status?: "muted";
|
|
3492
|
-
/** @deprecated Use interest-delay-start css property instead
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3694
|
+
/** @deprecated Use interest-delay-start css property instead - Sets the delay in milliseconds before the element emits an `open` event.
|
|
3695
|
+
- `0` Keyboard focus interactions (always immediate for accessibility).
|
|
3696
|
+
|
|
3697
|
+
- `500` Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers. */
|
|
3698
|
+
openDelay?: number;
|
|
3496
3699
|
/** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
|
|
3497
3700
|
onbeforetoggle?: (e: CustomEvent<never>) => void;
|
|
3498
3701
|
/** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
|
|
@@ -3520,14 +3723,8 @@ type TreeNodeProps = {
|
|
|
3520
3723
|
selectable?: "single" | "multi";
|
|
3521
3724
|
/** Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI. */
|
|
3522
3725
|
highlighted?: boolean;
|
|
3523
|
-
/**
|
|
3726
|
+
/** Updates internal string values for internationalization. */
|
|
3524
3727
|
i18n?: string;
|
|
3525
|
-
/** */
|
|
3526
|
-
indeterminate?: boolean;
|
|
3527
|
-
/** */
|
|
3528
|
-
behaviorExpand?: boolean;
|
|
3529
|
-
/** */
|
|
3530
|
-
behaviorSelect?: boolean;
|
|
3531
3728
|
/** Dispatched when the node opens. */
|
|
3532
3729
|
onopen?: (e: CustomEvent<never>) => void;
|
|
3533
3730
|
/** Dispatched when the node closes. */
|
|
@@ -3540,12 +3737,11 @@ type TreeProps = {
|
|
|
3540
3737
|
/** Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state. */
|
|
3541
3738
|
selectable?: "single" | "multi";
|
|
3542
3739
|
/** Determines whether the tree nodes should handle auto-expanding behavior. */
|
|
3543
|
-
|
|
3740
|
+
behaviorExpand?: boolean;
|
|
3544
3741
|
/** Determines whether the tree nodes should handle auto-select behavior. */
|
|
3545
|
-
|
|
3742
|
+
behaviorSelect?: boolean;
|
|
3546
3743
|
/** Determines if the node depth border renders. */
|
|
3547
3744
|
border?: boolean;
|
|
3548
|
-
|
|
3549
3745
|
/** Dispatched from a child nve-tree-node when opened. */
|
|
3550
3746
|
onopen?: (e: CustomEvent<never>) => void;
|
|
3551
3747
|
/** Dispatched from a child nve-tree-node when closed. */
|
|
@@ -3555,13 +3751,10 @@ type TreeProps = {
|
|
|
3555
3751
|
};
|
|
3556
3752
|
|
|
3557
3753
|
type WeekProps = {
|
|
3558
|
-
/**
|
|
3559
|
-
|
|
3560
|
-
container?: "flat" |
|
|
3561
|
-
/**
|
|
3562
|
-
- `warning` Indicates cautionary actions that require careful consideration before proceeding.
|
|
3563
|
-
|
|
3564
|
-
- `success` Represents positive outcomes, confirmations, or constructive actions. */
|
|
3754
|
+
/** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
|
|
3755
|
+
Use when embedding within another container such as a toolbar. */
|
|
3756
|
+
container?: "flat" | undefined;
|
|
3757
|
+
/** Set current visual state for control. This overrides any validation states active. */
|
|
3565
3758
|
status?: "warning" | "error" | "success" | "disabled";
|
|
3566
3759
|
/** Controls the directional arrangement and spacing behavior of the element's content.
|
|
3567
3760
|
- `vertical` Arranges content in a vertical stack with block-level spacing.
|
|
@@ -3573,15 +3766,13 @@ type WeekProps = {
|
|
|
3573
3766
|
- `horizontal-inline` Arranges content horizontally with compact inline spacing. */
|
|
3574
3767
|
layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline";
|
|
3575
3768
|
/** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
|
|
3576
|
-
|
|
3769
|
+
fitText?: boolean;
|
|
3577
3770
|
/** Sets the input to match native default content block */
|
|
3578
|
-
|
|
3579
|
-
/** Enables
|
|
3771
|
+
fitContent?: boolean;
|
|
3772
|
+
/** Enables internal string values to update for internationalization. */
|
|
3580
3773
|
i18n?: string;
|
|
3581
|
-
/**
|
|
3582
|
-
- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */
|
|
3774
|
+
/** Set the visual prominence of the control */
|
|
3583
3775
|
prominence?: "muted";
|
|
3584
|
-
|
|
3585
3776
|
/** */
|
|
3586
3777
|
onreset?: (e: CustomEvent<CustomEvent>) => void;
|
|
3587
3778
|
};
|
|
@@ -3593,7 +3784,7 @@ export type CustomElements = {
|
|
|
3593
3784
|
*
|
|
3594
3785
|
*
|
|
3595
3786
|
* ### **Slots:**
|
|
3596
|
-
* - _default_ -
|
|
3787
|
+
* - _default_ - Heading text and supporting content that labels the accordion section.
|
|
3597
3788
|
* - **prefix** - slot for prefix content
|
|
3598
3789
|
* - **suffix** - slot for suffix content
|
|
3599
3790
|
*
|
|
@@ -3621,16 +3812,15 @@ export type CustomElements = {
|
|
|
3621
3812
|
*
|
|
3622
3813
|
*
|
|
3623
3814
|
* ### **Slots:**
|
|
3624
|
-
* - _default_ -
|
|
3815
|
+
* - _default_ - Content displayed in the collapsible region, typically an `nve-accordion-content` element.
|
|
3625
3816
|
* - **icon-button** - icon elements to display for expand/collapse
|
|
3626
3817
|
* - **header** - header element (Use `accordion-header` or custom content)
|
|
3627
|
-
* - **content** - content element (Use `accordion-content` or custom content)
|
|
3628
3818
|
*
|
|
3629
3819
|
* ### **CSS Properties:**
|
|
3630
3820
|
* - **--background** - undefined _(default: undefined)_
|
|
3631
3821
|
* - **--color** - undefined _(default: undefined)_
|
|
3632
3822
|
* - **--border-radius** - undefined _(default: undefined)_
|
|
3633
|
-
* - **--header-padding** -
|
|
3823
|
+
* - **--header-padding** - Padding around the header content. _(default: undefined)_
|
|
3634
3824
|
* - **--cursor** - undefined _(default: undefined)_
|
|
3635
3825
|
* - **--transition** - undefined _(default: undefined)_
|
|
3636
3826
|
*
|
|
@@ -3708,7 +3898,7 @@ export type CustomElements = {
|
|
|
3708
3898
|
*
|
|
3709
3899
|
*
|
|
3710
3900
|
* ### **Slots:**
|
|
3711
|
-
* - _default_ -
|
|
3901
|
+
* - _default_ - `nve-avatar` elements that represent the group members.
|
|
3712
3902
|
*/
|
|
3713
3903
|
"nve-avatar-group": DefineComponent<AvatarGroupProps>;
|
|
3714
3904
|
|
|
@@ -3718,7 +3908,7 @@ export type CustomElements = {
|
|
|
3718
3908
|
*
|
|
3719
3909
|
*
|
|
3720
3910
|
* ### **Slots:**
|
|
3721
|
-
* - _default_ -
|
|
3911
|
+
* - _default_ - Initials, an image, or other content that identifies the represented user or bot.
|
|
3722
3912
|
*
|
|
3723
3913
|
* ### **CSS Properties:**
|
|
3724
3914
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -3738,7 +3928,7 @@ export type CustomElements = {
|
|
|
3738
3928
|
*
|
|
3739
3929
|
*
|
|
3740
3930
|
* ### **Slots:**
|
|
3741
|
-
* - _default_ -
|
|
3931
|
+
* - _default_ - Short text that communicates the badge status.
|
|
3742
3932
|
* - **prefix-icon** - slot for prefix icon
|
|
3743
3933
|
* - **suffix-icon** - slot for suffix icon
|
|
3744
3934
|
*
|
|
@@ -3851,7 +4041,7 @@ export type CustomElements = {
|
|
|
3851
4041
|
*
|
|
3852
4042
|
*
|
|
3853
4043
|
* ### **Slots:**
|
|
3854
|
-
* - _default_ -
|
|
4044
|
+
* - _default_ - Card title, supporting text, and optional action controls.
|
|
3855
4045
|
*
|
|
3856
4046
|
* ### **CSS Properties:**
|
|
3857
4047
|
* - **--padding** - undefined _(default: undefined)_
|
|
@@ -3894,7 +4084,7 @@ export type CustomElements = {
|
|
|
3894
4084
|
*
|
|
3895
4085
|
*
|
|
3896
4086
|
* ### **Slots:**
|
|
3897
|
-
* - _default_ -
|
|
4087
|
+
* - _default_ - The message body displayed between the prefix and suffix content.
|
|
3898
4088
|
* - **prefix** - for avatar/img content
|
|
3899
4089
|
* - **suffix** - for avatar/img content
|
|
3900
4090
|
*
|
|
@@ -4054,7 +4244,7 @@ export type CustomElements = {
|
|
|
4054
4244
|
*
|
|
4055
4245
|
*
|
|
4056
4246
|
* ### **Slots:**
|
|
4057
|
-
* - _default_ -
|
|
4247
|
+
* - _default_ - Text label displayed before the copy icon.
|
|
4058
4248
|
* - **icon** - slot for custom icon
|
|
4059
4249
|
*
|
|
4060
4250
|
* ### **CSS Properties:**
|
|
@@ -4207,7 +4397,7 @@ export type CustomElements = {
|
|
|
4207
4397
|
* - **close** - Dispatched when the dialog closes.
|
|
4208
4398
|
*
|
|
4209
4399
|
* ### **Slots:**
|
|
4210
|
-
* - _default_ -
|
|
4400
|
+
* - _default_ - Dialog body content displayed between the header and footer.
|
|
4211
4401
|
*
|
|
4212
4402
|
* ### **CSS Properties:**
|
|
4213
4403
|
* - **--border** - undefined _(default: undefined)_
|
|
@@ -4321,7 +4511,7 @@ export type CustomElements = {
|
|
|
4321
4511
|
* - **close** - Dispatched when the drawer closes.
|
|
4322
4512
|
*
|
|
4323
4513
|
* ### **Slots:**
|
|
4324
|
-
* - _default_ -
|
|
4514
|
+
* - _default_ - Drawer body content displayed between the header and footer.
|
|
4325
4515
|
*
|
|
4326
4516
|
* ### **CSS Properties:**
|
|
4327
4517
|
* - **--border** - undefined _(default: undefined)_
|
|
@@ -4349,13 +4539,14 @@ export type CustomElements = {
|
|
|
4349
4539
|
* - **open** - Dispatched when a dropdown in the group opens
|
|
4350
4540
|
* - **close** - Dispatched when a dropdown in the group closes
|
|
4351
4541
|
*
|
|
4542
|
+
* ### **Methods:**
|
|
4543
|
+
* - **close()** - Closes every descendant dropdown in the group.
|
|
4544
|
+
*
|
|
4352
4545
|
* ### **Slots:**
|
|
4353
4546
|
* - _default_ - default slot for dropdown content
|
|
4354
4547
|
*
|
|
4355
4548
|
* ### **CSS Properties:**
|
|
4356
|
-
* - **--
|
|
4357
|
-
* - **--nve-dropdown-group-transition** - undefined _(default: undefined)_
|
|
4358
|
-
* - **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_
|
|
4549
|
+
* - **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_
|
|
4359
4550
|
*/
|
|
4360
4551
|
"nve-dropdown-group": DefineComponent<DropdownGroupProps>;
|
|
4361
4552
|
|
|
@@ -4438,9 +4629,8 @@ export type CustomElements = {
|
|
|
4438
4629
|
* - **reset()** - Resets the control value to its initial value.
|
|
4439
4630
|
*
|
|
4440
4631
|
* ### **Slots:**
|
|
4441
|
-
* - _default_ -
|
|
4442
|
-
* - **icon** - default
|
|
4443
|
-
* - **content** - default slot for content
|
|
4632
|
+
* - _default_ - Custom messaging that replaces the default upload instructions.
|
|
4633
|
+
* - **icon** - Custom icon that replaces the default upload icon.
|
|
4444
4634
|
*
|
|
4445
4635
|
* ### **CSS Properties:**
|
|
4446
4636
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -4548,7 +4738,7 @@ export type CustomElements = {
|
|
|
4548
4738
|
*
|
|
4549
4739
|
*
|
|
4550
4740
|
* ### **Slots:**
|
|
4551
|
-
* - _default_ -
|
|
4741
|
+
* - _default_ - Validation or supporting message text for the associated control.
|
|
4552
4742
|
*
|
|
4553
4743
|
* ### **CSS Properties:**
|
|
4554
4744
|
* - **--color** - undefined _(default: undefined)_
|
|
@@ -4617,7 +4807,7 @@ export type CustomElements = {
|
|
|
4617
4807
|
*
|
|
4618
4808
|
*
|
|
4619
4809
|
* ### **Slots:**
|
|
4620
|
-
* - _default_ -
|
|
4810
|
+
* - _default_ - Data or interactive controls displayed within the cell.
|
|
4621
4811
|
*
|
|
4622
4812
|
* ### **CSS Properties:**
|
|
4623
4813
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -4643,7 +4833,7 @@ export type CustomElements = {
|
|
|
4643
4833
|
* - **nve-grid-column-resize**
|
|
4644
4834
|
*
|
|
4645
4835
|
* ### **Slots:**
|
|
4646
|
-
* - _default_ -
|
|
4836
|
+
* - _default_ - Column heading text or controls.
|
|
4647
4837
|
* - **actions** - slot for column actions
|
|
4648
4838
|
*
|
|
4649
4839
|
* ### **CSS Properties:**
|
|
@@ -4665,7 +4855,7 @@ export type CustomElements = {
|
|
|
4665
4855
|
*
|
|
4666
4856
|
*
|
|
4667
4857
|
* ### **Slots:**
|
|
4668
|
-
* - _default_ -
|
|
4858
|
+
* - _default_ - Grid summary, pagination, or other footer controls.
|
|
4669
4859
|
*
|
|
4670
4860
|
* ### **CSS Properties:**
|
|
4671
4861
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -4684,7 +4874,7 @@ export type CustomElements = {
|
|
|
4684
4874
|
* - **scrollTo(options: _ScrollToOptions_): _Promise<void>_** - Scroll to a specific position in the grid.
|
|
4685
4875
|
*
|
|
4686
4876
|
* ### **Slots:**
|
|
4687
|
-
* - _default_ -
|
|
4877
|
+
* - _default_ - `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements.
|
|
4688
4878
|
* - **footer** - slot for grid-footer or toolbar
|
|
4689
4879
|
*
|
|
4690
4880
|
* ### **CSS Properties:**
|
|
@@ -4719,7 +4909,7 @@ export type CustomElements = {
|
|
|
4719
4909
|
*
|
|
4720
4910
|
*
|
|
4721
4911
|
* ### **Slots:**
|
|
4722
|
-
* - _default_ -
|
|
4912
|
+
* - _default_ - Loading or empty-state message displayed in place of grid rows.
|
|
4723
4913
|
*
|
|
4724
4914
|
* ### **CSS Properties:**
|
|
4725
4915
|
* - **--color** - undefined _(default: undefined)_
|
|
@@ -4855,7 +5045,7 @@ export type CustomElements = {
|
|
|
4855
5045
|
*
|
|
4856
5046
|
*
|
|
4857
5047
|
* ### **Slots:**
|
|
4858
|
-
* - _default_ -
|
|
5048
|
+
* - _default_ - Text, an image, or other visual content representing the brand or application.
|
|
4859
5049
|
*
|
|
4860
5050
|
* ### **CSS Properties:**
|
|
4861
5051
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -4875,7 +5065,7 @@ export type CustomElements = {
|
|
|
4875
5065
|
*
|
|
4876
5066
|
*
|
|
4877
5067
|
* ### **Slots:**
|
|
4878
|
-
* - _default_ -
|
|
5068
|
+
* - _default_ - Label and supporting content for the menu option.
|
|
4879
5069
|
* - **suffix** - slot for suffix icon
|
|
4880
5070
|
*
|
|
4881
5071
|
* ### **CSS Properties:**
|
|
@@ -4980,7 +5170,7 @@ export type CustomElements = {
|
|
|
4980
5170
|
* - **open** - Dispatched when the notification opens.
|
|
4981
5171
|
*
|
|
4982
5172
|
* ### **Slots:**
|
|
4983
|
-
* - _default_ -
|
|
5173
|
+
* - _default_ - The message communicated by the notification.
|
|
4984
5174
|
* - **icon** - content slot for the status icon
|
|
4985
5175
|
*
|
|
4986
5176
|
* ### **CSS Properties:**
|
|
@@ -5029,7 +5219,7 @@ export type CustomElements = {
|
|
|
5029
5219
|
*
|
|
5030
5220
|
*
|
|
5031
5221
|
* ### **Slots:**
|
|
5032
|
-
* - _default_ -
|
|
5222
|
+
* - _default_ - Loading status text displayed with the progress indicator.
|
|
5033
5223
|
*
|
|
5034
5224
|
* ### **CSS Properties:**
|
|
5035
5225
|
* - **--gap** - undefined _(default: undefined)_
|
|
@@ -5096,7 +5286,7 @@ export type CustomElements = {
|
|
|
5096
5286
|
* - **close** - Dispatched after an invoker command sets `hidden` and closes the panel.
|
|
5097
5287
|
*
|
|
5098
5288
|
* ### **Slots:**
|
|
5099
|
-
* - _default_ -
|
|
5289
|
+
* - _default_ - `nve-page-panel-content` elements that provide the panel body.
|
|
5100
5290
|
* - **actions** - slot for action / dismiss buttons
|
|
5101
5291
|
*
|
|
5102
5292
|
* ### **CSS Properties:**
|
|
@@ -5147,7 +5337,7 @@ export type CustomElements = {
|
|
|
5147
5337
|
*
|
|
5148
5338
|
*
|
|
5149
5339
|
* ### **Events:**
|
|
5150
|
-
* - **step-change**
|
|
5340
|
+
* - **step-change** - Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries.
|
|
5151
5341
|
* - **last-page** - Dispatched when the last page is active
|
|
5152
5342
|
* - **first-page** - Dispatched when the first page is active
|
|
5153
5343
|
* - **input** - Dispatched when the value (page) has changed
|
|
@@ -5163,8 +5353,7 @@ export type CustomElements = {
|
|
|
5163
5353
|
* - **reset()** - Resets the control value to its initial value.
|
|
5164
5354
|
*
|
|
5165
5355
|
* ### **Slots:**
|
|
5166
|
-
* -
|
|
5167
|
-
* - **suffix-label** - slot for overriding the "n of total" label when total is an approximation
|
|
5356
|
+
* - **suffix-label** - Overrides the "of total" label when the total is an approximation.
|
|
5168
5357
|
*
|
|
5169
5358
|
* ### **CSS Properties:**
|
|
5170
5359
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -5375,7 +5564,7 @@ export type CustomElements = {
|
|
|
5375
5564
|
* - **close** - Dispatched when the filter chip closes.
|
|
5376
5565
|
*
|
|
5377
5566
|
* ### **Slots:**
|
|
5378
|
-
* - _default_ -
|
|
5567
|
+
* - _default_ - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.
|
|
5379
5568
|
*
|
|
5380
5569
|
* ### **CSS Properties:**
|
|
5381
5570
|
* - **--gap** - undefined _(default: undefined)_
|
|
@@ -5616,7 +5805,7 @@ export type CustomElements = {
|
|
|
5616
5805
|
*
|
|
5617
5806
|
*
|
|
5618
5807
|
* ### **Slots:**
|
|
5619
|
-
* - _default_ -
|
|
5808
|
+
* - _default_ - Loaded content that replaces the placeholder when provided.
|
|
5620
5809
|
*
|
|
5621
5810
|
* ### **CSS Properties:**
|
|
5622
5811
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -5819,7 +6008,7 @@ export type CustomElements = {
|
|
|
5819
6008
|
*
|
|
5820
6009
|
*
|
|
5821
6010
|
* ### **Slots:**
|
|
5822
|
-
* - _default_ -
|
|
6011
|
+
* - _default_ - The label displayed for the tab.
|
|
5823
6012
|
*
|
|
5824
6013
|
* ### **CSS Properties:**
|
|
5825
6014
|
* - **--font-size** - undefined _(default: undefined)_
|
|
@@ -5858,7 +6047,7 @@ export type CustomElements = {
|
|
|
5858
6047
|
*
|
|
5859
6048
|
*
|
|
5860
6049
|
* ### **Slots:**
|
|
5861
|
-
* - _default_ -
|
|
6050
|
+
* - _default_ - Text or other content that identifies the category or group.
|
|
5862
6051
|
*
|
|
5863
6052
|
* ### **CSS Properties:**
|
|
5864
6053
|
* - **--background** - undefined _(default: undefined)_
|
|
@@ -5965,7 +6154,7 @@ export type CustomElements = {
|
|
|
5965
6154
|
* - **close** - Dispatched when the toast closes.
|
|
5966
6155
|
*
|
|
5967
6156
|
* ### **Slots:**
|
|
5968
|
-
* - _default_ -
|
|
6157
|
+
* - _default_ - The message communicated by the toast.
|
|
5969
6158
|
* - **prefix** - custom status icon slot
|
|
5970
6159
|
*
|
|
5971
6160
|
* ### **CSS Properties:**
|
|
@@ -6057,7 +6246,7 @@ export type CustomElements = {
|
|
|
6057
6246
|
*
|
|
6058
6247
|
*
|
|
6059
6248
|
* ### **Slots:**
|
|
6060
|
-
* - _default_ -
|
|
6249
|
+
* - _default_ - Primary buttons, inputs, and other toolbar controls.
|
|
6061
6250
|
* - **prefix** - slot for prefix content
|
|
6062
6251
|
* - **suffix** - slot for suffix content
|
|
6063
6252
|
*
|
|
@@ -6086,7 +6275,7 @@ export type CustomElements = {
|
|
|
6086
6275
|
* - **close** - Dispatched when the tooltip closes.
|
|
6087
6276
|
*
|
|
6088
6277
|
* ### **Slots:**
|
|
6089
|
-
* - _default_ -
|
|
6278
|
+
* - _default_ - Noninteractive text or other descriptive content shown in the tooltip.
|
|
6090
6279
|
*
|
|
6091
6280
|
* ### **CSS Properties:**
|
|
6092
6281
|
* - **--border-radius** - undefined _(default: undefined)_
|