@tylertech/forge 3.11.0 → 3.12.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 (178) hide show
  1. package/custom-elements.json +311 -145
  2. package/dist/app-bar/forge-app-bar.css +2 -0
  3. package/dist/button/forge-button.css +2 -0
  4. package/dist/checkbox/forge-checkbox.css +2 -0
  5. package/dist/chips/forge-chips.css +2 -0
  6. package/dist/floating-action-button/forge-floating-action-button.css +2 -0
  7. package/dist/icon-button/forge-icon-button.css +2 -0
  8. package/dist/lib.js +17 -17
  9. package/dist/lib.js.map +3 -3
  10. package/dist/list/forge-list.css +2 -0
  11. package/dist/radio/forge-radio.css +2 -0
  12. package/dist/skip-link/forge-skip-link.css +2 -0
  13. package/dist/state-layer/forge-state-layer.css +2 -0
  14. package/dist/switch/forge-switch.css +2 -0
  15. package/dist/vscode.html-custom-data.json +74 -59
  16. package/esm/accordion/accordion.d.ts +1 -1
  17. package/esm/accordion/accordion.js +1 -1
  18. package/esm/app-bar/app-bar/app-bar.d.ts +1 -1
  19. package/esm/app-bar/app-bar/app-bar.js +1 -1
  20. package/esm/autocomplete/autocomplete-core.js +16 -3
  21. package/esm/autocomplete/autocomplete.d.ts +1 -1
  22. package/esm/autocomplete/autocomplete.js +1 -1
  23. package/esm/avatar/avatar.d.ts +1 -1
  24. package/esm/avatar/avatar.js +1 -1
  25. package/esm/backdrop/backdrop.d.ts +1 -1
  26. package/esm/backdrop/backdrop.js +1 -1
  27. package/esm/badge/badge.d.ts +1 -1
  28. package/esm/badge/badge.js +1 -1
  29. package/esm/banner/banner.d.ts +1 -1
  30. package/esm/banner/banner.js +1 -1
  31. package/esm/button/button.d.ts +1 -6
  32. package/esm/button/button.js +1 -6
  33. package/esm/button-area/button-area.d.ts +1 -4
  34. package/esm/button-area/button-area.js +1 -4
  35. package/esm/button-toggle/button-toggle/button-toggle.d.ts +1 -1
  36. package/esm/button-toggle/button-toggle/button-toggle.js +1 -1
  37. package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +1 -1
  38. package/esm/button-toggle/button-toggle-group/button-toggle-group.js +1 -1
  39. package/esm/chip-field/chip-field.d.ts +1 -1
  40. package/esm/chip-field/chip-field.js +1 -1
  41. package/esm/chips/chip/chip-adapter.d.ts +3 -0
  42. package/esm/chips/chip/chip-adapter.js +12 -2
  43. package/esm/chips/chip/chip-constants.d.ts +2 -0
  44. package/esm/chips/chip/chip-constants.js +2 -1
  45. package/esm/chips/chip/chip-core.d.ts +4 -0
  46. package/esm/chips/chip/chip-core.js +9 -0
  47. package/esm/chips/chip/chip.d.ts +4 -0
  48. package/esm/chips/chip/chip.js +8 -0
  49. package/esm/chips/chip-set/chip-set.d.ts +1 -1
  50. package/esm/chips/chip-set/chip-set.js +1 -1
  51. package/esm/circular-progress/circular-progress.d.ts +1 -2
  52. package/esm/circular-progress/circular-progress.js +1 -2
  53. package/esm/color-picker/color-picker.d.ts +1 -1
  54. package/esm/color-picker/color-picker.js +1 -1
  55. package/esm/date-picker/date-picker.d.ts +1 -1
  56. package/esm/date-picker/date-picker.js +1 -1
  57. package/esm/dialog/dialog.d.ts +1 -1
  58. package/esm/dialog/dialog.js +1 -1
  59. package/esm/divider/divider.d.ts +1 -1
  60. package/esm/divider/divider.js +1 -1
  61. package/esm/drawer/base/base-drawer-adapter.d.ts +2 -0
  62. package/esm/drawer/base/base-drawer-adapter.js +3 -0
  63. package/esm/drawer/base/base-drawer-core.js +3 -0
  64. package/esm/drawer/drawer/drawer.d.ts +1 -1
  65. package/esm/drawer/drawer/drawer.js +1 -1
  66. package/esm/drawer/modal-drawer/modal-drawer.d.ts +1 -1
  67. package/esm/drawer/modal-drawer/modal-drawer.js +1 -1
  68. package/esm/expansion-panel/expansion-panel.d.ts +1 -1
  69. package/esm/expansion-panel/expansion-panel.js +1 -1
  70. package/esm/field/field.d.ts +1 -2
  71. package/esm/field/field.js +1 -2
  72. package/esm/file-picker/file-picker.d.ts +2 -3
  73. package/esm/file-picker/file-picker.js +2 -3
  74. package/esm/floating-action-button/floating-action-button.d.ts +1 -1
  75. package/esm/floating-action-button/floating-action-button.js +1 -1
  76. package/esm/focus-indicator/focus-indicator.d.ts +1 -1
  77. package/esm/focus-indicator/focus-indicator.js +22 -21
  78. package/esm/icon/icon.d.ts +1 -1
  79. package/esm/icon/icon.js +1 -1
  80. package/esm/icon-button/icon-button.d.ts +1 -1
  81. package/esm/icon-button/icon-button.js +1 -1
  82. package/esm/inline-message/inline-message.d.ts +1 -1
  83. package/esm/inline-message/inline-message.js +1 -1
  84. package/esm/label/label.d.ts +1 -1
  85. package/esm/label/label.js +1 -1
  86. package/esm/label-value/label-value.d.ts +1 -1
  87. package/esm/label-value/label-value.js +1 -1
  88. package/esm/linear-progress/linear-progress.d.ts +1 -2
  89. package/esm/linear-progress/linear-progress.js +1 -2
  90. package/esm/list/list/list.d.ts +1 -1
  91. package/esm/list/list/list.js +1 -1
  92. package/esm/list/list-item/list-item-constants.js +1 -1
  93. package/esm/list-dropdown/list-dropdown-constants.d.ts +5 -1
  94. package/esm/list-dropdown/list-dropdown-utils.d.ts +3 -1
  95. package/esm/list-dropdown/list-dropdown-utils.js +41 -20
  96. package/esm/menu/menu-adapter.d.ts +2 -0
  97. package/esm/menu/menu-adapter.js +12 -8
  98. package/esm/menu/menu-constants.d.ts +1 -0
  99. package/esm/menu/menu-constants.js +3 -2
  100. package/esm/menu/menu-core.d.ts +5 -0
  101. package/esm/menu/menu-core.js +41 -2
  102. package/esm/menu/menu.d.ts +16 -1
  103. package/esm/menu/menu.js +14 -2
  104. package/esm/open-icon/open-icon.d.ts +2 -1
  105. package/esm/open-icon/open-icon.js +2 -1
  106. package/esm/overlay/overlay.d.ts +1 -2
  107. package/esm/overlay/overlay.js +1 -2
  108. package/esm/page-state/page-state.d.ts +1 -1
  109. package/esm/page-state/page-state.js +1 -1
  110. package/esm/paginator/paginator-core.d.ts +16 -0
  111. package/esm/paginator/paginator-core.js +29 -9
  112. package/esm/paginator/paginator.d.ts +37 -1
  113. package/esm/paginator/paginator.js +45 -1
  114. package/esm/popover/popover-adapter.js +1 -1
  115. package/esm/popover/popover-constants.d.ts +4 -0
  116. package/esm/popover/popover-constants.js +4 -2
  117. package/esm/popover/popover-core.d.ts +5 -1
  118. package/esm/popover/popover-core.js +13 -0
  119. package/esm/popover/popover.d.ts +6 -2
  120. package/esm/popover/popover.js +9 -1
  121. package/esm/profile-card/profile-card.d.ts +2 -1
  122. package/esm/profile-card/profile-card.js +2 -1
  123. package/esm/radio/radio/radio.d.ts +1 -2
  124. package/esm/radio/radio/radio.js +1 -2
  125. package/esm/scaffold/scaffold.d.ts +1 -1
  126. package/esm/scaffold/scaffold.js +1 -1
  127. package/esm/select/option/option.d.ts +1 -1
  128. package/esm/select/option/option.js +1 -1
  129. package/esm/select/select/select.d.ts +1 -1
  130. package/esm/select/select/select.js +2 -2
  131. package/esm/skeleton/skeleton.d.ts +1 -1
  132. package/esm/skeleton/skeleton.js +1 -1
  133. package/esm/skip-link/skip-link.d.ts +1 -1
  134. package/esm/skip-link/skip-link.js +1 -1
  135. package/esm/slider/slider.d.ts +1 -1
  136. package/esm/slider/slider.js +1 -1
  137. package/esm/split-button/split-button.d.ts +1 -1
  138. package/esm/split-button/split-button.js +1 -1
  139. package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
  140. package/esm/stack/stack.d.ts +1 -8
  141. package/esm/stack/stack.js +1 -8
  142. package/esm/state-layer/state-layer.d.ts +1 -1
  143. package/esm/state-layer/state-layer.js +2 -2
  144. package/esm/table/table-adapter.d.ts +4 -4
  145. package/esm/table/table-adapter.js +4 -4
  146. package/esm/table/table-core.js +2 -2
  147. package/esm/table/table-utils.d.ts +2 -2
  148. package/esm/table/table-utils.js +22 -18
  149. package/esm/table/table.d.ts +2 -2
  150. package/esm/table/table.js +1 -1
  151. package/esm/tabs/tab/tab.d.ts +1 -1
  152. package/esm/tabs/tab/tab.js +1 -1
  153. package/esm/tabs/tab-bar/tab-bar.d.ts +1 -1
  154. package/esm/tabs/tab-bar/tab-bar.js +1 -1
  155. package/esm/text-field/text-field-adapter.d.ts +6 -4
  156. package/esm/text-field/text-field-adapter.js +11 -4
  157. package/esm/text-field/text-field-core.d.ts +4 -0
  158. package/esm/text-field/text-field-core.js +13 -2
  159. package/esm/text-field/text-field.d.ts +1 -1
  160. package/esm/text-field/text-field.js +1 -1
  161. package/esm/time-picker/time-picker-adapter.js +1 -0
  162. package/esm/time-picker/time-picker-core.js +3 -3
  163. package/esm/toast/toast-adapter.d.ts +20 -0
  164. package/esm/toast/toast-adapter.js +30 -0
  165. package/esm/toast/toast-core.d.ts +17 -0
  166. package/esm/toast/toast-core.js +66 -0
  167. package/esm/toast/toast.d.ts +9 -2
  168. package/esm/toast/toast.js +10 -1
  169. package/esm/toolbar/toolbar.d.ts +1 -3
  170. package/esm/toolbar/toolbar.js +1 -3
  171. package/esm/tooltip/tooltip.d.ts +1 -1
  172. package/esm/tooltip/tooltip.js +1 -1
  173. package/esm/view-switcher/view/view.d.ts +1 -1
  174. package/esm/view-switcher/view/view.js +1 -1
  175. package/esm/view-switcher/view-switcher.d.ts +1 -1
  176. package/esm/view-switcher/view-switcher.js +1 -1
  177. package/package.json +1 -1
  178. package/sass/state-layer/_core.scss +2 -0
