@tylertech/forge 3.8.0-dev.2 → 3.8.0-dev.4

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

@@ -97,6 +97,31 @@
           "name": "wrap-option-text",
           "description": "Gets/sets whether the options will wrap their text or not.\nThis only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.",
           "values": []
+        },
+        {
+          "name": "popover-placement",
+          "description": "Gets/sets the placement of the popover.",
+          "values": [{ "name": "OverlayPlacement" }]
+        },
+        {
+          "name": "popover-offset",
+          "description": "Gets/sets the offset of the popover.",
+          "values": [{ "name": "IOverlayOffset" }]
+        },
+        {
+          "name": "popover-flip",
+          "description": "Gets/sets the flip state of the popover.",
+          "values": [{ "name": "OverlayFlipState" }]
+        },
+        {
+          "name": "popover-shift",
+          "description": "Gets/sets whether the popover should shift to fit within the viewport.",
+          "values": [{ "name": "OverlayShiftState" }]
+        },
+        {
+          "name": "popover-fallback-placements",
+          "description": "Gets/sets the fallback placements of the popover.",
+          "values": [{ "name": "PositionPlacement[]" }]
         }
       ],
       "references": []
@@ -140,12 +165,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-badge",
-      "description": "\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
-      "attributes": [],
-      "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)_",
@@ -195,6 +214,12 @@
       ],
       "references": []
     },
