@vonage/vivid 3.38.0 → 3.40.0

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.
Files changed (149) hide show
  1. package/accordion/index.js +1 -1
  2. package/accordion-item/index.js +1 -1
  3. package/alert/index.js +3 -2
  4. package/banner/index.js +2 -1
  5. package/breadcrumb-item/index.js +1 -1
  6. package/button/index.js +2 -1
  7. package/card/index.js +1 -1
  8. package/checkbox/index.js +1 -1
  9. package/combobox/index.js +5 -3
  10. package/custom-elements.json +1307 -8
  11. package/data-grid/index.js +1 -0
  12. package/date-picker/index.js +6 -4
  13. package/date-range-picker/index.js +5 -3
  14. package/dialog/index.js +6 -2
  15. package/elevation/index.js +1 -1
  16. package/fab/index.js +1 -1
  17. package/file-picker/index.js +2 -1
  18. package/focus/index.js +1 -1
  19. package/header/index.js +1 -1
  20. package/index.js +23 -19
  21. package/lib/checkbox/checkbox.d.ts +1 -0
  22. package/lib/components.d.ts +1 -0
  23. package/lib/date-range-picker/date-range-picker.d.ts +0 -1
  24. package/lib/dialog/dialog.d.ts +4 -0
  25. package/lib/dialog/locale.d.ts +3 -0
  26. package/lib/menu/menu.d.ts +1 -0
  27. package/lib/menu-item/menu-item.d.ts +6 -0
  28. package/lib/number-field/locale.d.ts +4 -0
  29. package/lib/number-field/number-field.d.ts +4 -2
  30. package/lib/progress/progress.d.ts +1 -0
  31. package/lib/progress-ring/progress-ring.d.ts +1 -0
  32. package/lib/radio/radio.d.ts +1 -0
  33. package/lib/selectable-box/definition.d.ts +3 -0
  34. package/lib/selectable-box/selectable-box.d.ts +13 -0
  35. package/lib/selectable-box/selectable-box.template.d.ts +4 -0
  36. package/lib/slider/definition.d.ts +1 -0
  37. package/lib/slider/slider.d.ts +5 -0
  38. package/lib/text-area/text-area.d.ts +3 -0
  39. package/lib/text-field/text-field.d.ts +5 -2
  40. package/listbox/index.js +3 -2
  41. package/locales/en-GB.js +7 -0
  42. package/locales/en-US.js +7 -0
  43. package/locales/ja-JP.js +7 -0
  44. package/locales/zh-CN.js +7 -0
  45. package/menu/index.js +4 -3
  46. package/menu-item/index.js +1 -1
  47. package/nav-disclosure/index.js +1 -1
  48. package/nav-item/index.js +1 -1
  49. package/number-field/index.js +3 -1
  50. package/option/index.js +1 -1
  51. package/package.json +1 -1
  52. package/pagination/index.js +2 -1
  53. package/popup/index.js +4 -3
  54. package/radio/index.js +1 -1
  55. package/select/index.js +5 -3
  56. package/selectable-box/index.js +23 -0
  57. package/shared/Reflector.js +65 -0
  58. package/shared/date-picker/calendar/segment.d.ts +21 -0
  59. package/shared/date-picker/date-picker-base.d.ts +1 -1
  60. package/shared/definition.js +2 -2
  61. package/shared/definition10.js +4 -73
  62. package/shared/definition11.js +1 -1
  63. package/shared/definition12.js +1 -1
  64. package/shared/definition13.js +2 -2
  65. package/shared/definition14.js +12 -5
  66. package/shared/definition15.js +3 -3
  67. package/shared/definition16.js +22 -8
  68. package/shared/definition17.js +5 -5
  69. package/shared/definition18.js +18 -8
  70. package/shared/definition19.js +18 -10
  71. package/shared/definition2.js +2 -2
  72. package/shared/definition20.js +1 -1
  73. package/shared/definition21.js +1 -1
  74. package/shared/definition22.js +2 -2
  75. package/shared/definition23.js +4 -3
  76. package/shared/definition24.js +2 -2
  77. package/shared/definition27.js +39 -22
  78. package/shared/definition28.js +2 -2
  79. package/shared/definition29.js +2 -2
  80. package/shared/definition3.js +1 -1
  81. package/shared/definition30.js +2 -2
  82. package/shared/definition32.js +1 -1
  83. package/shared/definition33.js +19 -4
  84. package/shared/definition34.js +2 -2
  85. package/shared/definition35.js +3 -2
  86. package/shared/definition36.js +11 -3
  87. package/shared/definition37.js +13 -9
  88. package/shared/definition38.js +2 -2
  89. package/shared/definition39.js +5 -4
  90. package/shared/definition4.js +4 -3
  91. package/shared/definition40.js +4 -4
  92. package/shared/definition41.js +111 -76
  93. package/shared/definition42.js +77 -557
  94. package/shared/definition43.js +568 -102
  95. package/shared/definition44.js +104 -135
  96. package/shared/definition45.js +153 -17
  97. package/shared/definition46.js +16 -79
  98. package/shared/definition47.js +53 -475
  99. package/shared/definition48.js +493 -25
  100. package/shared/definition49.js +22 -121
  101. package/shared/definition5.js +1 -1
  102. package/shared/definition50.js +114 -261
  103. package/shared/definition51.js +258 -119
  104. package/shared/definition52.js +258 -109
  105. package/shared/definition53.js +84 -74
  106. package/shared/definition54.js +114 -69
  107. package/shared/definition55.js +81 -292
  108. package/shared/definition56.js +302 -13
  109. package/shared/definition57.js +11 -41
  110. package/shared/definition58.js +20 -154
  111. package/shared/definition59.js +181 -0
  112. package/shared/definition6.js +1 -1
  113. package/shared/definition7.js +3 -2
  114. package/shared/definition8.js +2 -2
  115. package/shared/enums.js +71 -0
  116. package/shared/icon.js +1 -1
  117. package/shared/index2.js +28 -1
  118. package/shared/key-codes.js +1 -1
  119. package/shared/key-codes2.js +9 -0
  120. package/shared/listbox.js +2 -7
  121. package/shared/localization/Locale.d.ts +4 -0
  122. package/shared/presentationDate.js +194 -141
  123. package/shared/radio.js +7 -0
  124. package/shared/text-field.js +1 -1
  125. package/shared/utils/Reflector.d.ts +8 -0
  126. package/shared/utils/randomId.d.ts +1 -0
  127. package/side-drawer/index.js +1 -1
  128. package/slider/index.js +2 -2
  129. package/split-button/index.js +2 -2
  130. package/style.css +686 -559
  131. package/styles/core/all.css +1 -1
  132. package/styles/core/theme.css +1 -1
  133. package/styles/core/typography.css +1 -1
  134. package/styles/tokens/theme-dark.css +4 -4
  135. package/styles/tokens/theme-light.css +4 -4
  136. package/styles/tokens/vivid-2-compat.css +1 -1
  137. package/switch/index.js +2 -2
  138. package/tab/index.js +2 -2
  139. package/tab-panel/index.js +1 -1
  140. package/tabs/index.js +4 -4
  141. package/tag/index.js +2 -2
  142. package/tag-group/index.js +1 -1
  143. package/text-area/index.js +3 -2
  144. package/text-field/index.js +3 -2
  145. package/toggletip/index.js +5 -4
  146. package/tooltip/index.js +5 -4
  147. package/tree-item/index.js +2 -2
  148. package/tree-view/index.js +1 -1
  149. package/vivid.api.json +141 -0
