@tylertech/forge 3.9.0-dev.4 → 3.9.1

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

@@ -4462,81 +4462,6 @@
       "description": "The spacing between the list items.",
       "values": []
     },
-    {
-      "name": "--forge-meter-background",
-      "description": "The background color of the meter.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-color",
-      "description": "The color of the meter's bar.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-height",
-      "description": "The block size of the meter.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-shape",
-      "description": "The border radius of the meter.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-bar-inner-shape",
-      "description": "The border radius of the meter's bar.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-tickmarks",
-      "description": "The number of tickmarks to display.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-tickmark-opacity",
-      "description": "The opacity of the tickmarks.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-transition-duration",
-      "description": "The duration of transitions.",
-      "values": []
-    },
-    {
-      "name": "--forge-meter-transition-timing",
-      "description": "The timing function of transitions.",
-      "values": []
-    },
-    {
-      "name": "--forge-theme-success",
-      "description": "The color of the bar when the value is optimal.",
-      "values": []
-    },
-    {
-      "name": "--forge-theme-success-container-low",
-      "description": "The color of the track when the value is optimal.",
-      "values": []
-    },
-    {
-      "name": "--forge-theme-warning",
-      "description": "The color of the bar when the value is suboptimal.",
-      "values": []
-    },
-    {
-      "name": "--forge-theme-warning-container-low",
-      "description": "The color of the track when the value is suboptimal.",
-      "values": []
-    },
-    {
-      "name": "--forge-theme-error",
-      "description": "The color of the bar when the value is least optimal.",
-      "values": []
-    },
-    {
-      "name": "--forge-theme-error-container-low",
-      "description": "The color of the track when the value is least optimal.",
-      "values": []
-    },
     {
       "name": "--forge-list-item-background",
       "description": "The background color.",
@@ -4687,6 +4612,81 @@
       "description": "The gap between the slotted content when in the dense state.",
       "values": []
     },
+    {
+      "name": "--forge-meter-background",
+      "description": "The background color of the meter.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-color",
+      "description": "The color of the meter's bar.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-height",
+      "description": "The block size of the meter.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-shape",
+      "description": "The border radius of the meter.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-bar-inner-shape",
+      "description": "The border radius of the meter's bar.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-tickmarks",
+      "description": "The number of tickmarks to display.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-tickmark-opacity",
+      "description": "The opacity of the tickmarks.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-transition-duration",
+      "description": "The duration of transitions.",
+      "values": []
+    },
+    {
+      "name": "--forge-meter-transition-timing",
+      "description": "The timing function of transitions.",
+      "values": []
+    },
+    {
+      "name": "--forge-theme-success",
+      "description": "The color of the bar when the value is optimal.",
+      "values": []
+    },
+    {
+      "name": "--forge-theme-success-container-low",
+      "description": "The color of the track when the value is optimal.",
+      "values": []
+    },
+    {
+      "name": "--forge-theme-warning",
+      "description": "The color of the bar when the value is suboptimal.",
+      "values": []
+    },
+    {
+      "name": "--forge-theme-warning-container-low",
+      "description": "The color of the track when the value is suboptimal.",
+      "values": []
+    },
+    {
+      "name": "--forge-theme-error",
+      "description": "The color of the bar when the value is least optimal.",
+      "values": []
+    },
+    {
+      "name": "--forge-theme-error-container-low",
+      "description": "The color of the track when the value is least optimal.",
+      "values": []
+    },
     {
       "name": "--forge-meter-group-background",
       "description": "The background color of the meter group.",
@@ -5926,12 +5926,6 @@
       "description": "The component's root container element."
     },
     { "name": "::part(root)", "description": "The root container element." },
-    {
-      "name": "::part(track)",
-      "description": "The element comprising the meter's background."
-    },
-    { "name": "::part(bar)", "description": "The bar representing the value." },
-    { "name": "::part(root)", "description": "The root container element." },
     {
       "name": "::part(text-container)",
       "description": "The container for the text content."
@@ -5945,6 +5939,12 @@
       "description": "The forwarded state layer's internal surface element."
     },
     { "name": "::part(root)", "description": "The root container element." },