+    {
+      "name": "forge-badge",
+      "description": "\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "forge-button",
       "description": "Buttons represent actions that a user can take.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\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 label text.\n- **start** - Elements to logically render before the label text.\n- **end** - Elements to logically render after the label text.\n\n### **CSS Properties:**\n - **--forge-button-primary-color** - The primary color of the button. _(default: undefined)_\n- **--forge-button-text-color** - The text color of the button. Inherits from primary color. _(default: undefined)_\n- **--forge-button-disabled-color** - The disabled color of the button. _(default: undefined)_\n- **--forge-button-padding** - The padding of the button. _(default: undefined)_\n- **--forge-button-display** - The display of the button. _(default: undefined)_\n- **--forge-button-justify** - The flex justify of the button. _(default: undefined)_\n- **--forge-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-button-height** - The height of the button. _(default: undefined)_\n- **--forge-button-min-width** - The min-width of the button. _(default: undefined)_\n- **--forge-button-spacing** - The spacing of the button. _(default: undefined)_\n- **--forge-button-border-width** - The border-width of the button. _(default: undefined)_\n- **--forge-button-border-style** - The border style of the button. _(default: undefined)_\n- **--forge-button-border-color** - The border color of the button. _(default: undefined)_\n- **--forge-button-shape-start-start-radius** - The shape start start radius of the button. _(default: undefined)_\n- **--forge-button-shape-start-end-radius** - The shape start end radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-start-radius** - The shape end start radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-end-radius** - The shape end end radius of the button. _(default: undefined)_\n- **--forge-button-padding-block** - The padding block of the button. _(default: undefined)_\n- **--forge-button-padding-inline** - The padding inline of the button. _(default: undefined)_\n- **--forge-button-background** - The background color of the button. _(default: undefined)_\n- **--forge-button-hover-background** - The background color of the button on hover. _(default: undefined)_\n- **--forge-button-active-background** - The background color of the button on active state. _(default: undefined)_\n- **--forge-button-color** - The text color of the button. _(default: undefined)_\n- **--forge-button-icon-size** - The size of the icon in the button. _(default: undefined)_\n- **--forge-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-button-hover-shadow** - The shadow of the button on hover. _(default: undefined)_\n- **--forge-button-active-shadow** - The shadow of the button on active state. _(default: undefined)_\n- **--forge-button-cursor** - The cursor type of the button. _(default: undefined)_\n- **--forge-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-button-text-padding-inline** - The inline padding of the button when using the text variant. _(default: undefined)_\n- **--forge-button-filled-background** - The background color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-background** - The background color of the disabled filled button. _(default: undefined)_\n- **--forge-button-filled-color** - The text color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-color** - The text color of the disabled filled button. _(default: undefined)_\n- **--forge-button-raised-background** - The background color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-background** - The background color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-color** - The text color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-color** - The text color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-shadow** - The shadow of the raised button. _(default: undefined)_\n- **--forge-button-raised-hover-shadow** - The shadow of the raised button on hover. _(default: undefined)_\n- **--forge-button-raised-active-shadow** - The shadow of the raised button on active state. _(default: undefined)_\n- **--forge-button-raised-disabled-shadow** - The shadow of the disabled raised button. _(default: undefined)_\n- **--forge-button-flat-background** - The background color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-background** - The background color of the disabled flat button. _(default: undefined)_\n- **--forge-button-flat-color** - The text color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-color** - The text color of the disabled flat button. _(default: undefined)_\n- **--forge-button-outlined-background** - The background color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-color** - The text color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-width** - The border width of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-style** - The border style of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-color** - The border color of the outlined button. _(default: undefined)_\n- **--forge-button-link-color** - The text color of the link button. _(default: undefined)_\n- **--forge-button-link-text-decoration** - The text decoration of the link button. _(default: undefined)_\n- **--forge-button-link-height** - The height of the link button. _(default: undefined)_\n- **--forge-button-link-padding** - The padding of the link button. _(default: undefined)_\n- **--forge-button-link-line-height** - The line height of the link button. _(default: undefined)_\n- **--forge-button-link-width** - The width of the link button. _(default: undefined)_\n- **--forge-button-link-hover-text-decoration** - The text decoration of the link button on hover. _(default: undefined)_\n- **--forge-button-link-active-opacity** - The opacity of the link button on active state. _(default: undefined)_\n- **--forge-button-link-transition-duration** - The transition duration of the link button. _(default: undefined)_\n- **--forge-button-link-transition-timing** - The transition timing of the link button. _(default: undefined)_\n- **--forge-button-disabled-cursor** - The cursor type of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-text-color** - The text color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-background** - The background color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-border-color** - The border color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-shadow** - The shadow of the disabled button. _(default: undefined)_\n- **--forge-button-dense-height** - The height of the dense button. _(default: undefined)_\n- **--forge-button-pill-shape** - The shape of the pill button. _(default: undefined)_\n- **--forge-button-pill-padding-inline** - The inline padding of the pill button. _(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.",
@@ -1190,33 +1215,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-label",
-      "description": "The Forge Label component is used to associate a text label with a compatible Forge component.\n---\n\n\n### **Methods:**\n - **update(): _void_** - Updates the targeted element with the label's current text content.",
-      "attributes": [
-        {
-          "name": "for",
-          "description": "The id of the associated element.",
-          "values": []
-        },
-        {
-          "name": "dynamic",
-          "description": "Propagates changes in the label's text content to the associated element.",
-          "values": []
-        },
-        {
-          "name": "non-interactive",
-          "description": "Removes click handling from the label.",
-          "values": []
-        },
-        {
-          "name": "legend",
-          "description": "Whether or not the label should be associated with an ancestor element.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "forge-keyboard-shortcut",
       "description": "\n---\n\n\n### **Events:**\n - **forge-keyboard-shortcut-activate** - Event fired when the keyboard shortcut is activated.",
@@ -1270,25 +1268,29 @@
       "references": []
     },
     {
-      "name": "forge-linear-progress",
-      "description": "Linear progress indicators display progress by animating along a linear track in a horizontal direction.\n---\n\n\n### **CSS Properties:**\n - **--forge-linear-progress-height** - The height of the element. _(default: undefined)_\n- **--forge-linear-progress-track-color** - The background color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-track-shape** - The shape of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-color** - The color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-height** - The height of the indicator only. _(default: undefined)_\n- **--forge-linear-progress-determinate-duration** - The duration of the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-indeterminate-duration** - The duration of the indeterminate animation. _(default: undefined)_\n- **--forge-linear-progress-determinate-easing** - The easing function to use for the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-duration** - The duration of the theme transition. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-timing** - The easing function to use for the theme transition. _(default: undefined)_\n\n### **CSS Parts:**\n - **progressbar** - Styles the progress bar container element",
+      "name": "forge-label",
+      "description": "The Forge Label component is used to associate a text label with a compatible Forge component.\n---\n\n\n### **Methods:**\n - **update(): _void_** - Updates the targeted element with the label's current text content.",
       "attributes": [
         {
-          "name": "determinate",
-          "description": "Controls the determinate state.",
+          "name": "for",
+          "description": "The id of the associated element.",
           "values": []
         },
         {
-          "name": "progress",
-          "description": "Controls the progress while in a determinate state. Accepts values from `0` to `1`.",
+          "name": "dynamic",
+          "description": "Propagates changes in the label's text content to the associated element.",
           "values": []
         },
         {
-          "name": "buffer",
-          "description": "Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.",
+          "name": "non-interactive",
+          "description": "Removes click handling from the label.",
           "values": []
         },
-        { "name": "theme", "description": "Sets the theme.", "values": [] }
+        {
+          "name": "legend",
+          "description": "Whether or not the label should be associated with an ancestor element.",
+          "values": []
+        }
       ],
       "references": []
     },
@@ -1314,6 +1316,29 @@
       ],
       "references": []
     },