@@ -11,5 +11,6 @@ import '../shared/slotted.js';
11
11
  import '../shared/children.js';
12
12
  import '../shared/focus2.js';
13
13
  import '../shared/focus.js';
14
+ import '../shared/key-codes2.js';
14
15
 
15
16
  registerDataGrid();
@@ -1,13 +1,13 @@
1
1
  import { r as registerDatePicker } from '../shared/definition17.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition58.js';
3
+ import '../shared/definition59.js';
4
4
  import '../shared/definition10.js';
5
5
  import '../shared/definition25.js';
6
6
  import '../shared/icon.js';
7
7
  import '../shared/_has.js';
8
8
  import '../shared/class-names.js';
9
9
  import '../shared/when.js';
10
- import '../shared/definition56.js';
10
+ import '../shared/definition57.js';
11
11
  import '../shared/focus.js';
12
12
  import '../shared/definition36.js';
13
13
  import '../shared/base-progress.js';
@@ -21,10 +21,12 @@ import '../shared/aria-global.js';
21
21
  import '../shared/start-end.js';
22
22
  import '../shared/ref.js';
23
23
  import '../shared/focus2.js';
24
- import '../shared/definition57.js';
25
- import '../shared/definition51.js';
24
+ import '../shared/enums.js';
25
+ import '../shared/definition58.js';
26
+ import '../shared/definition52.js';
26
27
  import '../shared/index2.js';
