@tylertech/forge 3.7.0 → 3.8.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/custom-elements.json +175 -131
  2. package/dist/button/forge-button.css +3 -2
  3. package/dist/dialog/forge-dialog.css +3 -0
  4. package/dist/lib.js +23 -15
  5. package/dist/lib.js.map +4 -4
  6. package/dist/switch/forge-switch.css +1 -1
  7. package/dist/vscode.html-custom-data.json +9 -30
  8. package/esm/app-bar/notification-button/app-bar-notification-button-adapter.js +4 -5
  9. package/esm/app-bar/notification-button/app-bar-notification-button.js +6 -3
  10. package/esm/app-bar/profile-button/app-bar-profile-button.js +1 -1
  11. package/esm/autocomplete/autocomplete-adapter.js +1 -1
  12. package/esm/avatar/avatar-constants.d.ts +1 -0
  13. package/esm/avatar/avatar-constants.js +1 -0
  14. package/esm/avatar/avatar.d.ts +1 -1
  15. package/esm/avatar/avatar.js +1 -1
  16. package/esm/badge/badge-component-delegate.js +1 -2
  17. package/esm/badge/badge-constants.d.ts +1 -0
  18. package/esm/badge/badge-constants.js +1 -0
  19. package/esm/badge/badge.d.ts +20 -23
  20. package/esm/badge/badge.js +57 -47
  21. package/esm/badge/index.js +3 -3
  22. package/esm/bottom-sheet/bottom-sheet-constants.d.ts +1 -1
  23. package/esm/bottom-sheet/bottom-sheet.d.ts +3 -1
  24. package/esm/button/button.js +1 -1
  25. package/esm/button-toggle/button-toggle-group/button-toggle-group-adapter.js +1 -2
  26. package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +6 -6
  27. package/esm/button-toggle/button-toggle-group/button-toggle-group.js +6 -6
  28. package/esm/card/card-constants.d.ts +1 -0
  29. package/esm/card/card-constants.js +1 -0
  30. package/esm/card/card.d.ts +12 -13
  31. package/esm/card/card.js +25 -34
  32. package/esm/card/index.js +3 -3
  33. package/esm/checkbox/checkbox.d.ts +5 -1
  34. package/esm/chips/chip/chip-constants.d.ts +1 -1
  35. package/esm/core/delegates/base-component-delegate.d.ts +1 -1
  36. package/esm/core/mask/date-input-mask.d.ts +3 -3
  37. package/esm/core/mask/date-input-mask.js +7 -8
  38. package/esm/core/mask/intermediate-time-parser.d.ts +2 -2
  39. package/esm/core/mask/intermediate-time-parser.js +2 -3
  40. package/esm/core/mask/time-input-mask.d.ts +3 -3
  41. package/esm/core/mask/time-input-mask.js +4 -5
  42. package/esm/core/mixins/label/with-label-aware.d.ts +4 -1
  43. package/esm/core/utils/a11y-utils.d.ts +0 -8
  44. package/esm/core/utils/a11y-utils.js +5 -25
  45. package/esm/core/utils/dismissible-stack.d.ts +7 -0
  46. package/esm/core/utils/position-utils.d.ts +1 -2
  47. package/esm/core/utils/position-utils.js +7 -22
  48. package/esm/core/utils/utils.d.ts +8 -0
  49. package/esm/core/utils/utils.js +26 -1
  50. package/esm/date-picker/base/base-date-picker-constants.d.ts +2 -2
  51. package/esm/deprecated/button/deprecated-button.js +1 -1
  52. package/esm/dialog/dialog-core.js +2 -2
  53. package/esm/dialog/dialog.d.ts +2 -0
  54. package/esm/dialog/dialog.js +1 -1
  55. package/esm/expansion-panel/expansion-panel-adapter.d.ts +31 -0
  56. package/esm/expansion-panel/expansion-panel-adapter.js +60 -1
  57. package/esm/expansion-panel/expansion-panel-constants.d.ts +4 -0
  58. package/esm/expansion-panel/expansion-panel-constants.js +4 -1
  59. package/esm/expansion-panel/expansion-panel-core.d.ts +13 -1
  60. package/esm/expansion-panel/expansion-panel-core.js +63 -1
  61. package/esm/expansion-panel/expansion-panel.d.ts +9 -0
  62. package/esm/expansion-panel/expansion-panel.js +14 -0
  63. package/esm/floating-action-button/floating-action-button-constants.d.ts +1 -1
  64. package/esm/icon/icon-constants.d.ts +1 -1
  65. package/esm/icon/icon-registry.d.ts +6 -0
  66. package/esm/icon-button/icon-button-constants.d.ts +1 -1
  67. package/esm/label/label-adapter.js +1 -1
  68. package/esm/list/list-item/list-item.js +1 -1
  69. package/esm/meter/meter/meter.js +2 -1
  70. package/esm/meter/meter-group/meter-group.js +2 -1
  71. package/esm/overlay/base/base-overlay-core.d.ts +3 -3
  72. package/esm/overlay/base/base-overlay.d.ts +3 -3
  73. package/esm/overlay/base/base-overlay.js +11 -1
  74. package/esm/overlay/base/overlay-aware-core.d.ts +3 -3
  75. package/esm/overlay/base/overlay-aware-core.js +2 -1
  76. package/esm/overlay/overlay-adapter.d.ts +2 -2
  77. package/esm/overlay/overlay-adapter.js +6 -14
  78. package/esm/overlay/overlay-constants.d.ts +2 -5
  79. package/esm/overlay/overlay-constants.js +2 -23
  80. package/esm/overlay/overlay-core.d.ts +3 -3
  81. package/esm/overlay/overlay-core.js +13 -3
  82. package/esm/overlay/overlay.d.ts +2 -2
  83. package/esm/overlay/overlay.js +2 -2
  84. package/esm/popover/popover.js +1 -1
  85. package/esm/profile-card/profile-card-core.js +4 -4
  86. package/esm/radio/core/radio-group-manager.d.ts +2 -1
  87. package/esm/radio/radio/radio.d.ts +1 -0
  88. package/esm/split-button/split-button-constants.d.ts +2 -2
  89. package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
  90. package/esm/stepper/stepper/stepper-constants.d.ts +1 -3
  91. package/esm/switch/switch.d.ts +5 -1
  92. package/esm/switch/switch.js +1 -1
  93. package/esm/table/table-core.js +10 -2
  94. package/esm/table/table-utils.js +8 -4
  95. package/esm/time-picker/time-picker-constants.d.ts +2 -2
  96. package/esm/toast/toast-constants.d.ts +1 -1
  97. package/esm/tooltip/tooltip-constants.d.ts +1 -1
  98. package/package.json +4 -4
  99. package/sass/badge/badge.scss +10 -10
  100. package/sass/button/_core.scss +1 -0
  101. package/sass/calendar/_variables.scss +3 -2
  102. package/sass/card/card.scss +1 -1
  103. package/sass/core/styles/tokens/button/_tokens.scss +2 -2
  104. package/sass/core/styles/tokens/slider/_tokens.scss +10 -4
  105. package/sass/core/styles/tokens/switch/_tokens.scss +1 -1
  106. package/sass/dialog/dialog.scss +8 -0
  107. package/sass/dialog/forge-dialog.scss +4 -0
  108. package/sass/linear-progress/linear-progress.scss +7 -3
  109. package/sass/list/list-item/list-item.scss +1 -1
  110. package/sass/popover/popover.scss +0 -1
  111. package/sass/slider/_core.scss +2 -3
