@tylertech/forge 3.3.6 → 3.4.1

package/dist/radio/forge-radio.css

@@ -8,7 +8,7 @@
   --_radio-primary-color: var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));
   --_radio-inactive-color: var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));
   --_radio-size: var(--forge-radio-size, 20px);
-  --_radio-mark-size: var(--forge-radio-mark-size, 12px);
+  --_radio-mark-size: var(--forge-radio-mark-size, 75%);
   --_radio-state-layer-size: var(--forge-radio-state-layer-size, 40px);
   --_radio-state-layer-dense-size: var(--forge-radio-state-layer-dense-size, 24px);
   --_radio-width: var(--forge-radio-width, var(--_radio-size));
@@ -20,10 +20,7 @@
   --_radio-shape: var(--forge-radio-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));
   --_radio-mark-width: var(--forge-radio-mark-width, var(--_radio-mark-size));
   --_radio-mark-height: var(--forge-radio-mark-height, var(--_radio-mark-size));
-  --_radio-mark-unchecked-color: var(--forge-radio-mark-unchecked-color, var(--_radio-inactive-color));
-  --_radio-mark-checked-color: var(--forge-radio-mark-checked-color, var(--_radio-primary-color));
-  --_radio-mark-unchecked-background: var(--forge-radio-mark-unchecked-background, transparent);
-  --_radio-mark-checked-background: var(--forge-radio-mark-checked-background, transparent);
+  --_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-direction: var(--forge-radio-direction, initial);
@@ -146,9 +143,7 @@
   block-size: var(--_radio-state-layer-height);
   cursor: pointer;
   position: relative;
-  align-items: center;
-  justify-content: center;
-  display: flex;
+  display: inline block;
   overflow: hidden;
   transition-duration: var(--_radio-animation-duration);
   transition-delay: var(--_radio-animation-delay);
@@ -167,28 +162,28 @@
 .forge-radio::before::after {
   content: "";
   position: absolute;
-  contain: strict;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: top left;
   transition-duration: var(--_radio-animation-duration);
   transition-delay: var(--_radio-animation-delay);
   transition-timing-function: var(--_radio-animation-timing-function);
-  transition-property: inline-size, block-size, border-color;
+  transition-property: opacity, scale;
   border-radius: var(--_radio-shape);
-  border-width: calc(var(--_radio-mark-height) / 2) calc(var(--_radio-mark-width) / 2);
-  border-color: var(--_radio-mark-unchecked-color);
-  border-style: solid;
-  inline-size: calc(var(--_radio-width) - 2 * var(--_radio-border-width));
-  block-size: calc(var(--_radio-height) - 2 * var(--_radio-border-width));
-  background: var(--_radio-mark-unchecked-background);
+  inline-size: var(--_radio-mark-width);
+  block-size: var(--_radio-mark-height);
+  background: var(--_radio-mark-color);
+  scale: 0.5;
+  opacity: 0;
 }
 .forge-radio:has(input[type=radio]:checked)::before {
   border-color: var(--_radio-checked-border-color);
-  background: radial-gradient(circle, var(--_radio-mark-checked-color) 0%, var(--_radio-mark-checked-color) calc(calc(var(--_radio-mark-size) / 2) - 0.2px), transparent calc(calc(var(--_radio-mark-size) / 2) + 0.2px), transparent 100%);
+  background: radial-gradient(circle, var(--_radio-mark-color) 0%, var(--_radio-mark-color) calc(calc(var(--_radio-mark-size) / 1.4) - 0.2px), transparent calc(calc(var(--_radio-mark-size) / 1.4) + 0.2px), transparent 100%);
 }
 .forge-radio:has(input[type=radio]:checked)::before::after {
-  border-color: var(--_radio-mark-checked-color);
-  inline-size: 0px;
-  block-size: 0px;
-  background: var(--_radio-mark-checked-background);
+  scale: 1;
+  opacity: 1;
 }
 .forge-radio:has(input[type=radio]:disabled) {
   opacity: var(--_radio-disabled-opacity);

package/dist/toolbar/forge-toolbar.css

@@ -18,11 +18,12 @@
   --_toolbar-padding: var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));
   --_toolbar-padding-block: var(--forge-toolbar-padding-block, 0);
   --_toolbar-padding-inline: var(--forge-toolbar-padding-inline, var(--_toolbar-padding));
+  --_toolbar-columns: var(--forge-toolbar-columns, auto 1fr auto);
 }
 
 .forge-toolbar {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: var(--_toolbar-columns);
   height: var(--_toolbar-height);
   min-height: var(--_toolbar-min-height);
   box-sizing: border-box;

package/dist/typography/forge-typography.css

@@ -380,6 +380,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/vscode.css-custom-data.json

@@ -1887,6 +1887,11 @@
       "description": "The size of the button when in the large density.",
       "values": []
     },
+    {
+      "name": "--forge-icon-button-toggle-on-background-color",
+      "description": "The background color of the when in toggle mode and toggled on.",
+      "values": []
+    },
     {
       "name": "--forge-icon-button-toggle-on-icon-color",
       "description": "The color of the icon when in toggle mode and toggled on.",
@@ -3547,6 +3552,11 @@
       "description": "Controls the left and right padding using the padding-block style.",
       "values": []
     },
+    {
+      "name": "--forge-toolbar-columns",
+      "description": "The grid column track sizes.",
+      "values": []
+    },
     {
       "name": "--forge-tooltip-background",
       "description": "The background color of the tooltip surface.",
@@ -3707,6 +3717,11 @@
       "description": "The padding around the title element.",
       "values": []
     },
+    {
+      "name": "--forge-app-bar-columns",
+      "description": "The grid column track sizes.",
+      "values": []
+    },
     {
       "name": "--forge-app-bar-transition-duration",
       "description": "The transition duration for animations.",
@@ -4583,23 +4598,8 @@
       "values": []
     },
     {
-      "name": "--forge-radio-mark-unchecked-color",
-      "description": "The color of the radio button's mark when unchecked.",
-      "values": []
-    },
-    {
-      "name": "--forge-radio-mark-checked-color",
-      "description": "The color of the radio button's mark when checked.",
-      "values": []
-    },
-    {
-      "name": "--forge-radio-mark-unchecked-background",
-      "description": "The background of the radio button's mark when unchecked.",
-      "values": []
-    },
-    {
-      "name": "--forge-radio-mark-checked-background",
-      "description": "The background of the radio button's mark when checked.",
+      "name": "--forge-radio-mark-color",
+      "description": "The color of the radio button's mark.",
       "values": []
     },
     {
@@ -5077,16 +5077,6 @@
       "description": "The shape of the active tab indicator when vertical.",
       "values": []
     },