27
28
  import '../locales/en-US.js';
29
+ import '../shared/Reflector.js';
28
30
  import '../shared/text-field2.js';
29
31
  import '../shared/text-field.js';
30
32
  import '../shared/definition20.js';
@@ -6,7 +6,7 @@ import '../shared/icon.js';
6
6
  import '../shared/_has.js';
7
7
  import '../shared/class-names.js';
8
8
  import '../shared/when.js';
9
- import '../shared/definition56.js';
9
+ import '../shared/definition57.js';
10
10
  import '../shared/focus.js';
11
11
  import '../shared/definition36.js';
12
12
  import '../shared/base-progress.js';
@@ -20,11 +20,13 @@ import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
22
  import '../shared/focus2.js';
23
+ import '../shared/enums.js';
24
+ import '../shared/definition59.js';
23
25
  import '../shared/definition58.js';
24
- import '../shared/definition57.js';
25
- import '../shared/definition51.js';
26
+ import '../shared/definition52.js';
26
27
  import '../shared/index2.js';
27
28
  import '../locales/en-US.js';
29
+ import '../shared/Reflector.js';
28
30
  import '../shared/text-field2.js';
29
31
  import '../shared/text-field.js';
30
32
  import '../shared/definition20.js';
package/dialog/index.js CHANGED
@@ -6,7 +6,7 @@ import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
8
  import '../shared/definition10.js';
9
- import '../shared/definition56.js';
9
+ import '../shared/definition57.js';
10
10
  import '../shared/focus.js';
11
11
  import '../shared/definition36.js';
12
12
  import '../shared/base-progress.js';
@@ -20,6 +20,10 @@ import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
22
  import '../shared/focus2.js';
23
- import '../shared/definition57.js';
23
+ import '../shared/enums.js';
24
+ import '../shared/definition58.js';
25
+ import '../shared/index2.js';
26
+ import '../locales/en-US.js';
27
+ import '../shared/localized.js';
24
28
 
25
29
  registerDialog();
@@ -1,4 +1,4 @@
1
- import { r as registerElevation } from '../shared/definition57.js';
1
+ import { r as registerElevation } from '../shared/definition58.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/class-names.js';
4
4
 
package/fab/index.js CHANGED
@@ -5,7 +5,7 @@ import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition56.js';
8
+ import '../shared/definition57.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/slotted.js';
@@ -5,7 +5,7 @@ import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition56.js';
8
+ import '../shared/definition57.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/definition10.js';
11
11
  import '../shared/definition36.js';
@@ -20,6 +20,7 @@ import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
22
  import '../shared/focus2.js';
23
+ import '../shared/enums.js';
23
24
  import '../shared/index2.js';
24
25
  import '../locales/en-US.js';
25
26
  import '../shared/localized.js';
package/focus/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { r as registerFocus } from '../shared/definition56.js';
1
+ import { r as registerFocus } from '../shared/definition57.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/focus.js';
4
4
 
package/header/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerHeader } from '../shared/definition24.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition57.js';
3
+ import '../shared/definition58.js';
4
4
  import '../shared/class-names.js';
5
5
 
6
6
  registerHeader();
package/index.js CHANGED
@@ -7,7 +7,7 @@ export { b as badgeDefinition, r as registerBadge } from './shared/definition6.j
7
7
  export { b as bannerDefinition, a as bannerRegistries, r as registerBanner } from './shared/definition7.js';
8
8
  export { b as breadcrumbItemDefinition, a as breadcrumbItemRegistries, r as registerBreadcrumbItem } from './shared/definition8.js';
9
9
  export { b as breadcrumbDefinition, a as breadcrumbRegistries, r as registerBreadcrumb } from './shared/definition9.js';