@@ -33,7 +33,7 @@ export declare const ICON_CONSTANTS: {
33
33
  DEFAULT_NETWORK_BASE_URL: string;
34
34
  };
35
35
  };
36
- export declare const ICON_REGISTRY_KEY = "forgeIcons";
36
+ export declare const ICON_REGISTRY_KEY: "forgeIcons";
37
37
  export type IconUrlBuilder = (name: string, type: IconExternalType) => string;
38
38
  export type IconExternalType = '' | 'custom' | 'standard' | 'extended';
39
39
  export type IconTheme = Theme | 'text-medium' | 'text-low';
@@ -3,6 +3,7 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
+ import { ICON_REGISTRY_KEY } from './icon-constants';
6
7
  /** The shape of an SVG icon that can be defined with the icon registry. */
7
8
  export interface IIcon {
8
9
  /** The unique name of the icon. */
@@ -14,6 +15,11 @@ export interface IIconDescriptor {
14
15
  raw: string;
15
16
  node?: SVGElement;
16
17
  }
18
+ declare global {
19
+ interface Window {
20
+ [ICON_REGISTRY_KEY]: Map<string, IIconDescriptor>;
21
+ }
22
+ }
17
23
  /**
18
24
  * The registry for SVG icon instances being used within the current context.
19
25
  */
@@ -34,7 +34,7 @@ export declare const ICON_BUTTON_CONSTANTS: {
34
34
  DEFAULT_VARIANT: IconButtonVariant;
35
35
  DEFAULT_THEME: IconButtonTheme;
36
36
  DEFAULT_SHAPE: IconButtonShape;
37
- DEFAULT_DENSITY: Density;
37
+ DEFAULT_DENSITY: IconButtonDensity;
38
38
  };
39
39
  };
40
40
  export type IconButtonVariant = 'icon' | 'outlined' | 'tonal' | 'filled' | 'raised';
@@ -103,7 +103,7 @@ export class LabelAdapter extends BaseAdapter {
103
103
  targetEl = this._component.querySelector(selector);
104
104
  }
