@tylertech/forge 3.10.4-dev.0 → 3.10.5

package/dist/vscode.css-custom-data.json

@@ -112,26 +112,6 @@
       "description": "The spacing between the content within the badge.",
       "values": []
     },
-    {
-      "name": "--forge-bottom-sheet-desktop-max-width",
-      "description": "The maximum width of the bottom sheet on desktop.",
-      "values": []
-    },
-    {
-      "name": "--forge-bottom-sheet-desktop-min-width",
-      "description": "The minimum width of the bottom sheet on desktop.",
-      "values": []
-    },
-    {
-      "name": "--forge-bottom-sheet-animation-duration",
-      "description": "The duration of the bottom sheet animation to fullscreen.",
-      "values": []
-    },
-    {
-      "name": "--forge-bottom-sheet-animation-timing",
-      "description": "The timing function of the bottom sheet animation to fullscreen.",
-      "values": []
-    },
     {
       "name": "--forge-banner-background",
       "description": "The background color of the banner.",
@@ -172,6 +152,26 @@
       "description": "The transition easing function.",
       "values": []
     },
+    {
+      "name": "--forge-bottom-sheet-desktop-max-width",
+      "description": "The maximum width of the bottom sheet on desktop.",
+      "values": []
+    },
+    {
+      "name": "--forge-bottom-sheet-desktop-min-width",
+      "description": "The minimum width of the bottom sheet on desktop.",
+      "values": []
+    },
+    {
+      "name": "--forge-bottom-sheet-animation-duration",
+      "description": "The duration of the bottom sheet animation to fullscreen.",
+      "values": []
+    },
+    {
+      "name": "--forge-bottom-sheet-animation-timing",
+      "description": "The timing function of the bottom sheet animation to fullscreen.",
+      "values": []
+    },
     {
       "name": "--forge-button-primary-color",
       "description": "The primary color of the button.",
@@ -1727,71 +1727,6 @@
       "description": "The font size of the icon.",
       "values": []
     },
-    {
-      "name": "--forge-inline-message-background",
-      "description": "The background color.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-color",
-      "description": "The text color.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-shape",
-      "description": "The shape (border) radius.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-padding",
-      "description": "The padding around the content.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-padding-inline",
-      "description": "The inline padding around the content.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-padding-block",
-      "description": "The block padding around the content.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-border-width",
-      "description": "The border width.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-border-style",
-      "description": "The border style. Defaults to `none`.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-border-color",
-      "description": "The border color.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-gap",
-      "description": "The gap/space between the content elements.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-icon-gap",
-      "description": "The gap/space between the icon and the content.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-content-gap",
-      "description": "The gap/space between the title and the message.",
-      "values": []
-    },
-    {
-      "name": "--forge-inline-message-icon-color",
-      "description": "The icon color.",
-      "values": []
-    },
     {
       "name": "--forge-icon-button-display",
       "description": "The display property of the button.",
@@ -2042,6 +1977,71 @@
       "description": "The color of the focus indicator.",
       "values": []
     },
+    {
+      "name": "--forge-inline-message-background",
+      "description": "The background color.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-color",
+      "description": "The text color.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-shape",
+      "description": "The shape (border) radius.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-padding",
+      "description": "The padding around the content.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-padding-inline",
+      "description": "The inline padding around the content.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-padding-block",
+      "description": "The block padding around the content.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-border-width",
+      "description": "The border width.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-border-style",
+      "description": "The border style. Defaults to `none`.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-border-color",
+      "description": "The border color.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-gap",
+      "description": "The gap/space between the content elements.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-icon-gap",
+      "description": "The gap/space between the icon and the content.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-content-gap",
+      "description": "The gap/space between the title and the message.",
+      "values": []
+    },
+    {
+      "name": "--forge-inline-message-icon-color",
+      "description": "The icon color.",
+      "values": []
+    },
     {
       "name": "--forge-label-value-align",
       "description": "Aligns the label and value. Possible values: `start` (default), `center`, `end`.",
@@ -5625,11 +5625,6 @@
       "description": "The focus indicator element."
     },
     { "name": "::part(svg)", "description": "The internal SVG element." },