10
- export { A as Appearance, e as AriaLive, C as Connotation, c as ConnotationDecorative, L as LayoutSize, P as Position, R as Role, S as Shape, d as Size, b as buttonDefinition, a as buttonRegistries, r as registerButton } from './shared/definition10.js';
10
+ export { b as buttonDefinition, a as buttonRegistries, r as registerButton } from './shared/definition10.js';
11
11
  export { c as calendarEventDefinition, a as calendarEventRegistries, r as registerCalendarEvent } from './shared/definition11.js';
12
12
  export { c as calendarDefinition, a as calendarRegistries, r as registerCalendar } from './shared/definition12.js';
13
13
  export { c as cardDefinition, a as cardRegistries, r as registerCard } from './shared/definition13.js';
@@ -38,24 +38,26 @@ export { p as progressDefinition, a as progressRegistries, r as registerProgress
38
38
  export { r as radioGroupDefinition, a as radioGroupRegistries, b as registerRadioGroup } from './shared/definition38.js';
39
39
  export { r as radioDefinition, a as radioRegistries, b as registerRadio } from './shared/definition39.js';
40
40
  export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition40.js';
41
- export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition41.js';
42
- export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition42.js';
43
- export { r as registerSplitButton, s as splitButtonDefinition, a as splitButtonRegistries } from './shared/definition43.js';
44
- export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition44.js';
45
- export { r as registerTabPanel, t as tabPanelDefinition, a as tabPanelRegistries } from './shared/definition45.js';
46
- export { r as registerTab, t as tabDefinition, a as tabRegistries } from './shared/definition46.js';
47
- export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition47.js';
48
- export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition48.js';
49
- export { r as registerTag, t as tagDefinition } from './shared/definition49.js';
50
- export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition50.js';
51
- export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition51.js';
52
- export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition52.js';
53
- export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition53.js';
54
- export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition54.js';
55
- export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition55.js';
41
+ export { r as registerSelectableBox, s as selectableBoxDefinition, a as selectableBoxRegistries } from './shared/definition41.js';
42
+ export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition42.js';
43
+ export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition43.js';
44
+ export { r as registerSplitButton, s as splitButtonDefinition, a as splitButtonRegistries } from './shared/definition44.js';
45
+ export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition45.js';
46
+ export { r as registerTabPanel, t as tabPanelDefinition, a as tabPanelRegistries } from './shared/definition46.js';
47
+ export { r as registerTab, t as tabDefinition, a as tabRegistries } from './shared/definition47.js';
48
+ export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition48.js';
49
+ export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition49.js';
50
+ export { r as registerTag, t as tagDefinition } from './shared/definition50.js';
51
+ export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition51.js';
52
+ export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition52.js';
53
+ export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition53.js';
54
+ export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition54.js';
55
+ export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition55.js';
56
+ export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition56.js';
57
+ export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, L as LayoutSize, P as Position, R as Role, S as Shape, b as Size } from './shared/enums.js';
56
58
  export { d as designSystem, r as registerFactory } from './shared/index.js';
57
59
  export { s as setLocale } from './shared/index2.js';
58
- import './shared/definition56.js';
60
+ import './shared/definition57.js';
59
61
  import './shared/focus.js';
60
62
  import './shared/affix.js';
61
63
  import './shared/icon.js';
@@ -69,7 +71,7 @@ import './shared/when.js';
69
71
  import './shared/key-codes.js';
70
72
  import './shared/numbers.js';
71
73
  import './shared/class-names.js';
72
- import './shared/definition57.js';
74
+ import './shared/definition58.js';
73
75
  import './shared/button.js';
74
76
  import './shared/form-associated.js';
75
77
  import './shared/aria-global.js';
@@ -78,9 +80,10 @@ import './shared/anchor.js';
78
80
  import './shared/text-anchor.template.js';
79
81
  import './shared/calendar-event.js';
80
82
  import './shared/repeat.js';
81
- import './shared/definition58.js';
83
+ import './shared/definition59.js';
82
84
  import './shared/text-field.js';
83
85
  import './shared/listbox.js';
86
+ import './shared/key-codes2.js';
84
87
  import './shared/strings.js';