+    {
+      "name": "forge-linear-progress",
+      "description": "Linear progress indicators display progress by animating along a linear track in a horizontal direction.\n---\n\n\n### **CSS Properties:**\n - **--forge-linear-progress-height** - The height of the element. _(default: undefined)_\n- **--forge-linear-progress-track-color** - The background color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-track-shape** - The shape of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-color** - The color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-height** - The height of the indicator only. _(default: undefined)_\n- **--forge-linear-progress-determinate-duration** - The duration of the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-indeterminate-duration** - The duration of the indeterminate animation. _(default: undefined)_\n- **--forge-linear-progress-determinate-easing** - The easing function to use for the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-duration** - The duration of the theme transition. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-timing** - The easing function to use for the theme transition. _(default: undefined)_\n\n### **CSS Parts:**\n - **progressbar** - Styles the progress bar container element",
+      "attributes": [
+        {
+          "name": "determinate",
+          "description": "Controls the determinate state.",
+          "values": []
+        },
+        {
+          "name": "progress",
+          "description": "Controls the progress while in a determinate state. Accepts values from `0` to `1`.",
+          "values": []
+        },
+        {
+          "name": "buffer",
+          "description": "Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.",
+          "values": []
+        },
+        { "name": "theme", "description": "Sets the theme.", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "forge-menu",
       "description": "\n---\n\n\n### **Methods:**\n - **propagateKeyEvent(evt: _KeyboardEvent_): _void_** - Force propagates the key event from another element to this component.\n- **activateFirstOption(): _void_** - Activates the first option in the menu when open.",
@@ -1392,6 +1417,31 @@
           "name": "wrap-option-text",
           "description": "Gets/sets whether the options will wrap their text or not.\nThis only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.",
           "values": []
+        },
+        {
+          "name": "popover-placement",
+          "description": "Gets/sets the placement of the popover.",
+          "values": [{ "name": "OverlayPlacement" }]
+        },
+        {
+          "name": "popover-offset",
+          "description": "Gets/sets the offset of the popover.",
+          "values": [{ "name": "IOverlayOffset" }]
+        },
+        {
+          "name": "popover-flip",
+          "description": "Gets/sets the flip state of the popover.",
+          "values": [{ "name": "OverlayFlipState" }]
+        },
+        {
+          "name": "popover-shift",
+          "description": "Gets/sets whether the popover should shift to fit within the viewport.",
+          "values": [{ "name": "OverlayShiftState" }]
+        },
+        {
+          "name": "popover-fallback-placements",
+          "description": "Gets/sets the fallback placements of the popover.",
+          "values": [{ "name": "PositionPlacement[]" }]
         }
       ],
       "references": []
@@ -1635,7 +1685,7 @@
         {
           "name": "shift",
           "description": "Whether the overlay should shift to fit within the viewport.",
-          "values": []
+          "values": [{ "name": "OverlayShiftState" }]
         },
         {
           "name": "hide",
@@ -2475,7 +2525,7 @@
     },
     {
       "name": "forge-app-bar",
-      "description": "\n---\n\n\n### **Events:**\n - **forge-app-bar-navigate** - Fires when the app bar is clicked.\n\n### **Slots:**\n - **logo** - Reserved for the brand logo.\n- **title** - Reserved for the application title. This will overwrite the `titleText` property/attribute.\n- **start** - Places content at the beginning of the app bar.\n- **center** - Places content in the center of the app bar.\n- **end** - Places content at the end of the app bar.\n\n### **CSS Properties:**\n - **--forge-app-bar-background** - The background color of the app bar. _(default: undefined)_\n- **--forge-app-bar-foreground** - The text color of the app bar. _(default: undefined)_\n- **--forge-app-bar-z-index** - The `z-index` of the app bar. _(default: undefined)_\n- **--forge-app-bar-elevation** - The elevation of the app bar. _(default: undefined)_\n- **--forge-app-bar-height** - The height of the app bar. _(default: undefined)_\n- **--forge-app-bar-row-padding** - The inline padding of the app bar. _(default: undefined)_\n- **--forge-app-bar-logo-gap** - The space between the logo and title. _(default: undefined)_\n- **--forge-app-bar-title-padding** - The padding around the title element. _(default: undefined)_\n- **--forge-app-bar-columns** - The grid column track sizes. _(default: undefined)_\n- **--forge-app-bar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-app-bar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **title** - The title element.",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-app-bar-navigate** - Fires when the app bar is clicked.\n\n### **Slots:**\n - **logo** - Reserved for the brand logo.\n- **title** - Reserved for the application title. This will overwrite the `titleText` property/attribute.\n- **start** - Places content at the beginning of the app bar.\n- **center** - Places content in the center of the app bar.\n- **end** - Places content at the end of the app bar.\n\n### **CSS Properties:**\n - **--forge-app-bar-background** - The background color of the app bar. _(default: undefined)_\n- **--forge-app-bar-foreground** - The text color of the app bar. _(default: undefined)_\n- **--forge-app-bar-theme-foreground** - The text color of the app bar when using the **scoped theme mode**. _(default: undefined)_\n- **--forge-app-bar-theme-foreground-muted** - The muted text color of the app bar when using the **scoped theme mode**. _(default: undefined)_\n- **--forge-app-bar-z-index** - The `z-index` of the app bar. _(default: undefined)_\n- **--forge-app-bar-elevation** - The elevation of the app bar. _(default: undefined)_\n- **--forge-app-bar-height** - The height of the app bar. _(default: undefined)_\n- **--forge-app-bar-row-padding** - The inline padding of the app bar. _(default: undefined)_\n- **--forge-app-bar-logo-gap** - The space between the logo and title. _(default: undefined)_\n- **--forge-app-bar-title-padding** - The padding around the title element. _(default: undefined)_\n- **--forge-app-bar-columns** - The grid column track sizes. _(default: undefined)_\n- **--forge-app-bar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-app-bar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **title** - The title element.",
       "attributes": [
         {
           "name": "title-text",
@@ -2501,6 +2551,11 @@
           "name": "target",
           "description": "The `<a>` target of the logo + title area link when `href` is set.",
           "values": []
+        },
+        {
+          "name": "theme-mode",
+          "description": "Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.",
+          "values": []
         }
       ],
       "references": []
@@ -2857,14 +2912,14 @@
       "references": []
     },
     {
-      "name": "forge-deprecated-button",
-      "description": "@deprecated Use the `<forge-button>` element instead.\n\n\n---\n",
+      "name": "forge-deprecated-icon-button",
+      "description": "@deprecated Use the `<forge-icon-button>` element instead.\n\n\n---\n\n\n### **Events:**\n - **forge-icon-button-toggle**",
       "attributes": [],
       "references": []
     },
     {
-      "name": "forge-deprecated-icon-button",
-      "description": "@deprecated Use the `<forge-icon-button>` element instead.\n\n\n---\n\n\n### **Events:**\n - **forge-icon-button-toggle**",
+      "name": "forge-deprecated-button",
+      "description": "@deprecated Use the `<forge-button>` element instead.\n\n\n---\n",
       "attributes": [],
       "references": []
     },
@@ -3229,6 +3284,23 @@
       ],
       "references": []
     },