@@ -19,7 +19,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-paginato
19
19
  /**
20
20
  * @tag forge-paginator
21
21
  *
22
- * @summary Paginators provide navigation controls for dividing content across multiple pages.
22
+ * @summary Paginators provide navigation controls for dividing content across multiple pages. Typically used alongside data tables or lists.
23
23
  *
24
24
  * @slot label - Overrides the label text when in the default variant.
25
25
  * @slot range-label - Overrides the default range label with a custom label when in the default variant.
@@ -82,6 +82,50 @@ let PaginatorComponent = class PaginatorComponent extends BaseComponent {
82
82
  focus(options) {
83
83
  this._core.focus(options);
84
84
  }
85
+ /** Navigates to the first page. */
86
+ goToFirstPage() {
87
+ this._core.goToFirstPage();
88
+ }
89
+ /** Navigates to the previous page. */
90
+ goToPreviousPage() {
91
+ this._core.goToPreviousPage();
92
+ }
93
+ /** Navigates to the next page. */
94
+ goToNextPage() {
95
+ this._core.goToNextPage();
96
+ }
97
+ /** Navigates to the last page. */
98
+ goToLastPage() {
99
+ this._core.goToLastPage();
100
+ }
101
+ /**
102
+ * Checks if navigation to the first page is possible.
103
+ * @returns True if can navigate to first page
104
+ */
105
+ canGoToFirstPage() {
106
+ return this._core.canGoToFirstPage();
107
+ }
108
+ /**
109
+ * Checks if navigation to the previous page is possible.
110
+ * @returns True if can navigate to previous page
111
+ */
112
+ canGoToPreviousPage() {
113
+ return this._core.canGoToPreviousPage();
114
+ }
115
+ /**
116
+ * Checks if navigation to the next page is possible.
117
+ * @returns True if can navigate to next page
118
+ */
119
+ canGoToNextPage() {
120
+ return this._core.canGoToNextPage();
121
+ }
122
+ /**
123
+ * Checks if navigation to the last page is possible.
124
+ * @returns True if can navigate to last page
125
+ */
126
+ canGoToLastPage() {
127
+ return this._core.canGoToLastPage();
128
+ }
85
129
  };