-    { "name": "::part(root)", "description": "The root layout element." },
-    {
-      "name": "::part(container)",
-      "description": "The container element for the title and message content."
-    },
     { "name": "::part(root)", "description": "The root container element." },
     {
       "name": "::part(focus-indicator)",
@@ -5639,6 +5634,11 @@
       "name": "::part(state-layer)",
       "description": "The state-layer surface element."
     },
+    { "name": "::part(root)", "description": "The root layout element." },
+    {
+      "name": "::part(container)",
+      "description": "The container element for the title and message content."
+    },
     {
       "name": "::part(root)",
       "description": "The root layout container element."

package/dist/vscode.html-custom-data.json

@@ -172,50 +172,50 @@
       "references": []
     },
     {
-      "name": "forge-bottom-sheet",
-      "description": "Bottom sheets slide up from the bottom of the screen to reveal more content and/or actions that the user can take.\n---\n\n\n### **Events:**\n - **forge-bottom-sheet-before-close** - Fires before the bottom sheet closes.\n- **forge-bottom-sheet-close** - Fires after the bottom sheet closes.\n- **forge-bottom-sheet-open** - Fires after the bottom sheet opens.\n- **forge-bottom-sheet-drag-start** - Fires when the bottom sheet starts to be dragged.\n- **forge-bottom-sheet-dragged** - Fires when the bottom sheet is dragged.\n- **forge-bottom-sheet-drag-end** - Fires when the bottom sheet drag ends.\n- **forge-bottom-sheet-drag-cancel** - Fires when the bottom sheet drag is cancelled.\n- **forge-bottom-sheet-fullscreen** - Fires when the bottom sheet is toggled to fullscreen.\n\n### **Slots:**\n - _default_ - The content of the bottom sheet. This is a passthrough slot to the dialog surface.\n\n### **CSS Properties:**\n - **--forge-bottom-sheet-desktop-max-width** - The maximum width of the bottom sheet on desktop. _(default: undefined)_\n- **--forge-bottom-sheet-desktop-min-width** - The minimum width of the bottom sheet on desktop. _(default: undefined)_\n- **--forge-bottom-sheet-animation-duration** - The duration of the bottom sheet animation to fullscreen. _(default: undefined)_\n- **--forge-bottom-sheet-animation-timing** - The timing function of the bottom sheet animation to fullscreen. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the bottom sheet.\n- **surface** - The surface element of the bottom sheet within th dialog.",
+      "name": "forge-banner",
+      "description": "Banners are used to inform users of important information, such as errors, warnings, or success messages.\n---\n\n\n### **Events:**\n - **forge-banner-before-dismiss** - Dispatched before the banner is dismissed. Cancelable to prevent dismissal.\n- **forge-banner-dismissed** - Dispatched when the banner is dismissed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **icon** - The icon to display.\n- **button** - The optional button to display.\n\n### **CSS Properties:**\n - **--forge-banner-background** - The background color of the banner. _(default: undefined)_\n- **--forge-banner-color** - The text color of the banner. _(default: undefined)_\n- **--forge-banner-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-banner-gap** - The gap between the contents. _(default: undefined)_\n- **--forge-banner-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-banner-padding-block** - The block padding. _(default: undefined)_\n- **--forge-banner-transition-duration** - The transition duration. _(default: undefined)_\n- **--forge-banner-transition-easing** - The transition easing function. _(default: undefined)_",
       "attributes": [
         {
-          "name": "open",
-          "description": "Whether the bottom sheet is open.",
+          "name": "dismissed",
+          "description": "Controls the visibility of the banner.",
           "values": []
         },
-        {
-          "name": "mode",
-          "description": "The mode of the bottom sheet.",
-          "values": [{ "name": "BottomSheetMode" }]
-        },
         {
           "name": "persistent",
-          "description": "Whether the bottom sheet is persistent.",
+          "description": "Controls the visibility of the built-in dismiss button.",
           "values": []
         },
         {
-          "name": "fullscreen",
-          "description": "Whether the bottom sheet is fullscreen.",
-          "values": []
+          "name": "theme",
+          "description": "The theme of the banner.",
+          "values": [{ "name": "BannerTheme" }]
         }
       ],
       "references": []
     },
     {
-      "name": "forge-banner",
-      "description": "Banners are used to inform users of important information, such as errors, warnings, or success messages.\n---\n\n\n### **Events:**\n - **forge-banner-before-dismiss** - Dispatched before the banner is dismissed. Cancelable to prevent dismissal.\n- **forge-banner-dismissed** - Dispatched when the banner is dismissed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **icon** - The icon to display.\n- **button** - The optional button to display.\n\n### **CSS Properties:**\n - **--forge-banner-background** - The background color of the banner. _(default: undefined)_\n- **--forge-banner-color** - The text color of the banner. _(default: undefined)_\n- **--forge-banner-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-banner-gap** - The gap between the contents. _(default: undefined)_\n- **--forge-banner-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-banner-padding-block** - The block padding. _(default: undefined)_\n- **--forge-banner-transition-duration** - The transition duration. _(default: undefined)_\n- **--forge-banner-transition-easing** - The transition easing function. _(default: undefined)_",
+      "name": "forge-bottom-sheet",
+      "description": "Bottom sheets slide up from the bottom of the screen to reveal more content and/or actions that the user can take.\n---\n\n\n### **Events:**\n - **forge-bottom-sheet-before-close** - Fires before the bottom sheet closes.\n- **forge-bottom-sheet-close** - Fires after the bottom sheet closes.\n- **forge-bottom-sheet-open** - Fires after the bottom sheet opens.\n- **forge-bottom-sheet-drag-start** - Fires when the bottom sheet starts to be dragged.\n- **forge-bottom-sheet-dragged** - Fires when the bottom sheet is dragged.\n- **forge-bottom-sheet-drag-end** - Fires when the bottom sheet drag ends.\n- **forge-bottom-sheet-drag-cancel** - Fires when the bottom sheet drag is cancelled.\n- **forge-bottom-sheet-fullscreen** - Fires when the bottom sheet is toggled to fullscreen.\n\n### **Slots:**\n - _default_ - The content of the bottom sheet. This is a passthrough slot to the dialog surface.\n\n### **CSS Properties:**\n - **--forge-bottom-sheet-desktop-max-width** - The maximum width of the bottom sheet on desktop. _(default: undefined)_\n- **--forge-bottom-sheet-desktop-min-width** - The minimum width of the bottom sheet on desktop. _(default: undefined)_\n- **--forge-bottom-sheet-animation-duration** - The duration of the bottom sheet animation to fullscreen. _(default: undefined)_\n- **--forge-bottom-sheet-animation-timing** - The timing function of the bottom sheet animation to fullscreen. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the bottom sheet.\n- **surface** - The surface element of the bottom sheet within th dialog.",
       "attributes": [
         {
-          "name": "dismissed",
-          "description": "Controls the visibility of the banner.",
+          "name": "open",
+          "description": "Whether the bottom sheet is open.",
           "values": []
         },
+        {
+          "name": "mode",
+          "description": "The mode of the bottom sheet.",
+          "values": [{ "name": "BottomSheetMode" }]
+        },
         {
           "name": "persistent",
-          "description": "Controls the visibility of the built-in dismiss button.",
+          "description": "Whether the bottom sheet is persistent.",
           "values": []
         },
         {
-          "name": "theme",
-          "description": "The theme of the banner.",
-          "values": [{ "name": "BannerTheme" }]
+          "name": "fullscreen",
+          "description": "Whether the bottom sheet is fullscreen.",
+          "values": []
         }
       ],
       "references": []
@@ -1186,18 +1186,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-inline-message",
-      "description": "Inline messages are used to provide feedback to the user about a specific action or state.\n---\n\n\n### **Slots:**\n - _default_ - The message text.\n- **title** - The title of the inline message.\n- **icon** - The icon to display.\n\n### **CSS Properties:**\n - **--forge-inline-message-background** - The background color. _(default: undefined)_\n- **--forge-inline-message-color** - The text color. _(default: undefined)_\n- **--forge-inline-message-shape** - The shape (border) radius. _(default: undefined)_\n- **--forge-inline-message-padding** - The padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-inline** - The inline padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-block** - The block padding around the content. _(default: undefined)_\n- **--forge-inline-message-border-width** - The border width. _(default: undefined)_\n- **--forge-inline-message-border-style** - The border style. Defaults to `none`. _(default: undefined)_\n- **--forge-inline-message-border-color** - The border color. _(default: undefined)_\n- **--forge-inline-message-gap** - The gap/space between the content elements. _(default: undefined)_\n- **--forge-inline-message-icon-gap** - The gap/space between the icon and the content. _(default: undefined)_\n- **--forge-inline-message-content-gap** - The gap/space between the title and the message. _(default: undefined)_\n- **--forge-inline-message-icon-color** - The icon color. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout element.\n- **container** - The container element for the title and message content.",
-      "attributes": [
-        {
-          "name": "theme",
-          "description": "The theme to apply.",
-          "values": [{ "name": "InlineMessageTheme" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "forge-icon-button",
       "description": "\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\n- **forge-icon-button-toggle** - Fires when the icon button is toggled. Only applies in `toggle` mode.\n\n### **Methods:**\n - **click(): _void_** - Clicks the button.\n- **focus(options: _ExperimentalFocusOptions_): _void_** - Focuses the button.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the icon.\n- **on** - The icon to show when in `toggle` mode when toggled \"on\".\n- **start** - Elements to logically render before the icon.\n- **end** - Elements to logically render after the icon.\n- **badge** - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).\n\n### **CSS Properties:**\n - **--forge-icon-button-display** - The display property of the button. _(default: undefined)_\n- **--forge-icon-button-size** - The height and min-width of the button. _(default: undefined)_\n- **--forge-icon-button-gap** - The gap between the icon content. _(default: undefined)_\n- **--forge-icon-button-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-icon-button-background-color** - The background color of the button. _(default: undefined)_\n- **--forge-icon-button-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-icon-button-cursor** - The cursor of the button. _(default: undefined)_\n- **--forge-icon-button-padding** - The inline padding of the button. _(default: undefined)_\n- **--forge-icon-button-border** - The border of the button. _(default: undefined)_\n- **--forge-icon-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-icon-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-icon-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-icon-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-start** - The start-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-end** - The start-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-start** - The end-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-end** - The end-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-squared** - The squared border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-outlined-border-width** - The border width when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-style** - The border style when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-color** - The border color when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-tonal-icon-color** - The icon color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-tonal-background-color** - The background color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-filled-icon-color** - The icon color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-filled-background-color** - The background color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-raised-shadow** - The shadow when in the raised variant. _(default: undefined)_\n- **--forge-icon-button-raised-hover-shadow** - The shadow when in the raised variant and hovered. _(default: undefined)_\n- **--forge-icon-button-raised-active-shadow** - The shadow when in the raised variant and active. _(default: undefined)_\n- **--forge-icon-button-raised-disabled-shadow** - The shadow when in the raised variant and disabled. _(default: undefined)_\n- **--forge-icon-button-density-small-size** - The size of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-padding** - The padding of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-icon-size** - The size of the icon when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-medium-size** - The size of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-medium-padding** - The padding of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-large-size** - The size of the button when in the large density. _(default: undefined)_\n- **--forge-icon-button-toggle-on-background-color** - The background color of the when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-toggle-on-icon-color** - The color of the icon when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-background-color** - The background color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-icon-color** - The icon color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-background-color** - The background color when in the tonal variant and toggled. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-background-color** - The background color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-icon-color** - The icon color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-background-color** - The background color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-icon-color** - The icon color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-background-color** - The background color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-icon-color** - The icon color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-disabled-cursor** - The cursor when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-disabled-opacity** - The opacity when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-popover-icon-padding** - The padding of the popover icon. _(default: undefined)_\n- **--forge-icon-button-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **focus-indicator** - The focus-indicator indicator element.\n- **state-layer** - The state-layer surface element.",
@@ -1235,6 +1223,18 @@
       ],
       "references": []
     },
+    {
+      "name": "forge-inline-message",
+      "description": "Inline messages are used to provide feedback to the user about a specific action or state.\n---\n\n\n### **Slots:**\n - _default_ - The message text.\n- **title** - The title of the inline message.\n- **icon** - The icon to display.\n\n### **CSS Properties:**\n - **--forge-inline-message-background** - The background color. _(default: undefined)_\n- **--forge-inline-message-color** - The text color. _(default: undefined)_\n- **--forge-inline-message-shape** - The shape (border) radius. _(default: undefined)_\n- **--forge-inline-message-padding** - The padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-inline** - The inline padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-block** - The block padding around the content. _(default: undefined)_\n- **--forge-inline-message-border-width** - The border width. _(default: undefined)_\n- **--forge-inline-message-border-style** - The border style. Defaults to `none`. _(default: undefined)_\n- **--forge-inline-message-border-color** - The border color. _(default: undefined)_\n- **--forge-inline-message-gap** - The gap/space between the content elements. _(default: undefined)_\n- **--forge-inline-message-icon-gap** - The gap/space between the icon and the content. _(default: undefined)_\n- **--forge-inline-message-content-gap** - The gap/space between the title and the message. _(default: undefined)_\n- **--forge-inline-message-icon-color** - The icon color. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout element.\n- **container** - The container element for the title and message content.",
+      "attributes": [
+        {
+          "name": "theme",
+          "description": "The theme to apply.",
+          "values": [{ "name": "InlineMessageTheme" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "forge-keyboard-shortcut",
       "description": "\n---\n\n\n### **Events:**\n - **forge-keyboard-shortcut-activate** - Event fired when the keyboard shortcut is activated.",

package/esm/core/mixins/interactions/moveable/with-moveable.js

@@ -50,15 +50,13 @@ export function WithMoveable(base = class {
                     return;
                 }
             }
-            // Ensure that the surface position stays within the bounds of the screen
-            const newPosition = this._clampPosition(position, this._moveContext);
             // Only update the position if it actually changed
-            if (!this._lastPosition || newPosition.x !== this._lastPosition.x || newPosition.y !== this._lastPosition.y) {
-                const defaultPrevented = this._onMove(newPosition);
+            if (!this._lastPosition || position.x !== this._lastPosition.x || position.y !== this._lastPosition.y) {
+                const defaultPrevented = this._onMove(position);
                 if (!defaultPrevented) {
-                    this._lastPosition = { ...newPosition };
-                    const newX = this._normalizePositionValue(newPosition.x);
-                    const newY = this._normalizePositionValue(newPosition.y);
+                    this._lastPosition = { ...position };
+                    const newX = this._normalizePositionValue(position.x);
+                    const newY = this._normalizePositionValue(position.y);
                     this._updatePosition(newX, newY);
                 }
             }

package/esm/core/utils/utils.d.ts

@@ -168,3 +168,19 @@ export declare function checkVisibility(element: HTMLElement): boolean;
  * @param value - Whether to add or remove the state.
  */
 export declare function toggleState(internals: ElementInternals, state: string, value: boolean): void;
+/**
+ * Determines if an element is clipped by the viewport bounds
+ * @param element The element to check.
+ * @returns `true` if the element is clipped by the viewport, otherwise `false`.
+ */
+export declare function isElementClipped(element: HTMLElement | null): boolean;
+/**
+ * Moves an element into the viewport by adjusting its position to ensure it's fully visible.
+ * @param element The element to move into view.
+ * @param options Configuration options for the viewport adjustment.
+ * @param options.padding The minimum distance from viewport edges (defaults to 8px).
+ * @returns `true` if the position was adjusted, otherwise `false`.
+ */
+export declare function moveElementIntoViewport(element: HTMLElement | null, { padding }?: {
+    padding?: number | undefined;
+}): boolean;

package/esm/core/utils/utils.js

@@ -348,3 +348,70 @@ export function toggleState(internals, state, value) {
         }
     }
 }
+/**
+ * Determines if an element is clipped by the viewport bounds
+ * @param element The element to check.
+ * @returns `true` if the element is clipped by the viewport, otherwise `false`.
+ */
+export function isElementClipped(element) {
+    if (!element) {
+        return false;
+    }
+    const rect = element.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    return rect.top < 0 || rect.left < 0 || rect.bottom > viewportHeight || rect.right > viewportWidth;
+}
+/**
+ * Moves an element into the viewport by adjusting its position to ensure it's fully visible.
+ * @param element The element to move into view.
+ * @param options Configuration options for the viewport adjustment.
+ * @param options.padding The minimum distance from viewport edges (defaults to 8px).
+ * @returns `true` if the position was adjusted, otherwise `false`.
+ */
+export function moveElementIntoViewport(element, { padding = 8 } = {}) {
+    if (!element) {
+        return false;
+    }
+    const rect = element.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    // Get current computed position values
+    const computedStyle = window.getComputedStyle(element);
+    const currentLeft = parseFloat(computedStyle.left) || 0;
+    const currentTop = parseFloat(computedStyle.top) || 0;
+    let newLeft = currentLeft;
+    let newTop = currentTop;
+    // Calculate the adjustments needed to bring the element into view
+    // Handle horizontal positioning
+    if (rect.left < 0) {
+        // Element extends beyond left edge - move it right
+        newLeft = currentLeft - rect.left + padding;
+    }
+    else if (rect.right > viewportWidth) {
+        // Element extends beyond right edge - move it left
+        newLeft = currentLeft - (rect.right - viewportWidth) - padding;
+    }
+    // Handle vertical positioning
+    if (rect.top < 0) {
+        // Element extends beyond top edge - move it down
+        newTop = currentTop - rect.top + padding;
+    }
+    else if (rect.bottom > viewportHeight) {
+        // Element extends beyond bottom edge - move it up
+        newTop = currentTop - (rect.bottom - viewportHeight) - padding;
+    }
+    // Ensure the element doesn't exceed viewport bounds after adjustment
+    // This prevents the element from being too large for the viewport
+    const maxLeft = viewportWidth - rect.width - padding;
+    const maxTop = viewportHeight - rect.height - padding;
+    newLeft = Math.max(padding, Math.min(newLeft, maxLeft));
+    newTop = Math.max(padding, Math.min(newTop, maxTop));
+    // Only apply position changes if they're different from current values
+    if (newLeft !== currentLeft || newTop !== currentTop) {
+        element.style.left = `${newLeft}px`;
+        element.style.top = `${newTop}px`;
+        return true;
+    }
+    return false;
+}

package/esm/dialog/dialog-adapter.d.ts

@@ -25,10 +25,13 @@ export interface IDialogAdapter extends IBaseAdapter<IDialogComponent> {
     showBackdrop(): void;
     addSurfaceClass(className: string): void;
     removeSurfaceClass(className: string): void;
+    moveSurfaceIntoView(): void;
     addFullscreenListener(breakpoint: number, listener: (value: boolean) => void): void;
     removeFullscreenListener(listener: (value: boolean) => void): void;
     setAccessibleLabel(label: string): void;
     setAccessibleDescription(description: string): void;
+    isDialogCompletelyOffScreen(): boolean;
+    isSurfaceClipped(): boolean;
 }
 export declare class DialogAdapter extends BaseAdapter<IDialogComponent> implements IDialogAdapter {
     private _dialogElement;
@@ -59,9 +62,12 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     showBackdrop(): void;
     addSurfaceClass(className: string): void;
     removeSurfaceClass(className: string): void;
+    moveSurfaceIntoView(): void;
     addFullscreenListener(breakpoint: number, listener: (value: boolean) => void): void;
     removeFullscreenListener(listener: (value: boolean) => void): void;
     setAccessibleLabel(label: string): void;
     setAccessibleDescription(description: string): void;
+    isDialogCompletelyOffScreen(): boolean;
+    isSurfaceClipped(): boolean;
     private _forceClose;
 }

package/esm/dialog/dialog-adapter.js

@@ -6,6 +6,7 @@
 import { getShadowElement, playKeyframeAnimation } from '@tylertech/forge-core';
 import { BACKDROP_CONSTANTS } from '../backdrop';
 import { BaseAdapter } from '../core/base/base-adapter';
+import { isElementClipped, moveElementIntoViewport } from '../core/utils/utils';
 import { DialogComponent } from './dialog';
 import { DIALOG_CONSTANTS, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
 export class DialogAdapter extends BaseAdapter {
@@ -133,6 +134,9 @@ export class DialogAdapter extends BaseAdapter {
     removeSurfaceClass(className) {
         this._surfaceElement.classList.remove(className);
     }
+    moveSurfaceIntoView() {
+        moveElementIntoViewport(this._surfaceElement);
+    }
     addFullscreenListener(breakpoint, listener) {
         this._fullscreenMediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);
         this._fullscreenMediaQuery.addEventListener('change', event => listener(event.matches));
@@ -150,6 +154,18 @@ export class DialogAdapter extends BaseAdapter {
     setAccessibleDescription(description) {
         this._accessibleDescriptionElement.textContent = description;
     }
+    isDialogCompletelyOffScreen() {
+        if (!this._surfaceElement) {
+            return false;
+        }
+        const rect = this._surfaceElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        return rect.right <= 0 || rect.left >= viewportWidth || rect.bottom <= 0 || rect.top >= viewportHeight;
+    }
+    isSurfaceClipped() {
+        return isElementClipped(this._surfaceElement);
+    }
     _forceClose() {
         this._surfaceElement.classList.remove(BACKDROP_CONSTANTS.classes.EXITING);
         this._dialogElement.close();

package/esm/dialog/dialog-core.js

@@ -173,6 +173,10 @@ export class DialogCore {
             return event.defaultPrevented;
         };
         const onMoveEnd = () => {
+            // Move dialog back into view if the surface is clipped
+            if (this._adapter.isSurfaceClipped()) {
+                this._adapter.moveSurfaceIntoView();
+            }
             const event = new CustomEvent(DIALOG_CONSTANTS.events.MOVE_END);
             this._adapter.removeSurfaceClass(DIALOG_CONSTANTS.classes.MOVING);
             this._adapter.dispatchHostEvent(event);

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -100,7 +100,7 @@ export class ExpansionPanelAdapter extends BaseAdapter {
         this._triggerElement?.removeAttribute('aria-expanded');
     }
     _getTriggerElementById(id) {
-        if (id) {
+        if (id && this.isConnected) {
             const rootNode = this._component.getRootNode();
             return rootNode.getElementById(id);
         }

package/esm/expansion-panel/expansion-panel-core.js

@@ -148,10 +148,8 @@ export class ExpansionPanelCore {
         if (this._trigger !== value) {
             this._clearTrigger();
             this._trigger = value;
-            if (this._adapter.isConnected) {
-                this._adapter.setTriggerElementById(this._trigger);
-                this._syncTrigger();
-            }
+            this._adapter.setTriggerElementById(this._trigger);
+            this._syncTrigger();
         }
     }
     get triggerElement() {
@@ -161,9 +159,7 @@ export class ExpansionPanelCore {
         if (this._adapter.triggerElement !== el) {
             this._clearTrigger();
             this._adapter.setTriggerElement(el);
-            if (this._adapter.isConnected) {
-                this._syncTrigger();
-            }
+            this._syncTrigger();
         }
     }
 }

package/esm/menu/menu-core.js

@@ -378,10 +378,10 @@ export class MenuCore extends CascadingListDropdownAwareCore {
     _createCascadingElement({ index, options, parentValue }) {
         const menu = this._adapter.createChildMenu(index, parentValue, this._onCascadingChildOpen.bind(this), this._onCascadingChildClose.bind(this), this._onCascadingOptionSelected.bind(this));
         menu.mode = 'cascade';
-        menu.popupOffset = { mainAxis: 0, crossAxis: -8 };
+        menu.popupOffset = { alignmentAxis: -8 };
         menu.dense = this._dense;
         menu.placement = 'right-start';
-        menu.fallbackPlacements = ['left-start', 'right-start', 'bottom', 'top'];
+        menu.fallbackPlacements = ['left-start', 'left-end', 'right-start', 'right-end', 'bottom', 'top'];
         menu.persistSelection = this._persistSelection;
         if (this._persistSelection) {
             menu.selectedValue = this._selectedValue;

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uq6tmnl;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uq6tmnl{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uq6tmog;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uq6tmog{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uq6tmok;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uq6tmok{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uq6tmpb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uq6tmpb{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uq6tmpd;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uq6tmpd{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uq6tmpn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uq6tmpn{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uq6tmqa;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uq6tmqa{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uq6tmqs;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uq6tmqs{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uhqbsid;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbsid{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uhqbsj9;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbsj9{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uhqbsjp;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbsjp{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uhqbskm;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbskm{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uhqbslj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbslj{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uhqbslt;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbslt{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uhqbsm4;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbsm4{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uhqbsmg;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbsmg{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 /**
  * @tag forge-split-view-panel
  *

package/esm/toast/toast-core.js

@@ -76,6 +76,7 @@ export class ToastCore {
         return this._duration;
     }
     set duration(value) {
+        value ?? (value = TOAST_CONSTANTS.defaults.DURATION);
         if (this._duration !== value) {
             this._duration = value;
             if (this._hideTimeout) {