-    {
-      "name": "--forge-tab-secondary-indicator-height",
-      "description": "The height of the secondary tab indicator.",
-      "values": []
-    },
-    {
-      "name": "--forge-tab-secondary-indicator-shape",
-      "description": "The shape of the secondary tab indicator.",
-      "values": []
-    },
     {
       "name": "--forge-tab-inverted-indicator-shape",
       "description": "The shape of the active tab indicator when inverted.",
@@ -5137,11 +5127,6 @@
       "description": "The inline padding of the tab content.",
       "values": []
     },
-    {
-      "name": "--forge-tab-content-padding-inline-secondary",
-      "description": "The inline padding of the tab content when secondary.",
-      "values": []
-    },
     {
       "name": "--forge-tab-active-focus-icon-color",
       "description": "The color of the icon when the tab is active and focused.",

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

@@ -689,7 +689,7 @@
     },
     {
       "name": "forge-date-range-picker",
-      "description": "\n---\n",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-date-range-picker-change** - Emits when the value of the date range picker changes.\n- **forge-date-range-picker-open** - Emits when the date range picker calendar opens.\n- **forge-date-range-picker-close** - Emits when the date range picker calendar closes.\n- **forge-date-range-picker-input** - Emits when the user inputs a value into the date range picker.",
       "attributes": [
         {
           "name": "allow-invalid-date",
@@ -1154,7 +1154,7 @@
     },
     {
       "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-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": "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.",
       "attributes": [
         {
           "name": "toggle",
@@ -2394,7 +2394,7 @@
     },
     {
       "name": "forge-toolbar",
-      "description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.\nThis component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-theme-height** - Controls the height. _(default: undefined)_\n- **--forge-theme-min-height** - Controls the minimum height. _(default: undefined)_\n- **--forge-theme-surface** - Controls the background-color of the toolbar. _(default: undefined)_\n- **--forge-toolbar-divider-width** - Controls the divider width. _(default: undefined)_\n- **--forge-toolbar-divider-style** - Controls the divider style. _(default: undefined)_\n- **--forge-toolbar-divider-color** - Controls the divider color. _(default: undefined)_\n- **--forge-toolbar-shape** - Controls the border radius of the toolbar. _(default: undefined)_\n- **--forge-toolbar-start-start-shape** - Controls the border radius of the top left corner. _(default: undefined)_\n- **--forge-toolbar-start-end-shape** - Controls the border radius of the top right corner. _(default: undefined)_\n- **--forge-toolbar-end-start-shape** - Controls the border radius of the bottom left corner. _(default: undefined)_\n- **--forge-toolbar-end-end-shape** - Controls the border radius of the bottom right corner. _(default: undefined)_\n- **--forge-toolbar-padding** - Controls the left and right padding using the padding-inline style. _(default: undefined)_\n- **--forge-toolbar-padding-block** - Controls the top and bottom padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-padding-inline** - Controls the left and right padding using the padding-block style. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element wrapping all slots and content.\n- **inner** - The internal container element for the start, center, and end slots.\n- **before-section-start** - The container element for the before-start slot.\n- **section-start** - The container element for the start slot.\n- **section-center** - The container element for the center slot.\n- **section-end** - The container element for the end slot.\n- **after-section-end** - The container element for the after-end slot.",
+      "description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.\nThis component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-theme-height** - Controls the height. _(default: undefined)_\n- **--forge-theme-min-height** - Controls the minimum height. _(default: undefined)_\n- **--forge-theme-surface** - Controls the background-color of the toolbar. _(default: undefined)_\n- **--forge-toolbar-divider-width** - Controls the divider width. _(default: undefined)_\n- **--forge-toolbar-divider-style** - Controls the divider style. _(default: undefined)_\n- **--forge-toolbar-divider-color** - Controls the divider color. _(default: undefined)_\n- **--forge-toolbar-shape** - Controls the border radius of the toolbar. _(default: undefined)_\n- **--forge-toolbar-start-start-shape** - Controls the border radius of the top left corner. _(default: undefined)_\n- **--forge-toolbar-start-end-shape** - Controls the border radius of the top right corner. _(default: undefined)_\n- **--forge-toolbar-end-start-shape** - Controls the border radius of the bottom left corner. _(default: undefined)_\n- **--forge-toolbar-end-end-shape** - Controls the border radius of the bottom right corner. _(default: undefined)_\n- **--forge-toolbar-padding** - Controls the left and right padding using the padding-inline style. _(default: undefined)_\n- **--forge-toolbar-padding-block** - Controls the top and bottom padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-padding-inline** - Controls the left and right padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-columns** - The grid column track sizes. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element wrapping all slots and content.\n- **inner** - The internal container element for the start, center, and end slots.\n- **before-section-start** - The container element for the before-start slot.\n- **section-start** - The container element for the start slot.\n- **section-center** - The container element for the center slot.\n- **section-end** - The container element for the end slot.\n- **after-section-end** - The container element for the after-end slot.",
       "attributes": [
         {
           "name": "inverted",
@@ -2506,7 +2506,7 @@
     },
     {
       "name": "forge-app-bar",
-      "description": "\n---\n\n\n### **Events:**\n - **forge-app-bar-navigate** - Fires when the app bar is clicked.\n\n### **Slots:**\n - **logo** - Reserved for the brand logo.\n- **title** - Reserved for the application title. This will overwrite the `titleText` property/attribute.\n- **start** - Places content at the beginning of the app bar.\n- **center** - Places content in the center of the app bar.\n- **end** - Places content at the end of the app bar.\n\n### **CSS Properties:**\n - **--forge-app-bar-background** - The background color of the app bar. _(default: undefined)_\n- **--forge-app-bar-foreground** - The text color of the app bar. _(default: undefined)_\n- **--forge-app-bar-z-index** - The `z-index` of the app bar. _(default: undefined)_\n- **--forge-app-bar-elevation** - The elevation of the app bar. _(default: undefined)_\n- **--forge-app-bar-height** - The height of the app bar. _(default: undefined)_\n- **--forge-app-bar-row-padding** - The inline padding of the app bar. _(default: undefined)_\n- **--forge-app-bar-logo-gap** - The space between the logo and title. _(default: undefined)_\n- **--forge-app-bar-title-padding** - The padding around the title element. _(default: undefined)_\n- **--forge-app-bar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-app-bar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **title** - The title element.",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-app-bar-navigate** - Fires when the app bar is clicked.\n\n### **Slots:**\n - **logo** - Reserved for the brand logo.\n- **title** - Reserved for the application title. This will overwrite the `titleText` property/attribute.\n- **start** - Places content at the beginning of the app bar.\n- **center** - Places content in the center of the app bar.\n- **end** - Places content at the end of the app bar.\n\n### **CSS Properties:**\n - **--forge-app-bar-background** - The background color of the app bar. _(default: undefined)_\n- **--forge-app-bar-foreground** - The text color of the app bar. _(default: undefined)_\n- **--forge-app-bar-z-index** - The `z-index` of the app bar. _(default: undefined)_\n- **--forge-app-bar-elevation** - The elevation of the app bar. _(default: undefined)_\n- **--forge-app-bar-height** - The height of the app bar. _(default: undefined)_\n- **--forge-app-bar-row-padding** - The inline padding of the app bar. _(default: undefined)_\n- **--forge-app-bar-logo-gap** - The space between the logo and title. _(default: undefined)_\n- **--forge-app-bar-title-padding** - The padding around the title element. _(default: undefined)_\n- **--forge-app-bar-columns** - The grid column track sizes. _(default: undefined)_\n- **--forge-app-bar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-app-bar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **title** - The title element.",
       "attributes": [
         {
           "name": "title-text",
@@ -3061,7 +3061,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-unchecked-color** - The color of the radio button's mark when unchecked. _(default: undefined)_\n- **--forge-radio-mark-checked-color** - The color of the radio button's mark when checked. _(default: undefined)_\n- **--forge-radio-mark-unchecked-background** - The background of the radio button's mark when unchecked. _(default: undefined)_\n- **--forge-radio-mark-checked-background** - The background of the radio button's mark when checked. _(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-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",
@@ -3561,7 +3561,7 @@
     },
     {
       "name": "forge-tab",
-      "description": "\n---\n\n\n### **Events:**\n - **forge-tab-select** - Dispatched when the tab is selected. This event bubbles and it can be useful to capture it on the `<forge-tab-bar>` element.\n\n### **Slots:**\n - _default_ - The tab label.\n- **start** - Content before the label.\n- **end** - Content after the label.\n\n### **CSS Properties:**\n - **--forge-tab-active-color** - The primary color of the contents when active. _(default: undefined)_\n- **--forge-tab-inactive-color** - The primary color of the contents when inactive. _(default: undefined)_\n- **--forge-tab-height** - The height of the tab. _(default: undefined)_\n- **--forge-tab-stacked-height** - The height of the tab when stacked. _(default: undefined)_\n- **--forge-tab-padding-block** - The block space between the tab contents and the bounds of the tab. _(default: undefined)_\n- **--forge-tab-padding-inline** - The inline space between the tab contents and the bounds of the tab. _(default: undefined)_\n- **--forge-tab-disabled-opacity** - The opacity of the tab when disabled. _(default: undefined)_\n- **--forge-tab-indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--forge-tab-indicator-height** - The height of the active tab indicator. _(default: undefined)_\n- **--forge-tab-indicator-shape** - The shape of the active tab indicator. _(default: undefined)_\n- **--forge-tab-vertical-indicator-shape** - The shape of the active tab indicator when vertical. _(default: undefined)_\n- **--forge-tab-secondary-indicator-height** - The height of the secondary tab indicator. _(default: undefined)_\n- **--forge-tab-secondary-indicator-shape** - The shape of the secondary tab indicator. _(default: undefined)_\n- **--forge-tab-inverted-indicator-shape** - The shape of the active tab indicator when inverted. _(default: undefined)_\n- **--forge-tab-vertical-inverted-indicator-shape** - The shape of the active tab indicator when vertical and inverted. _(default: undefined)_\n- **--forge-tab-container-color** - The color of the tab container. _(default: undefined)_\n- **--forge-tab-container-height** - The height of the tab container. _(default: undefined)_\n- **--forge-tab-container-shape** - The shape of the tab container. _(default: undefined)_\n- **--forge-tab-content-height** - The height of the tab content. _(default: undefined)_\n- **--forge-tab-content-spacing** - The spacing between tab contents. _(default: undefined)_\n- **--forge-tab-content-padding** - The padding value for both block and inline of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-block** - The block padding of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-inline** - The inline padding of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-inline-secondary** - The inline padding of the tab content when secondary. _(default: undefined)_\n- **--forge-tab-active-focus-icon-color** - The color of the icon when the tab is active and focused. _(default: undefined)_\n- **--forge-tab-active-hover-icon-color** - The color of the icon when the tab is active and hovered. _(default: undefined)_\n- **--forge-tab-active-icon-color** - The color of the icon when the tab is active. _(default: undefined)_\n- **--forge-tab-active-pressed-icon-color** - The color of the icon when the tab is active and pressed. _(default: undefined)_\n- **--forge-tab-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-tab-focus-icon-color** - The color of the icon when the tab is focused. _(default: undefined)_\n- **--forge-tab-hover-icon-color** - The color of the icon when the tab is hovered. _(default: undefined)_\n- **--forge-tab-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-tab-pressed-icon-color** - The color of the icon when the tab is pressed. _(default: undefined)_\n- **--forge-tab-active-focus-label-text-color** - The color of the label text when the tab is active and focused. _(default: undefined)_\n- **--forge-tab-active-hover-label-text-color** - The color of the label text when the tab is active and hovered. _(default: undefined)_\n- **--forge-tab-active-label-text-color** - The color of the label text when the tab is active. _(default: undefined)_\n- **--forge-tab-active-pressed-label-text-color** - The color of the label text when the tab is active and pressed. _(default: undefined)_\n- **--forge-tab-focus-label-text-color** - The color of the label text when the tab is focused. _(default: undefined)_\n- **--forge-tab-hover-label-text-color** - The color of the label text when the tab is hovered. _(default: undefined)_\n- **--forge-tab-label-text-color** - The color of the label text. _(default: undefined)_\n- **--forge-tab-pressed-label-text-color** - The color of the label text when the tab is pressed. _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The tab container.\n- **content** - The tab content container.\n- **label** - The tab label container.\n- **indicator** - The tab active indicator.",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-tab-select** - Dispatched when the tab is selected. This event bubbles and it can be useful to capture it on the `<forge-tab-bar>` element.\n\n### **Slots:**\n - _default_ - The tab label.\n- **start** - Content before the label.\n- **end** - Content after the label.\n\n### **CSS Properties:**\n - **--forge-tab-active-color** - The primary color of the contents when active. _(default: undefined)_\n- **--forge-tab-inactive-color** - The primary color of the contents when inactive. _(default: undefined)_\n- **--forge-tab-height** - The height of the tab. _(default: undefined)_\n- **--forge-tab-stacked-height** - The height of the tab when stacked. _(default: undefined)_\n- **--forge-tab-padding-block** - The block space between the tab contents and the bounds of the tab. _(default: undefined)_\n- **--forge-tab-padding-inline** - The inline space between the tab contents and the bounds of the tab. _(default: undefined)_\n- **--forge-tab-disabled-opacity** - The opacity of the tab when disabled. _(default: undefined)_\n- **--forge-tab-indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--forge-tab-indicator-height** - The height of the active tab indicator. _(default: undefined)_\n- **--forge-tab-indicator-shape** - The shape of the active tab indicator. _(default: undefined)_\n- **--forge-tab-vertical-indicator-shape** - The shape of the active tab indicator when vertical. _(default: undefined)_\n- **--forge-tab-inverted-indicator-shape** - The shape of the active tab indicator when inverted. _(default: undefined)_\n- **--forge-tab-vertical-inverted-indicator-shape** - The shape of the active tab indicator when vertical and inverted. _(default: undefined)_\n- **--forge-tab-container-color** - The color of the tab container. _(default: undefined)_\n- **--forge-tab-container-height** - The height of the tab container. _(default: undefined)_\n- **--forge-tab-container-shape** - The shape of the tab container. _(default: undefined)_\n- **--forge-tab-content-height** - The height of the tab content. _(default: undefined)_\n- **--forge-tab-content-spacing** - The spacing between tab contents. _(default: undefined)_\n- **--forge-tab-content-padding** - The padding value for both block and inline of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-block** - The block padding of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-inline** - The inline padding of the tab content. _(default: undefined)_\n- **--forge-tab-active-focus-icon-color** - The color of the icon when the tab is active and focused. _(default: undefined)_\n- **--forge-tab-active-hover-icon-color** - The color of the icon when the tab is active and hovered. _(default: undefined)_\n- **--forge-tab-active-icon-color** - The color of the icon when the tab is active. _(default: undefined)_\n- **--forge-tab-active-pressed-icon-color** - The color of the icon when the tab is active and pressed. _(default: undefined)_\n- **--forge-tab-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-tab-focus-icon-color** - The color of the icon when the tab is focused. _(default: undefined)_\n- **--forge-tab-hover-icon-color** - The color of the icon when the tab is hovered. _(default: undefined)_\n- **--forge-tab-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-tab-pressed-icon-color** - The color of the icon when the tab is pressed. _(default: undefined)_\n- **--forge-tab-active-focus-label-text-color** - The color of the label text when the tab is active and focused. _(default: undefined)_\n- **--forge-tab-active-hover-label-text-color** - The color of the label text when the tab is active and hovered. _(default: undefined)_\n- **--forge-tab-active-label-text-color** - The color of the label text when the tab is active. _(default: undefined)_\n- **--forge-tab-active-pressed-label-text-color** - The color of the label text when the tab is active and pressed. _(default: undefined)_\n- **--forge-tab-focus-label-text-color** - The color of the label text when the tab is focused. _(default: undefined)_\n- **--forge-tab-hover-label-text-color** - The color of the label text when the tab is hovered. _(default: undefined)_\n- **--forge-tab-label-text-color** - The color of the label text. _(default: undefined)_\n- **--forge-tab-pressed-label-text-color** - The color of the label text when the tab is pressed. _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The tab container.\n- **content** - The tab content container.\n- **label** - The tab label container.\n- **indicator** - The tab active indicator.",
       "attributes": [
         {
           "name": "disabled",
@@ -3585,7 +3585,7 @@
         },
         {
           "name": "secondary",
-          "description": "Controls whether the tab is styled as secondary tab navigation.",
+          "description": "Deprecated. Controls whether the tab is styled as secondary tab navigation.",
           "values": []
         },
         {
@@ -3627,7 +3627,7 @@
         },
         {
           "name": "secondary",
-          "description": "Controls whether the tabs are styled as secondary tab navigation.",
+          "description": "Deprecated. Controls whether the tabs are styled as secondary tab navigation.",
           "values": []
         },
         {

package/esm/app-bar/app-bar/app-bar.d.ts

@@ -45,6 +45,7 @@ declare global {
  * @cssproperty --forge-app-bar-row-padding - The inline padding of the app bar.
  * @cssproperty --forge-app-bar-logo-gap - The space between the logo and title.
  * @cssproperty --forge-app-bar-title-padding - The padding around the title element.
+ * @cssproperty --forge-app-bar-columns - The grid column track sizes.
  * @cssproperty --forge-app-bar-transition-duration - The transition duration for animations.
  * @cssproperty --forge-app-bar-transition-timing - The transition timing function for animations.
  *

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

@@ -10,7 +10,7 @@ import { AppBarCore } from './app-bar-core';
 import { APP_BAR_CONSTANTS } from './app-bar-constants';
 import { BaseComponent } from '../../core/base/base-component';
 const template = '<template><div class=\"forge-app-bar\" part=\"root\"><div class=\"row\"><div class=\"section\"><slot name=\"start\"></slot><div class=\"logo-title-container\"><slot name=\"logo\"></slot><slot name=\"title\"></slot></div></div><div id=\"center-section\" class=\"section\"><slot name=\"center\"></slot></div><div class=\"section\"><slot name=\"end\"></slot></div></div><div><slot name=\"bottom\"></slot></div></div></template>';
-const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host(:not([theme])){--forge-theme-primary:var(--_app-bar-foreground);--forge-theme-on-primary:rgba(0, 0, 0, 0.87);--forge-theme-text-high:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(255, 255, 255, 0.54);--forge-theme-text-low:rgba(255, 255, 255, 0.38);--forge-theme-outline-high:rgba(255, 255, 255, 0.87);--forge-theme-outline-medium:rgba(255, 255, 255, 0.54);--forge-theme-outline-low:rgba(255, 255, 255, 0.38)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_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-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-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;transition-property:box-shadow,background-color;transition-duration:var(--_app-bar-transition-duration);transition-timing-function:var(--_app-bar-transition-timing);box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;align-items:center;grid-template-columns:1fr 1fr 1fr;height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .row{grid-template-columns:1fr auto}.forge-app-bar .section{display:inline-flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:not(:last-child):not(:first-child){justify-content:center}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:flex;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{box-shadow:var(--_app-bar-elevation)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em;width:1em}::slotted(forge-app-bar-search[slot=center]){width:100%}:host([theme=white]){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}:host([theme=white]) .forge-app-bar{--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black)}';
+const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host(:not([theme])){--forge-theme-primary:var(--_app-bar-foreground);--forge-theme-on-primary:rgba(0, 0, 0, 0.87);--forge-theme-text-high:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(255, 255, 255, 0.54);--forge-theme-text-low:rgba(255, 255, 255, 0.38);--forge-theme-outline-high:rgba(255, 255, 255, 0.87);--forge-theme-outline-medium:rgba(255, 255, 255, 0.54);--forge-theme-outline-low:rgba(255, 255, 255, 0.38)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_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-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;transition-property:box-shadow,background-color;transition-duration:var(--_app-bar-transition-duration);transition-timing-function:var(--_app-bar-transition-timing);box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;align-items:center;grid-template-columns:var(--_app-bar-columns);height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .row{grid-template-columns:1fr auto}.forge-app-bar .section{display:inline-flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:not(:last-child):not(:first-child){justify-content:center}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:flex;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{box-shadow:var(--_app-bar-elevation)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em;width:1em}::slotted(forge-app-bar-search[slot=center]){width:100%}:host([theme=white]){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}:host([theme=white]) .forge-app-bar{--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black)}';
 /**
  * @tag forge-app-bar
  *
@@ -36,6 +36,7 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
  * @cssproperty --forge-app-bar-row-padding - The inline padding of the app bar.
  * @cssproperty --forge-app-bar-logo-gap - The space between the logo and title.
  * @cssproperty --forge-app-bar-title-padding - The padding around the title element.
+ * @cssproperty --forge-app-bar-columns - The grid column track sizes.
  * @cssproperty --forge-app-bar-transition-duration - The transition duration for animations.
  * @cssproperty --forge-app-bar-transition-timing - The transition timing function for animations.
  *

package/esm/button-area/button-area.js

@@ -12,7 +12,7 @@ import { FocusIndicatorComponent } from '../focus-indicator';
 import { StateLayerComponent } from '../state-layer';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot id=\"content\"></slot><forge-state-layer target=\"root\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator target=\"button\" part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}forge-focus-indicator{z-index:1;--forge-focus-indicator-color:var(--_button-area-focus-indicator-color);--forge-focus-indicator-outward-offset:var(--_button-area-focus-indicator-offset)}forge-state-layer{--forge-state-layer-color:var(--_button-area-primary-color);border-radius:inherit}';
+const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}forge-focus-indicator{z-index:1;--forge-focus-indicator-color:var(--_button-area-focus-indicator-color);--forge-focus-indicator-outward-offset:var(--_button-area-focus-indicator-offset)}forge-state-layer{--forge-state-layer-color:var(--_button-area-primary-color);border-radius:inherit}';
 /**
  * @tag forge-button-area
  *

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

@@ -380,7 +380,7 @@ export declare class CalendarCore implements ICalendarCore {
     private _setMonth;
     /**
      * Sets the year text and attribute in the adapter.
-     * @param userSelected Whether the year was explicilty selected by the user (optional)
+     * @param userSelected Whether the year was explicity selected by the user (optional)
      * */
     private _setYear;
     /**

package/esm/calendar/calendar-core.js

@@ -1328,7 +1328,7 @@ export class CalendarCore {
     }
     /**
      * Sets the year text and attribute in the adapter.
-     * @param userSelected Whether the year was explicilty selected by the user (optional)
+     * @param userSelected Whether the year was explicity selected by the user (optional)
      * */
     _setYear(userSelected) {
         this._adapter.setYear(this._year, this._locale);

package/esm/calendar/calendar.js

@@ -18,7 +18,7 @@ import { StateLayerComponent } from '../state-layer';
 import { FocusIndicatorComponent } from '../focus-indicator';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-calendar\" part=\"root\"><div id=\"view\" class=\"forge-calendar__view\" part=\"view\"><div id=\"date-view\" class=\"forge-calendar__date-view\" role=\"grid\" part=\"date-view\"><div role=\"rowgroup\" part=\"date-view-container\"><div id=\"day-row\" class=\"forge-calendar__date-view__row\" role=\"row\" part=\"date-view-row\"></div></div><div id=\"date-grid\" class=\"forge-calendar__date-grid\" role=\"rowgroup\" part=\"date-grid-container\"></div></div><forge-calendar-menu id=\"menu\" part=\"calendar-menu\"></forge-calendar-menu></div></div></template>';
-const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fit-content;position:relative}.forge-calendar__header{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__footer{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__view{position:relative}.forge-calendar__date-view{display:block}.forge-calendar__date-view__row{display:grid;grid-template-columns:repeat(7,1fr)}.forge-calendar__date-grid{display:grid}.forge-calendar__day{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);display:flex;justify-content:center;align-items:center;min-width:0;padding:0;font-weight:700;user-select:none}.forge-calendar__day::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date{margin-top:var(--forge-calendar-row-gap,2px);min-width:0;padding:0;border-radius:50%;position:relative;outline:0;cursor:default;user-select:none}.forge-calendar__date::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date forge-focus-indicator{--forge-focus-indicator-shape:50%}.forge-calendar__date__inner{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);top:calc(2px / 2);left:calc(2px / 2);display:flex;justify-content:center;align-items:center;border-radius:inherit;box-sizing:border-box}.forge-calendar--show-today .forge-calendar__date--today:not([disabled]){color:var(--forge-theme-primary,#3f51b5);border-color:var(--forge-theme-primary,#3f51b5)}.forge-calendar--show-today .forge-calendar__date--today .forge-calendar__date__inner{border-color:inherit;border-width:1px;border-style:solid;font-weight:700}.forge-calendar--show-today .forge-calendar__date--today.forge-calendar__date--selected{color:var(--forge-theme-on-primary,#fff)}.forge-calendar:not(.forge-calendar--readonly) .forge-calendar__date:not([disabled]){cursor:pointer}.forge-calendar__date--selected:not([disabled]) .forge-calendar__date__inner{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar__date--selected[disabled] .forge-calendar__date__inner{background-color:var(--forge-theme-primary-container-minimum,#f7f8fc);color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container)}.forge-calendar__date[disabled]{color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date-spacer{pointer-events:none}.forge-calendar--fixed-height .forge-calendar__date-spacer{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__range:not(.forge-calendar__date-spacer) .forge-calendar__range__target{background-color:var(--forge-theme-primary,#3f51b5);position:absolute;width:100%;height:100%;opacity:.14;border-radius:0}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--start .forge-calendar__range__target{border-top-left-radius:50%;border-bottom-left-radius:50%}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--end .forge-calendar__range__target{border-top-right-radius:50%;border-bottom-right-radius:50%}.forge-calendar__range:not(.forge-calendar__range--start):first-of-type .forge-calendar__range__target{border-top-left-radius:4px;border-bottom-left-radius:4px}.forge-calendar__range:not(.forge-calendar__range--end):last-of-type .forge-calendar__range__target{border-top-right-radius:4px;border-bottom-right-radius:4px}.forge-calendar--allow-single-date-range .forge-calendar__range--start.forge-calendar__range--end .forge-calendar__range__target{transition:transform .2s;transform:scale(1.15);transform-origin:center}.forge-calendar__event{font-size:var(--forge-calendar-event-dot-size, 12px)}.forge-calendar__event[data-event-theme=primary]{color:var(--forge-calendar-theme-event-primary-accent,#3f51b5)}.forge-calendar__event[data-event-theme=secondary]{color:var(--forge-calendar-theme-event-secondary-accent,#ffc107)}.forge-calendar__event[data-event-theme=blue]{color:var(--forge-calendar-theme-event-blue-accent,#2196f3)}.forge-calendar__event[data-event-theme=light-green]{color:var(--forge-calendar-theme-event-light-green-accent,#8bc34a)}.forge-calendar__event[data-event-theme=cyan]{color:var(--forge-calendar-theme-event-cyan-accent,#00bcd4)}.forge-calendar__event[data-event-theme=teal]{color:var(--forge-calendar-theme-event-teal-accent,#009688)}.forge-calendar__event[data-event-theme=orange]{color:var(--forge-calendar-theme-event-orange-accent,#ff9800)}.forge-calendar__event[data-event-theme=blue-grey]{color:var(--forge-calendar-theme-event-blue-grey-accent,#607d8b)}.forge-calendar__event[data-event-theme=grey]{color:var(--forge-calendar-theme-event-grey-accent,#9e9e9e)}.forge-calendar__event[data-event-theme=red]{color:var(--forge-calendar-theme-event-red-accent,#f44336)}.forge-calendar__event[data-event-theme=pink]{color:var(--forge-calendar-theme-event-pink-accent,#e91e63)}.forge-calendar__event[data-event-theme=purple]{color:var(--forge-calendar-theme-event-purple-accent,#9c27b0)}.forge-calendar__event[data-event-theme=light-blue]{color:var(--forge-calendar-theme-event-light-blue-accent,#03a9f4)}.forge-calendar__event[data-event-theme=deep-purple]{color:var(--forge-calendar-theme-event-deep-purple-accent,#673ab7)}.forge-calendar__event[data-event-theme=green]{color:var(--forge-calendar-theme-event-green-accent,#4caf50)}.forge-calendar__event[data-event-theme=lime]{color:var(--forge-calendar-theme-event-lime-accent,#cddc39)}.forge-calendar__event[data-event-theme=yellow]{color:var(--forge-calendar-theme-event-yellow-accent,#ffeb3b)}.forge-calendar__event[data-event-theme=brown]{color:var(--forge-calendar-theme-event-brown-accent,#795548)}.forge-calendar__event[data-event-theme=deep-orange]{color:var(--forge-calendar-theme-event-deep-orange-accent,#ff5722)}.forge-calendar__date[disabled] .forge-calendar__event{opacity:.14}.forge-calendar__event--overflow{background-color:var(--forge-theme-surface,#fff);color:var(--forge-theme-on-surface,#000);border-radius:50%}.forge-calendar__event__wrapper{display:flex;justify-content:center;gap:2px;position:absolute;bottom:0;left:0;width:100%;padding-bottom:2px;pointer-events:none}.forge-calendar__date-spacer .forge-calendar__event__wrapper{display:none}.forge-calendar--rtl .forge-calendar__header forge-icon-button forge-icon{transform:rotate(180deg)}#accessible-header{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}#month-button forge-icon{transition:transform .2s}.forge-calendar--month-menu-open #month-button forge-icon{transform:rotate(180deg)}#year-button forge-icon{transition:transform .2s}.forge-calendar--year-menu-open #year-button forge-icon{transform:rotate(180deg)}:host{--forge-calendar-event-stroke-color:var(--forge-theme-surface, #ffffff);display:inline-block}:host([hidden]){display:none}:host([forge-popover-context=true]){--forge-calendar-event-stroke-color:var(--forge-theme-surface-bright, #ffffff)}';
+const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fit-content;position:relative}.forge-calendar__header{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__footer{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__view{position:relative}.forge-calendar__date-view{display:block}.forge-calendar__date-view__row{display:grid;grid-template-columns:repeat(7,1fr)}.forge-calendar__date-grid{display:grid}.forge-calendar__day{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);display:flex;justify-content:center;align-items:center;min-width:0;padding:0;font-weight:700;user-select:none}.forge-calendar__day::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date{margin-top:var(--forge-calendar-row-gap,2px);min-width:0;padding:0;border-radius:50%;position:relative;outline:0;cursor:default;user-select:none}.forge-calendar__date::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date forge-focus-indicator{--forge-focus-indicator-shape:50%}.forge-calendar__date__inner{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);top:calc(2px / 2);left:calc(2px / 2);display:flex;justify-content:center;align-items:center;border-radius:inherit;box-sizing:border-box}.forge-calendar--show-today .forge-calendar__date--today:not([disabled]){color:var(--forge-theme-primary,#3f51b5);border-color:var(--forge-theme-primary,#3f51b5)}.forge-calendar--show-today .forge-calendar__date--today .forge-calendar__date__inner{border-color:inherit;border-width:1px;border-style:solid;font-weight:700}.forge-calendar--show-today .forge-calendar__date--today.forge-calendar__date--selected{color:var(--forge-theme-on-primary,#fff)}.forge-calendar:not(.forge-calendar--readonly) .forge-calendar__date:not([disabled]){cursor:pointer}.forge-calendar__date--selected:not([disabled]) .forge-calendar__date__inner{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar__date--selected[disabled] .forge-calendar__date__inner{background-color:var(--forge-theme-primary-container-minimum,#f7f8fc);color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container)}.forge-calendar__date[disabled]{color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date-spacer{pointer-events:none}.forge-calendar--fixed-height .forge-calendar__date-spacer{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__range:not(.forge-calendar__date-spacer) .forge-calendar__range__target{background-color:var(--forge-theme-primary,#3f51b5);position:absolute;width:100%;height:100%;opacity:.14;border-radius:0}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--start .forge-calendar__range__target{border-top-left-radius:50%;border-bottom-left-radius:50%}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--end .forge-calendar__range__target{border-top-right-radius:50%;border-bottom-right-radius:50%}.forge-calendar__range:not(.forge-calendar__range--start):first-of-type .forge-calendar__range__target{border-top-left-radius:4px;border-bottom-left-radius:4px}.forge-calendar__range:not(.forge-calendar__range--end):last-of-type .forge-calendar__range__target{border-top-right-radius:4px;border-bottom-right-radius:4px}.forge-calendar--allow-single-date-range .forge-calendar__range--start.forge-calendar__range--end .forge-calendar__range__target{transition:transform .2s;transform:scale(1.15);transform-origin:center}.forge-calendar__event{font-size:var(--forge-calendar-event-dot-size, 12px)}.forge-calendar__event[data-event-theme=primary]{color:var(--forge-calendar-theme-event-primary-accent,#3f51b5)}.forge-calendar__event[data-event-theme=secondary]{color:var(--forge-calendar-theme-event-secondary-accent,#ffc107)}.forge-calendar__event[data-event-theme=blue]{color:var(--forge-calendar-theme-event-blue-accent,#2196f3)}.forge-calendar__event[data-event-theme=light-green]{color:var(--forge-calendar-theme-event-light-green-accent,#8bc34a)}.forge-calendar__event[data-event-theme=cyan]{color:var(--forge-calendar-theme-event-cyan-accent,#00bcd4)}.forge-calendar__event[data-event-theme=teal]{color:var(--forge-calendar-theme-event-teal-accent,#009688)}.forge-calendar__event[data-event-theme=orange]{color:var(--forge-calendar-theme-event-orange-accent,#ff9800)}.forge-calendar__event[data-event-theme=blue-grey]{color:var(--forge-calendar-theme-event-blue-grey-accent,#607d8b)}.forge-calendar__event[data-event-theme=grey]{color:var(--forge-calendar-theme-event-grey-accent,#9e9e9e)}.forge-calendar__event[data-event-theme=red]{color:var(--forge-calendar-theme-event-red-accent,#f44336)}.forge-calendar__event[data-event-theme=pink]{color:var(--forge-calendar-theme-event-pink-accent,#e91e63)}.forge-calendar__event[data-event-theme=purple]{color:var(--forge-calendar-theme-event-purple-accent,#9c27b0)}.forge-calendar__event[data-event-theme=light-blue]{color:var(--forge-calendar-theme-event-light-blue-accent,#03a9f4)}.forge-calendar__event[data-event-theme=deep-purple]{color:var(--forge-calendar-theme-event-deep-purple-accent,#673ab7)}.forge-calendar__event[data-event-theme=green]{color:var(--forge-calendar-theme-event-green-accent,#4caf50)}.forge-calendar__event[data-event-theme=lime]{color:var(--forge-calendar-theme-event-lime-accent,#cddc39)}.forge-calendar__event[data-event-theme=yellow]{color:var(--forge-calendar-theme-event-yellow-accent,#ffeb3b)}.forge-calendar__event[data-event-theme=brown]{color:var(--forge-calendar-theme-event-brown-accent,#795548)}.forge-calendar__event[data-event-theme=deep-orange]{color:var(--forge-calendar-theme-event-deep-orange-accent,#ff5722)}.forge-calendar__date[disabled] .forge-calendar__event{opacity:.14}.forge-calendar__event--overflow{background-color:var(--forge-theme-surface,#fff);color:var(--forge-theme-on-surface,#000);border-radius:50%}.forge-calendar__event__wrapper{display:flex;justify-content:center;gap:2px;position:absolute;bottom:0;left:0;width:100%;padding-bottom:2px;pointer-events:none}.forge-calendar__date-spacer .forge-calendar__event__wrapper{display:none}.forge-calendar--rtl .forge-calendar__header forge-icon-button forge-icon{transform:rotate(180deg)}#accessible-header{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}#month-button forge-icon{transition:transform .2s}.forge-calendar--month-menu-open #month-button forge-icon{transform:rotate(180deg)}#year-button forge-icon{transition:transform .2s}.forge-calendar--year-menu-open #year-button forge-icon{transform:rotate(180deg)}:host{--forge-calendar-event-stroke-color:var(--forge-theme-surface, #ffffff);display:inline-block}:host([hidden]){display:none}:host([forge-popover-context=true]){--forge-calendar-event-stroke-color:var(--forge-theme-surface-bright, #ffffff)}';
 /**
  * @tag forge-calendar
  *

package/esm/checkbox/checkbox.js

@@ -18,7 +18,7 @@ import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxCore } from './checkbox-core';
 const template = '<template><div class=\"forge-checkbox\" part=\"root\"><div id=\"container\" class=\"container\"><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><div id=\"label\" class=\"label\" part=\"label\"><slot></slot></div></div></template>';
-const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background:var(--forge-checkbox-checked-background, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, start);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;flex-direction:var(--_checkbox-direction);flex-shrink:0;align-items:center;justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:flex}.forge-checkbox .container{position:relative;align-items:center;justify-content:center;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .background{position:relative;align-items:center;justify-content:center;display:flex;transition-property:background,border-width,border-color;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-background-animation-timing);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;transition-property:stroke-dashoffset;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-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);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox{--_checkbox-gap:var(--_checkbox-dense-gap)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox .container{opacity:var(--_checkbox-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
+const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background:var(--forge-checkbox-checked-background, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, start);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;flex-direction:var(--_checkbox-direction);flex-shrink:0;align-items:center;justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:flex}.forge-checkbox .container{position:relative;align-items:center;justify-content:center;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .background{position:relative;align-items:center;justify-content:center;display:flex;transition-property:background,border-width,border-color;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-background-animation-timing);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;transition-property:stroke-dashoffset;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox{--_checkbox-gap:var(--_checkbox-dense-gap)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox .container{opacity:var(--_checkbox-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
 /**
  * @tag forge-checkbox
  *

package/esm/date-range-picker/date-range-picker.d.ts

@@ -48,6 +48,11 @@ declare global {
  * @property {DayOfWeek[]} [disabledDaysOfWeek=[]] - Gets/sets the disabled days of the week.
  * @property {string} [yearRange=''] - Gets/sets the year range for the date range picker.
  * @property {string | undefined} [locale=undefined] - Gets/sets the locale for the date range picker.
+ *
+ * @event {CustomEvent<IDateRangePickerChangeEventData>} forge-date-range-picker-change - Emits when the value of the date range picker changes.
+ * @event {CustomEvent<void>} forge-date-range-picker-open - Emits when the date range picker calendar opens.
+ * @event {CustomEvent<void>} forge-date-range-picker-close - Emits when the date range picker calendar closes.
+ * @event {CustomEvent<string>} forge-date-range-picker-input - Emits when the user inputs a value into the date range picker.
  */
 export declare class DateRangePickerComponent extends BaseDatePickerComponent<IDatePickerRange, IDatePickerRange, DateRangePickerCore> implements IDateRangePickerComponent {
     static get observedAttributes(): string[];

package/esm/date-range-picker/date-range-picker.js

@@ -44,6 +44,11 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
  * @property {DayOfWeek[]} [disabledDaysOfWeek=[]] - Gets/sets the disabled days of the week.
  * @property {string} [yearRange=''] - Gets/sets the year range for the date range picker.
  * @property {string | undefined} [locale=undefined] - Gets/sets the locale for the date range picker.
+ *
+ * @event {CustomEvent<IDateRangePickerChangeEventData>} forge-date-range-picker-change - Emits when the value of the date range picker changes.
+ * @event {CustomEvent<void>} forge-date-range-picker-open - Emits when the date range picker calendar opens.
+ * @event {CustomEvent<void>} forge-date-range-picker-close - Emits when the date range picker calendar closes.
+ * @event {CustomEvent<string>} forge-date-range-picker-input - Emits when the user inputs a value into the date range picker.
  */
 let DateRangePickerComponent = class DateRangePickerComponent extends BaseDatePickerComponent {
     static get observedAttributes() {

package/esm/deprecated/icon-button/deprecated-icon-button.js

@@ -11,7 +11,7 @@ import { DEPRECATED_ICON_BUTTON_CONSTANTS } from './deprecated-icon-button-const
 import { BaseComponent } from '../../core/base/base-component';
 import { IconComponent } from '../../icon/icon';
 const template = '<template><slot></slot><forge-focus-indicator part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></template>';
-const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_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-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));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed);--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent;border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end)}:host([hidden]){display:none}::slotted(:is(button,a)){position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing);font-size:var(--_icon-button-icon-size);height:var(--_icon-button-size);width:var(--_icon-button-size)}::slotted(a){text-decoration:none;color:var(--_icon-button-icon-color)!important}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}forge-focus-indicator{--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([dense],[density=large]):not(:is([density=medium],[density-level]))){--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding);--forge-icon-font-size:var(--_icon-button-icon-size)}:host([dense]:not([density=large]):not([density=small]):is([density=medium],[density-level])){--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([toggle]:is([on],[is-on]):not([is-on=false])){--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color);--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-primary-container-low, #e8eaf6))}';
+const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_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));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed);--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent;border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end)}:host([hidden]){display:none}::slotted(:is(button,a)){position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing);font-size:var(--_icon-button-icon-size);height:var(--_icon-button-size);width:var(--_icon-button-size)}::slotted(a){text-decoration:none;color:var(--_icon-button-icon-color)!important}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}forge-focus-indicator{--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([dense],[density=large]):not(:is([density=medium],[density-level]))){--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding);--forge-icon-font-size:var(--_icon-button-icon-size)}:host([dense]:not([density=large]):not([density=small]):is([density=medium],[density-level])){--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([toggle]:is([on],[is-on]):not([is-on=false])){--_icon-button-background-color:var(--_icon-button-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color);--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-primary-container-low, #e8eaf6))}';
 /**
  * @tag forge-deprecated-icon-button
  *