@tylertech/forge 3.7.0 → 3.8.0-dev.0

package/dist/switch/forge-switch.css

@@ -49,7 +49,7 @@
   --_switch-state-layer-off-color: var(--forge-switch-state-layer-off-color, var(--_switch-color));
   --_switch-state-layer-dense-width: var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));
   --_switch-state-layer-dense-height: var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));
-  --_switch-disabled-opacity: var(--forge-switch-disabled-opacity, 0.38);
+  --_switch-disabled-opacity: var(--forge-switch-disabled-opacity, 0.54);
   --_switch-handle-active-on-color: var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));
   --_switch-handle-active-off-color: var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));
   --_switch-handle-active-scale: var(--forge-switch-handle-active-scale, 1.2);

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

@@ -112,6 +112,26 @@
       "description": "The spacing between the content within the badge.",
       "values": []
     },
+    {
+      "name": "--forge-bottom-sheet-desktop-max-width",
+      "description": "The maximum width of the bottom sheet on desktop.",
+      "values": []
+    },
+    {
+      "name": "--forge-bottom-sheet-desktop-min-width",
+      "description": "The minimum width of the bottom sheet on desktop.",
+      "values": []
+    },
+    {
+      "name": "--forge-bottom-sheet-animation-duration",
+      "description": "The duration of the bottom sheet animation to fullscreen.",
+      "values": []
+    },
+    {
+      "name": "--forge-bottom-sheet-animation-timing",
+      "description": "The timing function of the bottom sheet animation to fullscreen.",
+      "values": []
+    },
     {
       "name": "--forge-banner-background",
       "description": "The background color of the banner.",
@@ -152,26 +172,6 @@
       "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.",

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

@@ -142,26 +142,32 @@
     },
     {
       "name": "forge-badge",
-      "description": "Badges are non-interactive components used to inform status, counts, or as a descriptive label.\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
+      "description": "\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "forge-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": "dot",
-          "description": "When present, the badge will be a small dot without any content visible.",
+          "name": "open",
+          "description": "Whether the bottom sheet is open.",
           "values": []
         },
         {
-          "name": "theme",
-          "description": "The theme of the badge.",
-          "values": [{ "name": "BadgeTheme" }]
+          "name": "mode",
+          "description": "The mode of the bottom sheet.",
+          "values": [{ "name": "BottomSheetMode" }]
         },
         {
-          "name": "strong",
-          "description": "Controls whether the badge will have a stronger visual appearance.",
+          "name": "persistent",
+          "description": "Whether the bottom sheet is persistent.",
           "values": []
         },
         {
-          "name": "hide",
-          "description": "Controls whether the badge is visible.",
+          "name": "fullscreen",
+          "description": "Whether the bottom sheet is fullscreen.",
           "values": []
         }
       ],
@@ -189,33 +195,6 @@
       ],
       "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.",