+    {
+      "name": "forge-option-group",
+      "description": "\n---\n",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Gets/sets the optional group value.",
+          "values": []
+        },
+        {
+          "name": "text",
+          "description": "The text content for the group.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "forge-option",
       "description": "\n---\n",
@@ -3296,23 +3368,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-option-group",
-      "description": "\n---\n",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "Gets/sets the optional group value.",
-          "values": []
-        },
-        {
-          "name": "text",
-          "description": "The text content for the group.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "forge-select",
       "description": "\n---\n\n\n### **Events:**\n - **forge-select-scrolled-bottom** - Dispatched when the dropdown list has scrolled to the bottom.\n- **change** - Dispatched when the user selects a value.\n\n### **Methods:**\n - **floatLabelWithoutAnimation(value: _boolean_): _void_** - Floats the label without an animation. Only applies when the label is inset.\n\n### **Slots:**\n - **value** - The selected text to display\n- **start** - Typically reserved for content/icons that render logically before the default slot content.\n- **end** - Typically reserved content/icons that render logically after the default slot content.\n- **accessory** - Used for content such as a button that is logically connected to the field but should appear distinct from the input.\n- **support-text** - Used for content that provides additional information about the field. Aligns to the inline start of the field.\n- **support-text-end** - Used for content that provides additional information about the field. Aligns to the inline end of the field.\n\n### **CSS Properties:**\n - **--forge-select-placeholder-color** - The color of the placeholder text. _(default: undefined)_\n- **--forge-field-background** - The background of the field surface. _(default: undefined)_\n- **--forge-field-tonal-background** - The background of the field surface in the tonal variant. _(default: undefined)_\n- **--forge-field-tonal-background-hover** - The background of the field surface in the tonal variant on hover. _(default: undefined)_\n- **--forge-field-filled-background** - The background of the field surface in the filled and raised variants. _(default: undefined)_\n- **--forge-field-outline-style** - The style of the field outline. _(default: undefined)_\n- **--forge-field-outline-width** - The width of the field outline. _(default: undefined)_\n- **--forge-field-shape** - The border radius of the field's corners. _(default: undefined)_\n- **--forge-field-height** - The height of the field in its default density. _(default: undefined)_\n- **--forge-field-inset-height** - The height of the field in its default density when the label is inset. _(default: undefined)_\n- **--forge-field-padding-inline** - The inline padding of the field. _(default: undefined)_\n- **--forge-field-padding-inline-start** - The inline start padding of the field. _(default: undefined)_\n- **--forge-field-padding-inline-end** - The inline end padding of the field. _(default: undefined)_\n- **--forge-field-inner-padding-inline** - The padding between elements slotted into the field. _(default: undefined)_\n- **--forge-field-support-text-margin-block** - The margin between the support text and the field. _(default: undefined)_\n- **--forge-field-support-text-gap** - The minimum gap between the support text and the support text end. _(default: undefined)_\n- **--forge-field-support-text-padding-inline** - The inline padding of the support text. _(default: undefined)_\n- **--forge-field-support-text-padding-inline-start** - The inline start padding of the support text. _(default: undefined)_\n- **--forge-field-support-text-padding-inline-end** - The inline end padding of the support text. _(default: undefined)_\n- **--forge-field-label-margin-inline** - The margin between the label and the field when the label is in an inline position. _(default: undefined)_\n- **--forge-field-label-margin-block** - The margin between the label and the field when the label is in the block start position. _(default: undefined)_\n- **--forge-field-required-padding** - The padding between the required indicator and the label. _(default: undefined)_\n- **--forge-field-required-content** - The content of the required indicator. _(default: undefined)_\n- **--forge-field-optional-padding** - The padding between the optional indicator and the label. _(default: undefined)_\n- **--forge-field-optional-content** - The content of the optional indicator. _(default: undefined)_\n- **--forge-field-multiline-resize** - The direction the field can be resized when multiline. _(default: undefined)_\n- **--forge-field-multiline-min-inline-size** - The minimum inline size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-max-inline-size** - The maximum inline size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-min-block-size** - The minimum block size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-max-block-size** - The maximum block size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-popover-icon-transition-duration** - The duration of the popover icon animation. _(default: undefined)_\n- **--forge-field-popover-icon-transition-timing** - The timing function of the popover icon animation. _(default: undefined)_\n- **--forge-field-popover-icon-open-rotation** - The rotation of the popover icon when open. _(default: undefined)_\n- **--forge-field-surface-animation-duration** - The duration of background and outline animations. _(default: undefined)_\n- **--forge-field-surface-animation-timing** - The timing function of background and outline animations. _(default: undefined)_\n- **--forge-field-surface-floating-animation-duration** - The duration of the floating label animation. _(default: undefined)_\n- **--forge-field-surface-floating-animation-timing** - The timing function of the floating label animation. _(default: undefined)_\n- **--forge-field-focus-indicator-width** - The width of the focus indicator. _(default: undefined)_\n- **--forge-field-disabled-opacity** - The opacity of the field when disabled. _(default: undefined)_\n- **--forge-field-disabled-background** - The background of the field when disabled. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **label** - The label element.\n- **text-container** - The element container for the selected text.\n- **text** - The element containing the selected text.\n- **container** - The container element surrounding the input.\n- **input** - The element containing te input slot.\n- **start** - The element containing the start slot.\n- **end** - The element containing the end slot.\n- **popover-icon** - The popover icon element.\n- **accessory** - The element containing the accessory slot.\n- **support-text** - The support text element.\n- **support-text** - The element containing the support text slot.\n- **support-text-end** - The element containing the support text end slot.\n- **outline** - The element containing the forge-focus-indicator element.\n- **focus-indicator** - The focus indicator element.",
@@ -3347,6 +3402,51 @@
           "description": "Gets/sets the open state.",
           "values": []
         },