86
130
  __decorate([
87
131
  coreProperty()
@@ -146,7 +146,7 @@ export class PopoverAdapter extends OverlayAwareAdapter {
146
146
  return null;
147
147
  }
148
148
  _updateAnchorExpandedState(state) {
149
- if (!this._overlayElement.anchorElement) {
149
+ if (!this._overlayElement.anchorElement || this._component.anchorAccessibility !== 'auto') {
150
150
  return;
151
151
  }
152
152
  if (!(this._overlayElement.anchorElement instanceof VirtualElement) && !this.overlayElement.anchorElement?.hasAttribute('aria-hidden')) {
@@ -16,6 +16,7 @@ export declare const POPOVER_CONSTANTS: {
16
16
  HOVER_DISMISS_DELAY: string;
17
17
  PRESET: string;
18
18
  DISTINCT: string;
19
+ ANCHOR_ACCESSIBILITY: string;
19
20
  };
20
21
  attributes: {
21
22
  OPEN: string;
@@ -30,6 +31,7 @@ export declare const POPOVER_CONSTANTS: {
30
31
  HOVER_DISMISS_DELAY: string;
31
32
  PRESET: string;
32
33
  DISTINCT: string;
34
+ ANCHOR_ACCESSIBILITY: string;
33
35
  };
34
36
  classes: {
35
37
  ARROW: string;
@@ -50,6 +52,7 @@ export declare const POPOVER_CONSTANTS: {
50
52
  TRIGGER_TYPE: PopoverTriggerType;
51
53
  HOVER_DELAY: number;
52
54
  PRESET: PopoverPreset;
55
+ ANCHOR_ACCESSIBILITY: PopoverAnchorAccessibility;
53
56
  };
54
57
  };
55
58
  export declare const POPOVER_HOVER_TIMEOUT = 500;
@@ -57,6 +60,7 @@ export type PopoverAnimationType = 'none' | 'zoom' | 'slide' | 'fade';
57
60
  export type PopoverTriggerType = 'click' | 'hover' | 'focus' | 'longpress' | 'doubleclick' | 'contextmenu' | 'manual';
58
61
  export type PopoverDismissReason = OverlayLightDismissReason | PopoverTriggerType | 'destroy';
59
62
  export type PopoverPreset = 'popover' | 'dropdown' | 'list';
63
+ export type PopoverAnchorAccessibility = 'auto' | 'none';
60
64
  export interface IPopoverToggleEventData {
61
65
  newState: 'closed' | 'open';
62
66
  oldState: 'closed' | 'open';
@@ -14,7 +14,8 @@ const observedAttributes = {
14
14
  HOVER_DELAY: 'hover-delay',
15
15
  HOVER_DISMISS_DELAY: 'hover-dismiss-delay',
16
16
  PRESET: 'preset',
17
- DISTINCT: 'distinct'
17
+ DISTINCT: 'distinct',
18
+ ANCHOR_ACCESSIBILITY: 'anchor-accessibility'
18
19
  };
19
20
  const attributes = {
20
21
  ...observedAttributes,
@@ -40,7 +41,8 @@ const events = {
40
41
  const defaults = {
41
42
  TRIGGER_TYPE: 'click',
42
43
  HOVER_DELAY: 0,
43
- PRESET: 'popover'
44
+ PRESET: 'popover',
45
+ ANCHOR_ACCESSIBILITY: 'auto'
44
46
  };
45
47
  export const POPOVER_CONSTANTS = {
46
48
  elementName,
@@ -6,7 +6,7 @@
6
6
  import { IOverlayAwareCore, OverlayAwareCore } from '../overlay/base/overlay-aware-core';
7
7
  import { OverlayLightDismissEventData } from '../overlay/overlay-constants';
8
8
  import { IPopoverAdapter } from './popover-adapter';
9
- import { PopoverAnimationType, PopoverTriggerType, PopoverPreset } from './popover-constants';
9
+ import { PopoverAnimationType, PopoverTriggerType, PopoverPreset, PopoverAnchorAccessibility } from './popover-constants';
10
10
  import { IDismissibleStackState } from '../core/utils/dismissible-stack';
11
11
  import { VirtualElement } from '../core/utils/position-utils';
12
12
  export interface IPopoverCore extends IOverlayAwareCore {
@@ -19,6 +19,7 @@ export interface IPopoverCore extends IOverlayAwareCore {
19
19
  hoverDelay: number;
20
20
  preset: PopoverPreset;
21
21
  distinct: string | null;
22
+ anchorAccessibility: PopoverAnchorAccessibility;
22
23
  hideAsync(): Promise<void>;
23
24
  dispatchBeforeToggleEvent(state: IDismissibleStackState): boolean;
24
25
  }
@@ -33,6 +34,7 @@ export declare class PopoverCore extends PopoverCore_base implements IPopoverCor
33
34
  private _hoverDelay;
34
35
  private _preset;
35
36
  private _distinct;
37
+ private _anchorAccessibility;
36
38
  private _previouslyFocusedElement;
37
39
  private _hoverAnchorLeaveTimeout;
38
40
  private _popoverMouseleaveTimeout;
@@ -150,5 +152,7 @@ export declare class PopoverCore extends PopoverCore_base implements IPopoverCor
150
152
  set preset(value: PopoverPreset);
151
153
  get distinct(): string | null;
152
154
  set distinct(value: string | null);
155
+ get anchorAccessibility(): PopoverAnchorAccessibility;
156
+ set anchorAccessibility(value: PopoverAnchorAccessibility);
153
157
  }
154
158
  export {};
@@ -20,6 +20,7 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
20
20
  this._hoverDelay = POPOVER_CONSTANTS.defaults.HOVER_DELAY;
21
21
  this._preset = POPOVER_CONSTANTS.defaults.PRESET;
22
22
  this._distinct = null;
23
+ this._anchorAccessibility = POPOVER_CONSTANTS.defaults.ANCHOR_ACCESSIBILITY;
23
24
  this._previouslyFocusedElement = null;
24
25
  // Click trigger listeners
25
26
  this._anchorClickListener = this._onAnchorClick.bind(this);
@@ -533,4 +534,16 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
533
534
  set distinct(value) {
534
535
  this._distinct = value;
535
536
  }
537
+ get anchorAccessibility() {
538
+ return this._anchorAccessibility;
539
+ }
540
+ set anchorAccessibility(value) {
541
+ if (this._anchorAccessibility !== value) {
542
+ this._anchorAccessibility = value;
543
+ this._adapter.setHostAttribute(POPOVER_CONSTANTS.attributes.ANCHOR_ACCESSIBILITY, this._anchorAccessibility);
544
+ if (this._adapter.isConnected) {
545
+ this._adapter.initializeAnchorElement();
546
+ }
547
+ }
548
+ }
536
549
  }
@@ -3,7 +3,7 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
- import { IPopoverToggleEventData, PopoverAnimationType, PopoverPreset, PopoverTriggerType } from './popover-constants';
6
+ import { IPopoverToggleEventData, PopoverAnimationType, PopoverPreset, PopoverTriggerType, PopoverAnchorAccessibility } from './popover-constants';
7
7
  import { IPopoverCore } from './popover-core';
8
8
  import { IOverlayAware, OverlayAware } from '../overlay/base/overlay-aware';
9
9
  import { IDismissible, tryDismiss, IDismissibleStackState } from '../core/utils/dismissible-stack';
@@ -17,6 +17,7 @@ export interface IPopoverProperties extends IOverlayAware, IDismissible {
17
17
  hoverDismissDelay: number;
18
18
  preset: PopoverPreset;
19
19
  distinct: string | null;
20
+ anchorAccessibility: PopoverAnchorAccessibility;
20
21
  }
21
22
  export interface IPopoverComponent extends IPopoverProperties {
22
23
  hideAsync(): Promise<void>;
@@ -33,7 +34,7 @@ declare global {
33
34
  /**
34
35
  * @tag forge-popover
35
36
  *
36
- * @summary Popovers are used to render content in an element that is above all other content on the page.
37
+ * @summary Popovers are used to show content in an element that is rendered above all other content on the page. Use popovers to display additional information or actions related to a specific element. Popovers are typically triggered by user interaction, such as clicking a button or hovering over an element.
37
38
  *
38
39
  * @dependency forge-overlay
39
40
  *
@@ -46,6 +47,7 @@ declare global {
46
47
  * @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
47
48
  * @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
48
49
  * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
50
+ * @property {PopoverAnchorAccessibility} [anchorAccessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
49
51
  *
50
52
  * @globalconfig placement
51
53
  * @globalconfig animationType
@@ -67,6 +69,7 @@ declare global {
67
69
  * @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
68
70
  * @attribute {string} [preset="popover"] - The preset to use for the popover.
69
71
  * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
72
+ * @attribute {string} [anchor-accessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
70
73
  *
71
74
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
72
75
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.
@@ -129,6 +132,7 @@ export declare class PopoverComponent extends OverlayAware<IPopoverCore> impleme
129
132
  hoverDismissDelay: number;
130
133
  preset: PopoverPreset;
131
134
  distinct: string | null;
135
+ anchorAccessibility: PopoverAnchorAccessibility;
132
136
  /**
133
137
  * Hides the popover, and returns a `Promise` that resolves when the hide animation is complete.
134
138
  */
@@ -17,7 +17,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
17
17
  /**
18
18
  * @tag forge-popover
19
19
  *
20
- * @summary Popovers are used to render content in an element that is above all other content on the page.
20
+ * @summary Popovers are used to show content in an element that is rendered above all other content on the page. Use popovers to display additional information or actions related to a specific element. Popovers are typically triggered by user interaction, such as clicking a button or hovering over an element.
21
21
  *
22
22
  * @dependency forge-overlay
23
23
  *
@@ -30,6 +30,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
30
30
  * @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
31
31
  * @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
32
32
  * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
33
+ * @property {PopoverAnchorAccessibility} [anchorAccessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
33
34
  *
34
35
  * @globalconfig placement
35
36
  * @globalconfig animationType
@@ -51,6 +52,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
51
52
  * @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
52
53
  * @attribute {string} [preset="popover"] - The preset to use for the popover.
53
54
  * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
55
+ * @attribute {string} [anchor-accessibility="auto"] - Controls whether the popover manages accessibility attributes on the anchor element.
54
56
  *
55
57
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
56
58
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.
@@ -144,6 +146,9 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
144
146
  case POPOVER_CONSTANTS.observedAttributes.DISTINCT:
145
147
  this.distinct = newValue;
146
148
  return;
149
+ case POPOVER_CONSTANTS.observedAttributes.ANCHOR_ACCESSIBILITY:
150
+ this.anchorAccessibility = newValue || POPOVER_CONSTANTS.defaults.ANCHOR_ACCESSIBILITY;
151
+ return;
147
152
  }
148
153
  super.attributeChangedCallback(name, oldValue, newValue);
149
154
  }
@@ -181,6 +186,9 @@ __decorate([
181
186
  __decorate([
182
187
  coreProperty()
183
188
  ], PopoverComponent.prototype, "distinct", void 0);
189
+ __decorate([
190
+ coreProperty()
191
+ ], PopoverComponent.prototype, "anchorAccessibility", void 0);
184
192
  PopoverComponent = __decorate([
185
193
  customElement({
186
194
  name: POPOVER_CONSTANTS.elementName,
@@ -28,7 +28,8 @@ declare global {
28
28
  /**
29
29
  * @tag forge-profile-card
30
30
  *
31
- * @summary Profile cards display user information and actions in a structured card format.
31
+ * @summary Profile cards display user information and actions in a structured card format. This component is deprecated prefer using the `<forge-user-profile>` component from the extended library instead.
32
+
32
33
  */
33
34
  export declare class ProfileCardComponent extends BaseComponent implements IProfileCardComponent {
34
35
  static get observedAttributes(): string[];
@@ -18,7 +18,8 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-profile-
18
18
  /**
19
19
  * @tag forge-profile-card
20
20
  *
21
- * @summary Profile cards display user information and actions in a structured card format.
21
+ * @summary Profile cards display user information and actions in a structured card format. This component is deprecated prefer using the `<forge-user-profile>` component from the extended library instead.
22
+
22
23
  */
23
24
  let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
24
25
  static get observedAttributes() {
@@ -30,8 +30,7 @@ declare const RadioComponent_base: import("../../constants").AbstractConstructor
30
30
  /**
31
31
  * @tag forge-radio
32
32
  *
33
- * @summary The Forge Radio component is used to create a form input where only one out of a set of
34
- * values should be selected.
33
+ * @summary The Forge Radio component is used to create a form input where only one out of a set of values should be selected.
35
34
  *
36
35
  * @cssproperty --forge-radio-primary-color - The primary color of the radio button when checked.
37
36
  * @cssproperty --forge-radio-inactive-color - The color of the radio button when unchecked.
@@ -23,8 +23,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
23
23
  /**
24
24
  * @tag forge-radio
25
25
  *
26
- * @summary The Forge Radio component is used to create a form input where only one out of a set of
27
- * values should be selected.
26
+ * @summary The Forge Radio component is used to create a form input where only one out of a set of values should be selected.
28
27
  *
29
28
  * @cssproperty --forge-radio-primary-color - The primary color of the radio button when checked.
30
29
  * @cssproperty --forge-radio-inactive-color - The color of the radio button when unchecked.
@@ -15,7 +15,7 @@ declare global {
15
15
  /**
16
16
  * @tag forge-scaffold
17
17
  *
18
- * @summary A scaffold provides a generic layout structure for your content using common named areas.
18
+ * @summary The scaffold provides a generic layout structure for your content using common named areas. Use scaffolds for full page layouts or smaller sections within other elements where you want positioned content areas and scrollable body content.
19
19
  *
20
20
  * @property {boolean} [viewport=false] - Whether the scaffold should be full viewport height.
21
21
  *
@@ -12,7 +12,7 @@ const styles = ':host{--_scaffold-height:var(--forge-scaffold-height, 100%);--_s
12
12
  /**
13
13
  * @tag forge-scaffold
14
14
  *
15
- * @summary A scaffold provides a generic layout structure for your content using common named areas.
15
+ * @summary The scaffold provides a generic layout structure for your content using common named areas. Use scaffolds for full page layouts or smaller sections within other elements where you want positioned content areas and scrollable body content.
16
16
  *
17
17
  * @property {boolean} [viewport=false] - Whether the scaffold should be full viewport height.
18
18
  *
@@ -16,7 +16,7 @@ declare global {
16
16
  /**
17
17
  * @tag forge-option
18
18
  *
19
- * @summary Options represent individual selectable items within select components and menus.
19
+ * @summary Options represent individual selectable items within `<forge-select>` components.
20
20
  */
21
21
  export declare class OptionComponent extends BaseComponent implements IOptionComponent {
22
22
  static get observedAttributes(): string[];
@@ -12,7 +12,7 @@ import { OptionCore } from './option-core';
12
12
  /**
13
13
  * @tag forge-option
14
14
  *
15
- * @summary Options represent individual selectable items within select components and menus.
15
+ * @summary Options represent individual selectable items within `<forge-select>` components.
16
16
  */
17
17
  let OptionComponent = class OptionComponent extends BaseComponent {
18
18
  static get observedAttributes() {
@@ -39,7 +39,7 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
39
39
  /**
40
40
  * @tag forge-select
41
41
  *
42
- * @summary Selects present a list of options to users for single or multi-selection.
42
+ * @summary Select components are comboboxes that present a list of options to users for single or multi-selection.
43
43
  *
44
44
  * @dependency forge-field
45
45
  * @dependency forge-option
@@ -29,12 +29,12 @@ import { SELECT_CONSTANTS } from './select-constants';
29
29
  import { SelectCore } from './select-core';
30
30
  import { ListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
31
31
  import { DividerComponent } from '../../divider/divider';
32
- const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><span id=\"select-label\" slot=\"label\"></span><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
32
+ const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus><span id=\"select-label\" slot=\"label\"></span><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
33
33
  const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge-field{--_select-placeholder-color:var(--forge-select-placeholder-color, var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6))))}.selected-text-container{display:grid;align-items:center;cursor:pointer}.selected-text,::slotted([slot=value]){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selected-text:empty::before{content:attr(placeholder);color:var(--_select-placeholder-color);font-size:inherit}:host([disabled]) .selected-text-container{cursor:not-allowed}forge-field{display:contents}';
34
34
  /**
35
35
  * @tag forge-select
36
36
  *
37
- * @summary Selects present a list of options to users for single or multi-selection.
37
+ * @summary Select components are comboboxes that present a list of options to users for single or multi-selection.
38
38
  *
39
39
  * @dependency forge-field
40
40
  * @dependency forge-option
@@ -14,7 +14,7 @@ declare global {
14
14
  /**
15
15
  * @tag forge-skeleton
16
16
  *
17
- * @summary Skeleton is used to provide a placeholder for content that is loading.
17
+ * @summary Skeletons are used to provide a placeholder for content that is loading. They have various styles to represent different types of content.
18
18
  *
19
19
  * @attribute {string} form-field - Apply form field styles to the skeleton.
20
20
  * @attribute {string} button - Apply button styles to the skeleton.
@@ -12,7 +12,7 @@ const styles = '@keyframes forge-skeleton-loading{100%,25%{transform:translateX(
12
12
  /**
13
13
  * @tag forge-skeleton
14
14
  *
15
- * @summary Skeleton is used to provide a placeholder for content that is loading.
15
+ * @summary Skeletons are used to provide a placeholder for content that is loading. They have various styles to represent different types of content.
16
16
  *
17
17
  * @attribute {string} form-field - Apply form field styles to the skeleton.
18
18
  * @attribute {string} button - Apply button styles to the skeleton.
@@ -21,7 +21,7 @@ declare global {
21
21
  /**
22
22
  * @tag forge-skip-link
23
23
  *
24
- * @summary The Forge Skip Link component is used to provide a way for users to skip repetitive content and navigate directly to a section of the page.
24
+ * @summary The Forge Skip Link component is used to provide an accessible way for users to skip repetitive content and navigate directly to a section of the page. This is used for screen reader and keyboard users to improve the overall accessibility of web applications.
25
25
  *
26
26
  * @cssproperty --forge-skip-link-background - The background color of the skip link.
27
27
  * @cssproperty --forge-skip-link-color - The text color of the skip link.
@@ -14,7 +14,7 @@ const style = ':host{--_skip-link-inset:var(--forge-skip-link-inset, var(--forge
14
14
  /**
15
15
  * @tag forge-skip-link
16
16
  *
17
- * @summary The Forge Skip Link component is used to provide a way for users to skip repetitive content and navigate directly to a section of the page.
17
+ * @summary The Forge Skip Link component is used to provide an accessible way for users to skip repetitive content and navigate directly to a section of the page. This is used for screen reader and keyboard users to improve the overall accessibility of web applications.
18
18
  *
19
19
  * @cssproperty --forge-skip-link-background - The background color of the skip link.
20
20
  * @cssproperty --forge-skip-link-color - The text color of the skip link.
@@ -36,7 +36,7 @@ declare global {
36
36
  /**
37
37
  * @tag forge-slider
38
38
  *
39
- * @summary Sliders allow users to make selections from a range of values.
39
+ * @summary Sliders allow users to make selections from a range of values. You can use sliders for selecting values from either a continuous or discrete range, and they can also be used for selecting a single value or a range of values.
40
40
  *
41
41
  * @description Use sliders to enable users to select a value from a continuous or discrete range of values.
42
42
  *
@@ -17,7 +17,7 @@ const styles = ':host{display:inline-flex;vertical-align:middle;min-inline-size:
17
17
  /**
18
18
  * @tag forge-slider
19
19
  *
20
- * @summary Sliders allow users to make selections from a range of values.
20
+ * @summary Sliders allow users to make selections from a range of values. You can use sliders for selecting values from either a continuous or discrete range, and they can also be used for selecting a single value or a range of values.
21
21
  *
22
22
  * @description Use sliders to enable users to select a value from a continuous or discrete range of values.
23
23
  *
@@ -21,7 +21,7 @@ declare global {
21
21
  /**
22
22
  * @tag forge-split-button
23
23
  *
24
- * @summary Split buttons are used for splitting an action into two parts.
24
+ * @summary Split buttons are used for splitting an action into two parts, typically a primary action and a secondary action that opens a menu or performs an alternative action. Split buttons expect child Forge buttons as their content.
25
25
  *
26
26
  * @dependency forge-button
27
27
  *
@@ -15,7 +15,7 @@ const styles = ':host{--_split-button-min-width:var(--forge-split-button-min-wid
15
15
  /**
16
16
  * @tag forge-split-button
17
17
  *
18
- * @summary Split buttons are used for splitting an action into two parts.
18
+ * @summary Split buttons are used for splitting an action into two parts, typically a primary action and a secondary action that opens a menu or performs an alternative action. Split buttons expect child Forge buttons as their content.
19
19
  *
20
20
  * @dependency forge-button
21
21
  *
@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
14
14
  import { StateLayerComponent } from '../../state-layer';
15
15
  import { FocusIndicatorComponent } from '../../focus-indicator';
16
16
  const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
17
- const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnngv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnngv{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:unrnnhr;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnhr{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnni8;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnni8{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:unrnnj6;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnj6{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnnjr;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnjr{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:unrnnk3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnk3{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:unrnnke;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnke{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:unrnnla;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unrnnla{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
17
+ const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dq5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dq5{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u1p3dr4;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dr4{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dra;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dra{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u1p3dro;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dro{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3ds7;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3ds7{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u1p3dsd;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dsd{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dtb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dtb{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u1p3dtn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dtn{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
18
18
  /**
19
19
  * @tag forge-split-view-panel
20
20
  *
@@ -21,14 +21,7 @@ declare global {
21
21
  /**
22
22
  * @tag forge-stack
23
23
  *
24
- * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
25
- *
26
- * @description
27
- * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
28
- * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
29
- * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
30
- * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
31
- * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
24
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis. Use stacks sparingly to avoid unnecessary DOM complexity, and prefer CSS flexbox or grid for more complex layouts.
32
25
  *
33
26
  * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
34
27
  * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
@@ -14,14 +14,7 @@ const styles = '.forge-stack{display:flex;flex-direction:column;align-items:var(
14
14
  /**
15
15
  * @tag forge-stack
16
16
  *
17
- * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
18
- *
19
- * @description
20
- * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
21
- * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
22
- * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
23
- * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
24
- * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
17
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis. Use stacks sparingly to avoid unnecessary DOM complexity, and prefer CSS flexbox or grid for more complex layouts.
25
18
  *
26
19
  * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
27
20
  * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
@@ -19,7 +19,7 @@ declare global {
19
19
  /**
20
20
  * @tag forge-state-layer
21
21
  *
22
- * @summary State layers show the interaction status of an element.
22
+ * @summary State layers show the interaction status of an element. These layers are semi-transparent overlays that indicate hover, focus, press, and drag states. State layers are building blocks for components and should generally not be used directly, but part of other components that have interactive states.
23
23
  *
24
24
  * @description A state layer is a semi-transparent overlay on an element that indicates its interaction
25
25
  * state. State layers provide a systematic approach to visualizing states by using opacity.
@@ -10,11 +10,11 @@ import { StateLayerCore } from './state-layer-core';
10
10
  import { STATE_LAYER_CONSTANTS } from './state-layer-constants';
11
11
  import { BaseComponent } from '../core/base/base-component';
12
12
  const template = '<template><div class=\"forge-state-layer\" part=\"surface\"></div></template>';
13
- const styles = ':host{--_state-layer-display:var(--forge-state-layer-display, flex)}:host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:var(--_state-layer-display);margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);transform-origin:center center;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);transition-duration:var(--_state-layer-pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
13
+ const styles = ':host{--_state-layer-display:var(--forge-state-layer-display, flex)}:host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:var(--_state-layer-display);margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute;backface-visibility:hidden;transform:translateZ(0)}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);transform-origin:center center;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);transition-duration:var(--_state-layer-pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
14
14
  /**
15
15
  * @tag forge-state-layer
16
16
  *
17
- * @summary State layers show the interaction status of an element.
17
+ * @summary State layers show the interaction status of an element. These layers are semi-transparent overlays that indicate hover, focus, press, and drag states. State layers are building blocks for components and should generally not be used directly, but part of other components that have interactive states.
18
18
  *
19
19
  * @description A state layer is a semi-transparent overlay on an element that indicates its interaction
20
20
  * state. State layers provide a systematic approach to visualizing states by using opacity.
@@ -19,11 +19,11 @@ export interface ITableAdapter extends IBaseAdapter {
19
19
  setSortedColumn: (tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection) => void;
20
20
  removeColumnSort: (tableElement: HTMLTableElement, columnIndex: number) => void;
21
21
  setSortDirection: (tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection) => void;
22
- setSelectColumnVisibility: (tableElement: HTMLTableElement, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string) => void;
22
+ setSelectColumnVisibility: (tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string) => void;
23
23
  setDense: (tableElement: HTMLTableElement, isDense: boolean) => void;
24
24
  setRoomy(tableElement: HTMLTableElement, isRoomy: boolean): void;
25
25
  setResizable: (configuration: ITableConfiguration) => void;
26
- setSelectAllVisibility: (tableElement: HTMLTableElement, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string) => void;
26
+ setSelectAllVisibility: (tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string) => void;
27
27
  setFilterRow: (configuration: ITableConfiguration) => void;
28
28
  expandRow(configuration: ITableConfiguration, rowIndex: number, template: TableViewTemplate): Promise<void>;
29
29
  collapseRow(configuration: ITableConfiguration, rowIndex: number): Promise<void>;
@@ -57,11 +57,11 @@ export declare class TableAdapter extends BaseAdapter<ITableComponent> implement
57
57
  setSortedColumn(tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection): void;
58
58
  removeColumnSort(tableElement: HTMLTableElement, columnIndex: number): void;
59
59
  setSortDirection(tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection): void;
60
- setSelectColumnVisibility(tableElement: HTMLTableElement, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string): void;
60
+ setSelectColumnVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string): void;
61
61
  setDense(tableElement: HTMLTableElement, isDense: boolean): void;
62
62
  setRoomy(tableElement: HTMLTableElement, isRoomy: boolean): void;
63
63
  setResizable(configuration: ITableConfiguration): void;
64
- setSelectAllVisibility(tableElement: HTMLTableElement, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string | null): void;
64
+ setSelectAllVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string | null): void;
65
65
  setFilterRow(configuration: ITableConfiguration): void;
66
66
  expandRow(configuration: ITableConfiguration, rowIndex: number, template: TableViewTemplate): Promise<void>;
67
67
  collapseRow(configuration: ITableConfiguration, rowIndex: number): Promise<void>;