@tylertech/forge 3.3.5 → 3.3.6

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

@@ -425,7 +425,7 @@
           "values": []
         },
         {
-          "name": "defaultChecked",
+          "name": "default-checked",
           "description": "Gets/sets whether the checkbox is checked by default.",
           "values": []
         },
@@ -460,7 +460,7 @@
           "values": []
         },
         {
-          "name": "labelPosition",
+          "name": "label-position",
           "description": "Controls whether the label appears before or after the checkbox.",
           "values": [{ "name": "CheckboxLabelPosition" }]
         }
@@ -786,7 +786,7 @@
           "values": [{ "name": "DialogType" }]
         },
         {
-          "name": "animationType",
+          "name": "animation-type",
           "description": "The animation type of the dialog.",
           "values": [{ "name": "DialogAnimationType" }]
         },
@@ -806,7 +806,7 @@
           "values": []
         },
         {
-          "name": "fullscreenThreshold",
+          "name": "fullscreen-threshold",
           "description": "The screen width at which the dialog will switch to fullscreen.",
           "values": []
         },
@@ -821,12 +821,12 @@
           "values": []
         },
         {
-          "name": "positionStrategy",
+          "name": "position-strategy",
           "description": "Controls whether the dialog is rendered relative to the viewport or its nearest containing block.",
           "values": [{ "name": "DialogPositionStrategy" }]
         },
         {
-          "name": "sizeStrategy",
+          "name": "size-strategy",
           "description": "Controls the block and/or inline size of the dialog. Defaults to the size of the content it contains.",
           "values": [{ "name": "DialogSizeStrategy" }]
         },