+        {
+          "name": "sync-popup-width",
+          "description": "Gets/sets whether the popup width is synchronized with the popup target width.",
+          "values": []
+        },
+        {
+          "name": "option-limit",
+          "description": "Gets/sets the maximum number of options to display in the dropdown.",
+          "values": []
+        },
+        {
+          "name": "observe-scroll",
+          "description": "Controls the observation of scroll events on the dropdown.",
+          "values": []
+        },
+        {
+          "name": "observe-scroll-threshold",
+          "description": "The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.",
+          "values": []
+        },
+        {
+          "name": "wrap-option-text",
+          "description": "Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.",
+          "values": []
+        },
+        {
+          "name": "popover-placement",
+          "description": "Gets/sets the placement of the popover.",
+          "values": [{ "name": "OverlayPlacement" }]
+        },
+        {
+          "name": "popover-offset",
+          "description": "Gets/sets the offset of the popover.",
+          "values": [{ "name": "IOverlayOffset" }]
+        },
+        {
+          "name": "popover-flip",
+          "description": "Gets/sets the flip state of the popover.",
+          "values": [{ "name": "OverlayFlipState" }]
+        },
+        {
+          "name": "popover-shift",
+          "description": "Gets/sets whether the popover should shift to fit within the viewport.",
+          "values": [{ "name": "OverlayShiftState" }]
+        },
         {
           "name": "label-position",
           "description": "The position of the label.",
@@ -3478,6 +3578,31 @@
           "name": "wrap-option-text",
           "description": "Gets/sets whether the options will wrap their text or not.\nThis only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.",
           "values": []
+        },
+        {
+          "name": "popover-placement",
+          "description": "Gets/sets the placement of the popover.",
+          "values": [{ "name": "OverlayPlacement" }]
+        },
+        {
+          "name": "popover-offset",
+          "description": "Gets/sets the offset of the popover.",
+          "values": [{ "name": "IOverlayOffset" }]
+        },
+        {
+          "name": "popover-flip",
+          "description": "Gets/sets the flip state of the popover.",
+          "values": [{ "name": "OverlayFlipState" }]
+        },
+        {
+          "name": "popover-shift",
+          "description": "Gets/sets whether the popover should shift to fit within the viewport.",
+          "values": [{ "name": "OverlayShiftState" }]
+        },
+        {
+          "name": "popover-fallback-placements",
+          "description": "Gets/sets the fallback placements of the popover.",
+          "values": [{ "name": "PositionPlacement[]" }]
         }
       ],
       "references": []