105
105
  if (targetEl && !targetEl.shadowRoot) {
106
- // If the target element has not been updgraded, mark it to connect later
106
+ // If the target element has not been upgraded, mark it to connect later
107
107
  targetEl.setAttribute(DEFERRED_LABEL_TARGET, '');
108
108
  targetEl[forgeLabelRef] = this._component;
109
109
  return null;
@@ -14,7 +14,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
14
14
  import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
15
15
  import { BaseComponent } from '../../core/base/base-component';
16
16
  const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div></template>';
17
- const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
17
+ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button:not([slot]),[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
18
18
  /**
19
19
  * @tag forge-list-item
20
20
  *
@@ -8,7 +8,8 @@ import { LitElement, html, unsafeCSS } from 'lit';
8
8
  import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js';
9
9
  import { classMap } from 'lit/directives/class-map.js';
10
10
  import { styleMap } from 'lit/directives/style-map.js';
11
- import { setDefaultAria, toggleState } from '../../core/utils/a11y-utils';
11
+ import { setDefaultAria } from '../../core/utils/a11y-utils';
12
+ import { toggleState } from '../../core/utils/utils';
12
13
  const styles = ':host{display:inline}.forge-meter{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe));--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px));--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-inner-shape:var(--forge-meter-inner-shape, 0);--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_meter-tickmarks:var(--forge-meter-tickmarks, 10);--_meter-tickmark-opacity:var(--forge-meter-tickmark-opacity, 54%);--_meter-transition-duration:var(--forge-meter-transition-duration, var(--forge-animation-duration-short4, 200ms));--_meter-transition-timing:var(--forge-meter-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-meter{box-sizing:border-box}.forge-meter .heading{-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);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter .track{position:relative;block-size:var(--_meter-height);border-radius:var(--_meter-shape);overflow:hidden;background:var(--_meter-background)}.forge-meter .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900));transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.forge-meter .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.forge-meter .track.segmented .bar{transition-property:translate,box-shadow,background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.lowest{--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0)}.forge-meter .track.tickmarks::after{content:\"\";position:relative;display:block;width:100%;height:100%;margin-left:2px;background:repeating-linear-gradient(90deg,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:-2px;opacity:var(--_meter-tickmark-opacity);pointer-events:none;transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .bar{position:absolute;left:-100%;width:100%;height:100%;border-radius:var(--_meter-inner-shape);box-shadow:var(--_meter-inner-elevation);background:var(--_meter-color);translate:var(--_meter-percentage) 0;transition-property:translate,box-shadow;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter.grouped{display:block;position:absolute;z-index:var(--_meter-z-index);top:0;left:var(--_meter-inset);width:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);height:100%;border-radius:var(--_meter-inner-shape);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(-1 * var(--_meter-group-height) * .5);background:var(--_meter-color);box-shadow:var(--_meter-inner-elevation)}.forge-meter.grouped.muted{--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.density--small{--_meter-height:var(--forge-meter-height, var(--forge-spacing-xsmall, 8px))}.forge-meter.density--medium{--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px))}.forge-meter.density--large{--_meter-height:var(--forge-meter-height, var(--forge-spacing-large, 24px))}.forge-meter.shape--default{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--rounded{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--squared{--_meter-shape:var(--forge-meter-shape, 0)}.forge-meter.inner-shape--inherit{--_meter-inner-shape:var(--_meter-shape)}.forge-meter.muted .track{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.muted .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.forge-meter.muted .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.forge-meter.muted .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter .track{width:var(--_meter-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .track.tickmarks::after{margin-top:-2px;margin-left:0;background:repeating-linear-gradient(0,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:0;background-position-y:2px}:host(:is(:state(vertical),:--vertical)) .forge-meter .bar{left:initial;top:100%;translate:0 calc(-1 * var(--_meter-percentage))}:host(:is(:state(vertical),:--vertical)) .forge-meter.grouped{display:block;top:calc(100% - var(--_meter-percentage) - var(--_meter-inset));left:0;width:100%;height:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);max-width:initial;border-radius:var(--_meter-inner-shape);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-left:0;margin-bottom:calc(-1 * var(--_meter-group-height) * .5)}.theme--primary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--primary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--secondary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--secondary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--tertiary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--tertiary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--success:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--success.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--warning:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--warning.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--error:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--error.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--info:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}.theme--info.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}@media (prefers-reduced-motion:reduce){.track{--_meter-transition-duration:var(--forge-meter-transition-duration, 0)}}@media (forced-colors:active){.track{border:1px solid CanvasText}.track .bar{background:CanvasText}.grouped{border-inline-end:1px solid Canvas!important;background:CanvasText!important}:host(:is(:state(vertical),:--vertical)) .grouped{border-block-start:1px solid CanvasText!important;border-inline-end:initial!important}}';
13
14
  const VALUE_STATE_MAP = new Map([
14
15
  ['optimal', 'optimum-value'],
@@ -8,7 +8,8 @@ import { debounce } from '@tylertech/forge-core';
8
8
  import { html, LitElement, unsafeCSS } from 'lit';
9
9
  import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
10
10
  import { classMap } from 'lit/directives/class-map.js';
11
- import { setDefaultAria, toggleState } from '../../core/utils/a11y-utils';
11
+ import { setDefaultAria } from '../../core/utils/a11y-utils';
12
+ import { toggleState } from '../../core/utils/utils';
12
13
  const styles = ':host{display:inline}.forge-meter-group{--_meter-group-background:var(--forge-meter-group-background, var(--forge-theme-surface-container-low, #ebebeb));--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px));--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-group-tickmarks:var(--forge-meter-group-tickmarks, 10);--_meter-group-tickmark-color:var(--forge-meter-group-tickmark-color, var(--forge-theme-outline-high, #212121));--_meter-group-tickmark-opacity:var(--forge-meter-group-tickmark-opacity, 54%)}.forge-meter-group{box-sizing:border-box}.forge-meter-group .heading{-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);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter-group .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter-group .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter-group .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter-group .track{position:relative;height:var(--_meter-group-height);border-radius:var(--_meter-group-shape);overflow:hidden;background:var(--_meter-group-background)}.forge-meter-group .track.tickmarks::after{content:\"\";position:relative;display:block;z-index:9999;width:100%;height:100%;margin-left:-1px;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color) 0,var(--_meter-group-tickmark-color) 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px));opacity:var(--_meter-group-tickmark-opacity);pointer-events:none}.forge-meter-group .track.inner-shape--inherit{--forge-meter-inner-shape:var(--_meter-group-shape)}.forge-meter-group .track.shape--default{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--rounded{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--squared{--_meter-group-shape:var(--forge-meter-group-shape, 0)}.forge-meter-group .track.density--small{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-xsmall, 8px))}.forge-meter-group .track.density--medium{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px))}.forge-meter-group .track.density--large{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-large, 24px))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter-group{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track{width:var(--_meter-group-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track.tickmarks::after{margin-top:1px;margin-left:0;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color),true 0,var(--_meter-group-tickmark-color),true 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px))}@media (forced-colors:active){.track{border:1px solid CanvasText}}';
13
14
  /**
14
15
  * @tag forge-meter-group
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { IBaseAdapter } from '../../core';
7
7
  import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
8
- import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
8
+ import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
9
9
  export interface IBaseOverlayCore {
10
10
  initialize(): void;
11
11
  destroy(): void;
@@ -19,7 +19,7 @@ export interface IBaseOverlayCore {
19
19
  offset: IOverlayOffset;
20
20
  hide: OverlayHideState;
21
21
  persistent: boolean;
22
- shift: boolean;
22
+ shift: OverlayShiftState;
23
23
  flip: OverlayFlipState;
24
24
  boundary: string | null;
25
25
  boundaryElement: HTMLElement | null;
@@ -41,7 +41,7 @@ export declare abstract class BaseOverlayCore<T extends IBaseAdapter> implements
41
41
  abstract offset: IOverlayOffset;
42
42
  abstract hide: OverlayHideState;
43
43
  abstract persistent: boolean;
44
- abstract shift: boolean;
44
+ abstract shift: OverlayShiftState;
45
45
  abstract flip: OverlayFlipState;
46
46
  abstract boundary: string | null;
47
47
  abstract boundaryElement: HTMLElement | null;
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
7
7
  import { IBaseOverlayCore } from './base-overlay-core';
8
- import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
8
+ import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
9
9
  import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
10
10
  export interface IBaseOverlay extends IBaseComponent {
11
11
  anchorElement: HTMLElement | VirtualElement | null;
@@ -16,7 +16,7 @@ export interface IBaseOverlay extends IBaseComponent {
16
16
  placement: OverlayPlacement;
17
17
  positionStrategy: OverlayPositionStrategy;
18
18
  offset: IOverlayOffset;
19
- shift: boolean;
19
+ shift: OverlayShiftState;
20
20
  hide: OverlayHideState;
21
21
  persistent: boolean;
22
22
  flip: OverlayFlipState;
@@ -38,7 +38,7 @@ export declare abstract class BaseOverlay<T extends IBaseOverlayCore> extends Ba
38
38
  placement: OverlayPlacement;
39
39
  positionStrategy: OverlayPositionStrategy;
40
40
  offset: IOverlayOffset;
41
- shift: boolean;
41
+ shift: OverlayShiftState;
42
42
  hide: OverlayHideState;
43
43
  persistent: boolean;
44
44
  flip: OverlayFlipState;
@@ -42,7 +42,17 @@ export class BaseOverlay extends BaseComponent {
42
42
  this.persistent = coerceBoolean(newValue);
43
43
  break;
44
44
  case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
45
- this.shift = coerceBoolean(newValue);
45
+ // Handle legacy boolean attributes for shift by converting to corresponding type values
46
+ // TODO: Remove support for boolean attribute conversion in v4
47
+ if (newValue === '' || newValue?.trim() === 'true') {
48
+ this.shift = 'auto';
49
+ }
50
+ else if (newValue == null || newValue?.trim() === 'false') {
51
+ this.shift = 'never';
52
+ }
53
+ else {
54
+ this.shift = newValue;
55
+ }
46
56
  break;
47
57
  case OVERLAY_CONSTANTS.observedAttributes.FLIP:
48
58
  this.flip = newValue;
@@ -6,7 +6,7 @@
6
6
  import { IBaseOverlayCore } from './base-overlay-core';
7
7
  import { IOverlayComponent } from '../overlay';
8
8
  import { IOverlayAwareAdapter } from './overlay-aware-adapter';
9
- import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
9
+ import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OverlayShiftState } from '../overlay-constants';
10
10
  import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
11
11
  export interface IOverlayAwareCore extends IBaseOverlayCore {
12
12
  readonly overlayElement: IOverlayComponent;
@@ -39,8 +39,8 @@ export declare abstract class OverlayAwareCore<T extends IOverlayAwareAdapter> i
39
39
  set hide(value: OverlayHideState);
40
40
  get persistent(): boolean;
41
41
  set persistent(value: boolean);
42
- get shift(): boolean;
43
- set shift(value: boolean);
42
+ get shift(): OverlayShiftState;
43
+ set shift(value: OverlayShiftState);
44
44
  get flip(): OverlayFlipState;
45
45
  set flip(value: OverlayFlipState);
46
46
  get boundary(): string | null;
@@ -4,6 +4,7 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { OVERLAY_CONSTANTS } from '../overlay-constants';
7
+ import { toggleAttribute } from '@tylertech/forge-core';
7
8
  export class OverlayAwareCore {
8
9
  constructor(_adapter) {
9
10
  this._adapter = _adapter;
@@ -115,7 +116,7 @@ export class OverlayAwareCore {
115
116
  set shift(value) {
116
117
  if (this._adapter.overlayElement.shift !== value) {
117
118
  this._adapter.overlayElement.shift = value;
118
- this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._adapter.overlayElement.shift);
119
+ toggleAttribute(this._adapter.hostElement, this._adapter.overlayElement.shift !== OVERLAY_CONSTANTS.defaults.SHIFT, OVERLAY_CONSTANTS.attributes.SHIFT, String(this._adapter.overlayElement.shift));
119
120
  }
120
121
  }
121
122
  get flip() {
@@ -6,7 +6,7 @@
6
6
  import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
7
7
  import { PositionPlacement, VirtualElement } from '../core/utils/position-utils';
8
8
  import { IOverlayComponent } from './overlay';
9
- import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy } from './overlay-constants';
9
+ import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy, OverlayShiftState } from './overlay-constants';
10
10
  export interface IOverlayAdapter extends IBaseAdapter<IOverlayComponent> {
11
11
  show(): void;
12
12
  hide(): void;
@@ -24,7 +24,7 @@ export interface IPositionElementConfig {
24
24
  placement: PositionPlacement;
25
25
  hide: OverlayHideState;
26
26
  offset: IOverlayOffset;
27
- shift: boolean;
27
+ shift: OverlayShiftState;
28
28
  flip: OverlayFlipState;
29
29
  boundary: string | null;
30
30
  boundaryElement: HTMLElement | null;
@@ -6,10 +6,10 @@
6
6
  import { autoUpdate } from '@floating-ui/dom';
7
7
  import { getShadowElement } from '@tylertech/forge-core';
8
8
  import { BaseAdapter } from '../core/base/base-adapter';
9
- import { DEFAULT_FALLBACK_PLACEMENTS, positionElementAsync, VirtualElement } from '../core/utils/position-utils';
10
- import { locateElementById, roundByDPR } from '../core/utils/utils';
9
+ import { positionElementAsync, VirtualElement } from '../core/utils/position-utils';
10
+ import { locateElementById } from '../core/utils/utils';
11
11
  import { OverlayComponent } from './overlay';
12
- import { overlayStack, OVERLAY_CONSTANTS, OVERLAY_FALLBACK_PLACEMENT_MAP, SUPPORTS_POPOVER } from './overlay-constants';
12
+ import { OVERLAY_CONSTANTS, overlayStack, SUPPORTS_POPOVER } from './overlay-constants';
13
13
  export class OverlayAdapter extends BaseAdapter {
14
14
  constructor(component) {
15
15
  super(component);
@@ -73,14 +73,14 @@ export class OverlayAdapter extends BaseAdapter {
73
73
  strategy,
74
74
  placement,
75
75
  hide: hide !== 'never',
76
- shift,
76
+ shift: shift !== 'never',
77
77
  shiftOptions: {
78
78
  boundary: boundaryEl
79
79
  },
80
80
  flip: flip !== 'never',
81
81
  flipOptions: {
82
- fallbackStrategy: 'bestFit',
83
- fallbackPlacements: fallbackPlacements ?? OVERLAY_FALLBACK_PLACEMENT_MAP[placement] ?? DEFAULT_FALLBACK_PLACEMENTS,
82
+ boundary: boundaryEl,
83
+ fallbackPlacements,
84
84
  crossAxis: flip === 'cross' || flip === 'auto',
85
85
  mainAxis: flip === 'main' || flip === 'auto'
86
86
  },
@@ -117,14 +117,6 @@ export class OverlayAdapter extends BaseAdapter {
117
117
  // Update the clipped attributes to allow for state-based clipping adjustments by consumers
118
118
  this._component.toggleAttribute(OVERLAY_CONSTANTS.attributes.CLIPPED_X, isClippedX);
119
119
  this._component.toggleAttribute(OVERLAY_CONSTANTS.attributes.CLIPPED_Y, isClippedY);
120
- // If clipped, adjust the position by the clipping delta on each axis
121
- if (isClippedX || isClippedY) {
122
- const { x, y } = result;
123
- const { height, width } = overlayRect;
124
- const clippedDeltaX = isClippedX ? x + width - viewportWidth : 0;
125
- const clippedDeltaY = isClippedY ? y + height - viewportHeight : 0;
126
- this._rootElement.style.translate = `${roundByDPR(x - clippedDeltaX)}px ${roundByDPR(y - clippedDeltaY)}px`;
127
- }
128
120
  });
129
121
  }
130
122
  tryCleanupAutoUpdate() {
@@ -50,6 +50,7 @@ export declare const OVERLAY_CONSTANTS: {
50
50
  defaults: {
51
51
  readonly HIDE: "anchor-hidden";
52
52
  readonly FLIP: "auto";
53
+ readonly SHIFT: "auto";
53
54
  };
54
55
  };
55
56
  export declare const SUPPORTS_POPOVER: boolean;
@@ -62,6 +63,7 @@ export type OverlayPositionStrategy = 'absolute' | 'fixed';
62
63
  export type OverlayPlacement = PositionPlacement;
63
64
  export type OverlayHideState = 'anchor-hidden' | 'never';
64
65
  export type OverlayFlipState = 'auto' | 'main' | 'cross' | 'never';
66
+ export type OverlayShiftState = 'auto' | 'never' | boolean;
65
67
  export type OverlayLightDismissReason = 'click' | 'escape';
66
68
  export interface IOverlayToggleEvent extends Event {
67
69
  newState: 'closed' | 'open';
@@ -71,8 +73,3 @@ export interface OverlayLightDismissEventData {
71
73
  reason: OverlayLightDismissReason;
72
74
  }
73
75
  export declare const overlayStack: unique symbol;
74
- /**
75
- * This is a map of fallback placements for each placement. The fallback placements are used when the
76
- * original placement is not possible due to the boundary or other constraints.
77
- */
78
- export declare const OVERLAY_FALLBACK_PLACEMENT_MAP: Record<OverlayPlacement, OverlayPlacement[]>;
@@ -38,7 +38,8 @@ const events = {
38
38
  };
39
39
  const defaults = {
40
40
  HIDE: 'anchor-hidden',
41
- FLIP: 'auto'
41
+ FLIP: 'auto',
42
+ SHIFT: 'auto'
42
43
  };
43
44
  export const OVERLAY_CONSTANTS = {
44
45
  elementName,
@@ -51,25 +52,3 @@ export const OVERLAY_CONSTANTS = {
51
52
  };
52
53
  export const SUPPORTS_POPOVER = supportsPopover();
53
54
  export const overlayStack = Symbol('overlayStack');
54
- /**
55
- * This is a map of fallback placements for each placement. The fallback placements are used when the
56
- * original placement is not possible due to the boundary or other constraints.
57
- */
58
- export const OVERLAY_FALLBACK_PLACEMENT_MAP = {
59
- // Left
60
- left: ['right', 'bottom', 'top', 'top-start', 'top-end', 'left-start', 'left-end', 'right-start', 'right-end'],
61
- 'left-start': ['left-end', 'right-start', 'right-end', 'bottom', 'top'],
62
- 'left-end': ['left-start', 'right-end', 'right-start', 'bottom', 'top', 'bottom-start', 'bottom-end'],
63
- // Right
64
- right: ['left', 'bottom', 'top', 'top-start', 'top-end', 'left-start', 'left-end', 'right-start', 'right-end'],
65
- 'right-start': ['right-end', 'left-start', 'left-end', 'bottom', 'top'],
66
- 'right-end': ['right-start', 'left-end', 'left-start', 'bottom', 'top', 'bottom-start', 'bottom-end'],
67
- // Top
68
- top: ['bottom', 'left', 'right', 'bottom-start', 'left-start', 'left-end', 'right-start', 'right-end'],
69
- 'top-start': ['bottom-start', 'left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],
70
- 'top-end': ['bottom-end', 'left', 'right', 'right-start', 'right-end', 'left-start', 'left-end'],
71
- // Bottom
72
- bottom: ['top', 'left', 'right', 'top-start', 'left-start', 'left-end', 'right-start', 'right-end'],
73
- 'bottom-start': ['top-start', 'left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],
74
- 'bottom-end': ['top-end', 'left', 'right', 'right-start', 'right-end', 'left-start', 'left-end']
75
- };
@@ -6,7 +6,7 @@
6
6
  import { PositionPlacement } from '../core/utils/position-utils';
7
7
  import { IBaseOverlayCore, BaseOverlayCore } from './base/base-overlay-core';
8
8
  import { IOverlayAdapter } from './overlay-adapter';
9
- import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayFlipState, OverlayHideState } from './overlay-constants';
9
+ import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayFlipState, OverlayHideState, OverlayShiftState } from './overlay-constants';
10
10
  export interface IOverlayCore extends IBaseOverlayCore {
11
11
  arrowElement: HTMLElement;
12
12
  arrowElementOffset: number;
@@ -59,8 +59,8 @@ export declare class OverlayCore extends BaseOverlayCore<IOverlayAdapter> implem
59
59
  set positionStrategy(value: OverlayPositionStrategy);
60
60
  get offset(): IOverlayOffset;
61
61
  set offset(value: IOverlayOffset);
62
- get shift(): boolean;
63
- set shift(value: boolean);
62
+ get shift(): OverlayShiftState;
63
+ set shift(value: OverlayShiftState);
64
64
  get hide(): OverlayHideState;
65
65
  set hide(value: OverlayHideState);
66
66
  get persistent(): boolean;
@@ -14,7 +14,7 @@ export class OverlayCore extends BaseOverlayCore {
14
14
  this._placement = 'bottom';
15
15
  this._positionStrategy = 'fixed';
16
16
  this._offset = {};
17
- this._shift = false;
17
+ this._shift = OVERLAY_CONSTANTS.defaults.SHIFT;
18
18
  this._hide = OVERLAY_CONSTANTS.defaults.HIDE;
19
19
  this._flip = OVERLAY_CONSTANTS.defaults.FLIP;
20
20
  this._fallbackPlacements = null;
@@ -215,13 +215,23 @@ export class OverlayCore extends BaseOverlayCore {
215
215
  return this._shift;
216
216
  }
217
217
  set shift(value) {
218
- value = Boolean(value);
218
+ // Handle legacy boolean values for shift by converting them to the corresponding type value
219
+ // TODO: Remove support for boolean values in v4
220
+ if (value === true) {
221
+ value = 'auto';
222
+ }
223
+ else if (value === false) {
224
+ value = 'never';
225
+ }
226
+ else if (!['auto', 'never'].includes(value)) {
227
+ value = OVERLAY_CONSTANTS.defaults.SHIFT;
228
+ }
219
229
  if (this._shift !== value) {
220
230
  this._shift = value;
221
231
  if (this._open) {
222
232
  this.position();
223
233
  }
224
- this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._shift);
234
+ this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._shift);
225
235
  }
226
236
  }
227
237
  get hide() {
@@ -39,7 +39,7 @@ declare global {
39
39
  * @property {OverlayPlacement} [placement="bottom"] - The placement of the overlay relative to the anchor element.
40
40
  * @property {OverlayPositionStrategy} [positionStrategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
41
41
  * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
42
- * @property {boolean} [shift=false] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
42
+ * @property {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
43
43
  * @property {OverlayHideState} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
44
44
  * @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
45
45
  * @property {OverlayFlipState} [flip="auto"] - Whether or not the overlay should flip to the opposite placement when not enough room.
@@ -64,7 +64,7 @@ declare global {
64
64
  * @attribute {string} [position-strategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
65
65
  * @attribute {string} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
66
66
  * @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
67
- * @attribute {string} [shift=false] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
67
+ * @attribute {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
68
68
  * @attribute {OverlayFlipState} [flip="auto"] - Tells the overlay not to flip to the opposite placement when not enough room.
69
69
  * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
70
70
  * @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
@@ -33,7 +33,7 @@ const styles = ':host{display:contents}:host([hidden]){display:none}.forge-overl
33
33
  * @property {OverlayPlacement} [placement="bottom"] - The placement of the overlay relative to the anchor element.
34
34
  * @property {OverlayPositionStrategy} [positionStrategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
35
35
  * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
36
- * @property {boolean} [shift=false] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
36
+ * @property {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
37
37
  * @property {OverlayHideState} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
38
38
  * @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
39
39
  * @property {OverlayFlipState} [flip="auto"] - Whether or not the overlay should flip to the opposite placement when not enough room.
@@ -58,7 +58,7 @@ const styles = ':host{display:contents}:host([hidden]){display:none}.forge-overl
58
58
  * @attribute {string} [position-strategy="fixed"] - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
59
59
  * @attribute {string} [hide="anchor-hidden"] - Whether or not the overlay should hide itself when the anchor element is out of view.
60
60
  * @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
61
- * @attribute {string} [shift=false] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
61
+ * @attribute {OverlayShiftState} [shift="auto"] - Whether or not the anchor element should shift along the side of the overlay when scrolling.
62
62
  * @attribute {OverlayFlipState} [flip="auto"] - Tells the overlay not to flip to the opposite placement when not enough room.
63
63
  * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
64
64
  * @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
@@ -13,7 +13,7 @@ import { OverlayAware } from '../overlay/base/overlay-aware';
13
13
  import { coerceStringToArray } from '../core/utils/utils';
14
14
  import { tryDismiss } from '../core/utils/dismissible-stack';
15
15
  const template = '<template><forge-overlay exportparts=\"root:overlay\"><div class=\"forge-popover\" part=\"surface\"><slot></slot></div></forge-overlay></template>';
16
- const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)}}@keyframes zoomout{from{transform:scale(1)}to{transform:scale(.8)}}@keyframes slidein{from{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{transform:translateX(0) translateY(0)}}@keyframes slideout{from{transform:translateX(0) translateY(0)}to{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@layer base,animation,preset,reduced-motion; @layer base{:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-width:var(--forge-popover-width, auto);--_popover-height:var(--forge-popover-height, auto);--_popover-min-width:var(--forge-popover-min-width, none);--_popover-max-width:var(--forge-popover-max-width, none);--_popover-min-height:var(--forge-popover-min-height, none);--_popover-max-height:var(--forge-popover-max-height, none);--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_popover-box-shadow:var(--forge-popover-box-shadow, 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)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-overflow:var(--forge-popover-overflow, initial);--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-enter-duration:var(--forge-popover-animation-enter-duration, var(--forge-animation-duration-short3, 150ms));--_popover-animation-enter-timing:var(--forge-popover-animation-enter-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-animation-exit-duration:var(--forge-popover-animation-exit-duration, var(--forge-animation-duration-short2, 100ms));--_popover-animation-exit-timing:var(--forge-popover-animation-exit-timing, var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)));--_popover-zoom-enter-duration:var(--forge-popover-zoom-enter-duration, var(--_popover-animation-enter-duration));--_popover-zoom-enter-timing:var(--forge-popover-zoom-enter-timing, var(--_popover-animation-enter-timing));--_popover-zoom-exit-duration:var(--forge-popover-zoom-exit-duration, var(--_popover-animation-exit-duration));--_popover-zoom-exit-timing:var(--forge-popover-zoom-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-enter-duration:var(--forge-popover-slide-enter-duration, var(--_popover-animation-enter-duration));--_popover-slide-enter-timing:var(--forge-popover-slide-enter-timing, var(--_popover-animation-enter-timing));--_popover-slide-exit-duration:var(--forge-popover-slide-exit-duration, var(--_popover-animation-exit-duration));--_popover-slide-exit-timing:var(--forge-popover-slide-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-enter-duration:var(--forge-popover-fade-enter-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-enter-timing:var(--forge-popover-fade-enter-timing, var(--_popover-animation-enter-timing));--_popover-fade-exit-duration:var(--forge-popover-fade-exit-duration, var(--_popover-animation-exit-duration));--_popover-fade-exit-timing:var(--forge-popover-fade-exit-timing, var(--_popover-animation-exit-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto);--_popover-preset-dropdown-max-height:var(--forge-popover-preset-dropdown-max-height, 256px);--_popover-preset-dropdown-overflow:var(--forge-popover-preset-dropdown-overflow, auto visible);--_popover-preset-dropdown-padding-block:var(--forge-popover-preset-dropdown-padding-block, var(--forge-spacing-xsmall, 8px));--_popover-preset-list-padding-block:var(--forge-popover-preset-list-padding-block, var(--forge-spacing-xsmall, 8px))}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover{position:relative;overflow:var(--_popover-overflow);box-sizing:border-box;background:var(--_popover-background);border-radius:var(--_popover-border-radius);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);width:var(--_popover-width);height:var(--_popover-height);min-width:var(--_popover-min-width);max-width:var(--_popover-max-width);min-height:var(--_popover-min-height);max-height:var(--_popover-max-height)}.forge-popover::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-popover::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-popover::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}}@layer preset{:host([preset=dropdown]) .forge-popover{--_popover-max-height:var(--_popover-preset-dropdown-max-height);--_popover-overflow:var(--_popover-preset-dropdown-overflow);padding-block:var(--_popover-preset-dropdown-padding-block)}:host([preset=list]) .forge-popover{padding-block:var(--_popover-preset-list-padding-block)}:host([constrain-viewport-width]) .forge-popover{--_popover-max-width:var(--forge-popover-max-width, 100vw)}}@layer animation{:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{animation-duration:var(--_popover-zoom-enter-duration);animation-timing-function:var(--_popover-zoom-enter-timing);animation-name:fadein,zoomin;transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host(:not([animation-type])) forge-overlay[open] .forge-popover.exiting,:host([animation-type=zoom]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-zoom-exit-duration);animation-timing-function:var(--_popover-zoom-exit-timing);animation-name:fadeout,zoomout}:host([animation-type=slide]) .forge-popover{animation-duration:var(--_popover-slide-enter-duration);animation-timing-function:var(--_popover-slide-enter-timing);animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-slide-exit-duration);animation-timing-function:var(--_popover-slide-exit-timing);animation-name:fadeout,slideout}:host([animation-type=fade]) .forge-popover{animation-duration:var(--_popover-fade-enter-duration);animation-timing-function:var(--_popover-fade-enter-timing);animation-name:fadein}:host([animation-type=fade]) .forge-popover.exiting{animation-duration:var(--_popover-fade-exit-duration);animation-timing-function:var(--_popover-fade-exit-timing);animation-name:fadeout}}forge-overlay[clipped-x] .forge-popover{width:auto;min-width:0;max-width:100vw;overflow-x:auto}forge-overlay[clipped-y] .forge-popover{height:auto;min-height:0;max-height:100vh;overflow-y:auto}@layer reduced-motion{@media (prefers-reduced-motion:reduce){.forge-popover{animation:none}.forge-popover.exiting{animation:none}}}';
16
+ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)}}@keyframes zoomout{from{transform:scale(1)}to{transform:scale(.8)}}@keyframes slidein{from{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{transform:translateX(0) translateY(0)}}@keyframes slideout{from{transform:translateX(0) translateY(0)}to{transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@layer base,animation,preset,reduced-motion; @layer base{:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-width:var(--forge-popover-width, auto);--_popover-height:var(--forge-popover-height, auto);--_popover-min-width:var(--forge-popover-min-width, none);--_popover-max-width:var(--forge-popover-max-width, none);--_popover-min-height:var(--forge-popover-min-height, none);--_popover-max-height:var(--forge-popover-max-height, none);--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_popover-box-shadow:var(--forge-popover-box-shadow, 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)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-overflow:var(--forge-popover-overflow, initial);--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-enter-duration:var(--forge-popover-animation-enter-duration, var(--forge-animation-duration-short3, 150ms));--_popover-animation-enter-timing:var(--forge-popover-animation-enter-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-animation-exit-duration:var(--forge-popover-animation-exit-duration, var(--forge-animation-duration-short2, 100ms));--_popover-animation-exit-timing:var(--forge-popover-animation-exit-timing, var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)));--_popover-zoom-enter-duration:var(--forge-popover-zoom-enter-duration, var(--_popover-animation-enter-duration));--_popover-zoom-enter-timing:var(--forge-popover-zoom-enter-timing, var(--_popover-animation-enter-timing));--_popover-zoom-exit-duration:var(--forge-popover-zoom-exit-duration, var(--_popover-animation-exit-duration));--_popover-zoom-exit-timing:var(--forge-popover-zoom-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-enter-duration:var(--forge-popover-slide-enter-duration, var(--_popover-animation-enter-duration));--_popover-slide-enter-timing:var(--forge-popover-slide-enter-timing, var(--_popover-animation-enter-timing));--_popover-slide-exit-duration:var(--forge-popover-slide-exit-duration, var(--_popover-animation-exit-duration));--_popover-slide-exit-timing:var(--forge-popover-slide-exit-timing, var(--_popover-animation-exit-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-enter-duration:var(--forge-popover-fade-enter-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-enter-timing:var(--forge-popover-fade-enter-timing, var(--_popover-animation-enter-timing));--_popover-fade-exit-duration:var(--forge-popover-fade-exit-duration, var(--_popover-animation-exit-duration));--_popover-fade-exit-timing:var(--forge-popover-fade-exit-timing, var(--_popover-animation-exit-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto);--_popover-preset-dropdown-max-height:var(--forge-popover-preset-dropdown-max-height, 256px);--_popover-preset-dropdown-overflow:var(--forge-popover-preset-dropdown-overflow, auto visible);--_popover-preset-dropdown-padding-block:var(--forge-popover-preset-dropdown-padding-block, var(--forge-spacing-xsmall, 8px));--_popover-preset-list-padding-block:var(--forge-popover-preset-list-padding-block, var(--forge-spacing-xsmall, 8px))}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover{position:relative;overflow:var(--_popover-overflow);box-sizing:border-box;background:var(--_popover-background);border-radius:var(--_popover-border-radius);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);width:var(--_popover-width);height:var(--_popover-height);min-width:var(--_popover-min-width);max-width:var(--_popover-max-width);min-height:var(--_popover-min-height);max-height:var(--_popover-max-height)}.forge-popover::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-popover::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-popover::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-popover::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}}@layer preset{:host([preset=dropdown]) .forge-popover{--_popover-max-height:var(--_popover-preset-dropdown-max-height);--_popover-overflow:var(--_popover-preset-dropdown-overflow);padding-block:var(--_popover-preset-dropdown-padding-block)}:host([preset=list]) .forge-popover{padding-block:var(--_popover-preset-list-padding-block)}:host([constrain-viewport-width]) .forge-popover{--_popover-max-width:var(--forge-popover-max-width, 100vw)}}@layer animation{:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{animation-duration:var(--_popover-zoom-enter-duration);animation-timing-function:var(--_popover-zoom-enter-timing);animation-name:fadein,zoomin;transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host(:not([animation-type])) forge-overlay[open] .forge-popover.exiting,:host([animation-type=zoom]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-zoom-exit-duration);animation-timing-function:var(--_popover-zoom-exit-timing);animation-name:fadeout,zoomout}:host([animation-type=slide]) .forge-popover{animation-duration:var(--_popover-slide-enter-duration);animation-timing-function:var(--_popover-slide-enter-timing);animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open] .forge-popover.exiting{animation-duration:var(--_popover-slide-exit-duration);animation-timing-function:var(--_popover-slide-exit-timing);animation-name:fadeout,slideout}:host([animation-type=fade]) .forge-popover{animation-duration:var(--_popover-fade-enter-duration);animation-timing-function:var(--_popover-fade-enter-timing);animation-name:fadein}:host([animation-type=fade]) .forge-popover.exiting{animation-duration:var(--_popover-fade-exit-duration);animation-timing-function:var(--_popover-fade-exit-timing);animation-name:fadeout}}forge-overlay[clipped-x] .forge-popover{width:auto;min-width:0;max-width:100vw;overflow-x:auto}forge-overlay[clipped-y] .forge-popover{height:auto;min-height:0;overflow-y:auto}@layer reduced-motion{@media (prefers-reduced-motion:reduce){.forge-popover{animation:none}.forge-popover.exiting{animation:none}}}';
17
17
  /**
18
18
  * @tag forge-popover
19
19
  *
@@ -19,12 +19,12 @@ export class ProfileCardCore {
19
19
  this._adapter.setSignOutButtonListener(this._signOutListener);
20
20
  }
21
21
  focus(options) {
22
- if (this._showSignOutButton) {
23
- this._adapter.requestSignOutButtonFocus({ ...options, focusVisible: true });
24
- }
25
- else if (this._showProfileButton) {
22
+ if (this._showProfileButton) {
26
23
  this._adapter.requestProfileButtonFocus({ ...options, focusVisible: true });
27
24
  }
25
+ else if (this._showSignOutButton) {
26
+ this._adapter.requestSignOutButtonFocus({ ...options, focusVisible: true });
27
+ }
28
28
  }
29
29
  _setActionVisibility() {
30
30
  const showActionToolbar = this._showSignOutButton || this._showProfileButton;