@@ -400,13 +379,8 @@
     },
     {
       "name": "forge-card",
-      "description": "Cards are used to group related information and actions about a single subject.\n---\n\n\n### **CSS Properties:**\n - **--forge-card-background** - The background color of the card. _(default: undefined)_\n- **--forge-card-height** - The height of the card. _(default: undefined)_\n- **--forge-card-width** - The width of the card. _(default: undefined)_\n- **--forge-card-outline-color** - The outline color of the card. _(default: undefined)_\n- **--forge-card-outline-width** - The outline width of the card. _(default: undefined)_\n- **--forge-card-outline-style** - The outline style of the card. _(default: undefined)_\n- **--forge-card-elevation** - The elevation/shadow of the card. _(default: undefined)_\n- **--forge-card-padding** - The padding of the card. _(default: undefined)_\n- **--forge-card-shape** - The shape (border-radius) of the card. _(default: undefined)_\n- **--forge-card-overflow** - The overflow of the card. _(default: undefined)_\n- **--forge-card-raised-elevation** - The elevation/shadow of the card when raised. _(default: undefined)_\n- **--forge-card-raised-outline-width** - The outline width of the card when raised. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
+      "description": "\n---\n\n\n### **CSS Properties:**\n - **--forge-card-background** - The background color of the card. _(default: undefined)_\n- **--forge-card-height** - The height of the card. _(default: undefined)_\n- **--forge-card-width** - The width of the card. _(default: undefined)_\n- **--forge-card-outline-color** - The outline color of the card. _(default: undefined)_\n- **--forge-card-outline-width** - The outline width of the card. _(default: undefined)_\n- **--forge-card-outline-style** - The outline style of the card. _(default: undefined)_\n- **--forge-card-elevation** - The elevation/shadow of the card. _(default: undefined)_\n- **--forge-card-padding** - The padding of the card. _(default: undefined)_\n- **--forge-card-shape** - The shape (border-radius) of the card. _(default: undefined)_\n- **--forge-card-overflow** - The overflow of the card. _(default: undefined)_\n- **--forge-card-raised-elevation** - The elevation/shadow of the card when raised. _(default: undefined)_\n- **--forge-card-raised-outline-width** - The outline width of the card when raised. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
       "attributes": [
-        {
-          "name": "raised",
-          "description": "Whether the card has elevation or not.",
-          "values": []
-        },
         {
           "name": "no-padding",
           "description": "Removes the default padding from the card.",
@@ -878,6 +852,11 @@
           "name": "animation-type",
           "description": "The type of animation to use when opening/closing the panel.",
           "values": [{ "name": "ExpansionPanelAnimationType" }]
+        },
+        {
+          "name": "trigger",
+          "description": "The id of the button that the expansion panel is associated with.",
+          "values": []
         }
       ],
       "references": []
@@ -1486,7 +1465,7 @@
         {
           "name": "shift",
           "description": "Whether or not the anchor element should shift along the side of the overlay when scrolling.",
-          "values": []
+          "values": [{ "name": "OverlayShiftState" }]
         },
         {
           "name": "flip",

package/esm/app-bar/notification-button/app-bar-notification-button-adapter.js

@@ -4,12 +4,11 @@
  * License: Apache-2.0
  */
 import { getLightElement, toggleAttribute } from '@tylertech/forge-core';
-import { BADGE_CONSTANTS } from '../../badge';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { ICON_CONSTANTS } from '../../icon';
-import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
 import { forwardAttributes } from '../../core/utils/reflect-utils';
+import { ICON_CONSTANTS } from '../../icon';
 import { ICON_BUTTON_CONSTANTS } from '../../icon-button/icon-button-constants';
+import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
 export class AppBarNotificationButtonAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -19,7 +18,7 @@ export class AppBarNotificationButtonAdapter extends BaseAdapter {
     }
     initialize() {
         this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
-        this._badgeElement = getLightElement(this._component, BADGE_CONSTANTS.elementName);
+        this._badgeElement = getLightElement(this._component, 'forge-badge');
         this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName);
         const originalAriaLabelledby = this._iconButtonElement.getAttribute('aria-labelledby');
         this._forwardObserver = forwardAttributes(this._component, APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
@@ -40,7 +39,7 @@ export class AppBarNotificationButtonAdapter extends BaseAdapter {
         this._badgeElement.dot = dot;
     }
     setBadgeTheme(theme) {
-        toggleAttribute(this._badgeElement, !!theme, BADGE_CONSTANTS.attributes.THEME, theme);
+        toggleAttribute(this._badgeElement, !!theme, 'theme', theme);
     }
     setBadgeVisible(isVisible) {
         this._badgeElement.hide = !isVisible;

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

@@ -4,9 +4,9 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachLightTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
+import { attachLightTemplate, coerceBoolean, coreProperty, customElement } from '@tylertech/forge-core';
 import { tylIconNotifications } from '@tylertech/tyler-icons/standard';
-import { BadgeComponent } from '../../badge';
+import { defineBadgeComponent } from '../../badge';
 import { BaseComponent } from '../../core/base/base-component';
 import { IconComponent, IconRegistry } from '../../icon';
 import { IconButtonComponent } from '../../icon-button';
@@ -76,6 +76,9 @@ let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent
         }
     }
 };
+(() => {
+    defineBadgeComponent();
+})();
 __decorate([
     coreProperty()
 ], AppBarNotificationButtonComponent.prototype, "count", void 0);
@@ -94,7 +97,7 @@ __decorate([
 AppBarNotificationButtonComponent = __decorate([
     customElement({
         name: APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.elementName,
-        dependencies: [IconButtonComponent, TooltipComponent, BadgeComponent, IconComponent]
+        dependencies: [IconButtonComponent, TooltipComponent, IconComponent]
     })
 ], AppBarNotificationButtonComponent);
 export { AppBarNotificationButtonComponent };

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

@@ -14,7 +14,7 @@ import { defineAvatarComponent } from '../../avatar';
 import { TooltipComponent } from '../../tooltip';
 import { BaseComponent } from '../../core/base/base-component';
 import { PopoverComponent } from '../../popover/popover';
-const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\"></forge-avatar></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\">View profile</forge-tooltip></template>';
+const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\"></forge-avatar></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom-end\">View profile</forge-tooltip></template>';
 /**
  * @tag forge-app-bar-profile-button
  *

package/esm/autocomplete/autocomplete-adapter.js

@@ -68,8 +68,8 @@ export class AutocompleteAdapter extends BaseAdapter {
         this.setBusyVisibility(false);
         this._tryToggleDropdownIconRotation(false);
         this._inputElement?.removeAttribute('aria-activedescendant');
-        this._inputElement?.removeAttribute('aria-controls');
         this._inputElement?.setAttribute('aria-expanded', 'false');
+        setAriaControls(this._inputElement);
         if (!this._listDropdown) {
             return;
         }

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

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export declare const AVATAR_CONSTANTS: {
     elementName: "forge-avatar";
     attributes: {

package/esm/avatar/avatar-constants.js

@@ -13,6 +13,7 @@ const attributes = {
 const numbers = {
     DEFAULT_LETTER_COUNT: 2
 };
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export const AVATAR_CONSTANTS = {
     elementName,
     attributes,

package/esm/avatar/avatar.d.ts

@@ -14,7 +14,7 @@ declare global {
         'forge-avatar': IAvatarComponent;
     }
 }
-export declare const AVATAR_TAG_NAME = "forge-avatar";
+export declare const AVATAR_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-avatar
  *

package/esm/avatar/avatar.js

@@ -75,7 +75,7 @@ let AvatarComponent = class AvatarComponent extends LitElement {
         part="root"
         class=${classMap({ 'forge-avatar': true, 'forge-avatar--image': !!this._image })}
         style=${this._image ? styleMap({ backgroundImage: `url(${this._image.src})` }) : nothing}>
-        <slot>${charsByLetterCount(this.text, this.letterCount ?? AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT)}</slot>
+        <slot>${this._image ? nothing : charsByLetterCount(this.text, this.letterCount ?? AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT)}</slot>
       </div>
     `;
     }

package/esm/badge/badge-component-delegate.js

@@ -4,12 +4,11 @@
  * License: Apache-2.0
  */
 import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
-import { BADGE_CONSTANTS } from './badge-constants';
 export class BadgeComponentDelegate extends BaseComponentDelegate {
     constructor(config) {
         super(config);
     }
     _build() {
-        return document.createElement(BADGE_CONSTANTS.elementName);
+        return document.createElement('forge-badge');
     }
 }

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

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { Theme } from '../constants';
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export declare const BADGE_CONSTANTS: {
     elementName: "forge-badge";
     attributes: {

package/esm/badge/badge-constants.js

@@ -20,6 +20,7 @@ const selectors = {
 const defaults = {
     THEME: 'default'
 };
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export const BADGE_CONSTANTS = {
     elementName,
     attributes,

package/esm/badge/badge.d.ts

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { BadgeTheme } from './badge-constants';
-export interface IBadgeComponent extends IBaseComponent {
+export interface IBadgeComponent extends LitElement {
     dot: boolean;
     theme: BadgeTheme;
     strong: boolean;
@@ -16,21 +16,10 @@ declare global {
         'forge-badge': IBadgeComponent;
     }
 }
+export declare const BADGE_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-badge
  *
- * @summary Badges are non-interactive components used to inform status, counts, or as a descriptive label.
- *
- * @property {boolean} [dot=false] - Controls whether the badge will be a small dot without any content visible.
- * @property {BadgeTheme} [theme="default"] - The theme of the badge.
- * @property {boolean} [strong=false] - Controls whether the badge will have a stronger visual appearance.
- * @property {boolean} [hide=false] - Controls whether the badge is visible.
- *
- * @attribute {boolean} [dot=false] - When present, the badge will be a small dot without any content visible.
- * @attribute {BadgeTheme} [theme="default"] - The theme of the badge.
- * @attribute {boolean} [strong=false] - Controls whether the badge will have a stronger visual appearance.
- * @attribute {boolean} [hide=false] - Controls whether the badge is visible.
- *
  * @cssproperty --forge-badge-background - The background color.
  * @cssproperty --forge-badge-color - The text color.
  * @cssproperty --forge-badge-shape - The shape radius.
@@ -45,18 +34,26 @@ declare global {
  * @slot start - Content placed before the default content.
  * @slot end - Content placed after the default content.
  *
+ * @state dot - The badge is rendered as a dot.
+ * @state strong - The badge has a stronger visual appearance.
+ * @state hide - The badge is hidden.
+ *
  * @cssclass forge-badge - The badge class _(required)_.
  * @cssclass forge-badge--dot - Renders the badge as a dot.
  * @cssclass forge-badge__icon - Styles a child element as an icon.
  */
-export declare class BadgeComponent extends BaseComponent implements IBadgeComponent {
+export declare class BadgeComponent extends LitElement implements IBadgeComponent {
+    #private;
+    static styles: import("lit").CSSResult;
     constructor();
-    get dot(): boolean;
-    set dot(value: boolean);
-    get theme(): BadgeTheme;
-    set theme(value: BadgeTheme);
-    get strong(): boolean;
-    set strong(value: boolean);
-    get hide(): boolean;
-    set hide(value: boolean);
+    /** Controls whether the badge will be a small dot without any content visible. */
+    dot: boolean;
+    /** The theme of the badge. */
+    theme: BadgeTheme;
+    /** Controls whether the badge will have a stronger visual appearance. */
+    strong: boolean;
+    /** Controls whether the badge is visible. */
+    hide: boolean;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
 }

package/esm/badge/badge.js

@@ -3,27 +3,16 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { BADGE_CONSTANTS } from './badge-constants';
-const template = '<template><div class=\"forge-badge\" part=\"root\"><slot name=\"start\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"end\"></slot></div></template>';
-const styles = ':host{display:flex;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:inline-flex;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;box-sizing:border-box;pointer-events:none;transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}.forge-badge .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host([hide]) .forge-badge{transform:scale(0)}:host([dot]) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host([dot]) .forge-badge>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host([strong][theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([strong][theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host([strong][theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host([strong][theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host([strong][theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not([strong]):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container-low, #f6e0e4));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host([strong]:is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not([strong]):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host([strong]:is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not([strong])[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host([strong][theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
+var _BadgeComponent_internals;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+const styles = ':host{display:flex;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:inline-flex;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;box-sizing:border-box;pointer-events:none;transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}.forge-badge .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host(:where([hide],:state(hidden))) .forge-badge{transform:scale(0)}:host(:where([dot],:state(dot))) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host(:where([dot],:state(dot))) .content>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host(:where([strong],:state(strong))[theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([strong],:state(strong))[theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([strong],:state(strong))[theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host(:where([strong],:state(strong))[theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host(:where([strong],:state(strong))[theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not(:where([strong],:state(strong))):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container-low, #f6e0e4));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host(:where([strong],:state(strong)):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not(:where([strong],:state(strong))):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host(:where([strong],:state(strong)):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not(:where([strong],:state(strong)))[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host(:where([strong],:state(strong))[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
+import { toggleState } from '../core';
+export const BADGE_TAG_NAME = 'forge-badge';
 /**
  * @tag forge-badge
  *
- * @summary Badges are non-interactive components used to inform status, counts, or as a descriptive label.
- *
- * @property {boolean} [dot=false] - Controls whether the badge will be a small dot without any content visible.
- * @property {BadgeTheme} [theme="default"] - The theme of the badge.
- * @property {boolean} [strong=false] - Controls whether the badge will have a stronger visual appearance.
- * @property {boolean} [hide=false] - Controls whether the badge is visible.
- *
- * @attribute {boolean} [dot=false] - When present, the badge will be a small dot without any content visible.
- * @attribute {BadgeTheme} [theme="default"] - The theme of the badge.
- * @attribute {boolean} [strong=false] - Controls whether the badge will have a stronger visual appearance.
- * @attribute {boolean} [hide=false] - Controls whether the badge is visible.
- *
  * @cssproperty --forge-badge-background - The background color.
  * @cssproperty --forge-badge-color - The text color.
  * @cssproperty --forge-badge-shape - The shape radius.
@@ -38,45 +27,66 @@ const styles = ':host{display:flex;box-sizing:border-box}:host([hidden]){display
  * @slot start - Content placed before the default content.
  * @slot end - Content placed after the default content.
  *
+ * @state dot - The badge is rendered as a dot.
+ * @state strong - The badge has a stronger visual appearance.
+ * @state hide - The badge is hidden.
+ *
  * @cssclass forge-badge - The badge class _(required)_.
  * @cssclass forge-badge--dot - Renders the badge as a dot.
  * @cssclass forge-badge__icon - Styles a child element as an icon.
  */
-let BadgeComponent = class BadgeComponent extends BaseComponent {
+let BadgeComponent = class BadgeComponent extends LitElement {
     constructor() {
         super();
-        attachShadowTemplate(this, template, styles);
-    }
-    get dot() {
-        return this.hasAttribute(BADGE_CONSTANTS.attributes.DOT);
-    }
-    set dot(value) {
-        this.toggleAttribute(BADGE_CONSTANTS.attributes.DOT, value);
-    }
-    get theme() {
-        return this.getAttribute(BADGE_CONSTANTS.attributes.THEME) ?? BADGE_CONSTANTS.defaults.THEME;
+        _BadgeComponent_internals.set(this, void 0);
+        /** Controls whether the badge will be a small dot without any content visible. */
+        this.dot = false;
+        /** The theme of the badge. */
+        this.theme = 'default';
+        /** Controls whether the badge will have a stronger visual appearance. */
+        this.strong = false;
+        /** Controls whether the badge is visible. */
+        this.hide = false;
+        __classPrivateFieldSet(this, _BadgeComponent_internals, this.attachInternals(), "f");
     }
-    set theme(value) {
-        this.setAttribute(BADGE_CONSTANTS.attributes.THEME, value);
-    }
-    get strong() {
-        return this.hasAttribute(BADGE_CONSTANTS.attributes.STRONG);
-    }
-    set strong(value) {
-        this.toggleAttribute(BADGE_CONSTANTS.attributes.STRONG, value);
-    }
-    get hide() {
-        return this.hasAttribute(BADGE_CONSTANTS.attributes.HIDE);
-    }
-    set hide(value) {
-        if (this.hasAttribute(BADGE_CONSTANTS.attributes.HIDE) !== value) {
-            this.toggleAttribute(BADGE_CONSTANTS.attributes.HIDE, value);
+    willUpdate(changedProperties) {
+        if (changedProperties.has('dot')) {
+            toggleState(__classPrivateFieldGet(this, _BadgeComponent_internals, "f"), 'dot', this.dot);
         }
+        if (changedProperties.has('strong')) {
+            toggleState(__classPrivateFieldGet(this, _BadgeComponent_internals, "f"), 'strong', this.strong);
+        }
+        if (changedProperties.has('hide')) {
+            toggleState(__classPrivateFieldGet(this, _BadgeComponent_internals, "f"), 'hide', this.hide);
+        }
+    }
+    render() {
+        return html `
+      <div class="forge-badge" part="root">
+        <slot name="start"></slot>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        <slot name="end"></slot>
+      </div>
+    `;
     }
 };
+_BadgeComponent_internals = new WeakMap();
+BadgeComponent.styles = unsafeCSS(styles);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BadgeComponent.prototype, "dot", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], BadgeComponent.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BadgeComponent.prototype, "strong", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BadgeComponent.prototype, "hide", void 0);
 BadgeComponent = __decorate([
-    customElement({
-        name: BADGE_CONSTANTS.elementName
-    })
+    customElement(BADGE_TAG_NAME)
 ], BadgeComponent);
 export { BadgeComponent };

package/esm/badge/index.js

@@ -3,11 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { BadgeComponent } from './badge';
+import { tryDefine } from '@tylertech/forge-core';
+import { BADGE_TAG_NAME, BadgeComponent } from './badge';
 export * from './badge-component-delegate';
 export * from './badge-constants';
 export * from './badge';
 export function defineBadgeComponent() {
-    defineCustomElement(BadgeComponent);
+    tryDefine(BADGE_TAG_NAME, BadgeComponent);
 }

package/esm/bottom-sheet/bottom-sheet-constants.d.ts

@@ -40,7 +40,7 @@ export declare const BOTTOM_SHEET_CONSTANTS: {
         FULLSCREEN: string;
     };
     defaults: {
-        mode: DialogMode;
+        mode: BottomSheetMode;
     };
 };
 export interface IBottomSheetDragEventData {

package/esm/bottom-sheet/bottom-sheet.d.ts

@@ -4,8 +4,10 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
 import { BottomSheetMode, IBottomSheetDragEventData, IBottomSheetDragStartEventData } from './bottom-sheet-constants';
-export interface IBottomSheetComponent extends IBaseComponent {
+export interface IBottomSheetComponent extends IBaseComponent, IWithDefaultAria, IWithElementInternals {
     mode: BottomSheetMode;
     persistent: boolean;
     open: boolean;