@@ -874,7 +874,7 @@
     },
     {
       "name": "forge-field",
-      "description": "The Forge Field component is a basic component that handles the layout and theming of\nform elements that can include a label, various states, and a border around an input area.\n---\n\n\n### **Events:**\n - **forge-field-popover-icon-click** - Dispatches when the user clicks the popover icon.\n\n### **Methods:**\n - **floatLabelWithoutAnimation(value: _boolean_): _void_** - Sets the floating label without animating the transition.\n\n### **Slots:**\n - _default_ - The default/unnamed slot for the field's input.\n- **label** - Renders its content as a positioned label.\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-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- **input** - The element containing the 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 element containing the support text slot.\n- **support-text-end** - The element containing the support text end slot.\n- **focus-indicator** - The focus indicator element.",
+      "description": "The Forge Field component is a basic component that handles the layout and theming of\nform elements that can include a label, various states, and a border around an input area.\n---\n\n\n### **Events:**\n - **forge-field-popover-icon-click** - Dispatches when the user clicks the popover icon.\n- **forge-field-popover-icon-mousedown** - Dispatches when the user presses the mouse button over the popover icon. Cancelable to prevent focus loss.\n\n### **Methods:**\n - **floatLabelWithoutAnimation(value: _boolean_): _void_** - Sets the floating label without animating the transition.\n\n### **Slots:**\n - _default_ - The default/unnamed slot for the field's input.\n- **label** - Renders its content as a positioned label.\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-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- **input** - The element containing the 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 element containing the support text slot.\n- **support-text-end** - The element containing the support text end slot.\n- **focus-indicator** - The focus indicator element.",
       "attributes": [
         {
           "name": "label-position",
@@ -1109,6 +1109,16 @@
       "name": "forge-icon",
       "description": "Icons are used to represent information visually\n---\n\n\n### **Methods:**\n - **layout(): _void_** - Forces a reload of the icon.\n\n### **CSS Properties:**\n - **--forge-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-icon-size** - The size of the icon. Defaults to the font-size of the context it is placed in. _(default: undefined)_\n- **--forge-icon-width** - The width of the icon. _(default: undefined)_\n- **--forge-icon-height** - The height of the icon. _(default: undefined)_\n- **--forge-icon-font-size** - The font size of the icon. _(default: undefined)_\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
       "attributes": [
+        {
+          "name": "external-type",
+          "description": "The type of icon to load externally. Possible values: \"standard\", \"extended\", \"custom\".",
+          "values": [{ "name": "IconExternalType" }]
+        },
+        {
+          "name": "external-url-builder",
+          "description": "A callback that can be provided to generate a URL that will be used to fetch an SVG icon.",
+          "values": [{ "name": "IconUrlBuilder" }]
+        },
         {
           "name": "name",
           "description": "The name of the icon to render.",
@@ -1129,11 +1139,6 @@
           "description": "Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.",
           "values": []
         },
-        {
-          "name": "externalType",
-          "description": "The type of icon to load externally. Possible values: \"standard\" (default), \"extended\", \"custom\".",
-          "values": [{ "name": "IconExternalType" }]
-        },
         {
           "name": "viewbox",
           "description": "A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.",
@@ -1293,7 +1298,7 @@
           "values": []
         },
         {
-          "name": "nonInteractive",
+          "name": "non-interactive",
           "description": "Removes click handling from the label.",
           "values": []
         },
@@ -1786,7 +1791,7 @@
           "values": []
         },
         {
-          "name": "skipUrlChange",
+          "name": "skip-url-change",
           "description": "Sets the skip link to skip browser navigation and scroll to the target element.",
           "values": []
         }
@@ -2001,7 +2006,7 @@
           "values": []
         },
         {
-          "name": "defaultOn",
+          "name": "default-on",
           "description": "Gets/sets whether the switch is on or off by default.",
           "values": []
         },
@@ -2036,7 +2041,7 @@
           "values": [{ "name": "SwitchIconVisibility" }]
         },
         {
-          "name": "labelPosition",
+          "name": "label-position",
           "description": "Controls whether the label appears before or after the switch.",
           "values": [{ "name": "SwitchLabelPosition" }]
         }
@@ -2220,7 +2225,133 @@
     {
       "name": "forge-time-picker",
       "description": "\n---\n",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current value of the time picker.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Whether or not the time picker is open.",
+          "values": []
+        },
+        {
+          "name": "allow-seconds",
+          "description": "Whether or not to allow seconds in the time picker.",
+          "values": []
+        },
+        {
+          "name": "masked",
+          "description": "Whether or not the time picker input should be masked.",
+          "values": []
+        },
+        {
+          "name": "show-mask-format",
+          "description": "Whether or not to show the mask format in the input.",
+          "values": []
+        },
+        {
+          "name": "use-24-hour-time",
+          "description": "Whether or not to use 24-hour time.",
+          "values": []
+        },
+        {
+          "name": "allow-invalid-time",
+          "description": "Whether or not to allow invalid times.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The minimum time that can be selected.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The maximum time that can be selected.",
+          "values": []
+        },
+        {
+          "name": "restricted-times",
+          "description": "An array of times that cannot be selected.",
+          "values": [{ "name": "string[]" }]
+        },
+        {
+          "name": "start-time",
+          "description": "The time to start the time picker at.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The step interval for the time picker.",
+          "values": []
+        },
+        {
+          "name": "allow-input",
+          "description": "Whether or not to allow manual input of the time.",
+          "values": []
+        },
+        {
+          "name": "show-now",
+          "description": "Whether or not to show a \"Now\" button.",
+          "values": []
+        },
+        {
+          "name": "show-hour-options",
+          "description": "Whether or not to display hour options in dropdown.",
+          "values": []
+        },
+        {
+          "name": "custom-options",
+          "description": "An array of custom time picker options.",
+          "values": [{ "name": "ITimePickerOption[]" }]
+        },
+        {
+          "name": "validation-callback",
+          "description": "A callback function to validate the time.",
+          "values": [{ "name": "TimePickerValidationCallback" }]
+        },
+        {
+          "name": "parse-callback",
+          "description": "A callback function to parse the time.",
+          "values": [{ "name": "TimePickerParseCallback" }]
+        },
+        {
+          "name": "format-callback",
+          "description": "A callback function to format the time.",
+          "values": [{ "name": "TimePickerFormatCallback" }]
+        },
+        {
+          "name": "coercion-callback",
+          "description": "A callback function to coerce the time.",
+          "values": [{ "name": "TimePickerCoercionCallback" }]
+        },
+        {
+          "name": "prepare-mask-callback",
+          "description": "A callback function to prepare the mask.",
+          "values": [{ "name": "TimePickerPrepareMaskCallback" }]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether or not the time picker is disabled.",
+          "values": []
+        },
+        {
+          "name": "popup-classes",
+          "description": "The classes to apply to the time picker popup.",
+          "values": [{ "name": "string[]" }]
+        },
+        {
+          "name": "allow-dropdown",
+          "description": "Whether or not to allow the time picker to be a dropdown.",
+          "values": []
+        },
+        {
+          "name": "popup-target",
+          "description": "The target element to attach the popup to.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -2363,7 +2494,7 @@
           "values": []
         },
         {
-          "name": "animationType",
+          "name": "animation-type",
           "description": "Gets/sets the animation type.",
           "values": [
             { "name": "`${ViewSwitcherAnimationType}`" },
@@ -2938,7 +3069,7 @@
           "values": []
         },
         {
-          "name": "defaultChecked",
+          "name": "default-checked",
           "description": "Gets/sets whether the radio is checked by default.",
           "values": []
         },
@@ -2968,7 +3099,7 @@
           "values": []
         },
         {
-          "name": "labelPosition",
+          "name": "label-position",
           "description": "Controls whether the label appears before or after the radio.",
           "values": [{ "name": "RadioLabelPosition" }]
         }
@@ -3136,7 +3267,7 @@
           "values": []
         },
         {
-          "name": "floatLabel",
+          "name": "float-label",
           "description": "Whether the label floats above the field.",
           "values": []
         },