package/esm/app-bar/app-bar/app-bar-constants.d.ts

@@ -18,6 +18,7 @@ export declare const APP_BAR_CONSTANTS: {
         THEME: string;
         HREF: string;
         TARGET: string;
+        THEME_MODE: string;
     };
     classes: {
         NO_CENTER: string;
@@ -30,3 +31,4 @@ export declare const APP_BAR_CONSTANTS: {
 };
 export type AppBarElevation = 'none' | 'raised';
 export type AppBarTheme = 'white' | 'custom' | '';
+export type AppBarThemeMode = 'inherit' | 'scoped';

package/esm/app-bar/app-bar/app-bar-constants.js

@@ -10,7 +10,8 @@ const observedAttributes = {
     ELEVATION: 'elevation',
     THEME: 'theme',
     HREF: 'href',
-    TARGET: 'target'
+    TARGET: 'target',
+    THEME_MODE: 'theme-mode'
 };
 const attributes = {
     ...observedAttributes

package/esm/app-bar/app-bar/app-bar-core.d.ts

@@ -4,11 +4,12 @@
  * License: Apache-2.0
  */
 import { IAppBarAdapter } from './app-bar-adapter';
-import { AppBarElevation, AppBarTheme } from './app-bar-constants';
+import { AppBarElevation, AppBarTheme, AppBarThemeMode } from './app-bar-constants';
 export interface IAppBarCore {
     titleText: string;
     elevation: AppBarElevation;
     theme: string;
+    themeMode: AppBarThemeMode;
     href: string;
     target: string;
 }
@@ -19,6 +20,7 @@ export declare class AppBarCore implements IAppBarCore {
     private _theme;
     private _href;
     private _target;
+    private _themeMode;
     private _centerSlotListener;
     private _anchorClickListener;
     constructor(_adapter: IAppBarAdapter);
@@ -34,4 +36,6 @@ export declare class AppBarCore implements IAppBarCore {
     set href(value: string);
     get target(): string;
     set target(value: string);
+    get themeMode(): AppBarThemeMode;
+    set themeMode(value: AppBarThemeMode);
 }

package/esm/app-bar/app-bar/app-bar-core.js

@@ -11,6 +11,7 @@ export class AppBarCore {
         this._elevation = 'raised';
         this._href = '';
         this._target = '';
+        this._themeMode = 'inherit';
         this._centerSlotListener = () => this._adapter.setCenterSlotVisibility();
         this._anchorClickListener = this._onHrefClick.bind(this);
     }
@@ -79,4 +80,13 @@ export class AppBarCore {
             this._adapter.toggleHostAttribute(APP_BAR_CONSTANTS.attributes.TARGET, !!this._target, this._target);
         }
     }
+    get themeMode() {
+        return this._themeMode;
+    }
+    set themeMode(value) {
+        if (this._themeMode !== value) {
+            this._themeMode = value;
+            this._adapter.toggleHostAttribute(APP_BAR_CONSTANTS.attributes.THEME_MODE, this._themeMode !== 'inherit', this._themeMode);
+        }
+    }
 }

package/esm/app-bar/app-bar/app-bar.d.ts

@@ -3,12 +3,13 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { AppBarElevation, AppBarTheme } from './app-bar-constants';
+import { AppBarElevation, AppBarTheme, AppBarThemeMode } from './app-bar-constants';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarComponent extends IBaseComponent {
     titleText: string;
     elevation: AppBarElevation;
     theme: AppBarTheme;
+    themeMode: AppBarThemeMode;
     href: string;
     target: string;
 }
@@ -30,15 +31,19 @@ declare global {
  * @property {AppBarTheme} theme - The theme of the app bar.
  * @property {string} href - The href that will be used to make the logo and title area a clickable link.
  * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
+ * @property {AppBarThemeMode} [themeMode="inherit"] - Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
  *
  * @attribute {string} title-text - The text to display in the title.
  * @attribute {string} [elevation="raised"] - The elevation of the app bar.
  * @attribute {string} theme - The theme of the app bar.
  * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
  * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
+ * @attribute {string} [theme-mode="inherit"] - Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
  *
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
+ * @cssproperty --forge-app-bar-theme-foreground - The text color of the app bar when using the **scoped theme mode**.
+ * @cssproperty --forge-app-bar-theme-foreground-muted - The muted text color of the app bar when using the **scoped theme mode**.
  * @cssproperty --forge-app-bar-z-index - The `z-index` of the app bar.
  * @cssproperty --forge-app-bar-elevation - The elevation of the app bar.
  * @cssproperty --forge-app-bar-height - The height of the app bar.
@@ -61,6 +66,8 @@ declare global {
  * @slot end - Places content at the end of the app bar.
  *
  * @cssclass forge-app-bar - The app bar container element _(required)_.
+ * @cssclass forge-app-bar--scoped - Sets the theme mode to scoped.
+ * @cssclass forge-app-bar-theme - Applies the scoped theme from the app bar to the element.
  * @cssclass forge-app-bar--raised - The app bar container element when raised.
  * @cssclass forge-app-bar__logo - The logo container element.
  * @cssclass forge-app-bar__title - The title container element.
@@ -81,4 +88,5 @@ export declare class AppBarComponent extends BaseComponent implements IAppBarCom
     theme: AppBarTheme;
     href: string;
     target: string;
+    themeMode: AppBarThemeMode;
 }

package/esm/app-bar/app-bar/app-bar.js

@@ -10,7 +10,7 @@ import { AppBarCore } from './app-bar-core';
 import { APP_BAR_CONSTANTS } from './app-bar-constants';
 import { BaseComponent } from '../../core/base/base-component';
 const template = '<template><div class=\"forge-app-bar\" part=\"root\"><div class=\"row\"><div class=\"section\"><slot name=\"start\"></slot><div class=\"logo-title-container\"><slot name=\"logo\"></slot><slot name=\"title\"></slot></div></div><div id=\"center-section\" class=\"section\"><slot name=\"center\"></slot></div><div class=\"section\"><slot name=\"end\"></slot></div></div><div><slot name=\"bottom\"></slot></div></div></template>';
-const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host(:not([theme])){--forge-theme-primary:var(--_app-bar-foreground);--forge-theme-on-primary:rgba(0, 0, 0, 0.87);--forge-theme-text-high:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(255, 255, 255, 0.54);--forge-theme-text-low:rgba(255, 255, 255, 0.38);--forge-theme-outline-high:rgba(255, 255, 255, 0.87);--forge-theme-outline-medium:rgba(255, 255, 255, 0.54);--forge-theme-outline-low:rgba(255, 255, 255, 0.38)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-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));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_app-bar-logo-gap:var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));--_app-bar-logo-font-size:var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));--_app-bar-title-padding:var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));--_app-bar-columns:var(--forge-app-bar-columns, 1fr 1fr 1fr);--_app-bar-transition-duration:var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_app-bar-transition-timing:var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;transition-property:box-shadow,background-color;transition-duration:var(--_app-bar-transition-duration);transition-timing-function:var(--_app-bar-transition-timing);box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;align-items:center;grid-template-columns:var(--_app-bar-columns);height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .row{grid-template-columns:1fr auto}.forge-app-bar .section{display:inline-flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:not(:last-child):not(:first-child){justify-content:center}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:flex;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{box-shadow:var(--_app-bar-elevation)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em;width:1em}::slotted(forge-app-bar-search[slot=center]){width:100%}:host([theme=white]){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}:host([theme=white]) .forge-app-bar{--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black)}';
+const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host(:not([theme]):not([theme-mode=scoped])){--forge-theme-primary:var(--_app-bar-foreground);--forge-theme-on-primary:rgba(0, 0, 0, 0.87);--forge-theme-text-high:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(255, 255, 255, 0.54);--forge-theme-text-low:rgba(255, 255, 255, 0.38);--forge-theme-outline-high:rgba(255, 255, 255, 0.87);--forge-theme-outline-medium:rgba(255, 255, 255, 0.54);--forge-theme-outline-low:rgba(255, 255, 255, 0.38)}:host([theme-mode=scoped]) .forge-app-bar{color:inherit}:host([theme-mode=scoped]) .forge-app-bar .logo-title-container{color:var(--_app-bar-foreground)}:host{--forge-app-bar-theme-foreground:var(--_app-bar-foreground);--forge-app-bar-theme-foreground-muted:rgba(255, 255, 255, 0.54)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-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));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_app-bar-logo-gap:var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));--_app-bar-logo-font-size:var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));--_app-bar-title-padding:var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));--_app-bar-columns:var(--forge-app-bar-columns, 1fr 1fr 1fr);--_app-bar-transition-duration:var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_app-bar-transition-timing:var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_app-bar-theme-foreground:var(--forge-app-bar-theme-foreground, var(--_app-bar-foreground));--_app-bar-theme-foreground-muted:var(--forge-app-bar-theme-foreground-muted, rgba(255, 255, 255, 0.54))}.forge-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;transition-property:box-shadow,background-color;transition-duration:var(--_app-bar-transition-duration);transition-timing-function:var(--_app-bar-transition-timing);box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;align-items:center;grid-template-columns:var(--_app-bar-columns);height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .row{grid-template-columns:1fr auto}.forge-app-bar .section{display:inline-flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:not(:last-child):not(:first-child){justify-content:center}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:flex;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{box-shadow:var(--_app-bar-elevation)}:host([theme-mode=scoped]) ::slotted(:where(forge-tab-bar,forge-icon-button,forge-button)){color:var(--_app-bar-theme-foreground);--forge-tab-active-color:var(--_app-bar-theme-foreground);--forge-tab-inactive-color:var(--_app-bar-theme-foreground-muted)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em}::slotted(forge-app-bar-search[slot=center]){width:100%}:host([theme=white]){--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black);--forge-app-bar-theme-foreground-muted:rgba(0, 0, 0, 0.54)}:host([theme=white]:not([theme-mode=scoped])){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}';
 /**
  * @tag forge-app-bar
  *
@@ -21,15 +21,19 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
  * @property {AppBarTheme} theme - The theme of the app bar.
  * @property {string} href - The href that will be used to make the logo and title area a clickable link.
  * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
+ * @property {AppBarThemeMode} [themeMode="inherit"] - Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
  *
  * @attribute {string} title-text - The text to display in the title.
  * @attribute {string} [elevation="raised"] - The elevation of the app bar.
  * @attribute {string} theme - The theme of the app bar.
  * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
  * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
+ * @attribute {string} [theme-mode="inherit"] - Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
  *
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
+ * @cssproperty --forge-app-bar-theme-foreground - The text color of the app bar when using the **scoped theme mode**.
+ * @cssproperty --forge-app-bar-theme-foreground-muted - The muted text color of the app bar when using the **scoped theme mode**.
  * @cssproperty --forge-app-bar-z-index - The `z-index` of the app bar.
  * @cssproperty --forge-app-bar-elevation - The elevation of the app bar.
  * @cssproperty --forge-app-bar-height - The height of the app bar.
@@ -52,6 +56,8 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
  * @slot end - Places content at the end of the app bar.
  *
  * @cssclass forge-app-bar - The app bar container element _(required)_.
+ * @cssclass forge-app-bar--scoped - Sets the theme mode to scoped.
+ * @cssclass forge-app-bar-theme - Applies the scoped theme from the app bar to the element.
  * @cssclass forge-app-bar--raised - The app bar container element when raised.
  * @cssclass forge-app-bar__logo - The logo container element.
  * @cssclass forge-app-bar__title - The title container element.
@@ -68,7 +74,8 @@ let AppBarComponent = class AppBarComponent extends BaseComponent {
             APP_BAR_CONSTANTS.attributes.ELEVATION,
             APP_BAR_CONSTANTS.attributes.THEME,
             APP_BAR_CONSTANTS.attributes.HREF,
-            APP_BAR_CONSTANTS.attributes.TARGET
+            APP_BAR_CONSTANTS.attributes.TARGET,
+            APP_BAR_CONSTANTS.attributes.THEME_MODE
         ];
     }
     constructor() {
@@ -96,6 +103,9 @@ let AppBarComponent = class AppBarComponent extends BaseComponent {
             case APP_BAR_CONSTANTS.attributes.TARGET:
                 this.target = newValue;
                 break;
+            case APP_BAR_CONSTANTS.attributes.THEME_MODE:
+                this.themeMode = newValue;
+                break;
         }
     }
 };
@@ -114,6 +124,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], AppBarComponent.prototype, "target", void 0);
+__decorate([
+    coreProperty()
+], AppBarComponent.prototype, "themeMode", void 0);
 AppBarComponent = __decorate([
     customElement({
         name: APP_BAR_CONSTANTS.elementName

package/esm/app-bar/help-button/app-bar-help-button.js

@@ -14,7 +14,7 @@ import { IconButtonComponent } from '../../icon-button';
 import { TooltipComponent } from '../../tooltip';
 import { IconRegistry } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><forge-menu placement=\"bottom-end\"><forge-icon-button><forge-icon name=\"help\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\">Help</forge-tooltip></forge-menu></template>';
+const template = '<template><forge-menu placement=\"bottom-end\"><forge-icon-button theme=\"app-bar\"><forge-icon name=\"help\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\">Help</forge-tooltip></forge-menu></template>';
 /**
  * @tag forge-app-bar-help-button
  *