@tylertech/forge 3.3.6 → 3.4.0

package/custom-elements.json

@@ -9957,6 +9957,10 @@
               "description": "The size of the button when in the large density.",
               "name": "--forge-icon-button-density-large-size"
             },
+            {
+              "description": "The background color of the when in toggle mode and toggled on.",
+              "name": "--forge-icon-button-toggle-on-background-color"
+            },
             {
               "description": "The color of the icon when in toggle mode and toggled on.",
               "name": "--forge-icon-button-toggle-on-icon-color"
@@ -19662,6 +19666,10 @@
             {
               "description": "Controls the left and right padding using the padding-block style.",
               "name": "--forge-toolbar-padding-inline"
+            },
+            {
+              "description": "The grid column track sizes.",
+              "name": "--forge-toolbar-columns"
             }
           ],
           "cssParts": [
@@ -20396,6 +20404,10 @@
               "description": "The padding around the title element.",
               "name": "--forge-app-bar-title-padding"
             },
+            {
+              "description": "The grid column track sizes.",
+              "name": "--forge-app-bar-columns"
+            },
             {
               "description": "The transition duration for animations.",
               "name": "--forge-app-bar-transition-duration"
@@ -30561,14 +30573,6 @@
               "description": "The shape of the active tab indicator when vertical.",
               "name": "--forge-tab-vertical-indicator-shape"
             },
-            {
-              "description": "The height of the secondary tab indicator.",
-              "name": "--forge-tab-secondary-indicator-height"
-            },
-            {
-              "description": "The shape of the secondary tab indicator.",
-              "name": "--forge-tab-secondary-indicator-shape"
-            },
             {
               "description": "The shape of the active tab indicator when inverted.",
               "name": "--forge-tab-inverted-indicator-shape"
@@ -30609,10 +30613,6 @@
               "description": "The inline padding of the tab content.",
               "name": "--forge-tab-content-padding-inline"
             },
-            {
-              "description": "The inline padding of the tab content when secondary.",
-              "name": "--forge-tab-content-padding-inline-secondary"
-            },
             {
               "description": "The color of the icon when the tab is active and focused.",
               "name": "--forge-tab-active-focus-icon-color"
@@ -30762,6 +30762,7 @@
                 "text": "boolean"
               },
               "privacy": "public",
+              "deprecated": "This will be removed in a future version",
               "description": "Controls whether the tab is styled as secondary tab navigation.",
               "default": "false"
             },
@@ -30774,6 +30775,25 @@
               "privacy": "public",
               "description": "Controls whether the tab indicator is rendered on the opposite side of the tab.",
               "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "ExperimentalFocusOptions"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -30807,7 +30827,7 @@
               "default": "false"
             },
             {
-              "description": "Controls whether the tab is styled as secondary tab navigation.",
+              "description": "Deprecated. Controls whether the tab is styled as secondary tab navigation.",
               "name": "secondary",
               "default": "false"
             },
@@ -30940,7 +30960,8 @@
                 "text": "boolean"
               },
               "privacy": "public",
-              "description": "Controls whether the tabs are styled as secondary tab navigation.",
+              "deprecated": "This will be removed in a future version",
+              "description": "Deprecated. Controls whether the tabs are styled as secondary tab navigation.",
               "default": "false"
             },
             {
@@ -31028,7 +31049,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Controls whether the tabs are styled as secondary tab navigation.",
+              "description": "Deprecated. Controls whether the tabs are styled as secondary tab navigation.",
               "name": "secondary",
               "default": "false"
             },