@@ -3166,7 +3297,7 @@
           "values": []
         },
         {
-          "name": "popoverIcon",
+          "name": "popover-icon",
           "description": "Whether the popover icon is displayed.",
           "values": []
         },

package/esm/autocomplete/autocomplete-adapter.js

@@ -129,7 +129,8 @@ export class AutocompleteAdapter extends BaseAdapter {
         window.requestAnimationFrame(() => {
             const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
             if (textField && (textField.popoverIcon || textField.hasAttribute(FIELD_CONSTANTS.attributes.POPOVER_ICON))) {
-                this._component.addEventListener(FIELD_CONSTANTS.events.POPOVER_ICON_CLICK, listener);
+                const eventType = type === 'mousedown' ? FIELD_CONSTANTS.events.POPOVER_ICON_MOUSEDOWN : FIELD_CONSTANTS.events.POPOVER_ICON_CLICK;
+                this._component.addEventListener(eventType, listener);
             }
             const dropdownIcon = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.DROPDOWN_ICON);
             dropdownIcon?.addEventListener(type, listener);

package/esm/calendar/calendar-dropdown/calendar-dropdown.js

@@ -41,7 +41,7 @@ export class CalendarDropdown {
         else {
             await this.dropdownElement.hideAsync();
         }
-        this.dropdownElement.remove();
+        this.dropdownElement?.remove();
         this.dropdownElement = undefined;
         this.calendar = undefined;
     }

package/esm/checkbox/checkbox.d.ts

@@ -102,13 +102,13 @@ export declare class CheckboxComponent extends CheckboxComponent_base implements
     /**
      * Gets/sets whether the checkbox is checked.
      * @default false
-     * @attribute
+     * @attribute checked
      */
     checked: boolean;
     /**
      * Gets/sets whether the checkbox is checked by default.
      * @default false
-     * @attribute
+     * @attribute default-checked
      */
     defaultChecked: boolean;
     /**
@@ -150,7 +150,7 @@ export declare class CheckboxComponent extends CheckboxComponent_base implements
     /**
      * Controls whether the label appears before or after the checkbox.
      * @default 'end'
-     * @attribute
+     * @attribute label-position
      */
     labelPosition: CheckboxLabelPosition;
     /**

package/esm/chip-field/chip-field.js

@@ -12,7 +12,7 @@ import { ChipComponent } from '../chips';
 import { BaseField } from '../field/base/base-field';
 import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
 const template = '<template><forge-field id=\"field\" multiline><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><div class=\"container\" data-forge-field-input><slot name=\"member\"></slot><slot></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
-const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
+const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing)}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
 /**
  * @tag forge-chip-field
  *

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

@@ -63,6 +63,7 @@ export declare class DialogCore implements IDialogCore {
     private _onTriggerClick;
     private _initializeMoveController;
     private _destroyMoveController;
+    private _applyMoveable;
     get open(): boolean;
     set open(value: boolean);
     get mode(): DialogMode;

package/esm/dialog/dialog-core.js

@@ -185,6 +185,14 @@ export class DialogCore {
         this._moveController?.destroy();
         this._moveController = undefined;
     }
+    _applyMoveable({ enabled } = { enabled: this._moveable }) {
+        if (enabled) {
+            this._initializeMoveController();
+        }
+        else {
+            this._destroyMoveController();
+        }
+    }
     get open() {
         return this._open;
     }
@@ -250,6 +258,7 @@ export class DialogCore {
         value = Boolean(value);
         if (this._fullscreen !== value) {
             this._fullscreen = value;
+            this._applyMoveable({ enabled: !this._fullscreen });
             this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
         }
     }
@@ -305,12 +314,7 @@ export class DialogCore {
         if (this._moveable !== value) {
             this._moveable = value;
             if (this._adapter.isConnected && this._open) {
-                if (this._moveable) {
-                    this._initializeMoveController();
-                }
-                else {
-                    this._destroyMoveController();
-                }
+                this._applyMoveable();
             }
             this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.MOVEABLE, this._moveable);
         }

package/esm/dialog/dialog.d.ts

@@ -179,7 +179,7 @@ export declare class DialogComponent extends DialogComponent_base implements IDi
     /**
      * The animation type of the dialog.
      * @default 'zoom'
-     * @attribute
+     * @attribute animation-type
      */
     animationType: DialogAnimationType;
     /**
@@ -203,7 +203,7 @@ export declare class DialogComponent extends DialogComponent_base implements IDi
     /**
      * The screen width at which the dialog will switch to fullscreen.
      * @default 599
-     * @attribute
+     * @attribute fullscreen-threshold
      */
     fullscreenThreshold: number;
     /**
@@ -226,13 +226,13 @@ export declare class DialogComponent extends DialogComponent_base implements IDi
     /**
      * Controls whether the dialog is rendered relative to the viewport or its nearest containing block.
      * @default 'viewport'
-     * @attribute
+     * @attribute position-strategy
      */
     positionStrategy: DialogPositionStrategy;
     /**
      * Controls the block and/or inline size of the dialog. Defaults to the size of the content it contains.
      * @default 'content'
-     * @attribute
+     * @attribute size-strategy
      */
     sizeStrategy: DialogSizeStrategy;
     /**

package/esm/field/base/with-base-field.js

@@ -165,7 +165,7 @@ export function WithBaseField(base) {
         /**
          * Whether the label floats above the field.
          * @default false
-         * @attribute
+         * @attribute float-label
          */
         get floatLabel() {
             return this._fieldElement.floatLabel;
@@ -249,7 +249,7 @@ export function WithBaseField(base) {
         /**
          * Whether the popover icon is displayed.
          * @default false
-         * @attribute
+         * @attribute popover-icon
          */
         get popoverIcon() {
             return this._fieldElement.popoverIcon;

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

@@ -11,8 +11,8 @@ export interface IFieldAdapter extends IBaseAdapter<IFieldComponent> {
     readonly focusIndicator: IFocusIndicatorComponent;
     readonly hasSlottedLabel: boolean;
     addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
-    addPopoverIconClickListener(listener: EventListener): void;
-    removePopoverIconClickListener(listener: EventListener): void;
+    addPopoverIconListener(type: string, listener: EventListener): void;
+    removePopoverIconListener(type: string, listener: EventListener): void;
     setLabelPosition(value: FieldLabelPosition): void;
     setFloatingLabel(value: boolean): void;
     handleSlotChange(slot: HTMLSlotElement): void;
@@ -30,8 +30,8 @@ export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implement
     get hasSlottedLabel(): boolean;
     constructor(component: IFieldComponent);
     addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
-    addPopoverIconClickListener(listener: EventListener): void;
-    removePopoverIconClickListener(listener: EventListener): void;
+    addPopoverIconListener(type: string, listener: EventListener): void;
+    removePopoverIconListener(type: string, listener: EventListener): void;
     /**
      * Moves the label into the container element if the position is inset, or out to the root
      * element otherwise.

package/esm/field/field-adapter.js

@@ -27,11 +27,11 @@ export class FieldAdapter extends BaseAdapter {
     addRootListener(name, listener) {
         this._rootElement.addEventListener(name, listener);
     }
-    addPopoverIconClickListener(listener) {
-        this._popoverIconElement.addEventListener('click', listener);
+    addPopoverIconListener(type, listener) {
+        this._popoverIconElement.addEventListener(type, listener);
     }
-    removePopoverIconClickListener(listener) {
-        this._popoverIconElement.removeEventListener('click', listener);
+    removePopoverIconListener(type, listener) {
+        this._popoverIconElement.removeEventListener(type, listener);
     }
     /**
      * Moves the label into the container element if the position is inset, or out to the root
@@ -50,19 +50,11 @@ export class FieldAdapter extends BaseAdapter {
      * Adds or removes animation classes on the root element.
      */
     setFloatingLabel(value) {
-        // Temporarily lock the input container element width to its current width before the animation starts
-        // to ensure that the element cannot collapse while the animation is executing. The width will be
-        // removed after the animation completes.
-        const { width: inputContainerWidth } = this._inputContainerElement.getBoundingClientRect();
-        if (inputContainerWidth > 0) {
-            this._inputContainerElement.style.setProperty('width', `${inputContainerWidth}px`);
-        }
         const className = value ? FIELD_CONSTANTS.classes.FLOATING_IN : FIELD_CONSTANTS.classes.FLOATING_OUT;
         const animationName = value ? FIELD_CONSTANTS.animations.FLOAT_IN_LABEL : FIELD_CONSTANTS.animations.FLOAT_OUT_LABEL;
         const animationEndListener = (evt) => {
             if (evt.animationName === animationName) {
                 removeClass(className, this._rootElement);
-                this._inputContainerElement.style.removeProperty('width');
                 this._rootElement.removeEventListener('animationend', animationEndListener);
             }
         };

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

@@ -81,6 +81,7 @@ export declare const FIELD_CONSTANTS: {
     };
     events: {
         POPOVER_ICON_CLICK: string;
+        POPOVER_ICON_MOUSEDOWN: string;
     };
     defaults: {
         DEFAULT_VARIANT: import("./base/base-field-constants").FieldVariant;

package/esm/field/field-constants.js

@@ -51,7 +51,8 @@ const parts = {
     FOCUS_INDICATOR: 'focus-indicator'
 };
 const events = {
-    POPOVER_ICON_CLICK: `${elementName}-popover-icon-click`
+    POPOVER_ICON_CLICK: `${elementName}-popover-icon-click`,
+    POPOVER_ICON_MOUSEDOWN: `${elementName}-popover-icon-mousedown`
 };
 const defaults = {
     ...BASE_FIELD_CONSTANTS.defaults

package/esm/field/field-core.d.ts

@@ -49,10 +49,12 @@ export declare class FieldCore implements IFieldCore {
     private _supportTextInset;
     private _slotChangeListener;
     private _popoverIconClickListener;
+    private _popoverIconMousedownListener;
     constructor(_adapter: IFieldAdapter);
     initialize(): void;
     private _onSlotChange;
     private _onPopoverIconClick;
+    private _onPopoverIconMousedown;
     floatLabelWithoutAnimation(value: boolean): void;
     get labelPosition(): FieldLabelPosition;
     set labelPosition(value: FieldLabelPosition);

package/esm/field/field-core.js

@@ -25,6 +25,7 @@ export class FieldCore {
         this._supportTextInset = FIELD_CONSTANTS.defaults.DEFAULT_SUPPORT_TEXT_INSET;
         this._slotChangeListener = this._onSlotChange.bind(this);
         this._popoverIconClickListener = this._onPopoverIconClick.bind(this);
+        this._popoverIconMousedownListener = this._onPopoverIconMousedown.bind(this);
     }
     initialize() {
         this._adapter.addRootListener('slotchange', this._slotChangeListener);
@@ -32,7 +33,8 @@ export class FieldCore {
         this._adapter.tryApplyGlobalConfiguration(['labelPosition', 'variant']);
         this._adapter.setLabelPosition(this._labelPosition);
         if (this._popoverIcon) {
-            this._adapter.addPopoverIconClickListener(this._popoverIconClickListener);
+            this._adapter.addPopoverIconListener('click', this._popoverIconClickListener);
+            this._adapter.addPopoverIconListener('mousedown', this._popoverIconMousedownListener);
         }
     }
     _onSlotChange(evt) {
@@ -41,6 +43,12 @@ export class FieldCore {
     _onPopoverIconClick() {
         this._adapter.dispatchHostEvent(new CustomEvent(FIELD_CONSTANTS.events.POPOVER_ICON_CLICK, { bubbles: true, composed: true }));
     }
+    _onPopoverIconMousedown(evt) {
+        const popoverEvent = new CustomEvent(FIELD_CONSTANTS.events.POPOVER_ICON_MOUSEDOWN, { bubbles: true, composed: true, cancelable: true });
+        this._adapter.dispatchHostEvent(popoverEvent);
+        if (popoverEvent.defaultPrevented)
+            evt.preventDefault();
+    }
     floatLabelWithoutAnimation(value) {
         if (this._floatLabel !== value) {
             this._floatLabel = value;
@@ -174,10 +182,12 @@ export class FieldCore {
                 return;
             }
             if (this._popoverIcon) {
-                this._adapter.addPopoverIconClickListener(this._popoverIconClickListener);
+                this._adapter.addPopoverIconListener('click', this._popoverIconClickListener);
+                this._adapter.addPopoverIconListener('mousedown', this._popoverIconMousedownListener);
             }
             else {
-                this._adapter.removePopoverIconClickListener(this._popoverIconClickListener);
+                this._adapter.removePopoverIconListener('click', this._popoverIconClickListener);
+                this._adapter.removePopoverIconListener('mousedown', this._popoverIconMousedownListener);
             }
         }
     }

package/esm/field/field.d.ts

@@ -86,6 +86,7 @@ declare global {
  * @attribute {boolean} [focus-indicator-allow-focus=false] - Whether the focus indicator should render when the target element matches `:focus` instead of `:focus-visible`.
  *
  * @event {CustomEvent<void>} forge-field-popover-icon-click - Dispatches when the user clicks the popover icon.
+ * @event {CustomEvent<void>} forge-field-popover-icon-mousedown - Dispatches when the user presses the mouse button over the popover icon. Cancelable to prevent focus loss.
  *
  * @cssproperty --forge-field-background - The background of the field surface.
  * @cssproperty --forge-field-tonal-background - The background of the field surface in the tonal variant.