@tylertech/forge 3.10.4 → 3.11.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 (163) hide show
  1. package/custom-elements.json +343 -141
  2. package/dist/app-bar/forge-app-bar.css +11 -5
  3. package/dist/button/forge-button.css +12 -6
  4. package/dist/checkbox/forge-checkbox.css +21 -17
  5. package/dist/chips/forge-chips.css +10 -4
  6. package/dist/field/forge-field.css +7 -5
  7. package/dist/floating-action-button/forge-floating-action-button.css +10 -6
  8. package/dist/forge.css +6 -1
  9. package/dist/icon-button/forge-icon-button.css +10 -4
  10. package/dist/lib.js +22 -22
  11. package/dist/lib.js.map +4 -4
  12. package/dist/list/forge-list.css +57 -3
  13. package/dist/radio/forge-radio.css +20 -12
  14. package/dist/skip-link/forge-skip-link.css +36 -32
  15. package/dist/switch/forge-switch.css +7 -5
  16. package/dist/table/forge-table.css +6 -1
  17. package/dist/vscode.html-custom-data.json +53 -43
  18. package/esm/accordion/accordion.d.ts +2 -0
  19. package/esm/accordion/accordion.js +2 -0
  20. package/esm/app-bar/app-bar/app-bar-adapter.js +2 -2
  21. package/esm/app-bar/app-bar/app-bar.d.ts +1 -1
  22. package/esm/app-bar/app-bar/app-bar.js +1 -1
  23. package/esm/app-bar/help-button/app-bar-help-button.d.ts +1 -1
  24. package/esm/app-bar/help-button/app-bar-help-button.js +1 -1
  25. package/esm/app-bar/menu-button/app-bar-menu-button.d.ts +1 -1
  26. package/esm/app-bar/menu-button/app-bar-menu-button.js +1 -1
  27. package/esm/app-bar/notification-button/app-bar-notification-button.d.ts +2 -0
  28. package/esm/app-bar/notification-button/app-bar-notification-button.js +2 -0
  29. package/esm/app-bar/profile-button/app-bar-profile-button-adapter.d.ts +2 -1
  30. package/esm/app-bar/profile-button/app-bar-profile-button-adapter.js +2 -0
  31. package/esm/app-bar/profile-button/app-bar-profile-button.d.ts +2 -0
  32. package/esm/app-bar/profile-button/app-bar-profile-button.js +2 -0
  33. package/esm/app-bar/search/app-bar-search.d.ts +2 -0
  34. package/esm/app-bar/search/app-bar-search.js +2 -0
  35. package/esm/autocomplete/autocomplete.d.ts +2 -0
  36. package/esm/autocomplete/autocomplete.js +2 -0
  37. package/esm/backdrop/backdrop.d.ts +2 -0
  38. package/esm/backdrop/backdrop.js +2 -0
  39. package/esm/badge/badge.d.ts +2 -0
  40. package/esm/badge/badge.js +2 -0
  41. package/esm/button/base/base-button-adapter.js +2 -2
  42. package/esm/button-area/button-area-adapter.js +2 -2
  43. package/esm/button-toggle/button-toggle/button-toggle-adapter.js +2 -2
  44. package/esm/button-toggle/button-toggle/button-toggle.d.ts +2 -0
  45. package/esm/button-toggle/button-toggle/button-toggle.js +2 -0
  46. package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +1 -1
  47. package/esm/button-toggle/button-toggle-group/button-toggle-group.js +1 -1
  48. package/esm/calendar/calendar-menu/calendar-menu.js +1 -1
  49. package/esm/calendar/calendar.d.ts +2 -0
  50. package/esm/calendar/calendar.js +3 -1
  51. package/esm/card/card.d.ts +2 -0
  52. package/esm/card/card.js +2 -0
  53. package/esm/chip-field/chip-field.d.ts +2 -0
  54. package/esm/chip-field/chip-field.js +2 -0
  55. package/esm/chips/chip/chip-adapter.js +2 -2
  56. package/esm/chips/chip/chip.d.ts +2 -0
  57. package/esm/chips/chip/chip.js +2 -0
  58. package/esm/color-picker/color-picker.d.ts +2 -0
  59. package/esm/color-picker/color-picker.js +3 -1
  60. package/esm/core/mixins/interactions/moveable/with-moveable.js +5 -7
  61. package/esm/core/utils/a11y-utils.js +17 -0
  62. package/esm/core/utils/utils.d.ts +16 -0
  63. package/esm/core/utils/utils.js +75 -2
  64. package/esm/date-picker/date-picker.d.ts +2 -0
  65. package/esm/date-picker/date-picker.js +2 -0
  66. package/esm/date-range-picker/date-range-picker.d.ts +2 -0
  67. package/esm/date-range-picker/date-range-picker.js +2 -0
  68. package/esm/deprecated/button/deprecated-button.js +3 -3
  69. package/esm/deprecated/icon-button/deprecated-icon-button.js +2 -2
  70. package/esm/dialog/dialog-adapter.d.ts +6 -0
  71. package/esm/dialog/dialog-adapter.js +16 -0
  72. package/esm/dialog/dialog-core.js +4 -0
  73. package/esm/drawer/drawer/drawer.d.ts +2 -0
  74. package/esm/drawer/drawer/drawer.js +3 -1
  75. package/esm/drawer/mini-drawer/mini-drawer.d.ts +2 -0
  76. package/esm/drawer/mini-drawer/mini-drawer.js +3 -1
  77. package/esm/drawer/modal-drawer/modal-drawer.d.ts +2 -0
  78. package/esm/drawer/modal-drawer/modal-drawer.js +3 -1
  79. package/esm/expansion-panel/expansion-panel-adapter.js +1 -1
  80. package/esm/expansion-panel/expansion-panel-core.js +3 -7
  81. package/esm/field/field-adapter.js +2 -2
  82. package/esm/field/field-core.d.ts +3 -3
  83. package/esm/focus-indicator/focus-indicator-constants.d.ts +1 -11
  84. package/esm/focus-indicator/focus-indicator-constants.js +2 -17
  85. package/esm/focus-indicator/focus-indicator.d.ts +52 -25
  86. package/esm/focus-indicator/focus-indicator.js +137 -61
  87. package/esm/focus-indicator/index.d.ts +0 -2
  88. package/esm/focus-indicator/index.js +0 -2
  89. package/esm/icon-button/icon-button.d.ts +2 -0
  90. package/esm/icon-button/icon-button.js +2 -0
  91. package/esm/keyboard-shortcut/keyboard-shortcut.d.ts +2 -0
  92. package/esm/keyboard-shortcut/keyboard-shortcut.js +2 -0
  93. package/esm/list/list/list.js +1 -1
  94. package/esm/list/list-item/list-item-constants.js +1 -1
  95. package/esm/list/list-item/list-item-core.d.ts +2 -0
  96. package/esm/list/list-item/list-item-core.js +29 -6
  97. package/esm/list/list-item/list-item.d.ts +1 -0
  98. package/esm/list/list-item/list-item.js +2 -1
  99. package/esm/list-dropdown/list-dropdown-constants.d.ts +6 -0
  100. package/esm/list-dropdown/list-dropdown-constants.js +6 -1
  101. package/esm/list-dropdown/list-dropdown-utils.js +28 -1
  102. package/esm/menu/menu-core.js +2 -2
  103. package/esm/menu/menu.d.ts +2 -0
  104. package/esm/menu/menu.js +2 -0
  105. package/esm/page-state/page-state.d.ts +2 -1
  106. package/esm/page-state/page-state.js +2 -1
  107. package/esm/paginator/paginator.d.ts +2 -0
  108. package/esm/paginator/paginator.js +2 -0
  109. package/esm/popover/popover.js +1 -1
  110. package/esm/profile-card/profile-card.d.ts +2 -0
  111. package/esm/profile-card/profile-card.js +2 -0
  112. package/esm/select/core/base-select-constants.d.ts +4 -0
  113. package/esm/select/core/base-select-core.d.ts +22 -2
  114. package/esm/select/core/base-select-core.js +217 -40
  115. package/esm/select/option/option.d.ts +2 -0
  116. package/esm/select/option/option.js +2 -0
  117. package/esm/select/option-group/option-group.d.ts +2 -0
  118. package/esm/select/option-group/option-group.js +2 -0
  119. package/esm/select/select/select-constants.d.ts +5 -0
  120. package/esm/select/select/select-constants.js +5 -2
  121. package/esm/select/select/select.d.ts +14 -2
  122. package/esm/select/select/select.js +22 -1
  123. package/esm/select/select-dropdown/select-dropdown.d.ts +2 -0
  124. package/esm/select/select-dropdown/select-dropdown.js +2 -0
  125. package/esm/split-button/split-button.js +1 -1
  126. package/esm/split-view/split-view/split-view.d.ts +2 -0
  127. package/esm/split-view/split-view/split-view.js +2 -0
  128. package/esm/split-view/split-view-panel/split-view-panel.d.ts +2 -0
  129. package/esm/split-view/split-view-panel/split-view-panel.js +3 -1
  130. package/esm/stepper/step/step.d.ts +2 -0
  131. package/esm/stepper/step/step.js +3 -1
  132. package/esm/stepper/stepper/stepper.d.ts +2 -0
  133. package/esm/stepper/stepper/stepper.js +2 -0
  134. package/esm/table/table-utils.js +3 -0
  135. package/esm/table/table.d.ts +2 -0
  136. package/esm/table/table.js +4 -1
  137. package/esm/tabs/tab/tab-adapter.js +2 -2
  138. package/esm/tabs/tab/tab.d.ts +2 -0
  139. package/esm/tabs/tab/tab.js +2 -0
  140. package/esm/time-picker/time-picker.d.ts +2 -0
  141. package/esm/time-picker/time-picker.js +2 -0
  142. package/esm/toast/toast-core.js +1 -0
  143. package/esm/tooltip/tooltip-adapter.d.ts +6 -0
  144. package/esm/tooltip/tooltip-adapter.js +9 -0
  145. package/esm/tooltip/tooltip-constants.d.ts +1 -0
  146. package/esm/tooltip/tooltip-constants.js +2 -1
  147. package/esm/tooltip/tooltip-core.d.ts +20 -0
  148. package/esm/tooltip/tooltip-core.js +96 -2
  149. package/esm/tooltip/tooltip.js +1 -1
  150. package/esm/view-switcher/view/view.d.ts +2 -0
  151. package/esm/view-switcher/view/view.js +2 -0
  152. package/esm/view-switcher/view-switcher.d.ts +2 -0
  153. package/esm/view-switcher/view-switcher.js +2 -0
  154. package/package.json +4 -4
  155. package/sass/focus-indicator/focus-indicator.scss +1 -1
  156. package/sass/icon-button/forge-icon-button.scss +3 -3
  157. package/sass/list/forge-list.scss +6 -6
  158. package/sass/table/_core.scss +13 -1
  159. package/sass/tooltip/_core.scss +0 -2
  160. package/esm/focus-indicator/focus-indicator-adapter.d.ts +0 -29
  161. package/esm/focus-indicator/focus-indicator-adapter.js +0 -37
  162. package/esm/focus-indicator/focus-indicator-core.d.ts +0 -48
  163. package/esm/focus-indicator/focus-indicator-core.js +0 -129
