@tylertech/forge 3.5.1 → 3.6.0

package/dist/radio/forge-radio.css

@@ -23,6 +23,7 @@
   --_radio-mark-color: var(--forge-radio-mark-color, var(--_radio-primary-color));
   --_radio-gap: var(--forge-radio-gap, 0);
   --_radio-justify: var(--forge-radio-justify, start);
+  --_radio-align: var(--forge-radio-align, center);
   --_radio-direction: var(--forge-radio-direction, initial);
   --_radio-state-layer-width: var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));
   --_radio-state-layer-height: var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));
@@ -138,6 +139,7 @@
   align-items: center;
   justify-content: center;
   display: flex;
+  flex-shrink: 0;
   border-radius: var(--_radio-shape);
   inline-size: var(--_radio-state-layer-width);
   block-size: var(--_radio-state-layer-height);

package/dist/switch/forge-switch.css

@@ -41,6 +41,7 @@
   --_switch-icon-off-scale: var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));
   --_switch-gap: var(--forge-switch-gap, 0);
   --_switch-justify: var(--forge-switch-justify, start);
+  --_switch-align: var(--forge-switch-align, center);
   --_switch-direction: var(--forge-switch-direction, initial);
   --_switch-state-layer-width: var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));
   --_switch-state-layer-height: var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));
@@ -76,6 +77,7 @@
   position: relative;
   align-items: center;
   display: flex;
+  flex-shrink: 0;
   block-size: max(var(--_switch-handle-height), var(--_switch-track-height), var(--_switch-current-state-layer-height));
   cursor: pointer;
   outline: none;

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

@@ -637,6 +637,11 @@
       "description": "How the checkbox and label are distributed along their main axis.",
       "values": []
     },
+    {
+      "name": "--forge-checkbox-align",
+      "description": "How the checkbox and label are distributed along their cross axis.",
+      "values": []
+    },
     {
       "name": "--forge-checkbox-direction",
       "description": "Whether the checkbox and label are arranged along the inline or block axis.",
@@ -3137,6 +3142,11 @@
       "description": "How the switch and label are distributed along their main axis.",
       "values": []
     },
+    {
+      "name": "--forge-switch-align",
+      "description": "How the switch and label are distributed along their cross axis.",
+      "values": []
+    },
     {
       "name": "--forge-switch-direction",
       "description": "Whether the switch and label are arranged along the inline or block axis.",
@@ -4757,6 +4767,11 @@
       "description": "The alignment of the radio button and its label in the inline direction.",
       "values": []
     },
