@tylertech/forge 3.9.0-dev.2 → 3.9.0-dev.3

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

@@ -3,34 +3,49 @@
   "version": 1.1,
   "properties": [
     {
-      "name": "--forge-avatar-background",
-      "description": "The background color of the avatar.",
-      "values": [{ "name": "string" }]
+      "name": "--forge-badge-background",
+      "description": "The background color.",
+      "values": []
     },
     {
-      "name": "--forge-avatar-shape",
-      "description": "The border radius of the avatar, defaults to 50%.",
-      "values": [{ "name": "number" }]
+      "name": "--forge-badge-color",
+      "description": "The text color.",
+      "values": []
     },
     {
-      "name": "--forge-avatar-color",
-      "description": "The text color of the avatar.",
-      "values": [{ "name": "color" }]
+      "name": "--forge-badge-shape",
+      "description": "The shape radius.",
+      "values": []
     },
     {
-      "name": "--forge-avatar-size",
-      "description": "The height and width of the avatar.",
-      "values": [{ "name": "number" }]
+      "name": "--forge-badge-padding-inline",
+      "description": "The inline padding.",
+      "values": []
     },
     {
-      "name": "--forge-avatar-transition-duration",
-      "description": "The transition duration for animations.",
-      "values": [{ "name": "number" }]
+      "name": "--forge-badge-padding-block",
+      "description": "The block padding.",
+      "values": []
     },
     {
-      "name": "--forge-avatar-transition-timing",
-      "description": "The transition timing function for animations.",
-      "values": [{ "name": "string" }]
+      "name": "--forge-badge-border-width",
+      "description": "The border width.",
+      "values": []
+    },
+    {
+      "name": "--forge-badge-border-color",
+      "description": "The border color.",
+      "values": []
+    },
+    {
+      "name": "--forge-badge-border-style",
+      "description": "The border style.",
+      "values": []
+    },
+    {
+      "name": "--forge-badge-gap",
+      "description": "The spacing between the content within the badge.",
+      "values": []
     },
     {
       "name": "--forge-backdrop-background",
@@ -68,69 +83,34 @@
       "values": []
     },
     {
-      "name": "--forge-badge-background",
-      "description": "The background color.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-color",
-      "description": "The text color.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-shape",
-      "description": "The shape radius.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-padding-inline",
-      "description": "The inline padding.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-padding-block",
-      "description": "The block padding.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-border-width",
-      "description": "The border width.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-border-color",
-      "description": "The border color.",
-      "values": []
-    },
-    {
-      "name": "--forge-badge-border-style",
-      "description": "The border style.",
-      "values": []
+      "name": "--forge-avatar-background",
+      "description": "The background color of the avatar.",
+      "values": [{ "name": "string" }]
     },
     {
-      "name": "--forge-badge-gap",
-      "description": "The spacing between the content within the badge.",
-      "values": []
+      "name": "--forge-avatar-shape",
+      "description": "The border radius of the avatar, defaults to 50%.",
+      "values": [{ "name": "number" }]
     },
     {
-      "name": "--forge-bottom-sheet-desktop-max-width",
-      "description": "The maximum width of the bottom sheet on desktop.",
-      "values": []
+      "name": "--forge-avatar-color",
+      "description": "The text color of the avatar.",
+      "values": [{ "name": "color" }]
     },
     {
-      "name": "--forge-bottom-sheet-desktop-min-width",
-      "description": "The minimum width of the bottom sheet on desktop.",
-      "values": []
+      "name": "--forge-avatar-size",
+      "description": "The height and width of the avatar.",
+      "values": [{ "name": "number" }]
     },
     {
-      "name": "--forge-bottom-sheet-animation-duration",
-      "description": "The duration of the bottom sheet animation to fullscreen.",
-      "values": []
+      "name": "--forge-avatar-transition-duration",
+      "description": "The transition duration for animations.",
+      "values": [{ "name": "number" }]
     },
     {
-      "name": "--forge-bottom-sheet-animation-timing",
-      "description": "The timing function of the bottom sheet animation to fullscreen.",
-      "values": []
+      "name": "--forge-avatar-transition-timing",
+      "description": "The transition timing function for animations.",
+      "values": [{ "name": "string" }]
     },
     {
       "name": "--forge-banner-background",
@@ -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.",
@@ -5424,11 +5424,11 @@
     }
   ],
   "pseudoElements": [
-    { "name": "::part(root)", "description": "The root container element." },
     {
       "name": "::part(root)",
       "description": "The root element of the backdrop."
     },
+    { "name": "::part(root)", "description": "The root container element." },
     {
       "name": "::part(root)",
       "description": "The root element of the bottom sheet."

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

@@ -14,45 +14,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-avatar",
-      "description": "Avatars represent an entity via text or image.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for avatar content if not provided via text/imageUrl.\n\n### **CSS Properties:**\n - **--forge-avatar-background** - The background color of the avatar. _(default: undefined)_\n- **--forge-avatar-shape** - The border radius of the avatar, defaults to 50%. _(default: undefined)_\n- **--forge-avatar-color** - The text color of the avatar. _(default: undefined)_\n- **--forge-avatar-size** - The height and width of the avatar. _(default: undefined)_\n- **--forge-avatar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-avatar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
-      "attributes": [
-        {
-          "name": "text",
-          "description": "The text to display in the avatar.",
-          "values": []
-        },
-        {
-          "name": "letter-count",
-          "description": "Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.",
-          "values": []
-        },
-        {
-          "name": "image-url",
-          "description": "The background image URL to use.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "forge-backdrop",
-      "description": "\n---\n\n\n### **Methods:**\n - **show(): _void_** - Immediately shows the backdrop by setting the `visibility` to `true` without animations.\n- **hide(): _void_** - Immediately hides the backdrop by setting the `visibility` to `false` without animations.\n- **fadeIn(): _Promise<void>_** - Sets the `visibility` to `true` and animates in.\n- **fadeOut(): _Promise<void>_** - Sets the `visibility` to `false` and animates out.\n\n### **CSS Properties:**\n - **--forge-backdrop-background** - The backdrop background color. _(default: undefined)_\n- **--forge-backdrop-opacity** - The backdrop opacity. _(default: undefined)_\n- **--forge-backdrop-z-index** - The backdrop z-index. _(default: undefined)_\n- **--forge-backdrop-enter-animation-duration** - The animation duration for the enter animation. _(default: undefined)_\n- **--forge-backdrop-enter-animation-easing** - The animation easing for the enter animation. _(default: undefined)_\n- **--forge-backdrop-exit-animation-duration** - The animation duration for the exit animation. _(default: undefined)_\n- **--forge-backdrop-exit-animation-easing** - The animation easing for the exit animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the backdrop.",
-      "attributes": [
-        {
-          "name": "visible",
-          "description": "Whether the backdrop is visible.",
-          "values": []
-        },
-        {
-          "name": "fixed",
-          "description": "Whether the backdrop uses \"fixed\" or \"relative\" positioning.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "forge-autocomplete",
       "description": "\n---\n\n\n### **Events:**\n - **forge-autocomplete-change** - Fired when the value changes.\n- **forge-autocomplete-select** -  Fired when an option is selected. Only applies when in \"stateless\" `mode`.\n- **forge-autocomplete-scrolled-bottom** - Fired when the dropdown is scrolled to the bottom. Only applies when `observe-scroll` is enabled.\n\n### **Methods:**\n - **appendOptions(options: _IAutocompleteOption[] | IAutocompleteOptionGroup[]_): _void_** - Adds options to the dropdown while it is open. Has no effect if the dropdown is closed.\n- **openDropdown(): _void_** - Opens the dropdown.\n- **closeDropdown(): _void_** - Closes the dropdown.\n- **forceFilter(opts: _IAutocompleteForceFilterOptions_): _void_** - Forces the filter callback to be executed to update the current selection state with new options.",
@@ -172,27 +133,39 @@
       "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-backdrop",
+      "description": "\n---\n\n\n### **Methods:**\n - **show(): _void_** - Immediately shows the backdrop by setting the `visibility` to `true` without animations.\n- **hide(): _void_** - Immediately hides the backdrop by setting the `visibility` to `false` without animations.\n- **fadeIn(): _Promise<void>_** - Sets the `visibility` to `true` and animates in.\n- **fadeOut(): _Promise<void>_** - Sets the `visibility` to `false` and animates out.\n\n### **CSS Properties:**\n - **--forge-backdrop-background** - The backdrop background color. _(default: undefined)_\n- **--forge-backdrop-opacity** - The backdrop opacity. _(default: undefined)_\n- **--forge-backdrop-z-index** - The backdrop z-index. _(default: undefined)_\n- **--forge-backdrop-enter-animation-duration** - The animation duration for the enter animation. _(default: undefined)_\n- **--forge-backdrop-enter-animation-easing** - The animation easing for the enter animation. _(default: undefined)_\n- **--forge-backdrop-exit-animation-duration** - The animation duration for the exit animation. _(default: undefined)_\n- **--forge-backdrop-exit-animation-easing** - The animation easing for the exit animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the backdrop.",
       "attributes": [
         {
-          "name": "open",
-          "description": "Whether the bottom sheet is open.",
+          "name": "visible",
+          "description": "Whether the backdrop is visible.",
           "values": []
         },
         {
-          "name": "mode",
-          "description": "The mode of the bottom sheet.",
-          "values": [{ "name": "BottomSheetMode" }]
+          "name": "fixed",
+          "description": "Whether the backdrop uses \"fixed\" or \"relative\" positioning.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "forge-avatar",
+      "description": "Avatars represent an entity via text or image.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for avatar content if not provided via text/imageUrl.\n\n### **CSS Properties:**\n - **--forge-avatar-background** - The background color of the avatar. _(default: undefined)_\n- **--forge-avatar-shape** - The border radius of the avatar, defaults to 50%. _(default: undefined)_\n- **--forge-avatar-color** - The text color of the avatar. _(default: undefined)_\n- **--forge-avatar-size** - The height and width of the avatar. _(default: undefined)_\n- **--forge-avatar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-avatar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "The text to display in the avatar.",
+          "values": []
         },
         {
-          "name": "persistent",
-          "description": "Whether the bottom sheet is persistent.",
+          "name": "letter-count",
+          "description": "Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.",
           "values": []
         },
         {
-          "name": "fullscreen",
-          "description": "Whether the bottom sheet is fullscreen.",
+          "name": "image-url",
+          "description": "The background image URL to use.",
           "values": []
         }
       ],
@@ -220,6 +193,33 @@
       ],
       "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.",
+      "attributes": [
+        {
+          "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": "Whether the bottom sheet is persistent.",
+          "values": []
+        },
+        {
+          "name": "fullscreen",
+          "description": "Whether the bottom sheet is fullscreen.",
+          "values": []
+        }
+      ],
+      "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.",
@@ -1268,49 +1268,49 @@
       "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.",
+      "name": "forge-label-value",
+      "description": "Label-value pairs are used to display a label and a value in a compact format.\n---\n\n\n### **Slots:**\n - **label** - The label to display.\n- **value** - The value to display.\n- **icon** - An icon to display next to the label.\n\n### **CSS Properties:**\n - **--forge-label-value-align** - Aligns the label and value. Possible values: `start` (default), `center`, `end`. _(default: undefined)_\n- **--forge-label-value-label-spacing** - The spacing between the label and value. _(default: undefined)_\n- **--forge-label-value-label-block-start-spacing** - The block start spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-block-end-spacing** - The block end spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-color** - The color to apply to the label. _(default: undefined)_\n- **--forge-label-value-icon-spacing** - The spacing between the icon and the label. _(default: undefined)_\n- **--forge-label-value-inline-label-spacing** - The spacing between the label and value when displayed inline. _(default: undefined)_\n- **--forge-label-value-empty-color** - The color to apply to the value when empty. _(default: undefined)_\n- **--forge-label-value-empty-style** - The font-style to apply to the value when empty. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout container element.\n- **label** - The label container element.\n- **value** - The value container element.\n- **icon** - The icon container element.",
       "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.",
+          "name": "empty",
+          "description": "If present, the value will be displayed in an alternative emphasized style.",
           "values": []
         },
         {
-          "name": "non-interactive",
-          "description": "Removes click handling from the label.",
+          "name": "ellipsis",
+          "description": "If present, the value will be truncated with an ellipsis if it overflows its container.",
           "values": []
         },
         {
-          "name": "legend",
-          "description": "Whether or not the label should be associated with an ancestor element.",
+          "name": "inline",
+          "description": "If present, the label and value will be displayed on the same line.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "forge-label-value",
-      "description": "Label-value pairs are used to display a label and a value in a compact format.\n---\n\n\n### **Slots:**\n - **label** - The label to display.\n- **value** - The value to display.\n- **icon** - An icon to display next to the label.\n\n### **CSS Properties:**\n - **--forge-label-value-align** - Aligns the label and value. Possible values: `start` (default), `center`, `end`. _(default: undefined)_\n- **--forge-label-value-label-spacing** - The spacing between the label and value. _(default: undefined)_\n- **--forge-label-value-label-block-start-spacing** - The block start spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-block-end-spacing** - The block end spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-color** - The color to apply to the label. _(default: undefined)_\n- **--forge-label-value-icon-spacing** - The spacing between the icon and the label. _(default: undefined)_\n- **--forge-label-value-inline-label-spacing** - The spacing between the label and value when displayed inline. _(default: undefined)_\n- **--forge-label-value-empty-color** - The color to apply to the value when empty. _(default: undefined)_\n- **--forge-label-value-empty-style** - The font-style to apply to the value when empty. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout container element.\n- **label** - The label container element.\n- **value** - The value container element.\n- **icon** - The icon 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": "empty",
-          "description": "If present, the value will be displayed in an alternative emphasized style.",
+          "name": "for",
+          "description": "The id of the associated element.",
           "values": []
         },
         {
-          "name": "ellipsis",
-          "description": "If present, the value will be truncated with an ellipsis if it overflows its container.",
+          "name": "dynamic",
+          "description": "Propagates changes in the label's text content to the associated element.",
           "values": []
         },
         {
-          "name": "inline",
-          "description": "If present, the label and value will be displayed on the same line.",
+          "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": []
         }
       ],
@@ -1649,7 +1649,7 @@
         },
         {
           "name": "distinct",
-          "description": "Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.",
+          "description": "Enforces that this popover should be the only one open with the same unique value.",
           "values": []
         },
         {
@@ -2651,28 +2651,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-app-bar-search",
-      "description": "\n---\n\n\n### **Events:**\n - **forge-app-bar-search-input** - Emits when the users executes the search via pressing the Enter key while the `<input>` has focus.\n\n### **Slots:**\n - _default_ - The default (unnamed) slot is where child `<input>` elements will be placed.\n- **action** - Places actions at the end of the input.\n\n### **CSS Properties:**\n - **--forge-theme-on-primary** - Controls the border-color of the container outline, the font-color, and icon color. _(default: undefined)_\n- **--forge-theme-on-surface** - Controls the font color of the buttons. _(default: undefined)_\n- **--forge-theme-text-medium** - Controls the placeholder font color. _(default: undefined)_\n- **--forge-app-bar-search-theme-background** - Controls the background-color of the container. _(default: undefined)_\n- **--forge-app-bar-search-theme-background-focused** - Controls the focused background-color of the container. _(default: undefined)_\n- **--forge-app-bar-search-theme-hover-opacity** - Controls the hover opacity of the outline. _(default: undefined)_\n- **--forge-app-bar-search-theme-disabled-opacity** - Controls the disabled opacity of the component. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element\n- **container** - The input container element.\n- **icon-container** - The icon container element.\n- **icon** - The <forge-icon> element.\n- **context** - The context container element.\n- **context-divider** - The context divider element.\n- **context-button** - The context button element.\n- **context-button-text** - The context button text element.\n- **context-button-icon** - The context button icon element.\n- **global-icon-container** - The global icon container element.\n- **global-icon** - The global icon <forge-icon> element.\n- **actions-container** - The action container element around the slot.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "A boolean attribute that, if present, indicates that the input should be disabled.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The value of the input.",
-          "values": []
-        },
-        {
-          "name": "placeholder",
-          "description": "The placeholder text of the input.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "forge-app-bar-profile-button",
       "description": "\n---\n\n\n### **Events:**\n - **forge-profile-card-sign-out** - Fires when the sign out button is clicked.\n- **forge-profile-card-profile** - Fires when the profile button is clicked.",
@@ -2737,6 +2715,28 @@
       ],
       "references": []
     },
+    {
+      "name": "forge-app-bar-search",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-app-bar-search-input** - Emits when the users executes the search via pressing the Enter key while the `<input>` has focus.\n\n### **Slots:**\n - _default_ - The default (unnamed) slot is where child `<input>` elements will be placed.\n- **action** - Places actions at the end of the input.\n\n### **CSS Properties:**\n - **--forge-theme-on-primary** - Controls the border-color of the container outline, the font-color, and icon color. _(default: undefined)_\n- **--forge-theme-on-surface** - Controls the font color of the buttons. _(default: undefined)_\n- **--forge-theme-text-medium** - Controls the placeholder font color. _(default: undefined)_\n- **--forge-app-bar-search-theme-background** - Controls the background-color of the container. _(default: undefined)_\n- **--forge-app-bar-search-theme-background-focused** - Controls the focused background-color of the container. _(default: undefined)_\n- **--forge-app-bar-search-theme-hover-opacity** - Controls the hover opacity of the outline. _(default: undefined)_\n- **--forge-app-bar-search-theme-disabled-opacity** - Controls the disabled opacity of the component. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element\n- **container** - The input container element.\n- **icon-container** - The icon container element.\n- **icon** - The <forge-icon> element.\n- **context** - The context container element.\n- **context-divider** - The context divider element.\n- **context-button** - The context button element.\n- **context-button-text** - The context button text element.\n- **context-button-icon** - The context button icon element.\n- **global-icon-container** - The global icon container element.\n- **global-icon** - The global icon <forge-icon> element.\n- **actions-container** - The action container element around the slot.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "A boolean attribute that, if present, indicates that the input should be disabled.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value of the input.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "The placeholder text of the input.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "forge-button-toggle",
       "description": "\n---\n\n\n### **Events:**\n - **forge-button-toggle-select** - Dispatches when the user toggles the button.\n\n### **Slots:**\n - _default_ - The default/unnamed slot for the button toggle's content.\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\n### **CSS Properties:**\n - **--forge-button-toggle-display** - The `display` style for the button toggle container element. _(default: undefined)_\n- **--forge-button-toggle-min-width** - The minimum width. _(default: undefined)_\n- **--forge-button-toggle-spacing** - The spacing between the button toggle and its content. _(default: undefined)_\n- **--forge-button-toggle-padding-block** - The padding on the block axis. _(default: undefined)_\n- **--forge-button-toggle-padding-inline** - The padding on the inline axis. _(default: undefined)_\n- **--forge-button-toggle-color** - The color of the button toggle content. _(default: undefined)_\n- **--forge-button-toggle-background** - The background of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-cursor** - The cursor of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-border-width** - The border-width of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-border-style** - The border-style of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-border-color** - The border-color of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape** - The shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-start-start** - The start-start shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-start-end** - The start-end shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-end-start** - The end-start shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-end-end** - The end-end shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-selected-background** - The background of the button toggle when selected. _(default: undefined)_\n- **--forge-button-toggle-selected-color** - The color of the button toggle content when selected. _(default: undefined)_\n- **--forge-button-toggle-selected-disabled-background** - The background of the button toggle when selected and disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-opacity** - The opacity of the button toggle when disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-cursor** - The cursor of the button toggle when disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-color** - The color of the button toggle content when disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-background** - The background of the button toggle when disabled. _(default: undefined)_\n- **--forge-button-toggle-transition-duration** - The transition-duration of various properties. _(default: undefined)_\n- **--forge-button-toggle-transition-timing** - The transition-timing of various properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **focus-indicator** - The focus indicator element.\n- **state-layer** - The state layer surface element.",

package/esm/core/utils/dismissible-stack.js

@@ -50,8 +50,11 @@ export class DismissibleStack {
      * @param state The state to pass to the dismiss method of each element
      */
     async dismiss(el, state) {
-        const elements = Array.from(this._dismissibleElements);
-        const elementsAfter = elements.slice(elements.indexOf(el)).reverse();
+        const elements = DismissibleStack.instance.getAll();
+        const elementsAfter = elements
+            .slice(elements.indexOf(el))
+            .filter(element => element === el || element.contains(el))
+            .reverse();
         for (const element of elementsAfter) {
             if (!element[tryDismiss](state)) {
                 break;

package/esm/popover/popover-constants.d.ts

@@ -50,7 +50,6 @@ export declare const POPOVER_CONSTANTS: {
         TRIGGER_TYPE: PopoverTriggerType;
         HOVER_DELAY: number;
         PRESET: PopoverPreset;
-        DISTINCT: string;
     };
 };
 export declare const POPOVER_HOVER_TIMEOUT = 500;

package/esm/popover/popover-constants.js

@@ -40,8 +40,7 @@ const events = {
 const defaults = {
     TRIGGER_TYPE: 'click',
     HOVER_DELAY: 0,
-    PRESET: 'popover',
-    DISTINCT: '<default>'
+    PRESET: 'popover'
 };
 export const POPOVER_CONSTANTS = {
     elementName,

package/esm/popover/popover-core.js

@@ -103,10 +103,13 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
         }
         this._previouslyFocusedElement = this._adapter.captureFocusedElement();
         this._adapter.setOverlayOpen(true);
-        if (this._distinct) {
+        // Popovers can be distinct from each other, meaning that only one popover with the same distinct
+        // value can be open at a time. Let's capture the distinct group context and close any other popovers
+        // that are open in the same context.
+        if (this._distinct != null) {
             const allPopovers = DismissibleStack.instance.getAll().filter(el => el.tagName.toLowerCase() === 'forge-popover');
-            const contextPopovers = allPopovers.filter(popover => popover.distinct === this._distinct);
-            contextPopovers.filter(popover => popover !== this._adapter.hostElement).forEach(popover => (popover.open = false));
+            const contextPopovers = allPopovers.filter(popover => popover.distinct === this._distinct && !popover.persistent);
+            contextPopovers.filter(popover => popover !== this._adapter.hostElement).forEach(popover => popover.hideAsync());
         }
         if (!this.overlayElement.persistent) {
             DismissibleStack.instance.add(this._adapter.hostElement);
@@ -528,14 +531,6 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
         return this._distinct;
     }
     set distinct(value) {
-        value = value ?? null;
-        if (this._distinct !== value) {
-            if (this._adapter.hasHostAttribute(POPOVER_CONSTANTS.attributes.DISTINCT) && !value) {
-                this._distinct = POPOVER_CONSTANTS.defaults.DISTINCT;
-            }
-            else {
-                this._distinct = value;
-            }
-        }
+        this._distinct = value;
     }
 }

package/esm/popover/popover.d.ts

@@ -45,7 +45,7 @@ declare global {
  * @property {number} [hoverDismissDelay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
  * @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
- * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @globalconfig placement
  * @globalconfig animationType
@@ -66,7 +66,7 @@ declare global {
  * @attribute {string} [hover-dismiss-delay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
  * @attribute {string} [preset="popover"] - The preset to use for the popover.
- * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.

package/esm/popover/popover.js

@@ -29,7 +29,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
  * @property {number} [hoverDismissDelay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @property {number} [hoverDelay=0] - The delay in milliseconds before the popover is shown.
  * @property {PopoverPreset} [preset="popover"] - The preset to use for the popover.
- * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @property {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @globalconfig placement
  * @globalconfig animationType
@@ -50,7 +50,7 @@ const styles = '@keyframes zoomin{from{transform:scale(.8)}to{transform:scale(1)
  * @attribute {string} [hover-dismiss-delay=500] - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
  * @attribute {number} [hover-delay=0] - The delay in milliseconds before the popover is shown.
  * @attribute {string} [preset="popover"] - The preset to use for the popover.
- * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open in the same context. Use a unique name otherwise a default context will be used.
+ * @attribute {string | null} [distinct=null] - Enforces that this popover should be the only one open with the same unique value.
  *
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
  * @event {CustomEvent<IPopoverToggleEventData>} forge-popover-toggle - Dispatches after the popover is toggled.
@@ -142,7 +142,7 @@ let PopoverComponent = class PopoverComponent extends OverlayAware {
                 this.preset = newValue;
                 return;
             case POPOVER_CONSTANTS.observedAttributes.DISTINCT:
-                this.distinct = !newValue ? null : newValue.trim();
+                this.distinct = newValue;
                 return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);