igniteui-webcomponents 4.2.1 → 4.2.3

package/components/tree/themes/light/tree-item.base.css.js

@@ -34,7 +34,7 @@ export const styles = css `:host {
 
 /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
-  --size: max(var(--is-large, 1) * 3.125rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);
+  --size: max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));
   --igc-tree-indentation-size: 24px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ export const styles = css `:host {
   background: hsla(var(--ig-surface-500), var(--ig-surface-a));
   color: var(--ig-surface-500-contrast);
   height: var(--size);
-  padding: 0 max(var(--is-large, 1) * 24px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 12px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+  padding: 0 max(var(--is-large, 1) * max(24px, -1 * 24px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(12px, -1 * 12px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
 }
 [part~=wrapper]::after {
   content: "";
@@ -132,7 +132,7 @@ export const styles = css `:host {
 
 [part~=label] {
   display: block;
-  font-family: var(--ig-body-2-font-family);
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
   font-size: var(--ig-body-2-font-size);
   font-weight: var(--ig-body-2-font-weight);
   font-style: var(--ig-body-2-font-style);

package/components/tree/themes/light/tree-item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 3.125rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n  --igc-tree-indentation-size: 24px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  font-family: inherit;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n:host([disabled]) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n\n[part~=wrapper] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  height: var(--size);\n  padding: 0 max(var(--is-large, 1) * 24px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 12px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part~=wrapper]::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  background: transparent;\n}\n[part~=wrapper]:hover::after {\n  background: var(--hover-color, hsla(var(--ig-gray-900), 0.1));\n}\n\n[part~=active] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  color: var(--ig-gray-200-contrast);\n}\n\n[part~=selected] {\n  background: hsla(var(--ig-secondary-200), var(--ig-secondary-a));\n  color: var(--ig-secondary-200-contrast);\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: hsla(var(--ig-secondary-300), var(--ig-secondary-a));\n  color: var(--ig-secondary-300-contrast);\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=indicator] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n  min-width: 1.5rem;\n}\n[part~=indicator] igc-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: 1.5rem;\n}\n\n[part~=label] {\n  display: block;\n  font-family: var(--ig-body-2-font-family);\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  margin: 0;\n}\n\n[part~=label],\n[part~=text] {\n  z-index: 1;\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n[part~=select] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n}\n[part~=select] igc-checkbox::part(label) {\n  display: none;\n}\n\n[part~=large] igc-circular-progress {\n  --diameter: 1.5rem;\n}\n\n[part~=medium] igc-circular-progress {\n  --diameter: 1.25rem;\n}\n\n[part~=small] igc-circular-progress {\n  --diameter: 1.125rem;\n}`;\n"]}
+{"version":3,"file":"tree-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));\n  --igc-tree-indentation-size: 24px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  font-family: inherit;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n:host([disabled]) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n\n[part~=wrapper] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  height: var(--size);\n  padding: 0 max(var(--is-large, 1) * max(24px, -1 * 24px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(12px, -1 * 12px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part~=wrapper]::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  background: transparent;\n}\n[part~=wrapper]:hover::after {\n  background: var(--hover-color, hsla(var(--ig-gray-900), 0.1));\n}\n\n[part~=active] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  color: var(--ig-gray-200-contrast);\n}\n\n[part~=selected] {\n  background: hsla(var(--ig-secondary-200), var(--ig-secondary-a));\n  color: var(--ig-secondary-200-contrast);\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: hsla(var(--ig-secondary-300), var(--ig-secondary-a));\n  color: var(--ig-secondary-300-contrast);\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=indicator] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n  min-width: 1.5rem;\n}\n[part~=indicator] igc-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: 1.5rem;\n}\n\n[part~=label] {\n  display: block;\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  margin: 0;\n}\n\n[part~=label],\n[part~=text] {\n  z-index: 1;\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n[part~=select] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n}\n[part~=select] igc-checkbox::part(label) {\n  display: none;\n}\n\n[part~=large] igc-circular-progress {\n  --diameter: 1.5rem;\n}\n\n[part~=medium] igc-circular-progress {\n  --diameter: 1.25rem;\n}\n\n[part~=small] igc-circular-progress {\n  --diameter: 1.125rem;\n}`;\n"]}

package/custom-elements.json

@@ -610,8 +610,7 @@
         {
           "name": "active-date",
           "description": "Sets the date which is shown in view and is highlighted. By default it is the current date.",
-          "type": "Date",
-          "default": "\"new Date()\""
+          "type": "Date"
         },
         {
           "name": "locale",
@@ -729,8 +728,7 @@
           "name": "activeDate",
           "attribute": "active-date",
           "description": "Sets the date which is shown in view and is highlighted. By default it is the current date.",
-          "type": "Date",
-          "default": "\"new Date()\""
+          "type": "Date"
         },
         {
           "name": "locale",
@@ -885,8 +883,7 @@
         {
           "name": "active-date",
           "description": "Sets the date which is shown in view and is highlighted. By default it is the current date.",
-          "type": "Date",
-          "default": "\"new Date()\""
+          "type": "Date"
         },
         {
           "name": "locale",
@@ -982,8 +979,7 @@
           "name": "activeDate",
           "attribute": "active-date",
           "description": "Sets the date which is shown in view and is highlighted. By default it is the current date.",
-          "type": "Date",
-          "default": "\"new Date()\""
+          "type": "Date"
         },
         {
           "name": "locale",
@@ -2645,7 +2641,13 @@
           "name": "close-on-escape",
           "description": "Whether the dialog should be closed when pressing the 'ESCAPE' button.",
           "type": "boolean",
-          "default": "true"
+          "deprecatedMessage": "since version 4.2.3. Use `keepOpenOnEscape` instead."
+        },
+        {
+          "name": "keep-open-on-escape",
+          "description": "Whether the dialog should be kept open when pressing the 'ESCAPE' button.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "close-on-outside-click",
@@ -2687,7 +2689,14 @@
           "attribute": "close-on-escape",
           "description": "Whether the dialog should be closed when pressing the 'ESCAPE' button.",
           "type": "boolean",
-          "default": "true"
+          "deprecatedMessage": "since version 4.2.3. Use `keepOpenOnEscape` instead."
+        },
+        {
+          "name": "keepOpenOnEscape",
+          "attribute": "keep-open-on-escape",
+          "description": "Whether the dialog should be kept open when pressing the 'ESCAPE' button.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "closeOnOutsideClick",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -57,7 +57,7 @@
     "tree"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.1.0",
+    "@floating-ui/dom": "^1.2.0",
     "@lit-labs/virtualizer": "^1.0.1",
     "lit": "^2.6.1"
   }

package/themes/dark/bootstrap.css

@@ -363,7 +363,6 @@
 
 :root {
   --ig-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --ig-h1-font-family: var(--ig-font-family);
   --ig-h1-font-size: 2.5rem;
   --ig-h1-font-weight: 500;
   --ig-h1-font-style: normal;
@@ -372,7 +371,6 @@
   --ig-h1-text-transform: none;
   --ig-h1-margin-top: 0;
   --ig-h1-margin-bottom: 0.5rem;
-  --ig-h2-font-family: var(--ig-font-family);
   --ig-h2-font-size: 2rem;
   --ig-h2-font-weight: 500;
   --ig-h2-font-style: normal;
@@ -381,7 +379,6 @@
   --ig-h2-text-transform: none;
   --ig-h2-margin-top: 0;
   --ig-h2-margin-bottom: 0.5rem;
-  --ig-h3-font-family: var(--ig-font-family);
   --ig-h3-font-size: 1.75rem;
   --ig-h3-font-weight: 500;
   --ig-h3-font-style: normal;
@@ -390,7 +387,6 @@
   --ig-h3-text-transform: none;
   --ig-h3-margin-top: 0;
   --ig-h3-margin-bottom: 0.5rem;
-  --ig-h4-font-family: var(--ig-font-family);
   --ig-h4-font-size: 1.5rem;
   --ig-h4-font-weight: 500;
   --ig-h4-font-style: normal;
@@ -399,7 +395,6 @@
   --ig-h4-text-transform: none;
   --ig-h4-margin-top: 0;
   --ig-h4-margin-bottom: 0.5rem;
-  --ig-h5-font-family: var(--ig-font-family);
   --ig-h5-font-size: 1.25rem;
   --ig-h5-font-weight: 500;
   --ig-h5-font-style: normal;
@@ -408,7 +403,6 @@
   --ig-h5-text-transform: none;
   --ig-h5-margin-top: 0;
   --ig-h5-margin-bottom: 0.5rem;
-  --ig-h6-font-family: var(--ig-font-family);
   --ig-h6-font-size: 1rem;
   --ig-h6-font-weight: 500;
   --ig-h6-font-style: normal;
@@ -417,7 +411,6 @@
   --ig-h6-text-transform: none;
   --ig-h6-margin-top: 0;
   --ig-h6-margin-bottom: 0.5rem;
-  --ig-subtitle-1-font-family: var(--ig-font-family);
   --ig-subtitle-1-font-size: 0.875rem;
   --ig-subtitle-1-font-weight: 400;
   --ig-subtitle-1-font-style: normal;
@@ -426,7 +419,6 @@
   --ig-subtitle-1-text-transform: none;
   --ig-subtitle-1-margin-top: 0;
   --ig-subtitle-1-margin-bottom: 0;
-  --ig-subtitle-2-font-family: var(--ig-font-family);
   --ig-subtitle-2-font-size: 0.9rem;
   --ig-subtitle-2-font-weight: 400;
   --ig-subtitle-2-font-style: normal;
@@ -435,7 +427,6 @@
   --ig-subtitle-2-text-transform: none;
   --ig-subtitle-2-margin-top: 0;
   --ig-subtitle-2-margin-bottom: 0;
-  --ig-body-1-font-family: var(--ig-font-family);
   --ig-body-1-font-size: 1rem;
   --ig-body-1-font-weight: 400;
   --ig-body-1-font-style: normal;
@@ -444,7 +435,6 @@
   --ig-body-1-text-transform: none;
   --ig-body-1-margin-top: 0;
   --ig-body-1-margin-bottom: 0;
-  --ig-body-2-font-family: var(--ig-font-family);
   --ig-body-2-font-size: 0.9rem;
   --ig-body-2-font-weight: 400;
   --ig-body-2-font-style: normal;
@@ -453,7 +443,6 @@
   --ig-body-2-text-transform: none;
   --ig-body-2-margin-top: 0;
   --ig-body-2-margin-bottom: 0;
-  --ig-button-font-family: var(--ig-font-family);
   --ig-button-font-size: 1rem;
   --ig-button-font-weight: 500;
   --ig-button-font-style: normal;
@@ -462,7 +451,6 @@
   --ig-button-text-transform: none;
   --ig-button-margin-top: 0;
   --ig-button-margin-bottom: 0;
-  --ig-caption-font-family: var(--ig-font-family);
   --ig-caption-font-size: 0.75rem;
   --ig-caption-font-weight: 400;
   --ig-caption-font-style: normal;
@@ -471,7 +459,6 @@
   --ig-caption-text-transform: none;
   --ig-caption-margin-top: 0;
   --ig-caption-margin-bottom: 0;
-  --ig-overline-font-family: var(--ig-font-family);
   --ig-overline-font-size: 0.625rem;
   --ig-overline-font-weight: 400;
   --ig-overline-font-style: normal;
@@ -480,7 +467,6 @@
   --ig-overline-text-transform: uppercase;
   --ig-overline-margin-top: 0;
   --ig-overline-margin-bottom: 0;
-  --ig-calendar-labels-font-family: var(--ig-font-family);
   --ig-calendar-labels-font-size: 0.8125rem;
   --ig-calendar-labels-font-weight: 400;
   --ig-calendar-labels-font-style: normal;
@@ -492,7 +478,7 @@
 }
 
 .ig-typography h1 {
-  font-family: var(--ig-h1-font-family);
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
   font-style: var(--ig-h1-font-style);
@@ -503,7 +489,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography h2 {
-  font-family: var(--ig-h2-font-family);
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
   font-style: var(--ig-h2-font-style);
@@ -514,7 +500,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography h3 {
-  font-family: var(--ig-h3-font-family);
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
   font-style: var(--ig-h3-font-style);
@@ -525,7 +511,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography h4 {
-  font-family: var(--ig-h4-font-family);
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
   font-style: var(--ig-h4-font-style);
@@ -536,7 +522,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography h5 {
-  font-family: var(--ig-h5-font-family);
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
   font-style: var(--ig-h5-font-style);
@@ -547,7 +533,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography h6 {
-  font-family: var(--ig-h6-font-family);
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
   font-style: var(--ig-h6-font-style);
@@ -558,7 +544,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography p {
-  font-family: var(--ig-body-1-font-family);
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
   font-style: var(--ig-body-1-font-style);
@@ -569,7 +555,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__h1 {
-  font-family: var(--ig-h1-font-family);
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
   font-style: var(--ig-h1-font-style);
@@ -580,7 +566,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography .ig-typography__h2 {
-  font-family: var(--ig-h2-font-family);
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
   font-style: var(--ig-h2-font-style);
@@ -591,7 +577,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography .ig-typography__h3 {
-  font-family: var(--ig-h3-font-family);
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
   font-style: var(--ig-h3-font-style);
@@ -602,7 +588,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography .ig-typography__h4 {
-  font-family: var(--ig-h4-font-family);
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
   font-style: var(--ig-h4-font-style);
@@ -613,7 +599,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography .ig-typography__h5 {
-  font-family: var(--ig-h5-font-family);
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
   font-style: var(--ig-h5-font-style);
@@ -624,7 +610,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography .ig-typography__h6 {
-  font-family: var(--ig-h6-font-family);
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
   font-style: var(--ig-h6-font-style);
@@ -635,7 +621,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-1 {
-  font-family: var(--ig-subtitle-1-font-family);
+  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-1-font-size);
   font-weight: var(--ig-subtitle-1-font-weight);
   font-style: var(--ig-subtitle-1-font-style);
@@ -646,7 +632,7 @@
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-2 {
-  font-family: var(--ig-subtitle-2-font-family);
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-2-font-size);
   font-weight: var(--ig-subtitle-2-font-weight);
   font-style: var(--ig-subtitle-2-font-style);
@@ -657,7 +643,7 @@
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
 }
 .ig-typography .ig-typography__body-1 {
-  font-family: var(--ig-body-1-font-family);
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
   font-style: var(--ig-body-1-font-style);
@@ -668,7 +654,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__body-2 {
-  font-family: var(--ig-body-2-font-family);
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
   font-size: var(--ig-body-2-font-size);
   font-weight: var(--ig-body-2-font-weight);
   font-style: var(--ig-body-2-font-style);
@@ -679,7 +665,7 @@
   margin-bottom: var(--ig-body-2-margin-bottom);
 }
 .ig-typography .ig-typography__button {
-  font-family: var(--ig-button-font-family);
+  font-family: var(--ig-button-font-family, var(--ig-font-family));
   font-size: var(--ig-button-font-size);
   font-weight: var(--ig-button-font-weight);
   font-style: var(--ig-button-font-style);
@@ -690,7 +676,7 @@
   margin-bottom: var(--ig-button-margin-bottom);
 }
 .ig-typography .ig-typography__caption {
-  font-family: var(--ig-caption-font-family);
+  font-family: var(--ig-caption-font-family, var(--ig-font-family));
   font-size: var(--ig-caption-font-size);
   font-weight: var(--ig-caption-font-weight);
   font-style: var(--ig-caption-font-style);
@@ -701,7 +687,7 @@
   margin-bottom: var(--ig-caption-margin-bottom);
 }
 .ig-typography .ig-typography__overline {
-  font-family: var(--ig-overline-font-family);
+  font-family: var(--ig-overline-font-family, var(--ig-font-family));
   font-size: var(--ig-overline-font-size);
   font-weight: var(--ig-overline-font-weight);
   font-style: var(--ig-overline-font-style);