+    {
+      "name": "--forge-radio-align",
+      "description": "The alignment of the radio button and its label in the block direction.",
+      "values": []
+    },
     {
       "name": "--forge-radio-direction",
       "description": "The direction of the radio button and its label.",

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

@@ -417,7 +417,7 @@
     },
     {
       "name": "forge-checkbox",
-      "description": "Checkboxes select single values for submission in a form.\n---\n\n\n### **Events:**\n - **change** - Dispatches when the checkbox is checked or unchecked.\n\n### **Methods:**\n - **toggle(force: _boolean_): _void_** - Toggles the checkbox checked or unchecked.\n\n### **CSS Properties:**\n - **--forge-checkbox-background** - The color of the checkbox background when unchecked and not indeterminate. _(default: undefined)_\n- **--forge-checkbox-width** - The inline size of the checkbox. _(default: undefined)_\n- **--forge-checkbox-height** - The block size of the checkbox. _(default: undefined)_\n- **--forge-checkbox-unchecked-border-width** - The width of the checkbox border when unchecked and not indeterminate. _(default: undefined)_\n- **--forge-checkbox-unchecked-border-color** - The color of the checkbox border when unchecked and not indeterminate. _(default: undefined)_\n- **--forge-checkbox-shape** - The shape of the checkbox. _(default: undefined)_\n- **--forge-checkbox-elevation** - The shadow of the checkbox. _(default: undefined)_\n- **--forge-checkbox-gap** - The space between the checkbox and label. _(default: undefined)_\n- **--forge-checkbox-justify** - How the checkbox and label are distributed along their main axis. _(default: undefined)_\n- **--forge-checkbox-direction** - Whether the checkbox and label are arranged along the inline or block axis. _(default: undefined)_\n- **--forge-checkbox-checked-background** - The color of the checkbox background when checked or indeterminate. _(default: undefined)_\n- **--forge-checkbox-checked-border-width** - The width of the checkbox border when checked or indeterminate. _(default: undefined)_\n- **--forge-checkbox-checked-border-color** - The color of the checkbox border when checked or indeterminate. _(default: undefined)_\n- **--forge-checkbox-icon-checked-color** - The color of the checkmark mark. _(default: undefined)_\n- **--forge-checkbox-icon-indeterminate-color** - The color of the indeterminate mark. _(default: undefined)_\n- **--forge-checkbox-icon-stroke-width** - The stroke width of the checkmark and indeterminate marks. _(default: undefined)_\n- **--forge-checkbox-state-layer-width** - The inline size of the state layer. _(default: undefined)_\n- **--forge-checkbox-state-layer-height** - The block size of the state layer. _(default: undefined)_\n- **--forge-checkbox-state-layer-checked-color** - The color of the state layer when checked. _(default: undefined)_\n- **--forge-checkbox-state-layer-unchecked-color** - The color of the state layer when unchecked. _(default: undefined)_\n- **--forge-checkbox-state-layer-shape** - The shape of the state layer. _(default: undefined)_\n- **--forge-checkbox-state-layer-dense-width** - The inline size of the state layer when dense. _(default: undefined)_\n- **--forge-checkbox-state-layer-dense-height** - The block size of the state layer when dense. _(default: undefined)_\n- **--forge-checkbox-disabled-opacity** - The opacity when disabled. _(default: undefined)_\n- **--forge-checkbox-animation-duration** - The duration of animations. _(default: undefined)_\n- **--forge-checkbox-background-animation-timing** - The timing function of the background animations. _(default: undefined)_\n- **--forge-checkbox-icon-animation-timing** - The timing function of the checked and indeterminate icons animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - Styles the root element.\n- **background** - Styles the checkbox background element.\n- **checkmark** - Styles the checkmark element.\n- **mixedmark** - Styles the indeterminate mark element.\n- **label** - Styles the label element.\n- **state-layer** - Styles the state layer element.\n- **focus-indicator** - Styles the focus indicator element.",
+      "description": "Checkboxes select single values for submission in a form.\n---\n\n\n### **Events:**\n - **change** - Dispatches when the checkbox is checked or unchecked.\n\n### **Methods:**\n - **toggle(force: _boolean_): _void_** - Toggles the checkbox checked or unchecked.\n\n### **CSS Properties:**\n - **--forge-checkbox-background** - The color of the checkbox background when unchecked and not indeterminate. _(default: undefined)_\n- **--forge-checkbox-width** - The inline size of the checkbox. _(default: undefined)_\n- **--forge-checkbox-height** - The block size of the checkbox. _(default: undefined)_\n- **--forge-checkbox-unchecked-border-width** - The width of the checkbox border when unchecked and not indeterminate. _(default: undefined)_\n- **--forge-checkbox-unchecked-border-color** - The color of the checkbox border when unchecked and not indeterminate. _(default: undefined)_\n- **--forge-checkbox-shape** - The shape of the checkbox. _(default: undefined)_\n- **--forge-checkbox-elevation** - The shadow of the checkbox. _(default: undefined)_\n- **--forge-checkbox-gap** - The space between the checkbox and label. _(default: undefined)_\n- **--forge-checkbox-justify** - How the checkbox and label are distributed along their main axis. _(default: undefined)_\n- **--forge-checkbox-align** - How the checkbox and label are distributed along their cross axis. _(default: undefined)_\n- **--forge-checkbox-direction** - Whether the checkbox and label are arranged along the inline or block axis. _(default: undefined)_\n- **--forge-checkbox-checked-background** - The color of the checkbox background when checked or indeterminate. _(default: undefined)_\n- **--forge-checkbox-checked-border-width** - The width of the checkbox border when checked or indeterminate. _(default: undefined)_\n- **--forge-checkbox-checked-border-color** - The color of the checkbox border when checked or indeterminate. _(default: undefined)_\n- **--forge-checkbox-icon-checked-color** - The color of the checkmark mark. _(default: undefined)_\n- **--forge-checkbox-icon-indeterminate-color** - The color of the indeterminate mark. _(default: undefined)_\n- **--forge-checkbox-icon-stroke-width** - The stroke width of the checkmark and indeterminate marks. _(default: undefined)_\n- **--forge-checkbox-state-layer-width** - The inline size of the state layer. _(default: undefined)_\n- **--forge-checkbox-state-layer-height** - The block size of the state layer. _(default: undefined)_\n- **--forge-checkbox-state-layer-checked-color** - The color of the state layer when checked. _(default: undefined)_\n- **--forge-checkbox-state-layer-unchecked-color** - The color of the state layer when unchecked. _(default: undefined)_\n- **--forge-checkbox-state-layer-shape** - The shape of the state layer. _(default: undefined)_\n- **--forge-checkbox-state-layer-dense-width** - The inline size of the state layer when dense. _(default: undefined)_\n- **--forge-checkbox-state-layer-dense-height** - The block size of the state layer when dense. _(default: undefined)_\n- **--forge-checkbox-disabled-opacity** - The opacity when disabled. _(default: undefined)_\n- **--forge-checkbox-animation-duration** - The duration of animations. _(default: undefined)_\n- **--forge-checkbox-background-animation-timing** - The timing function of the background animations. _(default: undefined)_\n- **--forge-checkbox-icon-animation-timing** - The timing function of the checked and indeterminate icons animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - Styles the root element.\n- **background** - Styles the checkbox background element.\n- **checkmark** - Styles the checkmark element.\n- **mixedmark** - Styles the indeterminate mark element.\n- **label** - Styles the label element.\n- **state-layer** - Styles the state layer element.\n- **focus-indicator** - Styles the focus indicator element.",
       "attributes": [
         {
           "name": "checked",
@@ -834,6 +834,16 @@
           "name": "placement",
           "description": "The placement of the dialog.",
           "values": [{ "name": "DialogPlacement" }]
+        },
+        {
+          "name": "label",
+          "description": "The accessible label of the dialog.",
+          "values": []
+        },
+        {
+          "name": "description",
+          "description": "The accessible description of the dialog.",
+          "values": []
         }
       ],
       "references": []
@@ -1154,56 +1164,26 @@
     },
     {
       "name": "forge-icon-button",
-      "description": "Icons buttons are used to trigger an action or event.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\n- **forge-icon-button-toggle** - Fires when the icon button is toggled. Only applies in `toggle` mode.\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 icon.\n- **on** - The icon to show when in `toggle` mode when toggled \"on\".\n- **start** - Elements to logically render before the icon.\n- **end** - Elements to logically render after the icon.\n- **badge** - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).\n\n### **CSS Properties:**\n - **--forge-icon-button-display** - The display property of the button. _(default: undefined)_\n- **--forge-icon-button-size** - The height and min-width of the button. _(default: undefined)_\n- **--forge-icon-button-gap** - The gap between the icon content. _(default: undefined)_\n- **--forge-icon-button-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-icon-button-background-color** - The background color of the button. _(default: undefined)_\n- **--forge-icon-button-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-icon-button-cursor** - The cursor of the button. _(default: undefined)_\n- **--forge-icon-button-padding** - The inline padding of the button. _(default: undefined)_\n- **--forge-icon-button-border** - The border of the button. _(default: undefined)_\n- **--forge-icon-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-icon-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-icon-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-icon-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-start** - The start-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-end** - The start-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-start** - The end-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-end** - The end-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-squared** - The squared border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-outlined-border-width** - The border width when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-style** - The border style when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-color** - The border color when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-tonal-icon-color** - The icon color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-tonal-background-color** - The background color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-filled-icon-color** - The icon color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-filled-background-color** - The background color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-raised-shadow** - The shadow when in the raised variant. _(default: undefined)_\n- **--forge-icon-button-raised-hover-shadow** - The shadow when in the raised variant and hovered. _(default: undefined)_\n- **--forge-icon-button-raised-active-shadow** - The shadow when in the raised variant and active. _(default: undefined)_\n- **--forge-icon-button-raised-disabled-shadow** - The shadow when in the raised variant and disabled. _(default: undefined)_\n- **--forge-icon-button-density-small-size** - The size of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-padding** - The padding of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-icon-size** - The size of the icon when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-medium-size** - The size of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-medium-padding** - The padding of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-large-size** - The size of the button when in the large density. _(default: undefined)_\n- **--forge-icon-button-toggle-on-background-color** - The background color of the when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-toggle-on-icon-color** - The color of the icon when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-background-color** - The background color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-icon-color** - The icon color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-background-color** - The background color when in the tonal variant and toggled. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-background-color** - The background color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-icon-color** - The icon color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-background-color** - The background color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-icon-color** - The icon color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-background-color** - The background color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-icon-color** - The icon color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-disabled-cursor** - The cursor when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-disabled-opacity** - The opacity when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-popover-icon-padding** - The padding of the popover icon. _(default: undefined)_\n- **--forge-icon-button-focus-indicator-color** - The color of the focus indicator. _(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.",
+      "description": "\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\n- **forge-icon-button-toggle** - Fires when the icon button is toggled. Only applies in `toggle` mode.\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 icon.\n- **on** - The icon to show when in `toggle` mode when toggled \"on\".\n- **start** - Elements to logically render before the icon.\n- **end** - Elements to logically render after the icon.\n- **badge** - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).\n\n### **CSS Properties:**\n - **--forge-icon-button-display** - The display property of the button. _(default: undefined)_\n- **--forge-icon-button-size** - The height and min-width of the button. _(default: undefined)_\n- **--forge-icon-button-gap** - The gap between the icon content. _(default: undefined)_\n- **--forge-icon-button-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-icon-button-background-color** - The background color of the button. _(default: undefined)_\n- **--forge-icon-button-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-icon-button-cursor** - The cursor of the button. _(default: undefined)_\n- **--forge-icon-button-padding** - The inline padding of the button. _(default: undefined)_\n- **--forge-icon-button-border** - The border of the button. _(default: undefined)_\n- **--forge-icon-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-icon-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-icon-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-icon-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-start** - The start-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-end** - The start-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-start** - The end-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-end** - The end-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-squared** - The squared border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-outlined-border-width** - The border width when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-style** - The border style when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-color** - The border color when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-tonal-icon-color** - The icon color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-tonal-background-color** - The background color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-filled-icon-color** - The icon color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-filled-background-color** - The background color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-raised-shadow** - The shadow when in the raised variant. _(default: undefined)_\n- **--forge-icon-button-raised-hover-shadow** - The shadow when in the raised variant and hovered. _(default: undefined)_\n- **--forge-icon-button-raised-active-shadow** - The shadow when in the raised variant and active. _(default: undefined)_\n- **--forge-icon-button-raised-disabled-shadow** - The shadow when in the raised variant and disabled. _(default: undefined)_\n- **--forge-icon-button-density-small-size** - The size of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-padding** - The padding of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-icon-size** - The size of the icon when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-medium-size** - The size of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-medium-padding** - The padding of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-large-size** - The size of the button when in the large density. _(default: undefined)_\n- **--forge-icon-button-toggle-on-background-color** - The background color of the when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-toggle-on-icon-color** - The color of the icon when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-background-color** - The background color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-icon-color** - The icon color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-background-color** - The background color when in the tonal variant and toggled. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-background-color** - The background color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-icon-color** - The icon color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-background-color** - The background color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-icon-color** - The icon color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-background-color** - The background color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-icon-color** - The icon color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-disabled-cursor** - The cursor when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-disabled-opacity** - The opacity when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-popover-icon-padding** - The padding of the popover icon. _(default: undefined)_\n- **--forge-icon-button-focus-indicator-color** - The color of the focus indicator. _(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.",
       "attributes": [
-        {
-          "name": "toggle",
-          "description": "Whether or not the icon button can be toggled.",
-          "values": []
-        },
-        {
-          "name": "on",
-          "description": "Whether or not the button is on. Only applies when `toggle` is `true`.",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.",
-          "values": [{ "name": "IconButtonVariant" }]
-        },
-        {
-          "name": "theme",
-          "description": "The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.",
-          "values": [{ "name": "IconButtonTheme" }]
-        },
-        {
-          "name": "shape",
-          "description": "The shape of the button. Valid values are `circular` and `squared`.",
-          "values": []
-        },
-        {
-          "name": "density",
-          "description": "The density of the button. Valid values are `small`, `medium`, and `large`.",
-          "values": [{ "name": "IconButtonDensity" }]
-        },
         {
           "name": "type",
-          "description": "The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.",
+          "description": "Sets the type of the button. Possible values are `button`, `submit`, and `reset`.",
           "values": [{ "name": "ButtonType" }]
         },
         {
           "name": "disabled",
-          "description": "Whether or not the button is disabled.",
+          "description": "Disables the button.",
           "values": []
         },
         {
           "name": "popover-icon",
-          "description": "Whether or not the button shows a built-in popover icon.",
+          "description": "Shows a popover icon on the button.",
           "values": []
         },
         {
           "name": "dense",
-          "description": "Whether or not the button is dense.",
+          "description": "Sets the density of the button.",
           "values": []
         },
         {
@@ -1213,7 +1193,7 @@
         },
         {
           "name": "value",
-          "description": "The form value of the button.",
+          "description": "The value of the button.",
           "values": []
         }
       ],
@@ -1993,21 +1973,31 @@
     },
     {
       "name": "forge-switch",
-      "description": "Switches toggle the state of a single setting on or off.\n---\n\n\n### **Events:**\n - **change** - Dispatches when the switch's value changes.\n- **forge-switch-change** - Dispatches when the switch's value changes.\n\n### **Methods:**\n - **toggle(force: _boolean_): _void_** - Toggles the switch on or off.\n\n### **CSS Properties:**\n - **--forge-theme-primary** - The primary color of the switch. _(default: undefined)_\n- **--forge-theme-on-primary** - The color of elements placed on top of the primary color (the handle icons for example). _(default: undefined)_\n- **--forge-switch-handle-on-color** - The color of the handle in the switch's on state. _(default: undefined)_\n- **--forge-switch-handle-off-color** - The color of the handle in the switch's off state. _(default: undefined)_\n- **--forge-switch-handle-active-on-color** - The color of the handle when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-handle-active-off-color** - The color of the handle when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-handle-size** - The inline and block size of the handle. _(default: undefined)_\n- **--forge-switch-handle-width** - The inline size of the handle. _(default: undefined)_\n- **--forge-switch-handle-height** - The block size of the handle. _(default: undefined)_\n- **--forge-switch-handle-scale** - The scale transformation applied to the handle. _(default: undefined)_\n- **--forge-switch-handle-on-scale** - The scale transformation applied to the handle in the switch's on state. _(default: undefined)_\n- **--forge-switch-handle-off-scale** - The scale transformation applied to the handle in the switch's off state. _(default: undefined)_\n- **--forge-switch-handle-active-scale** - The scale transformation applied to the handle when the switch is active (pressed). _(default: undefined)_\n- **--forge-switch-handle-active-on-scale** - The scale transformation applied to the handle when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-handle-active-off-scale** - The scale transformation applied to the handle when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-handle-shape** - The shape of the handle. _(default: undefined)_\n- **--forge-switch-handle-elevation** - The handle's shadow. _(default: undefined)_\n- **--forge-switch-handle-on-elevation** - The handle's shadow in the switch's on state. _(default: undefined)_\n- **--forge-switch-handle-off-elevation** - The handle's shadow in the switch's off state. _(default: undefined)_\n- **--forge-switch-handle-active-elevation** - The handle's shadow when the switch is active (pressed). _(default: undefined)_\n- **--forge-switch-handle-active-on-elevation** - The handle's shadow when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-handle-active-off-elevation** - The handle's shadow when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-track-on-color** - The color of the track in the switch's on state. _(default: undefined)_\n- **--forge-switch-track-off-color** - The color fo the track in the switch's off state. _(default: undefined)_\n- **--forge-switch-track-active-on-color** - The color of the track when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-track-active-off-color** - The color fo the track when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-track-width** - The inline size of the track. _(default: undefined)_\n- **--forge-switch-track-height** - The block size of the track. _(default: undefined)_\n- **--forge-switch-track-shape** - The shape of the track. _(default: undefined)_\n- **--forge-switch-track-border-width** - The width of the track border. _(default: undefined)_\n- **--forge-switch-track-on-border-width** - The width of the track border in the switch's on state. _(default: undefined)_\n- **--forge-switch-track-off-border-width** - The width of the track border in the switch's off state. _(default: undefined)_\n- **--forge-switch-track-active-on-border-width** - The width of the track border when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-track-active-off-border-width** - The width of the track border when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-track-border-color** - The color of the track border. _(default: undefined)_\n- **--forge-switch-track-on-border-color** - The color of the track border in the switch's on state. _(default: undefined)_\n- **--forge-switch-track-off-border-color** - The color of the track border in the switch's off state. _(default: undefined)_\n- **--forge-switch-track-active-on-border-color** - The color of the track border when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-track-active-off-border-color** - The color of the track border when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-icon-color** - The color of the handle icons. _(default: undefined)_\n- **--forge-switch-icon-on-color** - The color of the handle icon in the switch's on state. _(default: undefined)_\n- **--forge-switch-icon-off-color** - The color of the handle icon in the switch's off state. _(default: undefined)_\n- **--forge-switch-icon-active-on-color** - The color of the handle icon when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-icon-active-off-color** - The color of the handle icon when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-icon-size** - The size of the handle icon. _(default: undefined)_\n- **--forge-switch-icon-on-size** - The size of the handle icon in the switch's on state. _(default: undefined)_\n- **--forge-switch-icon-off-size** - The size of the handle icon in the switch's off state. _(default: undefined)_\n- **--forge-switch-icon-scale** - The scale transformation applied to the handle icons. _(default: undefined)_\n- **--forge-switch-icon-on-scale** - The scale transformation applied to the handle icons in the switch's on state. _(default: undefined)_\n- **--forge-switch-icon-off-scale** - The scale transformation applied to the handle icons in the switch's off state. _(default: undefined)_\n- **--forge-switch-icon-active-on-scale** - The scale transformation applied to the handle icons when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-icon-active-off-scale** - The scale transformation applied to the handle icons when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-gap** - The space between the switch and label. _(default: undefined)_\n- **--forge-switch-justify** - How the switch and label are distributed along their main axis. _(default: undefined)_\n- **--forge-switch-direction** - Whether the switch and label are arranged along the inline or block axis. _(default: undefined)_\n- **--forge-switch-state-layer-size** - The inline and block size of the handle's state layer. _(default: undefined)_\n- **--forge-switch-state-layer-width** - The inline size of the handle's state layer. _(default: undefined)_\n- **--forge-switch-state-layer-height** - The block size of the handle's state layer. _(default: undefined)_\n- **--forge-switch-state-layer-on-color** - The color of the handle's state layer when the switch is in its on state. _(default: undefined)_\n- **--forge-switch-state-layer-off-color** - The color of the handle's state layer when the switch is in its off state. _(default: undefined)_\n- **--forge-switch-state-layer-dense-size** - The inline and block size of the handle's state layer when the dense switch is used. _(default: undefined)_\n- **--forge-switch-state-layer-dense-width** - The inline size of the handle's state layer when the dense switch is used. _(default: undefined)_\n- **--forge-switch-state-layer-dense-height** - The block size of the handle's state layer when the dense switch is used. _(default: undefined)_\n- **--forge-switch-disabled-opacity** - The opacity of the switch when disabled. _(default: undefined)_\n- **--forge-switch-animation-duration** - The duration of animations. _(default: undefined)_\n- **--forge-switch-animation-timing** - The timing function used in most animations. _(default: undefined)_\n- **--forge-switch-active-animation-timing** - The timing function used in active state animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **switch** - Styles the switch container element.\n- **track** - Styles the track element.\n- **handle** - Styles the handle element.\n- **icon-on** - Styles the on icon element.\n- **icon-off** - Styles the off icon element.\n- **label** - Styles the label element.\n- **state-layer** - Styles the state layer root element.\n- **focus-indicator** - Styles the focus indicator root element.",
+      "description": "Switches toggle the state of a single setting on or off.\n---\n\n\n### **Events:**\n - **change** - Dispatches when the switch's value changes.\n- **forge-switch-change** - Dispatches when the switch's value changes.\n\n### **Methods:**\n - **toggle(force: _boolean_): _void_** - Toggles the switch on or off.\n\n### **CSS Properties:**\n - **--forge-theme-primary** - The primary color of the switch. _(default: undefined)_\n- **--forge-theme-on-primary** - The color of elements placed on top of the primary color (the handle icons for example). _(default: undefined)_\n- **--forge-switch-handle-on-color** - The color of the handle in the switch's on state. _(default: undefined)_\n- **--forge-switch-handle-off-color** - The color of the handle in the switch's off state. _(default: undefined)_\n- **--forge-switch-handle-active-on-color** - The color of the handle when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-handle-active-off-color** - The color of the handle when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-handle-size** - The inline and block size of the handle. _(default: undefined)_\n- **--forge-switch-handle-width** - The inline size of the handle. _(default: undefined)_\n- **--forge-switch-handle-height** - The block size of the handle. _(default: undefined)_\n- **--forge-switch-handle-scale** - The scale transformation applied to the handle. _(default: undefined)_\n- **--forge-switch-handle-on-scale** - The scale transformation applied to the handle in the switch's on state. _(default: undefined)_\n- **--forge-switch-handle-off-scale** - The scale transformation applied to the handle in the switch's off state. _(default: undefined)_\n- **--forge-switch-handle-active-scale** - The scale transformation applied to the handle when the switch is active (pressed). _(default: undefined)_\n- **--forge-switch-handle-active-on-scale** - The scale transformation applied to the handle when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-handle-active-off-scale** - The scale transformation applied to the handle when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-handle-shape** - The shape of the handle. _(default: undefined)_\n- **--forge-switch-handle-elevation** - The handle's shadow. _(default: undefined)_\n- **--forge-switch-handle-on-elevation** - The handle's shadow in the switch's on state. _(default: undefined)_\n- **--forge-switch-handle-off-elevation** - The handle's shadow in the switch's off state. _(default: undefined)_\n- **--forge-switch-handle-active-elevation** - The handle's shadow when the switch is active (pressed). _(default: undefined)_\n- **--forge-switch-handle-active-on-elevation** - The handle's shadow when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-handle-active-off-elevation** - The handle's shadow when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-track-on-color** - The color of the track in the switch's on state. _(default: undefined)_\n- **--forge-switch-track-off-color** - The color fo the track in the switch's off state. _(default: undefined)_\n- **--forge-switch-track-active-on-color** - The color of the track when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-track-active-off-color** - The color fo the track when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-track-width** - The inline size of the track. _(default: undefined)_\n- **--forge-switch-track-height** - The block size of the track. _(default: undefined)_\n- **--forge-switch-track-shape** - The shape of the track. _(default: undefined)_\n- **--forge-switch-track-border-width** - The width of the track border. _(default: undefined)_\n- **--forge-switch-track-on-border-width** - The width of the track border in the switch's on state. _(default: undefined)_\n- **--forge-switch-track-off-border-width** - The width of the track border in the switch's off state. _(default: undefined)_\n- **--forge-switch-track-active-on-border-width** - The width of the track border when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-track-active-off-border-width** - The width of the track border when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-track-border-color** - The color of the track border. _(default: undefined)_\n- **--forge-switch-track-on-border-color** - The color of the track border in the switch's on state. _(default: undefined)_\n- **--forge-switch-track-off-border-color** - The color of the track border in the switch's off state. _(default: undefined)_\n- **--forge-switch-track-active-on-border-color** - The color of the track border when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-track-active-off-border-color** - The color of the track border when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-icon-color** - The color of the handle icons. _(default: undefined)_\n- **--forge-switch-icon-on-color** - The color of the handle icon in the switch's on state. _(default: undefined)_\n- **--forge-switch-icon-off-color** - The color of the handle icon in the switch's off state. _(default: undefined)_\n- **--forge-switch-icon-active-on-color** - The color of the handle icon when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-icon-active-off-color** - The color of the handle icon when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-icon-size** - The size of the handle icon. _(default: undefined)_\n- **--forge-switch-icon-on-size** - The size of the handle icon in the switch's on state. _(default: undefined)_\n- **--forge-switch-icon-off-size** - The size of the handle icon in the switch's off state. _(default: undefined)_\n- **--forge-switch-icon-scale** - The scale transformation applied to the handle icons. _(default: undefined)_\n- **--forge-switch-icon-on-scale** - The scale transformation applied to the handle icons in the switch's on state. _(default: undefined)_\n- **--forge-switch-icon-off-scale** - The scale transformation applied to the handle icons in the switch's off state. _(default: undefined)_\n- **--forge-switch-icon-active-on-scale** - The scale transformation applied to the handle icons when the switch is active (pressed) in its on state. _(default: undefined)_\n- **--forge-switch-icon-active-off-scale** - The scale transformation applied to the handle icons when the switch is active (pressed) in its off state. _(default: undefined)_\n- **--forge-switch-gap** - The space between the switch and label. _(default: undefined)_\n- **--forge-switch-justify** - How the switch and label are distributed along their main axis. _(default: undefined)_\n- **--forge-switch-align** - How the switch and label are distributed along their cross axis. _(default: undefined)_\n- **--forge-switch-direction** - Whether the switch and label are arranged along the inline or block axis. _(default: undefined)_\n- **--forge-switch-state-layer-size** - The inline and block size of the handle's state layer. _(default: undefined)_\n- **--forge-switch-state-layer-width** - The inline size of the handle's state layer. _(default: undefined)_\n- **--forge-switch-state-layer-height** - The block size of the handle's state layer. _(default: undefined)_\n- **--forge-switch-state-layer-on-color** - The color of the handle's state layer when the switch is in its on state. _(default: undefined)_\n- **--forge-switch-state-layer-off-color** - The color of the handle's state layer when the switch is in its off state. _(default: undefined)_\n- **--forge-switch-state-layer-dense-size** - The inline and block size of the handle's state layer when the dense switch is used. _(default: undefined)_\n- **--forge-switch-state-layer-dense-width** - The inline size of the handle's state layer when the dense switch is used. _(default: undefined)_\n- **--forge-switch-state-layer-dense-height** - The block size of the handle's state layer when the dense switch is used. _(default: undefined)_\n- **--forge-switch-disabled-opacity** - The opacity of the switch when disabled. _(default: undefined)_\n- **--forge-switch-animation-duration** - The duration of animations. _(default: undefined)_\n- **--forge-switch-animation-timing** - The timing function used in most animations. _(default: undefined)_\n- **--forge-switch-active-animation-timing** - The timing function used in active state animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **switch** - Styles the switch container element.\n- **track** - Styles the track element.\n- **handle** - Styles the handle element.\n- **icon-on** - Styles the on icon element.\n- **icon-off** - Styles the off icon element.\n- **label** - Styles the label element.\n- **state-layer** - Styles the state layer root element.\n- **focus-indicator** - Styles the focus indicator root element.",
       "attributes": [
+        {
+          "name": "checked",
+          "description": "Gets/sets whether the switch is checked or not.",
+          "values": []
+        },
         {
           "name": "on",
-          "description": "Gets/sets whether the switch is on or off.",
+          "description": "Alias for `checked` _(deprecated)_. Gets/sets whether the switch is checked or not.",
           "values": []
         },
         {
           "name": "selected",
-          "description": "Alias for `on` _(deprecated)_.",
+          "description": "Alias for `checked` _(deprecated)_.",
+          "values": []
+        },
+        {
+          "name": "default-checked",
+          "description": "Gets/sets whether the switch is checked by default.",
           "values": []
         },
         {
           "name": "default-on",
-          "description": "Gets/sets whether the switch is on or off by default.",
+          "description": "Alias for `defaultChecked` _(deprecated)_. Gets/sets whether the switch is checked by default.",
           "values": []
         },
         {
@@ -3203,7 +3193,7 @@
     },
     {
       "name": "forge-radio",
-      "description": "The Forge Radio component is used to create a form input where only one out of a set of\nvalues should be selected.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n\n### **CSS Properties:**\n - **--forge-radio-primary-color** - The primary color of the radio button when checked. _(default: undefined)_\n- **--forge-radio-inactive-color** - The color of the radio button when unchecked. _(default: undefined)_\n- **--forge-radio-size** - The size of the radio button in the inline and block directions. _(default: undefined)_\n- **--forge-radio-width** - The width of the radio button. _(default: undefined)_\n- **--forge-radio-height** - The height of the radio button. _(default: undefined)_\n- **--forge-radio-border-width** - The width of the radio button's border. _(default: undefined)_\n- **--forge-radio-unchecked-border-color** - The color of the radio button's border when unchecked. _(default: undefined)_\n- **--forge-radio-checked-border-color** - The color of the radio button's border when checked. _(default: undefined)_\n- **--forge-radio-background** - The background of the radio button. _(default: undefined)_\n- **--forge-radio-shape** - The shape of the radio button. _(default: undefined)_\n- **--forge-radio-mark-size** - The size of the radio button's mark in the inline and block directions. _(default: undefined)_\n- **--forge-radio-mark-width** - The width of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-height** - The height of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-color** - The color of the radio button's mark. _(default: undefined)_\n- **--forge-radio-gap** - The gap between the radio button and its label. _(default: undefined)_\n- **--forge-radio-justify** - The alignment of the radio button and its label in the inline direction. _(default: undefined)_\n- **--forge-radio-direction** - The direction of the radio button and its label. _(default: undefined)_\n- **--forge-radio-state-layer-size** - The size of the radio button's state layer in the inline and block directions. _(default: undefined)_\n- **--forge-radio-state-layer-width** - The width of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-height** - The height of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-unchecked** - color - The color of the radio button's state layer when unchecked. _(default: undefined)_\n- **--forge-radio-state-layer-checked-color** - The color of the radio button's state layer when checked. _(default: undefined)_\n- **--forge-radio-state-layer-shape** - The shape of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-dense-size** - The size of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-width** - The width of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-height** - The height of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-disabled-opacity** - The opacity of the radio button when disabled. _(default: undefined)_\n- **--forge-radio-animation-duration** - The duration of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-timing-function** - The timing function of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-delay** - The delay of the radio button's animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - Styles the radio's root element.\n- **background** - Styles the border and background of the radio.\n- **focus-indicator** - Styles the focus indicator of the radio.\n- **state-layer** - Styles the state layer of the radio.",
+      "description": "The Forge Radio component is used to create a form input where only one out of a set of\nvalues should be selected.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n\n### **CSS Properties:**\n - **--forge-radio-primary-color** - The primary color of the radio button when checked. _(default: undefined)_\n- **--forge-radio-inactive-color** - The color of the radio button when unchecked. _(default: undefined)_\n- **--forge-radio-size** - The size of the radio button in the inline and block directions. _(default: undefined)_\n- **--forge-radio-width** - The width of the radio button. _(default: undefined)_\n- **--forge-radio-height** - The height of the radio button. _(default: undefined)_\n- **--forge-radio-border-width** - The width of the radio button's border. _(default: undefined)_\n- **--forge-radio-unchecked-border-color** - The color of the radio button's border when unchecked. _(default: undefined)_\n- **--forge-radio-checked-border-color** - The color of the radio button's border when checked. _(default: undefined)_\n- **--forge-radio-background** - The background of the radio button. _(default: undefined)_\n- **--forge-radio-shape** - The shape of the radio button. _(default: undefined)_\n- **--forge-radio-mark-size** - The size of the radio button's mark in the inline and block directions. _(default: undefined)_\n- **--forge-radio-mark-width** - The width of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-height** - The height of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-color** - The color of the radio button's mark. _(default: undefined)_\n- **--forge-radio-gap** - The gap between the radio button and its label. _(default: undefined)_\n- **--forge-radio-justify** - The alignment of the radio button and its label in the inline direction. _(default: undefined)_\n- **--forge-radio-align** - The alignment of the radio button and its label in the block direction. _(default: undefined)_\n- **--forge-radio-direction** - The direction of the radio button and its label. _(default: undefined)_\n- **--forge-radio-state-layer-size** - The size of the radio button's state layer in the inline and block directions. _(default: undefined)_\n- **--forge-radio-state-layer-width** - The width of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-height** - The height of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-unchecked** - color - The color of the radio button's state layer when unchecked. _(default: undefined)_\n- **--forge-radio-state-layer-checked-color** - The color of the radio button's state layer when checked. _(default: undefined)_\n- **--forge-radio-state-layer-shape** - The shape of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-dense-size** - The size of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-width** - The width of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-height** - The height of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-disabled-opacity** - The opacity of the radio button when disabled. _(default: undefined)_\n- **--forge-radio-animation-duration** - The duration of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-timing-function** - The timing function of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-delay** - The delay of the radio button's animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - Styles the radio's root element.\n- **background** - Styles the border and background of the radio.\n- **focus-indicator** - Styles the focus indicator of the radio.\n- **state-layer** - Styles the state layer of the radio.",
       "attributes": [
         {
           "name": "checked",
@@ -3781,11 +3771,6 @@
           "name": "scroll-buttons",
           "description": "Controls whether scroll buttons are displayed when the tabs overflow their container.",
           "values": []
-        },
-        {
-          "name": "data-aria-label",
-          "description": "The ARIA label to forward to the internal tablist element.",
-          "values": []
         }
       ],
       "references": []

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

@@ -10,7 +10,7 @@ import { AppBarProfileButtonCore } from './app-bar-profile-button-core';
 import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-constants';
 import { ProfileCardComponent } from '../../profile-card';
 import { IconButtonComponent } from '../../icon-button';
-import { AvatarComponent } from '../../avatar';
+import { defineAvatarComponent } from '../../avatar';
 import { TooltipComponent } from '../../tooltip';
 import { BaseComponent } from '../../core/base/base-component';
 import { PopoverComponent } from '../../popover/popover';
@@ -119,6 +119,9 @@ let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends Ba
         return this._core.popupElement;
     }
 };
+(() => {
+    defineAvatarComponent();
+})();
 __decorate([
     coreProperty()
 ], AppBarProfileButtonComponent.prototype, "fullName", void 0);
@@ -158,7 +161,7 @@ __decorate([
 AppBarProfileButtonComponent = __decorate([
     customElement({
         name: APP_BAR_PROFILE_BUTTON_CONSTANTS.elementName,
-        dependencies: [PopoverComponent, ProfileCardComponent, IconButtonComponent, AvatarComponent, TooltipComponent]
+        dependencies: [PopoverComponent, ProfileCardComponent, IconButtonComponent, TooltipComponent]
     })
 ], AppBarProfileButtonComponent);
 export { AppBarProfileButtonComponent };

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

@@ -13,11 +13,4 @@ export declare const AVATAR_CONSTANTS: {
     numbers: {
         DEFAULT_LETTER_COUNT: number;
     };
-    selectors: {
-        ROOT: string;
-        DEFAULT_SLOT: string;
-    };
-    strings: {
-        BACKGROUND_VARNAME: string;
-    };
 };

package/esm/avatar/avatar-constants.js

@@ -13,17 +13,8 @@ const attributes = {
 const numbers = {
     DEFAULT_LETTER_COUNT: 2
 };
-const selectors = {
-    ROOT: '.forge-avatar',
-    DEFAULT_SLOT: '.forge-avatar > slot:not([name])'
-};
-const strings = {
-    BACKGROUND_VARNAME: '--forge-avatar-background'
-};
 export const AVATAR_CONSTANTS = {
     elementName,
     attributes,
-    numbers,
-    selectors,
-    strings
+    numbers
 };

package/esm/avatar/avatar.d.ts

@@ -3,8 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IAvatarComponent extends IBaseComponent {
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+export interface IAvatarComponent extends LitElement {
     text: string;
     letterCount: number;
     imageUrl: string;
@@ -14,23 +14,12 @@ declare global {
         'forge-avatar': IAvatarComponent;
     }
 }
+export declare const AVATAR_TAG_NAME = "forge-avatar";
 /**
  * @tag forge-avatar
  *
  * @summary Avatars represent an entity via text or image.
  *
- * @description The avatar component allows you to provide text or images to display that represent an entity. By default, the
- * avatar will display textual content as single characters (character count is configurable), or display an image or
- * icon based on the URL provided to it.
- *
- * @property {string} [text=""] - The text to display in the avatar.
- * @property {number} [letterCount=2] - Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
- * @property {string} imageUrl - The background image URL to use.
- *
- * @attribute {string} [text=""] - The text to display in the avatar.
- * @attribute {string} [letter-count=2] - Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
- * @attribute {string} image-url - The background image URL to use.
- *
  * @cssproperty {string} --forge-avatar-background - The background color of the avatar.
  * @cssproperty {number} --forge-avatar-shape - The border radius of the avatar, defaults to 50%.
  * @cssproperty {color} --forge-avatar-color - The text color of the avatar.
@@ -44,14 +33,28 @@ declare global {
  *
  * @cssclass forge-avatar - The avatar class _(required)_.
  */
-export declare class AvatarComponent extends BaseComponent implements IAvatarComponent {
-    static get observedAttributes(): string[];
-    private _core;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+export declare class AvatarComponent extends LitElement implements IAvatarComponent {
+    static styles: import("lit").CSSResult;
+    /**
+     * The text to display in the avatar.
+     * @default ''
+     * @attribute
+     */
     text: string;
+    /**
+     * Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
+     * @default 2
+     * @attribute letter-count
+     */
     letterCount: number;
+    /**
+     * The background image URL to use.
+     * @default ''
+     * @attribute image-url
+     */
     imageUrl: string;
+    private _image;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+    private _tryLoadImage;
 }

package/esm/avatar/avatar.js

@@ -4,30 +4,30 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { customElement, attachShadowTemplate, coerceNumber, coreProperty } from '@tylertech/forge-core';
-import { AvatarAdapter } from './avatar-adapter';
-import { AvatarCore } from './avatar-core';
+import { LitElement, html, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { AVATAR_CONSTANTS } from './avatar-constants';
-import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-avatar\" aria-hidden=\"true\" part=\"root\"><slot></slot></div></template>';
 const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-avatar{--_avatar-size:var(--forge-avatar-size, 40px);--_avatar-background:var(--forge-avatar-background, var(--forge-theme-tertiary, #3d5afe));--_avatar-color:var(--forge-avatar-color, var(--forge-theme-on-tertiary, #ffffff));--_avatar-transition-duration:var(--forge-avatar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_avatar-transition-timing:var(--forge-avatar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_avatar-shape:var(--forge-avatar-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)))}.forge-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;transition:height var(--_avatar-transition-duration) var(--_avatar-transition-timing),width var(--_avatar-transition-duration) var(--_avatar-transition-timing);border-radius:var(--_avatar-shape);box-sizing:border-box;width:var(--_avatar-size);height:var(--_avatar-size);background-color:var(--_avatar-background);background-position:center;background-repeat:no-repeat;background-size:cover;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));font-weight:var(--forge-typography-subheading2-font-weight,400);line-height:var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-subheading2-letter-spacing, normal);text-transform:var(--forge-typography-subheading2-text-transform,inherit);text-decoration:var(--forge-typography-subheading2-text-decoration,inherit);color:var(--_avatar-color)}.forge-avatar--image{background-color:inherit}';
+const charsByLetterCount = (text, count) => {
+    if (!text?.trim()) {
+        return '';
+    }
+    if (count === 1) {
+        return text[0].toUpperCase();
+    }
+    else {
+        const words = text.match(/\S+/g) ?? [];
+        return words.slice(0, count).reduce((prev, curr) => (prev += curr[0].toUpperCase()), '');
+    }
+};
+export const AVATAR_TAG_NAME = 'forge-avatar';
 /**
  * @tag forge-avatar
  *
  * @summary Avatars represent an entity via text or image.
  *
- * @description The avatar component allows you to provide text or images to display that represent an entity. By default, the
- * avatar will display textual content as single characters (character count is configurable), or display an image or
- * icon based on the URL provided to it.
- *
- * @property {string} [text=""] - The text to display in the avatar.
- * @property {number} [letterCount=2] - Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
- * @property {string} imageUrl - The background image URL to use.
- *
- * @attribute {string} [text=""] - The text to display in the avatar.
- * @attribute {string} [letter-count=2] - Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
- * @attribute {string} image-url - The background image URL to use.
- *
  * @cssproperty {string} --forge-avatar-background - The background color of the avatar.
  * @cssproperty {number} --forge-avatar-shape - The border radius of the avatar, defaults to 50%.
  * @cssproperty {color} --forge-avatar-color - The text color of the avatar.
@@ -41,47 +41,70 @@ const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-a
  *
  * @cssclass forge-avatar - The avatar class _(required)_.
  */
-let AvatarComponent = class AvatarComponent extends BaseComponent {
-    static get observedAttributes() {
-        return [AVATAR_CONSTANTS.attributes.TEXT, AVATAR_CONSTANTS.attributes.LETTER_COUNT, AVATAR_CONSTANTS.attributes.IMAGE_URL];
-    }
+let AvatarComponent = class AvatarComponent extends LitElement {
     constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._core = new AvatarCore(new AvatarAdapter(this));
+        super(...arguments);
+        /**
+         * The text to display in the avatar.
+         * @default ''
+         * @attribute
+         */
+        this.text = '';
+        /**
+         * Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.
+         * @default 2
+         * @attribute letter-count
+         */
+        this.letterCount = AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT;
+        /**
+         * The background image URL to use.
+         * @default ''
+         * @attribute image-url
+         */
+        this.imageUrl = '';
     }
-    connectedCallback() {
-        this._core.initialize();
+    willUpdate(changedProperties) {
+        if (changedProperties.has('imageUrl')) {
+            this._tryLoadImage();
+        }
     }
-    disconnectedCallback() {
-        this._core.destroy();
+    render() {
+        return html `
+      <div
+        aria-hidden="true"
+        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>
+      </div>
+    `;
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case AVATAR_CONSTANTS.attributes.TEXT:
-                this.text = newValue;
-                break;
-            case AVATAR_CONSTANTS.attributes.LETTER_COUNT:
-                this.letterCount = coerceNumber(newValue);
-                break;
-            case AVATAR_CONSTANTS.attributes.IMAGE_URL:
-                this.imageUrl = newValue;
-                break;
+    async _tryLoadImage() {
+        if (this.imageUrl) {
+            const image = new Image();
+            image.onload = () => (this._image = image);
+            image.onerror = () => (this._image = undefined);
+            image.src = this.imageUrl;
+        }
+        else {
+            this._image = undefined;
         }
     }
 };
+AvatarComponent.styles = unsafeCSS(styles);
 __decorate([
-    coreProperty()
+    property()
 ], AvatarComponent.prototype, "text", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Number, attribute: 'letter-count' })
 ], AvatarComponent.prototype, "letterCount", void 0);
 __decorate([
-    coreProperty()
+    property({ type: String, attribute: 'image-url' })
 ], AvatarComponent.prototype, "imageUrl", void 0);
+__decorate([
+    state()
+], AvatarComponent.prototype, "_image", void 0);
 AvatarComponent = __decorate([
-    customElement({
-        name: AVATAR_CONSTANTS.elementName
-    })
+    customElement(AVATAR_TAG_NAME)
 ], AvatarComponent);
 export { AvatarComponent };

package/esm/avatar/index.d.ts

@@ -3,8 +3,6 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './avatar-adapter';
-export * from './avatar-constants';
-export * from './avatar-core';
 export * from './avatar';
+export * from './avatar-constants';
 export declare function defineAvatarComponent(): void;

package/esm/avatar/index.js

@@ -3,12 +3,10 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { AvatarComponent } from './avatar';
-export * from './avatar-adapter';
-export * from './avatar-constants';
-export * from './avatar-core';
+import { tryDefine } from '@tylertech/forge-core';
+import { AVATAR_TAG_NAME, AvatarComponent } from './avatar';
 export * from './avatar';
+export * from './avatar-constants';
 export function defineAvatarComponent() {
-    defineCustomElement(AvatarComponent);
+    tryDefine(AVATAR_TAG_NAME, AvatarComponent);
 }

package/esm/button/base/base-button-adapter.js

@@ -61,7 +61,7 @@ export class BaseButtonAdapter extends BaseAdapter {
             if (value) {
                 this._component.removeAttribute('tabindex');
             }
-            else {
+            else if (!this._component.hasAttribute('tabindex')) {
                 this._component.setAttribute('tabindex', '0');
             }
             this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : null });