@@ -31250,7 +31271,7 @@
     },
     "HTMLElementEventMap": {
       "path": "src/lib/tabs/tab-bar/tab-bar.ts",
-      "lineNumber": 31
+      "lineNumber": 32
     },
     "AutocompleteComponent": {
       "path": "src/lib/autocomplete/autocomplete.ts",
@@ -32250,7 +32271,7 @@
     },
     "IconButtonComponent": {
       "path": "src/lib/icon-button/icon-button.ts",
-      "lineNumber": 141
+      "lineNumber": 142
     },
     "LegacyInlineMessageThemes": {
       "path": "src/lib/inline-message/inline-message-constants.ts",
@@ -32670,11 +32691,11 @@
     },
     "IPopoverAdapter": {
       "path": "src/lib/popover/popover-adapter.ts",
-      "lineNumber": 9
+      "lineNumber": 10
     },
     "PopoverAdapter": {
       "path": "src/lib/popover/popover-adapter.ts",
-      "lineNumber": 28
+      "lineNumber": 29
     },
     "PopoverAnimationType": {
       "path": "src/lib/popover/popover-constants.ts",
@@ -33330,7 +33351,7 @@
     },
     "ToolbarComponent": {
       "path": "src/lib/toolbar/toolbar.ts",
-      "lineNumber": 71
+      "lineNumber": 72
     },
     "ITooltipAdapter": {
       "path": "src/lib/tooltip/tooltip-adapter.ts",
@@ -33438,7 +33459,7 @@
     },
     "AppBarComponent": {
       "path": "src/lib/app-bar/app-bar/app-bar.ts",
-      "lineNumber": 77
+      "lineNumber": 78
     },
     "IAppBarHelpButtonAdapter": {
       "path": "src/lib/app-bar/help-button/app-bar-help-button-adapter.ts",
@@ -34714,23 +34735,23 @@
     },
     "ITabAdapter": {
       "path": "src/lib/tabs/tab/tab-adapter.ts",
-      "lineNumber": 8
+      "lineNumber": 9
     },
     "TabAdapter": {
       "path": "src/lib/tabs/tab/tab-adapter.ts",
-      "lineNumber": 17
+      "lineNumber": 19
     },
     "ITabCore": {
       "path": "src/lib/tabs/tab/tab-core.ts",
-      "lineNumber": 4
+      "lineNumber": 5
     },
     "TabCore": {
       "path": "src/lib/tabs/tab/tab-core.ts",
-      "lineNumber": 13
+      "lineNumber": 15
     },
     "ITabComponent": {
       "path": "src/lib/tabs/tab/tab.ts",
-      "lineNumber": 13
+      "lineNumber": 14
     },
     "TabComponent": {
       "path": "src/lib/tabs/tab/tab.ts",
@@ -34770,7 +34791,7 @@
     },
     "TabBarComponent": {
       "path": "src/lib/tabs/tab-bar/tab-bar.ts",
-      "lineNumber": 80
+      "lineNumber": 81
     },
     "IViewComponent": {
       "path": "src/lib/view-switcher/view/view.ts",

package/dist/app-bar/forge-app-bar.css

@@ -42,6 +42,7 @@
   --_app-bar-logo-gap: var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));
   --_app-bar-logo-font-size: var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));
   --_app-bar-title-padding: var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));
+  --_app-bar-columns: var(--forge-app-bar-columns, 1fr 1fr 1fr);
   --_app-bar-transition-duration: var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));
   --_app-bar-transition-timing: var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
   --forge-theme-primary: var(--_app-bar-foreground);
@@ -68,7 +69,7 @@
   width: 100%;
   display: grid;
   align-items: center;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: var(--_app-bar-columns);
   height: var(--_app-bar-height);
   padding-inline: var(--_app-bar-row-padding);
   display: grid;

package/dist/forge.css

@@ -1446,6 +1446,18 @@ body {
   text-decoration: var(--forge-typography-label2-text-decoration, inherit);
 }
 
+.forge-typography--label3 {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--forge-typography-label3-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
+  font-size: var(--forge-typography-label3-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.875)));
+  font-weight: var(--forge-typography-label3-font-weight, 400);
+  line-height: var(--forge-typography-label3-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));
+  letter-spacing: var(--forge-typography-label3-letter-spacing, 0.0089285714em);
+  text-transform: var(--forge-typography-label3-text-transform, inherit);
+  text-decoration: var(--forge-typography-label3-text-decoration, inherit);
+}
+
 .forge-typography--button {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

package/dist/icon-button/forge-icon-button.css

@@ -40,6 +40,7 @@
   --_icon-button-density-medium-size: var(--forge-icon-button-density-medium-size, 36px);
   --_icon-button-density-medium-padding: var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));
   --_icon-button-density-large-size: var(--forge-icon-button-density-large-size, var(--_icon-button-size));
+  --_icon-button-toggle-on-background-color: var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));
   --_icon-button-toggle-on-icon-color: var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));
   --_icon-button-outlined-toggle-on-background-color: var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));
   --_icon-button-outlined-toggle-on-icon-color: var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));