@@ -14,10 +14,12 @@ 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:uqqok2l;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok2l{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:uqqok3h;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok3h{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:uqqok46;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok46{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uqqok4t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok4t{from{transform:none}to{transform:translateX(100%)}}.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:uqqok5m;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok5m{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:uqqok6i;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok6i{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:uqqok6t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok6t{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uqqok7f;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok7f{from{transform:none}to{transform:translateY(100%)}}: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: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}';
18
18
  /**
19
19
  * @tag forge-split-view-panel
20
20
  *
21
+ * @summary Individual panels within split views that can be resized and collapsed.
22
+ *
21
23
  * @dependency forge-icon
22
24
  * @dependency forge-state-layer
23
25
  * @dependency forge-focus-indicator
@@ -29,6 +29,8 @@ declare global {
29
29
  /**
30
30
  * @tag forge-step
31
31
  *
32
+ * @summary Individual steps within a stepper component that represent progress in a multi-step process.
33
+ *
32
34
  * @property {boolean} [alternative=false] - Whether the step is in the alternative style.
33
35
  * @property {boolean} [completed=false] - Whether the step is completed.
34
36
  * @property {boolean} [editable=false] - Whether the step is editable.
@@ -15,10 +15,12 @@ import { ExpansionPanelComponent } from '../../expansion-panel';
15
15
  import { StateLayerComponent } from '../../state-layer';
16
16
  import { FocusIndicatorComponent } from '../../focus-indicator';
17
17
  const template = '<template><div class=\"container\" part=\"root\"><div class=\"forge-step\" part=\"step\"><div class=\"before\" part=\"before\"></div><div class=\"icon-container\" part=\"icon-container\"><div class=\"icon-content\" part=\"icon-content\"><span class=\"index\" part=\"index\"></span><forge-icon class=\"icon\" part=\"icon\"></forge-icon></div></div><div class=\"text-container\" part=\"text-container\"><div class=\"title\" part=\"title-container\"><slot></slot></div><div class=\"subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></div></template>';
18
- const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:flex;overflow:hidden;align-items:center;box-sizing:border-box;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;transition:transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
18
+ const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:flex;overflow:hidden;align-items:center;box-sizing:border-box}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step{cursor:pointer}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;transition:transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
19
19
  /**
20
20
  * @tag forge-step
21
21
  *
22
+ * @summary Individual steps within a stepper component that represent progress in a multi-step process.
23
+ *
22
24
  * @property {boolean} [alternative=false] - Whether the step is in the alternative style.
23
25
  * @property {boolean} [completed=false] - Whether the step is completed.
24
26
  * @property {boolean} [editable=false] - Whether the step is editable.
@@ -23,6 +23,8 @@ declare global {
23
23
  /**
24
24
  * @tag forge-stepper
25
25
  *
26
+ * @summary Steppers guide users through multi-step processes by breaking them into logical steps.
27
+ *
26
28
  * @dependency forge-step
27
29
  *
28
30
  * @event {CustomEvent<number>} forge-step-select - Emits the index when a step is selected.
@@ -15,6 +15,8 @@ const styles = ':host{display:block}:host([hidden]){display:none}:host([vertical
15
15
  /**
16
16
  * @tag forge-stepper
17
17
  *
18
+ * @summary Steppers guide users through multi-step processes by breaking them into logical steps.
19
+ *
18
20
  * @dependency forge-step
19
21
  *
20
22
  * @event {CustomEvent<number>} forge-step-select - Emits the index when a step is selected.
@@ -144,6 +144,9 @@ export class TableUtils {
144
144
  if (columnConfig.sortable) {
145
145
  cellContainer = document.createElement('button');
146
146
  cellContainer.type = 'button';
147
+ const focusIndicator = document.createElement('forge-focus-indicator');
148
+ focusIndicator.inward = true;
149
+ cellContainer.appendChild(focusIndicator);
147
150
  cellContainer.addEventListener('keydown', tableConfiguration.sortableHeadCellKeydownListener);
148
151
  }
149
152
  else {
@@ -64,6 +64,8 @@ declare global {
64
64
  }
65
65
  }
66
66
  /**
67
+ * @summary A comprehensive data table component with features for selection, sorting, filtering, resizing, and row expansion functionality.
68
+ *
67
69
  * @tag forge-table
68
70
  *
69
71
  * @dependency forge-expansion-panel
@@ -15,7 +15,10 @@ import { IconRegistry, IconComponent } from '../icon';
15
15
  import { BaseComponent } from '../core/base/base-component';
16
16
  import { CellAlign } from './types';
17
17
  import { TooltipComponent } from '../tooltip';
18
+ import { FocusIndicatorComponent } from '../focus-indicator';
18
19
  /**
20
+ * @summary A comprehensive data table component with features for selection, sorting, filtering, resizing, and row expansion functionality.
21
+ *
19
22
  * @tag forge-table
20
23
  *
21
24
  * @dependency forge-expansion-panel
@@ -309,7 +312,7 @@ __decorate([
309
312
  TableComponent = __decorate([
310
313
  customElement({
311
314
  name: TABLE_CONSTANTS.elementName,
312
- dependencies: [ExpansionPanelComponent, IconComponent, CheckboxComponent, TooltipComponent]
315
+ dependencies: [ExpansionPanelComponent, IconComponent, CheckboxComponent, TooltipComponent, FocusIndicatorComponent]
313
316
  })
314
317
  ], TableComponent);
315
318
  export { TableComponent };
@@ -8,12 +8,12 @@ import { STATE_LAYER_CONSTANTS } from '../../state-layer';
8
8
  import { BaseAdapter } from '../../core/base/base-adapter';
9
9
  import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants';
10
10
  import { TAB_CONSTANTS } from './tab-constants';
11
- import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
11
+ import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
12
12
  export class TabAdapter extends BaseAdapter {
13
13
  constructor(component) {
14
14
  super(component);
15
15
  this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
16
- this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_CONSTANTS.elementName);
16
+ this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_TAG_NAME);
17
17
  this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
18
18
  }
19
19
  initialize() {
@@ -26,6 +26,8 @@ declare global {
26
26
  /**
27
27
  * @tag forge-tab
28
28
  *
29
+ * @summary Individual tab elements that provide navigation between different content panels.
30
+ *
29
31
  * @dependency forge-focus-indicator
30
32
  * @dependency forge-state-layer
31
33
  *
@@ -16,6 +16,8 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
16
16
  /**
17
17
  * @tag forge-tab
18
18
  *
19
+ * @summary Individual tab elements that provide navigation between different content panels.
20
+ *
19
21
  * @dependency forge-focus-indicator
20
22
  * @dependency forge-state-layer
21
23
  *
@@ -44,6 +44,8 @@ declare global {
44
44
  }
45
45
  }
46
46
  /**
47
+ * @summary A time input component with integrated dropdown for selecting time values with support for various formats, masking, and validation options.
48
+ *
47
49
  * @tag forge-time-picker
48
50
  */
49
51
  export declare class TimePickerComponent extends BaseComponent implements ITimePickerComponent {
@@ -18,6 +18,8 @@ import { PopoverComponent } from '../popover/popover';
18
18
  const template = '<template><slot></slot></template>';
19
19
  const styles = ':host{display:block}:host([hidden]){display:none}';
20
20
  /**
21
+ * @summary A time input component with integrated dropdown for selecting time values with support for various formats, masking, and validation options.
22
+ *
21
23
  * @tag forge-time-picker
22
24
  */
23
25
  let TimePickerComponent = class TimePickerComponent extends BaseComponent {
@@ -76,6 +76,7 @@ export class ToastCore {
76
76
  return this._duration;
77
77
  }
78
78
  set duration(value) {
79
+ value ?? (value = TOAST_CONSTANTS.defaults.DURATION);
79
80
  if (this._duration !== value) {
80
81
  this._duration = value;
81
82
  if (this._hideTimeout) {
@@ -17,6 +17,9 @@ export interface ITooltipAdapter extends IBaseAdapter<ITooltipComponent> {
17
17
  removeAnchorListener(type: string, listener: EventListener): void;
18
18
  addLightDismissListener(listener: EventListener): void;
19
19
  removeLightDismissListener(listener: EventListener): void;
20
+ addTooltipListener(type: string, listener: EventListener, opts?: AddEventListenerOptions): void;
21
+ removeTooltipListener(type: string, listener: EventListener): void;
22
+ isKeyboardFocused(): boolean;
20
23
  show(): void;
21
24
  hide(): void;
22
25
  }
@@ -41,6 +44,9 @@ export declare class TooltipAdapter extends BaseAdapter<ITooltipComponent> imple
41
44
  removeAnchorListener(type: string, listener: EventListener): void;
42
45
  addLightDismissListener(listener: EventListener): void;
43
46
  removeLightDismissListener(listener: EventListener): void;
47
+ addTooltipListener(type: string, listener: EventListener, opts?: AddEventListenerOptions): void;
48
+ removeTooltipListener(type: string, listener: EventListener): void;
49
+ isKeyboardFocused(): boolean;
44
50
  show(): void;
45
51
  hide(): void;
46
52
  /**
@@ -80,6 +80,15 @@ export class TooltipAdapter extends BaseAdapter {
80
80
  removeLightDismissListener(listener) {
81
81
  this._overlayElement?.removeEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, listener);
82
82
  }
83
+ addTooltipListener(type, listener, opts) {
84
+ this.hostElement?.addEventListener(type, listener, opts);
85
+ }
86
+ removeTooltipListener(type, listener) {
87
+ this.hostElement?.removeEventListener(type, listener);
88
+ }
89
+ isKeyboardFocused() {
90
+ return !!this._anchorElement?.matches(':focus-visible');
91
+ }
83
92
  show() {
84
93
  // Tooltips are shown above all content via <forge-overlay>
85
94
  // We do this by dynamically creating an overlay element and appending it to the shadow root
@@ -39,6 +39,7 @@ export declare const TOOLTIP_CONSTANTS: {
39
39
  };
40
40
  numbers: {
41
41
  LONGPRESS_VISIBILITY_DURATION: number;
42
+ HOVER_OUTSIDE_THRESHOLD: number;
42
43
  };
43
44
  defaults: {
44
45
  DELAY: number;
@@ -24,7 +24,8 @@ const attributes = {
24
24
  ...observedAttributes
25
25
  };
26
26
  const numbers = {
27
- LONGPRESS_VISIBILITY_DURATION: 3000
27
+ LONGPRESS_VISIBILITY_DURATION: 3000,
28
+ HOVER_OUTSIDE_THRESHOLD: 100
28
29
  };
29
30
  const defaults = {
30
31
  DELAY: 500,
@@ -39,8 +39,17 @@ export declare class TooltipCore extends TooltipCore_base implements ITooltipCor
39
39
  private _hoverStartListener;
40
40
  private _hoverEndListener;
41
41
  private _hoverTimeout;
42
+ private _hoverOutsideTimeout;
43
+ private _isHoveringTooltip;
44
+ private _isHoveringAnchor;
45
+ private _tooltipHoverStartListener;
46
+ private _tooltipHoverEndListener;
47
+ private _anchorOpenHoverStartListener;
48
+ private _anchorOpenHoverEndListener;
42
49
  private _focusListener;
43
50
  private _blurListener;
51
+ private _keyboardFocusListener;
52
+ private _keyboardBlurListener;
44
53
  private _longpressVisibilityTimeout;
45
54
  private _scrollListener;
46
55
  private _mouseDownListener;
@@ -56,10 +65,21 @@ export declare class TooltipCore extends TooltipCore_base implements ITooltipCor
56
65
  private _hide;
57
66
  private _attachDismissListeners;
58
67
  private _detachDismissListeners;
68
+ private _attachTooltipHoverListeners;
69
+ private _detachTooltipHoverListeners;
70
+ private _attachAnchorOpenHoverListeners;
71
+ private _detachAnchorOpenHoverListeners;
59
72
  private _onHoverStart;
60
73
  private _onHoverEnd;
61
74
  private _onFocus;
62
75
  private _onBlur;
76
+ private _onKeyboardFocus;
77
+ private _onKeyboardBlur;
78
+ private _onTooltipHoverStart;
79
+ private _onTooltipHoverEnd;
80
+ private _onAnchorOpenHoverStart;
81
+ private _onAnchorOpenHoverEnd;
82
+ private _scheduleHideIfOutsideHoverRegion;
63
83
  protected _onLongpress(): void;
64
84
  protected _onLongpressEnd(evt: PointerEvent | TouchEvent): void;
65
85
  private _onTryShow;
@@ -24,9 +24,20 @@ export class TooltipCore extends WithLongpressListener(Object) {
24
24
  // Hover trigger type
25
25
  this._hoverStartListener = this._onHoverStart.bind(this);
26
26
  this._hoverEndListener = this._onHoverEnd.bind(this);
27
+ this._isHoveringTooltip = false;
28
+ this._isHoveringAnchor = false;
29
+ // Tooltip hover listeners
30
+ this._tooltipHoverStartListener = this._onTooltipHoverStart.bind(this);
31
+ this._tooltipHoverEndListener = this._onTooltipHoverEnd.bind(this);
32
+ // Anchor hover listeners (when tooltip is open)
33
+ this._anchorOpenHoverStartListener = this._onAnchorOpenHoverStart.bind(this);
34
+ this._anchorOpenHoverEndListener = this._onAnchorOpenHoverEnd.bind(this);
27
35
  // Focus trigger type
28
36
  this._focusListener = this._onFocus.bind(this);
29
37
  this._blurListener = this._onBlur.bind(this);
38
+ // Keyboard-only focus for hover trigger (when focus trigger is not explicitly enabled)
39
+ this._keyboardFocusListener = this._onKeyboardFocus.bind(this);
40
+ this._keyboardBlurListener = this._onKeyboardBlur.bind(this);
30
41
  // Dismiss/hide triggers
31
42
  this._scrollListener = this._onTryHide.bind(this);
32
43
  this._mouseDownListener = this._onTryHide.bind(this);
@@ -66,7 +77,13 @@ export class TooltipCore extends WithLongpressListener(Object) {
66
77
  triggerTypes.push('longpress');
67
78
  }
68
79
  const triggerInitializers = {
69
- hover: () => this._adapter.addAnchorListener('mouseenter', this._hoverStartListener),
80
+ hover: () => {
81
+ this._adapter.addAnchorListener('mouseenter', this._hoverStartListener);
82
+ // Add keyboard focus support if focus trigger is not explicitly enabled
83
+ if (!triggerTypes.includes('focus')) {
84
+ this._adapter.addAnchorListener('focusin', this._keyboardFocusListener);
85
+ }
86
+ },
70
87
  longpress: () => this._startLongpressListener(this._adapter.anchorElement),
71
88
  focus: () => this._adapter.addAnchorListener('focusin', this._focusListener)
72
89
  };
@@ -86,6 +103,11 @@ export class TooltipCore extends WithLongpressListener(Object) {
86
103
  this._adapter.removeAnchorListener('mouseenter', this._hoverStartListener);
87
104
  this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
88
105
  this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
106
+ // Remove keyboard focus support if focus trigger is not explicitly enabled
107
+ if (!triggerTypes.includes('focus')) {
108
+ this._adapter.removeAnchorListener('focusin', this._keyboardFocusListener);
109
+ this._adapter.removeAnchorListener('focusout', this._keyboardBlurListener);
110
+ }
89
111
  },
90
112
  longpress: () => this._stopLongpressListener(this._adapter.anchorElement),
91
113
  focus: () => {
@@ -101,13 +123,20 @@ export class TooltipCore extends WithLongpressListener(Object) {
101
123
  }
102
124
  this._open = true;
103
125
  this._adapter.show();
126
+ this._attachTooltipHoverListeners();
127
+ this._attachAnchorOpenHoverListeners();
104
128
  DismissibleStack.instance.add(this._adapter.hostElement);
105
129
  this._attachDismissListeners();
106
130
  this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
107
131
  }
108
132
  _hide() {
109
133
  window.clearTimeout(this._hoverTimeout);
134
+ window.clearTimeout(this._hoverOutsideTimeout);
110
135
  window.clearTimeout(this._longpressVisibilityTimeout);
136
+ this._isHoveringTooltip = false;
137
+ this._isHoveringAnchor = false;
138
+ this._detachTooltipHoverListeners();
139
+ this._detachAnchorOpenHoverListeners();
111
140
  this._open = false;
112
141
  this._adapter.hide();
113
142
  DismissibleStack.instance.remove(this._adapter.hostElement);
@@ -128,11 +157,35 @@ export class TooltipCore extends WithLongpressListener(Object) {
128
157
  this._adapter.removeDocumentListener('wheel', this._scrollListener);
129
158
  this._adapter.removeLightDismissListener(this._lightDismissListener);
130
159
  }
160
+ _attachTooltipHoverListeners() {
161
+ // Only attach hover listeners if hover is one of the active trigger types
162
+ if (this._triggerTypes.includes('hover')) {
163
+ this._adapter.addTooltipListener('mouseenter', this._tooltipHoverStartListener);
164
+ this._adapter.addTooltipListener('mouseleave', this._tooltipHoverEndListener);
165
+ }
166
+ }
167
+ _detachTooltipHoverListeners() {
168
+ this._adapter.removeTooltipListener('mouseenter', this._tooltipHoverStartListener);
169
+ this._adapter.removeTooltipListener('mouseleave', this._tooltipHoverEndListener);
170
+ }
171
+ _attachAnchorOpenHoverListeners() {
172
+ // Only attach hover listeners if hover is one of the active trigger types
173
+ if (this._triggerTypes.includes('hover')) {
174
+ this._adapter.addAnchorListener('mouseenter', this._anchorOpenHoverStartListener);
175
+ this._adapter.addAnchorListener('mouseleave', this._anchorOpenHoverEndListener);
176
+ }
177
+ }
178
+ _detachAnchorOpenHoverListeners() {
179
+ this._adapter.removeAnchorListener('mouseenter', this._anchorOpenHoverStartListener);
180
+ this._adapter.removeAnchorListener('mouseleave', this._anchorOpenHoverEndListener);
181
+ }
131
182
  _onHoverStart(_evt) {
132
183
  /* c8 ignore next 3 */
133
184
  if (this._open) {
134
185
  return;
135
186
  }
187
+ this._isHoveringAnchor = true;
188
+ window.clearTimeout(this._hoverOutsideTimeout);
136
189
  this._adapter.addAnchorListener('mousedown', this._hoverEndListener);
137
190
  this._adapter.addAnchorListener('mouseleave', this._hoverEndListener);
138
191
  if (this._delay) {
@@ -145,10 +198,11 @@ export class TooltipCore extends WithLongpressListener(Object) {
145
198
  }
146
199
  }
147
200
  _onHoverEnd(_evt) {
201
+ this._isHoveringAnchor = false;
148
202
  this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
149
203
  this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
150
204
  window.clearTimeout(this._hoverTimeout);
151
- this._onTryHide();
205
+ this._scheduleHideIfOutsideHoverRegion();
152
206
  }
153
207
  _onFocus(_evt) {
154
208
  /* c8 ignore next 3 */
@@ -162,6 +216,46 @@ export class TooltipCore extends WithLongpressListener(Object) {
162
216
  this._adapter.removeAnchorListener('focusout', this._blurListener);
163
217
  this._onTryHide();
164
218
  }
219
+ _onKeyboardFocus(_evt) {
220
+ /* c8 ignore next 3 */
221
+ if (this._open) {
222
+ return;
223
+ }
224
+ // Only show tooltip if the focus is from keyboard (focus-visible)
225
+ if (this._adapter.isKeyboardFocused()) {
226
+ this._adapter.addAnchorListener('focusout', this._keyboardBlurListener);
227
+ this._onTryShow();
228
+ }
229
+ }
230
+ _onKeyboardBlur(_evt) {
231
+ this._adapter.removeAnchorListener('focusout', this._keyboardBlurListener);
232
+ this._onTryHide();
233
+ }
234
+ _onTooltipHoverStart(_evt) {
235
+ this._isHoveringTooltip = true;
236
+ window.clearTimeout(this._hoverOutsideTimeout);
237
+ }
238
+ _onTooltipHoverEnd(_evt) {
239
+ this._isHoveringTooltip = false;
240
+ this._scheduleHideIfOutsideHoverRegion();
241
+ }
242
+ _onAnchorOpenHoverStart(_evt) {
243
+ this._isHoveringAnchor = true;
244
+ window.clearTimeout(this._hoverOutsideTimeout);
245
+ }
246
+ _onAnchorOpenHoverEnd(_evt) {
247
+ this._isHoveringAnchor = false;
248
+ this._scheduleHideIfOutsideHoverRegion();
249
+ }
250
+ _scheduleHideIfOutsideHoverRegion() {
251
+ window.clearTimeout(this._hoverOutsideTimeout);
252
+ this._hoverOutsideTimeout = window.setTimeout(() => {
253
+ // Only hide if user is outside both anchor and tooltip
254
+ if (!this._isHoveringTooltip && !this._isHoveringAnchor) {
255
+ this._onTryHide();
256
+ }
257
+ }, TOOLTIP_CONSTANTS.numbers.HOVER_OUTSIDE_THRESHOLD);
258
+ }
165
259
  _onLongpress() {
166
260
  this._onTryShow();
167
261
  }
@@ -15,7 +15,7 @@ import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
15
15
  import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
16
16
  import { tryDismiss } from '../core/utils/dismissible-stack';
17
17
  const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
18
- const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
18
+ const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
19
19
  /**
20
20
  * @tag forge-tooltip
21
21
  *
@@ -12,6 +12,8 @@ declare global {
12
12
  }
13
13
  }
14
14
  /**
15
+ * @summary A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.
16
+ *
15
17
  * @tag forge-view
16
18
  */
17
19
  export declare class ViewComponent extends BaseComponent implements IViewComponent {
@@ -10,6 +10,8 @@ import { VIEW_CONSTANTS } from './view-constants';
10
10
  const template = '<template><slot></slot></template>';
11
11
  const styles = ':host{display:block}:host([hidden]){display:none}';
12
12
  /**
13
+ * @summary A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.
14
+ *
13
15
  * @tag forge-view
14
16
  */
15
17
  let ViewComponent = class ViewComponent extends BaseComponent {
@@ -19,6 +19,8 @@ declare global {
19
19
  }
20
20
  }
21
21
  /**
22
+ * @summary A container component that manages switching between multiple child views with configurable animations and programmatic navigation controls.
23
+ *
22
24
  * @tag forge-view-switcher
23
25
  *
24
26
  * @dependency forge-view
@@ -13,6 +13,8 @@ import { BaseComponent } from '../core/base/base-component';
13
13
  const template = '<template><div class=\"forge-view-switcher\" part=\"root\"><slot></slot></div></template>';
14
14
  const styles = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto)}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
15
15
  /**
16
+ * @summary A container component that manages switching between multiple child views with configurable animations and programmatic navigation controls.
17
+ *
16
18
  * @tag forge-view-switcher
17
19
  *
18
20
  * @dependency forge-view
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tylertech/forge",
3
3
  "description": "Tyler Forge™ Web Components library",
4
- "version": "3.10.4",
4
+ "version": "3.11.0",
5
5
  "author": "Tyler Technologies, Inc.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -13,11 +13,11 @@
13
13
  "typings": "esm/index.d.ts",
14
14
  "sideEffects": false,
15
15
  "dependencies": {
16
- "@floating-ui/dom": "^1.7.1",
16
+ "@floating-ui/dom": "^1.7.4",
17
17
  "@tylertech/forge-core": "^3.2.1",
18
- "@tylertech/tyler-icons": "^2.0.3",
18
+ "@tylertech/tyler-icons": "^2.0.4",
19
19
  "imask": "^7.6.1",
20
- "lit": "^3.3.0",
20
+ "lit": "^3.3.1",
21
21
  "tslib": "^2.8.1"
22
22
  },
23
23
  "customElements": "custom-elements.json"
@@ -26,7 +26,7 @@
26
26
  // States
27
27
  //
28
28
 
29
- :host([active]) {
29
+ :host(:where(:state(active), [active])) {
30
30
  @include active;
31
31
  }
32
32
 
@@ -47,9 +47,9 @@
47
47
  );
48
48
 
49
49
  &:where(
50
- .forge-icon-button--text,
51
- :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))
52
- ) {
50
+ .forge-icon-button--text,
51
+ :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))
52
+ ) {
53
53
  @include focus-indicator.provide-theme(
54
54
  (
55
55
  outward-offset: 0px // Requires unit