+    {
+      "name": "::part(track)",
+      "description": "The element comprising the meter's background."
+    },
+    { "name": "::part(bar)", "description": "The bar representing the value." },
+    { "name": "::part(root)", "description": "The root container element." },
     {
       "name": "::part(track)",
       "description": "The element comprising the meter group's background."

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

@@ -3049,6 +3049,63 @@
       ],
       "references": []
     },
+    {
+      "name": "forge-list-item",
+      "description": "List items are individual rows of content inside of a list.\n---\n\n\n### **Events:**\n - **forge-list-item-select** - Fires when the list item is selected.\n\n### **Slots:**\n - _default_ - The primary text.\n- **secondary-text** - The secondary text.\n- **tertiary-text** - The tertiary text.\n- **start** - The start content.\n- **end** - The end element.\n\n### **CSS Properties:**\n - **--forge-list-item-background** - The background color. _(default: undefined)_\n- **--forge-list-item-shape** - The shape of the list item. _(default: undefined)_\n- **--forge-list-item-padding** - The padding inside of the container element. _(default: undefined)_\n- **--forge-list-item-wrap-padding** - The padding inside of the container element when `wrap` is enabled. _(default: undefined)_\n- **--forge-list-item-margin** - The margin around the host element. _(default: undefined)_\n- **--forge-list-item-height** - The height of the container. _(default: undefined)_\n- **--forge-list-item-indent** - The margin inline state when in the indented state. _(default: undefined)_\n- **--forge-list-item-cursor** - The cursor when interactive. _(default: undefined)_\n- **--forge-list-item-gap** - The gap between the slotted content. _(default: undefined)_\n- **--forge-list-item-text-color** - The text color of the text. _(default: undefined)_\n- **--forge-list-item-text-font-size** - The font size of the text. _(default: undefined)_\n- **--forge-list-item-text-font-weight** - The font weight of the text. _(default: undefined)_\n- **--forge-list-item-text-line-height** - The line height of the text. _(default: undefined)_\n- **--forge-list-item-selected-color** - The foreground color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-background** - The background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-opacity** - The opacity of the background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-start-selected-color** - The color of the start content when in the selected state. _(default: undefined)_\n- **--forge-list-item-end-selected-color** - The color of the end content when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-text-color** - The color of the text when in the selected state. _(default: undefined)_\n- **--forge-list-item-disabled-opacity** - The opacity of the element when in the disabled state. _(default: undefined)_\n- **--forge-list-item-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n- **--forge-list-item-one-line-height** - The line height when in the one/single line state. _(default: undefined)_\n- **--forge-list-item-two-line-height** - The line height when in the two line state. _(default: undefined)_\n- **--forge-list-item-three-line-height** - The line height when in the three line state. _(default: undefined)_\n- **--forge-list-item-dense-one-line-height** - The line height when in the dense one/single line state. _(default: undefined)_\n- **--forge-list-item-dense-two-line-height** - The line height when in the dense two line state. _(default: undefined)_\n- **--forge-list-item-dense-three-line-height** - The line height when in the dense three line state. _(default: undefined)_\n- **--forge-list-item-dense-font-size** - The font size when in the dense state. _(default: undefined)_\n- **--forge-list-item-dense-indent** - The margin inline state when in the dense indented state. _(default: undefined)_\n- **--forge-list-item-dense-gap** - The gap between the slotted content when in the dense state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **text-container** - The container for the text content.\n- **focus-indicator** - The forwarded focus indicator's internal indicator element.\n- **state-layer** - The forwarded state layer's internal surface element.",
+      "attributes": [
+        {
+          "name": "selected",
+          "description": "Applies the selected state to the list item.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Applies the active state to the list item by emulating its focused state.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The unique value of the list item.",
+          "values": []
+        },
+        {
+          "name": "dense",
+          "description": "Applies the dense state to the list item.",
+          "values": []
+        },
+        {
+          "name": "indented",
+          "description": "Applies the indented state by adding margin to the start of the list item.",
+          "values": []
+        },
+        {
+          "name": "two-line",
+          "description": "Sets the list item height to support at least two lines of text.",
+          "values": []
+        },
+        {
+          "name": "three-line",
+          "description": "Sets the list item height to support at least three lines of text.",
+          "values": []
+        },
+        {
+          "name": "wrap",
+          "description": "Sets the list item to wrap its text content.",
+          "values": []
+        },
+        {
+          "name": "noninteractive",
+          "description": "Controls whether the list item will automatically attach itself to interactive slotted elements or not.",
+          "values": []
+        },
+        {
+          "name": "focus-propagation",
+          "description": "Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "forge-meter",
       "description": "Meters display a scalar value within a defined range.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the meter's label.\n- **value** - A textual representation of the meter's value.\n\n### **CSS Properties:**\n - **--forge-meter-background** - The background color of the meter. _(default: undefined)_\n- **--forge-meter-color** - The color of the meter's bar. _(default: undefined)_\n- **--forge-meter-height** - The block size of the meter. _(default: undefined)_\n- **--forge-meter-shape** - The border radius of the meter. _(default: undefined)_\n- **--forge-meter-bar-inner-shape** - The border radius of the meter's bar. _(default: undefined)_\n- **--forge-meter-tickmarks** - The number of tickmarks to display. _(default: undefined)_\n- **--forge-meter-tickmark-opacity** - The opacity of the tickmarks. _(default: undefined)_\n- **--forge-meter-transition-duration** - The duration of transitions. _(default: undefined)_\n- **--forge-meter-transition-timing** - The timing function of transitions. _(default: undefined)_\n- **--forge-theme-success** - The color of the bar when the value is optimal. _(default: undefined)_\n- **--forge-theme-success-container-low** - The color of the track when the value is optimal. _(default: undefined)_\n- **--forge-theme-warning** - The color of the bar when the value is suboptimal. _(default: undefined)_\n- **--forge-theme-warning-container-low** - The color of the track when the value is suboptimal. _(default: undefined)_\n- **--forge-theme-error** - The color of the bar when the value is least optimal. _(default: undefined)_\n- **--forge-theme-error-container-low** - The color of the track when the value is least optimal. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **track** - The element comprising the meter's background.\n- **bar** - The bar representing the value.",
@@ -3131,63 +3188,6 @@
       ],
       "references": []
     },
-    {
-      "name": "forge-list-item",
-      "description": "List items are individual rows of content inside of a list.\n---\n\n\n### **Events:**\n - **forge-list-item-select** - Fires when the list item is selected.\n\n### **Slots:**\n - _default_ - The primary text.\n- **secondary-text** - The secondary text.\n- **tertiary-text** - The tertiary text.\n- **start** - The start content.\n- **end** - The end element.\n\n### **CSS Properties:**\n - **--forge-list-item-background** - The background color. _(default: undefined)_\n- **--forge-list-item-shape** - The shape of the list item. _(default: undefined)_\n- **--forge-list-item-padding** - The padding inside of the container element. _(default: undefined)_\n- **--forge-list-item-wrap-padding** - The padding inside of the container element when `wrap` is enabled. _(default: undefined)_\n- **--forge-list-item-margin** - The margin around the host element. _(default: undefined)_\n- **--forge-list-item-height** - The height of the container. _(default: undefined)_\n- **--forge-list-item-indent** - The margin inline state when in the indented state. _(default: undefined)_\n- **--forge-list-item-cursor** - The cursor when interactive. _(default: undefined)_\n- **--forge-list-item-gap** - The gap between the slotted content. _(default: undefined)_\n- **--forge-list-item-text-color** - The text color of the text. _(default: undefined)_\n- **--forge-list-item-text-font-size** - The font size of the text. _(default: undefined)_\n- **--forge-list-item-text-font-weight** - The font weight of the text. _(default: undefined)_\n- **--forge-list-item-text-line-height** - The line height of the text. _(default: undefined)_\n- **--forge-list-item-selected-color** - The foreground color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-background** - The background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-opacity** - The opacity of the background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-start-selected-color** - The color of the start content when in the selected state. _(default: undefined)_\n- **--forge-list-item-end-selected-color** - The color of the end content when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-text-color** - The color of the text when in the selected state. _(default: undefined)_\n- **--forge-list-item-disabled-opacity** - The opacity of the element when in the disabled state. _(default: undefined)_\n- **--forge-list-item-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n- **--forge-list-item-one-line-height** - The line height when in the one/single line state. _(default: undefined)_\n- **--forge-list-item-two-line-height** - The line height when in the two line state. _(default: undefined)_\n- **--forge-list-item-three-line-height** - The line height when in the three line state. _(default: undefined)_\n- **--forge-list-item-dense-one-line-height** - The line height when in the dense one/single line state. _(default: undefined)_\n- **--forge-list-item-dense-two-line-height** - The line height when in the dense two line state. _(default: undefined)_\n- **--forge-list-item-dense-three-line-height** - The line height when in the dense three line state. _(default: undefined)_\n- **--forge-list-item-dense-font-size** - The font size when in the dense state. _(default: undefined)_\n- **--forge-list-item-dense-indent** - The margin inline state when in the dense indented state. _(default: undefined)_\n- **--forge-list-item-dense-gap** - The gap between the slotted content when in the dense state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **text-container** - The container for the text content.\n- **focus-indicator** - The forwarded focus indicator's internal indicator element.\n- **state-layer** - The forwarded state layer's internal surface element.",
-      "attributes": [
-        {
-          "name": "selected",
-          "description": "Applies the selected state to the list item.",
-          "values": []
-        },
-        {
-          "name": "active",
-          "description": "Applies the active state to the list item by emulating its focused state.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The unique value of the list item.",
-          "values": []
-        },
-        {
-          "name": "dense",
-          "description": "Applies the dense state to the list item.",
-          "values": []
-        },
-        {
-          "name": "indented",
-          "description": "Applies the indented state by adding margin to the start of the list item.",
-          "values": []
-        },
-        {
-          "name": "two-line",
-          "description": "Sets the list item height to support at least two lines of text.",
-          "values": []
-        },
-        {
-          "name": "three-line",
-          "description": "Sets the list item height to support at least three lines of text.",
-          "values": []
-        },
-        {
-          "name": "wrap",
-          "description": "Sets the list item to wrap its text content.",
-          "values": []
-        },
-        {
-          "name": "noninteractive",
-          "description": "Controls whether the list item will automatically attach itself to interactive slotted elements or not.",
-          "values": []
-        },
-        {
-          "name": "focus-propagation",
-          "description": "Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "forge-meter-group",
       "description": "Meter groups display several meters together on one track.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for grouped `<forge-meter>` elements.\n- **label** - Positions a label above the meter group.\n- **value** - A textual representation of the meter's value.\n\n### **CSS Properties:**\n - **--forge-meter-group-background** - The background color of the meter group. _(default: undefined)_\n- **--forge-meter-group-height** - The block size of the meter group. _(default: undefined)_\n- **--forge-meter-group-shape** - The border radius of the meter group. _(default: undefined)_\n- **--forge-meter-group-tickmarks** - The number of tickmarks to display. _(default: undefined)_\n- **--forge-meter-group-tickmark-color** - The color of the tickmarks. _(default: undefined)_\n- **--forge-meter-group-tickmark-opacity** - The opacity of the tickmarks. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **track** - The element comprising the meter group's background.",

package/esm/color-picker/color-picker-core.js

@@ -142,7 +142,7 @@ export class ColorPickerCore {
     _render() {
         this._setGradientColor();
         this._adapter.setPreviewColor(formatRgba(this._rgba));
-        this._adapter.setHexInputValue(`#${this._hex}`);
+        this._adapter.setHexInputValue(formatHex(this._hex, this._allowOpacity));
         this._adapter.setRgbaInputValue(this._rgba);
         this._adapter.setHsvaInputValue(this._hsva);
         this._adapter.updateA11y(this._hsva.h, Math.round(this._hsva.a * 100));
@@ -165,11 +165,12 @@ export class ColorPickerCore {
     }
     set value(value) {
         if (this._value !== value) {
-            this._value = value || DEFAULT_COLOR;
+            this._value = value ?? DEFAULT_COLOR;
             if (!isValidHex(this._value)) {
                 throw new Error('Invalid hex value provided.');
             }
-            this._hex = this._value.replace(/^#/, '');
+            this._value = this._value.replace(/^#/, ''); // Normalize hex value by removing leading hash
+            this._hex = this._value;
             this._setColorFromHex();
             this._adapter.setHostAttribute(COLOR_PICKER_CONSTANTS.attributes.VALUE, this._value);
         }

package/esm/color-picker/color-picker-gradient-slider.d.ts

@@ -13,7 +13,7 @@ export declare class ColorPickerGradientSlider {
     private _downListener;
     private _moveListener;
     private _upListener;
-    constructor(_rootElement: HTMLElement, _changeListener: (x: number, y: number) => void);
+    constructor(_rootElement: HTMLElement, _changeListener: (saturation: number, value: number) => void);
     destroy(): void;
     setValue(saturation: number, value: number): void;
     private _initialize;

package/esm/color-picker/color-picker-gradient-slider.js

@@ -9,6 +9,8 @@ export class ColorPickerGradientSlider {
     constructor(_rootElement, _changeListener) {
         this._rootElement = _rootElement;
         this._changeListener = _changeListener;
+        this._xPercent = 0;
+        this._yPercent = 0;
         this._keydownListener = evt => this._onKeydown(evt);
         this._downListener = evt => this._onDown(evt);
         this._moveListener = evt => this._onMove(evt);
@@ -19,12 +21,9 @@ export class ColorPickerGradientSlider {
         this._unlisten();
     }
     setValue(saturation, value) {
-        window.requestAnimationFrame(() => {
-            const bounds = this._rootElement.getBoundingClientRect();
-            this._xPercent = Math.round(bounds.width * (saturation / 100));
-            this._yPercent = bounds.height - Math.round(bounds.height * (value / 100));
-            this._setThumbPosition(this._xPercent, this._yPercent);
-        });
+        this._xPercent = Math.max(0, Math.min(100, saturation));
+        this._yPercent = Math.max(0, Math.min(100, 100 - value));
+        this._setThumbPosition(this._xPercent, this._yPercent);
     }
     _initialize() {
         this._thumbElement = this._rootElement.querySelector(COLOR_PICKER_CONSTANTS.selectors.GRADIENT_THUMB);
@@ -51,42 +50,30 @@ export class ColorPickerGradientSlider {
         const isArrowUpKey = evt.key === 'ArrowUp' || evt.keyCode === 38;
         const isArrowRightKey = evt.key === 'ArrowRight' || evt.keyCode === 39;
         const isArrowDownKey = evt.key === 'ArrowDown' || evt.keyCode === 40;
-        const bounds = this._rootElement.getBoundingClientRect();
+        const stepSize = 1; // 1% steps
         if (isArrowDownKey) {
             evt.preventDefault();
-            this._yPercent++;
+            this._yPercent = Math.min(100, this._yPercent + stepSize);
         }
         else if (isArrowUpKey) {
             evt.preventDefault();
-            this._yPercent--;
+            this._yPercent = Math.max(0, this._yPercent - stepSize);
         }
         else if (isArrowLeftKey) {
             evt.preventDefault();
-            this._xPercent--;
+            this._xPercent = Math.max(0, this._xPercent - stepSize);
         }
         else if (isArrowRightKey) {
             evt.preventDefault();
-            this._xPercent++;
+            this._xPercent = Math.min(100, this._xPercent + stepSize);
         }
         else if (isEnterKey) {
             evt.preventDefault();
-            // TODO(kieran.nichols): Select the current color
+            // TODO: Select the current color
         }
         else {
             return;
         }
-        if (this._xPercent > bounds.width) {
-            this._xPercent = bounds.width;
-        }
-        else if (this._xPercent < 0) {
-            this._xPercent = 0;
-        }
-        if (this._yPercent > bounds.height) {
-            this._yPercent = bounds.height;
-        }
-        else if (this._yPercent < 0) {
-            this._yPercent = 0;
-        }
         this._setThumbPosition(this._xPercent, this._yPercent);
         this._notify();
     }
@@ -115,21 +102,23 @@ export class ColorPickerGradientSlider {
         const x = isMouseEvent ? evt.clientX : evt.changedTouches[0].clientX;
         const y = isMouseEvent ? evt.clientY : evt.changedTouches[0].clientY;
         const coords = this._calculateSliderPercent(x, y);
-        this._setThumbPosition(coords.x, coords.y);
-        this._xPercent = parseInt(((coords.x / coords.width) * 100).toString(), 10);
-        this._yPercent = Math.abs(parseInt(((coords.y / coords.height) * 100).toString(), 10) - 100);
+        this._xPercent = Math.max(0, Math.min(100, (coords.x / coords.width) * 100));
+        this._yPercent = Math.max(0, Math.min(100, (coords.y / coords.height) * 100));
+        this._setThumbPosition(this._xPercent, this._yPercent);
         this._notify();
     }
     _calculateSliderPercent(absX, absY) {
         return relativeCoords(absX, absY, this._rootElement);
     }
     _setThumbPosition(xPercent, yPercent) {
-        this._thumbElement.style.left = `${xPercent}px`;
-        this._thumbElement.style.top = `${yPercent}px`;
+        this._thumbElement.style.left = `${xPercent}%`;
+        this._thumbElement.style.top = `${yPercent}%`;
     }
     _notify() {
         if (typeof this._changeListener === 'function') {
-            this._changeListener(this._xPercent, this._yPercent);
+            const saturation = this._xPercent;
+            const value = 100 - this._yPercent;
+            this._changeListener(saturation, value);
         }
     }
 }

package/esm/list-dropdown/list-dropdown-utils.js

@@ -285,7 +285,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
             if (!option.disabled && typeof config.cascadingElementFactory === 'function' && Array.isArray(option.options) && option.options.length) {
                 // Create the trailing indicator icon to show that a child menu exists for this option.
                 const optionIconElement = document.createElement('forge-icon');
-                optionIconElement.name = 'arrow_right';
+                optionIconElement.name = 'arrow_right_alt';
                 optionIconElement.slot = 'trailing';
                 listItemElement.appendChild(optionIconElement);
                 const nonDividerOptions = flatOptions.filter(o => !o.divider);

package/esm/menu/menu.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, ensureChild, coreProperty, isDefined } from '@tylertech/forge-core';
-import { tylIconArrowRight } from '@tylertech/tyler-icons';
+import { tylIconArrowRightAlt } from '@tylertech/tyler-icons';
 import { IconRegistry } from '../icon';
 import { ListComponent } from '../list';
 import { ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
@@ -43,7 +43,7 @@ let MenuComponent = class MenuComponent extends ListDropdownAware {
     }
     constructor() {
         super();
-        IconRegistry.define(tylIconArrowRight);
+        IconRegistry.define(tylIconArrowRightAlt);
         this._core = new MenuCore(new MenuAdapter(this));
         attachShadowTemplate(this, template, styles);
     }

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

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

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

@@ -8,6 +8,7 @@ import { ITooltipComponent } from './tooltip';
 export interface ITooltipAdapter extends IBaseAdapter<ITooltipComponent> {
     readonly hostElement: ITooltipComponent;
     readonly anchorElement: HTMLElement | null;
+    readonly hasContent: boolean;
     syncAria(): void;
     detachAria(): void;
     setAnchorElement(element: HTMLElement | null): void;
@@ -22,10 +23,16 @@ export interface ITooltipAdapter extends IBaseAdapter<ITooltipComponent> {
 export declare class TooltipAdapter extends BaseAdapter<ITooltipComponent> implements ITooltipAdapter {
     private _contentElement;
     private _arrowElement;
+    private _defaultSlotElement;
     private _anchorElement;
     private _overlayElement;
     constructor(component: ITooltipComponent);
     get anchorElement(): HTMLElement | null;
+    /**
+     * Tooltips are considered to have content if the default slot has assigned nodes that
+     * are either elements, or text nodes with non-whitespace content.
+     */
+    get hasContent(): boolean;
     syncAria(): void;
     detachAria(): void;
     setAnchorElement(element: HTMLElement | null): void;

package/esm/tooltip/tooltip-adapter.js

@@ -16,10 +16,20 @@ export class TooltipAdapter extends BaseAdapter {
         this._overlayElement = null;
         this._contentElement = getShadowElement(this._component, TOOLTIP_CONSTANTS.selectors.CONTENT);
         this._arrowElement = getShadowElement(this._component, TOOLTIP_CONSTANTS.selectors.ARROW);
+        this._defaultSlotElement = getShadowElement(this._component, TOOLTIP_CONSTANTS.selectors.DEFAULT_SLOT);
     }
     get anchorElement() {
         return this._anchorElement;
     }
+    /**
+     * Tooltips are considered to have content if the default slot has assigned nodes that
+     * are either elements, or text nodes with non-whitespace content.
+     */
+    get hasContent() {
+        return this._defaultSlotElement
+            .assignedNodes({ flatten: true })
+            .some(node => node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+    }
     syncAria() {
         const role = this._component.type === 'description' ? 'tooltip' : null;
         this._component[setDefaultAria]({ role });

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

@@ -51,6 +51,7 @@ export declare const TOOLTIP_CONSTANTS: {
     selectors: {
         readonly CONTENT: ".forge-tooltip";
         readonly ARROW: ".arrow";
+        readonly DEFAULT_SLOT: "slot:not([name])";
     };
 };
 export type TooltipType = 'presentation' | 'label' | 'description';

package/esm/tooltip/tooltip-constants.js

@@ -36,7 +36,8 @@ const defaults = {
 };
 const selectors = {
     CONTENT: '.forge-tooltip',
-    ARROW: '.arrow'
+    ARROW: '.arrow',
+    DEFAULT_SLOT: 'slot:not([name])'
 };
 export const TOOLTIP_CONSTANTS = {
     elementName,

package/esm/tooltip/tooltip-core.js

@@ -96,6 +96,9 @@ export class TooltipCore extends WithLongpressListener(Object) {
         triggerTypes.forEach(triggerType => triggerRemovers[triggerType]());
     }
     _show() {
+        if (!this._adapter.hasContent) {
+            return;
+        }
         this._open = true;
         this._adapter.show();
         DismissibleStack.instance.add(this._adapter.hostElement);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.9.0-dev.4",
+  "version": "3.9.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,12 +13,12 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@floating-ui/dom": "^1.7.0",
-    "@tylertech/forge-core": "^3.2.0",
+    "@floating-ui/dom": "^1.7.1",
+    "@tylertech/forge-core": "^3.2.1",
     "@tylertech/tyler-icons": "^2.0.3",
     "imask": "^7.6.1",
     "lit": "^3.3.0",
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"
-}
+}