85
88
  import './shared/select.options.js';
86
89
  import './shared/children.js';
@@ -94,5 +97,6 @@ import './shared/text-field2.js';
94
97
  import './shared/base-progress.js';
95
98
  import './shared/radio.js';
96
99
  import './shared/aria2.js';
100
+ import './shared/Reflector.js';
97
101
  import './shared/tree-item.js';
98
102
  import './locales/en-US.js';
@@ -4,6 +4,7 @@ import { type ErrorText, type FormElement, FormElementHelperText, FormElementSuc
4
4
  export declare const keySpace: ' ';
5
5
  export type CheckboxConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
6
6
  export declare class Checkbox extends FoundationCheckbox {
7
+ ariaLabel: string | null;
7
8
  connotation?: CheckboxConnotation;
8
9
  }
9
10
  export interface Checkbox extends FormElement, FormElementHelperText, ErrorText, FormElementSuccessText {
@@ -38,6 +38,7 @@ export * from './progress/definition';
38
38
  export * from './radio-group/definition';
39
39
  export * from './radio/definition';
40
40
  export * from './select/definition';
41
+ export * from './selectable-box/definition';
41
42
  export * from './side-drawer/definition';
42
43
  export * from './slider/definition';
43
44
  export * from './split-button/definition';
@@ -10,7 +10,6 @@ export declare class DateRangePicker extends DatePickerBase {
10
10
  currentEnd: string;
11
11
  setFormValue: (value: File | string | FormData | null, state?: File | string | FormData | null) => void;
12
12
  connectedCallback(): void;
13
- formResetCallback(): void;
14
13
  }
15
14
  export interface DateRangePicker extends ErrorText, FormElement {
16
15
  }
@@ -1,4 +1,5 @@
1
1
  import { FoundationElement } from '@microsoft/fast-foundation';
2
+ import { Localized } from '../../shared/patterns';
2
3
  export declare const isDialogSupported: boolean;
3
4
  export type IconPlacement = 'top' | 'side';
4
5
  export declare class Dialog extends FoundationElement {
@@ -12,6 +13,7 @@ export declare class Dialog extends FoundationElement {
12
13
  ariaLabelledBy: string | null;
13
14
  ariaLabel: string | null;
14
15
  ariaDescribedBy: string | null;
16
+ dismissButtonAriaLabel: string | null;
15
17
  set returnValue(value: string);
16
18
  get returnValue(): string;
17
19
  get modal(): boolean;
@@ -24,3 +26,5 @@ export declare class Dialog extends FoundationElement {
24
26
  footerSlottedContent?: HTMLElement[];
25
27
  actionItemsSlottedContent?: HTMLElement[];
26
28
  }
29
+ export interface Dialog extends Localized {
30
+ }
@@ -0,0 +1,3 @@
1
+ export interface DialogLocale {
2
+ dismissButtonLabel: string;
3
+ }
@@ -10,6 +10,7 @@ export declare class Menu extends FastMenu {
10
10
  autoDismissChanged(oldValue: boolean, newValue: boolean): void;
11
11
  open: boolean;
12
12
  openChanged(_: boolean, newValue: boolean): void;
13
+ constructor();
13
14
  disconnectedCallback(): void;
14
15
  actionItemsSlottedContent?: HTMLElement[];
15
16
  }
@@ -6,10 +6,16 @@ export declare const MenuItemRole: {
6
6
  readonly menuitemcheckbox: "menuitemcheckbox";
7
7
  readonly menuitemradio: "menuitemradio";
8
8
  };
9
+ export declare enum CheckAppearance {
10
+ Normal = "normal",
11
+ TickOnly = "tick-only"
12
+ }
9
13
  export declare class MenuItem extends FastMenuItem {
10
14
  #private;
11
15
  text?: string;
12
16
  textSecondary?: string;
17
+ checkTrailing: boolean;
18
+ checkedAppearance?: CheckAppearance;
13
19
  constructor();
14
20
  }
15
21
  export interface MenuItem extends AffixIcon {
@@ -0,0 +1,4 @@
1
+ export interface NumberFieldLocale {
2
+ incrementButtonLabel: string;
3
+ decrementButtonLabel: string;
4
+ }
@@ -1,10 +1,12 @@
1
1
  import { NumberField as FastNumberField } from '@microsoft/fast-foundation';
2
2
  import type { Appearance, Shape } from '../enums';
3
- import { type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
3
+ import { type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, Localized } from '../../shared/patterns';
4
4
  import { AffixIcon } from '../../shared/patterns';
5
5
  export type NumberFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
6
6
  export type NumberFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
7
7
  export declare class NumberField extends FastNumberField {
8
+ incrementButtonAriaLabel: string | null;
9
+ decrementButtonAriaLabel: string | null;
8
10
  appearance?: NumberFieldAppearance;
9
11
  shape?: NumberFieldShape;
10
12
  autoComplete?: string;
@@ -13,5 +15,5 @@ export declare class NumberField extends FastNumberField {
13
15
  stepUp(): void;
14
16
  stepDown(): void;
15
17
  }
16
- export interface NumberField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText {
18
+ export interface NumberField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, Localized {
17
19
  }
@@ -3,6 +3,7 @@ import type { Connotation, ConnotationDecorative, Shape } from '../enums';
3
3
  export type ProgressConnotation = Connotation.Accent | Connotation.Success | Connotation.Alert | Connotation.CTA | ConnotationDecorative.Pacific;
4
4
  export type ProgressShape = Shape.Rounded | Shape.Sharp;
5
5
  export declare class Progress extends BaseProgress {
6
+ ariaLabel: string | null;
6
7
  shape?: ProgressShape;
7
8
  connotation?: ProgressConnotation;
8
9
  reverse: boolean;
@@ -2,6 +2,7 @@ import { BaseProgress } from '@microsoft/fast-foundation';
2
2
  import type { Connotation } from '../enums';
3
3
  export type ProgressRingConnotation = Connotation.Accent | Connotation.Success | Connotation.Alert | Connotation.CTA;
4
4
  export declare class ProgressRing extends BaseProgress {
5
+ ariaLabel: string | null;
5
6
  connotation?: ProgressRingConnotation;
6
7
  size?: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
7
8
  }
@@ -2,6 +2,7 @@ import { Radio as FastRadio } from '@microsoft/fast-foundation';
2
2
  import type { Connotation } from '../enums.js';
3
3
  export type RadioConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
4
4
  export declare class Radio extends FastRadio {
5
+ ariaLabel: string | null;
5
6
  label?: string;
6
7
  connotation?: RadioConnotation;
7
8
  }
@@ -0,0 +1,3 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ export declare const selectableBoxDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
3
+ export declare const registerSelectableBox: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
@@ -0,0 +1,13 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ import type { Connotation } from '../enums.js';
3
+ export type SelectableBoxConnotation = Connotation.Accent | Connotation.CTA;
4
+ export type SelectableBoxControlType = 'checkbox' | 'radio';
5
+ export declare class SelectableBox extends FoundationElement {
6
+ checked: boolean;
7
+ clickable: boolean;
8
+ connotation?: SelectableBoxConnotation;
9
+ controlAriaLabel: string | null;
10
+ controlAriaLabelledby: string | null;
11
+ controlType?: SelectableBoxControlType;
12
+ tight: boolean;
13
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import { SelectableBox } from './selectable-box';
4
+ export declare const SelectableBoxTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<SelectableBox>;
@@ -1,3 +1,4 @@
1
1
  import type { SliderOptions } from '@microsoft/fast-foundation';
2
+ export type { SliderConnotation } from './slider';
2
3
  export declare const sliderDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SliderOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SliderOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
3
4
  export declare const registerSlider: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
@@ -1,4 +1,9 @@
1
1
  import { Slider as FastSlider } from '@microsoft/fast-foundation';
2
+ import type { Connotation } from '../enums';
3
+ export type SliderConnotation = Connotation.Accent | Connotation.CTA;
2
4
  export declare class Slider extends FastSlider {
5
+ ariaLabel: string | null;
6
+ ariaValuetext: string | null;
3
7
  markers: boolean;
8
+ connotation?: SliderConnotation;
4
9
  }
@@ -2,7 +2,10 @@ import { TextArea as FoundationElement } from '@microsoft/fast-foundation';
2
2
  import { type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
3
3
  export type TextAreaWrap = 'hard' | 'soft' | 'off';
4
4
  export declare class TextArea extends FoundationElement {
5
+ #private;
5
6
  wrap?: TextAreaWrap;
7
+ connectedCallback(): void;
8
+ disconnectedCallback(): void;
6
9
  }
7
10
  export interface TextArea extends FormElement, ErrorText, FormElementCharCount, FormElementHelperText, FormElementSuccessText {
8
11
  }
@@ -1,14 +1,17 @@
1
1
  import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
2
2
  import type { Appearance, Shape } from '../enums';
3
- import { AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
4
- import { type ErrorText, type FormElement } from '../../shared/patterns';
3
+ import { AffixIcon, type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
5
4
  export type TextFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
6
5
  export type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
7
6
  export declare class TextField extends FoundationTextfield {
7
+ #private;
8
8
  appearance?: TextFieldAppearance;
9
9
  shape?: TextFieldShape;
10
10
  autoComplete?: string;
11
11
  leadingActionItemsSlottedContent?: HTMLElement[];
12
+ connectedCallback(): void;
13
+ disconnectedCallback(): void;
14
+ focus(): void;
12
15
  }
13
16
  export interface TextField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText {
14
17
  }
package/listbox/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { h as html, r as registerFactory } from '../shared/index.js';
2
- import { f as focusRegistries } from '../shared/definition56.js';
2
+ import { f as focusRegistries } from '../shared/definition57.js';
3
3
  import { a as listboxOptionRegistries } from '../shared/definition34.js';
4
4
  import { L as ListboxElement, a as Listbox } from '../shared/listbox.js';
5
5
  import '../shared/affix.js';
@@ -17,6 +17,7 @@ import '../shared/start-end.js';
17
17
  import '../shared/ref.js';
18
18
  import '../shared/apply-mixins.js';
19
19
  import '../shared/dom.js';
20
+ import '../shared/key-codes2.js';
20
21
  import '../shared/key-codes.js';
21
22
  import '../shared/strings.js';
22
23
  import '../shared/numbers.js';
@@ -61,7 +62,7 @@ const ListboxTemplate = (context) => {
61
62
  `;
62
63
  };
63
64
 
64
- const styles = "/**\n * Do not edit directly\n * Generated on Fri, 13 Oct 2023 14:45:50 GMT\n */\n:host {\n display: inline-block;\n inline-size: fit-content;\n}\n\n:host(:focus-within) {\n outline: none;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.base {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: var(--_listbox-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n gap: 4px;\n inline-size: 100%;\n}\n.base {\n /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:not(.orientation-horizontal) {\n flex-direction: column;\n}\n\n.focus-indicator {\n pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n --_listbox-border-radius: 6px;\n}\n\n.base.shape-pill {\n --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n border-radius: var(--_listbox-border-radius);\n contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n --_option-appearance-color-text: var(--_appearance-color-outline);\n pointer-events: none;\n}";
65
+ const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n display: inline-block;\n inline-size: fit-content;\n}\n\n:host(:focus-within) {\n outline: none;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.base {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: var(--_listbox-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n gap: 4px;\n inline-size: 100%;\n}\n.base {\n /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:not(.orientation-horizontal) {\n flex-direction: column;\n}\n\n.focus-indicator {\n pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n --_listbox-border-radius: 6px;\n}\n\n.base.shape-pill {\n --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n border-radius: var(--_listbox-border-radius);\n contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n --_option-appearance-color-text: var(--_appearance-color-outline);\n pointer-events: none;\n}";
65
66
 
66
67
  const listboxDefinition = Listbox.compose({
67
68
  baseName: "listbox",
package/locales/en-GB.js CHANGED
@@ -77,6 +77,13 @@ const enGB = {
77
77
  maxFilesExceededError: "You can't select any more files.",
78
78
  fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
79
79
  removeFileLabel: "Remove file"
80
+ },
81
+ dialog: {
82
+ dismissButtonLabel: "Close"
83
+ },
84
+ numberField: {
85
+ incrementButtonLabel: "Increment",
86
+ decrementButtonLabel: "Decrement"
80
87
  }
81
88
  };
82
89
 
package/locales/en-US.js CHANGED
@@ -77,6 +77,13 @@ const enUS = {
77
77
  maxFilesExceededError: "You can't select any more files.",
78
78
  fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
79
79
  removeFileLabel: "Remove file"
80
+ },
81
+ dialog: {
82
+ dismissButtonLabel: "Close"
83
+ },
84
+ numberField: {
85
+ incrementButtonLabel: "Increment",
86
+ decrementButtonLabel: "Decrement"
80
87
  }
81
88
  };
82
89
 
package/locales/ja-JP.js CHANGED
@@ -77,6 +77,13 @@ const jaJP = {
77
77
  maxFilesExceededError: "これ以上ファイルを選択できません。",
78
78
  fileTooBigError: "ファイルが大きすぎます ({{filesize}}MiB)。最大ファイルサイズ: {{maxFilesize}}MiB。",
79
79
  removeFileLabel: "ファイルを削除"
80
+ },
81
+ dialog: {
82
+ dismissButtonLabel: "閉じる"
83
+ },
84
+ numberField: {
85
+ incrementButtonLabel: "増加",
86
+ decrementButtonLabel: "減少"
80
87
  }
81
88
  };
82
89
 
package/locales/zh-CN.js CHANGED
@@ -77,6 +77,13 @@ const zhCN = {
77
77
  maxFilesExceededError: "您不能再选择任何文件。",
78
78
  fileTooBigError: "文件太大 ({{filesize}}MiB)。最大文件大小: {{maxFilesize}}MiB。",
79
79
  removeFileLabel: "删除文件"
80
+ },
81
+ dialog: {
82
+ dismissButtonLabel: "关"
83
+ },
84
+ numberField: {
85
+ incrementButtonLabel: "增量",
86
+ decrementButtonLabel: "递减"
80
87
  }
81
88
  };
82
89
 
package/menu/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { r as registerMenu } from '../shared/definition28.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition58.js';
3
+ import '../shared/definition59.js';
4
4
  import '../shared/definition10.js';
5
5
  import '../shared/definition25.js';
6
6
  import '../shared/icon.js';
7
7
  import '../shared/_has.js';
8
8
  import '../shared/class-names.js';
9
9
  import '../shared/when.js';
10
- import '../shared/definition56.js';
10
+ import '../shared/definition57.js';
11
11
  import '../shared/focus.js';
12
12
  import '../shared/definition36.js';
13
13
  import '../shared/base-progress.js';
@@ -21,7 +21,8 @@ import '../shared/aria-global.js';
21
21
  import '../shared/start-end.js';
22
22
  import '../shared/ref.js';
23
23
  import '../shared/focus2.js';
24
- import '../shared/definition57.js';
24
+ import '../shared/enums.js';
25
+ import '../shared/definition58.js';
25
26
  import '../shared/definition27.js';
26
27
  import '../shared/direction.js';
27
28
  import '../shared/dom.js';
@@ -5,7 +5,7 @@ import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition56.js';
8
+ import '../shared/definition57.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/slotted.js';
@@ -5,7 +5,7 @@ import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition56.js';
8
+ import '../shared/definition57.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/slotted.js';
package/nav-item/index.js CHANGED
@@ -5,7 +5,7 @@ import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition56.js';
8
+ import '../shared/definition57.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/slotted.js';
@@ -6,7 +6,7 @@ import '../shared/icon.js';
6
6
  import '../shared/_has.js';
7
7
  import '../shared/class-names.js';
8
8
  import '../shared/when.js';
9
- import '../shared/definition56.js';
9
+ import '../shared/definition57.js';
10
10
  import '../shared/focus.js';
11
11
  import '../shared/definition36.js';
12
12
  import '../shared/base-progress.js';
@@ -20,10 +20,12 @@ import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
22
  import '../shared/focus2.js';
23
+ import '../shared/enums.js';
23
24
  import '../shared/definition20.js';
24
25
  import '../shared/aria.js';
25
26
  import '../shared/index2.js';
26
27
  import '../locales/en-US.js';
28
+ import '../shared/localized.js';
27
29
  import '../shared/text-field2.js';
28
30
 
29
31
  registerNumberField();
package/option/index.js CHANGED
@@ -5,7 +5,7 @@ import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition56.js';
8
+ import '../shared/definition57.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/slotted.js';