igniteui-webcomponents 4.4.0 → 4.5.0-beta.1

package/themes/dark/bootstrap.css

@@ -993,27 +993,6 @@ igc-tree-item {
   --hover-color: hsla(var(--ig-gray-500), 0.3);
 }
 
-igc-nav-drawer {
-  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
-  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
-  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
-  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
-  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
-  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
-}
-
-igc-nav-drawer-item {
-  --hover-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
-}
-
 igc-select {
   --toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --toggle-button-background: var(--ig-select-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
@@ -1338,7 +1317,7 @@ igc-checkbox {
   --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
   --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
   --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
   --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -1457,4 +1436,23 @@ igc-step {
   --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
   --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
   --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
+}
+
+igc-nav-drawer,
+igc-nav-drawer-item,
+igc-nav-drawer-header-item {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
 }

package/themes/dark/fluent.css

@@ -1279,30 +1279,6 @@ igc-tree-item {
   --active-selected-color: var(--ig-gray-200-contrast);
 }
 
-igc-nav-drawer {
-  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
-  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
-  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
-  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
-  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-400), 0.12));
-  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), 0.5));
-  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
-  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
-  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
-}
-
-igc-nav-drawer-item {
-  --hover-background: hsla(var(--ig-gray-100), 0.5);
-  --active-background: hsla(var(--ig-primary-400), 0.12);
-  --active-icon-color: hsla(var(--ig-primary-100), var(--ig-primary-a));
-  --active-text-color: hsla(var(--ig-primary-200), var(--ig-primary-a));
-}
-
 apex-grid {
   --header-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
   --header-text-color: var(--ig-gray-100-contrast);
@@ -1497,4 +1473,23 @@ igc-step {
   --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
   --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
   --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
+}
+
+igc-nav-drawer,
+igc-nav-drawer-item,
+igc-nav-drawer-header-item {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-400), 0.12));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), 0.5));
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
 }

package/themes/dark/indigo.css

@@ -760,9 +760,9 @@ igc-checkbox {
   --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
   --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-primary-400), var(--ig-primary-a)));
   --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
-  --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-primary-500), 0.3));
   --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-400), var(--ig-gray-a)));
   --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));
   --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-200), var(--ig-error-a)));
@@ -1047,47 +1047,6 @@ igc-dropdown {
   --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
 }
 
-igc-nav-drawer {
-  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-0));
-  --background: var(--ig-navdrawer-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --border-color: var(--ig-navdrawer-border-color, transparent);
-  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-gray-400), 0.5));
-  --item-hover-background: var(--ig-navdrawer-item-hover-background, transparent);
-  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
-  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
-  --background: hsla(var(--ig-gray-500), var(--ig-gray-a));
-}
-
-igc-nav-drawer {
-  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-0));
-  --background: var(--ig-navdrawer-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --border-color: var(--ig-navdrawer-border-color, transparent);
-  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-gray-400), 0.5));
-  --item-hover-background: var(--ig-navdrawer-item-hover-background, transparent);
-  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
-  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
-}
-
-igc-nav-drawer-item {
-  --text-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --hover-text-color: hsla(var(--ig-gray-50), var(--ig-gray-a));
-  --active-background: hsla(var(--ig-gray-400), 0.5);
-}
-
 igc-select {
   --toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --toggle-button-background: var(--ig-select-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
@@ -1482,4 +1441,23 @@ igc-step {
   --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
   --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 1) * 6.25rem), 6.25rem));
   --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));
+}
+
+igc-nav-drawer,
+igc-nav-drawer-item,
+igc-nav-drawer-header-item {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-0));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-navdrawer-border-color, transparent);
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-gray-400), 0.5));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, transparent);
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }

package/themes/dark/material.css

@@ -1028,27 +1028,6 @@ igc-tab {
   --hover-background: hsla(var(--ig-gray-100), 0.5);
 }
 
-igc-nav-drawer {
-  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
-  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
-  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
-  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
-  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), 0.5));
-  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
-  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
-}
-
-igc-nav-drawer-item {
-  --hover-background: hsla(var(--ig-gray-100), 0.5);
-}
-
 apex-grid {
   --content-text-color: hsla(var(--ig-gray-800), var(--ig-gray-a));
   --header-border-color: hsla(var(--ig-gray-200), 0.24);
@@ -1402,4 +1381,23 @@ igc-step {
   --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
   --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 1) * 6.25rem), 6.25rem));
   --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));
+}
+
+igc-nav-drawer,
+igc-nav-drawer-item,
+igc-nav-drawer-header-item {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), 0.5));
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
 }

package/vscode-html-custom-data.json

@@ -14,7 +14,7 @@
     },
     {
       "name": "igc-avatar",
-      "description": "An avatar component is used as a representation of a user identity\ntypically in a user profile.\n\nSlots:\n\n  * ` ` {} - Renders an icon inside the default slot.\n\nAttributes:\n\n  * `src` {`string`} - The image source to use.\n\n  * `alt` {`string`} - Alternative text for the image.\n\n  * `initials` {`string`} - Initials to use as a fallback when no image is available.\n\n  * `shape` {`\"circle\" | \"rounded\" | \"square\"`} - The shape of the avatar.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-avatar\"`} - \n\n  * `styles` - \n\n  * `src` {`string`} - The image source to use.\n\n  * `hasError` {`boolean`} - \n\n  * `alt` {`string`} - Alternative text for the image.\n\n  * `initials` {`string`} - Initials to use as a fallback when no image is available.\n\n  * `shape` {`\"circle\" | \"rounded\" | \"square\"`} - The shape of the avatar.\n\n  * `classes` {`{ circle: boolean; rounded: boolean; square: boolean; small: boolean; medium: boolean; large: boolean; }`} - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
+      "description": "An avatar component is used as a representation of a user identity\ntypically in a user profile.\n\nSlots:\n\n  * ` ` {} - Renders an icon inside the default slot.\n\nAttributes:\n\n  * `src` {`string`} - The image source to use.\n\n  * `alt` {`string`} - Alternative text for the image.\n\n  * `initials` {`string`} - Initials to use as a fallback when no image is available.\n\n  * `shape` {`\"circle\" | \"rounded\" | \"square\"`} - The shape of the avatar.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-avatar\"`} - \n\n  * `styles` - \n\n  * `src` {`string`} - The image source to use.\n\n  * `hasError` {`boolean`} - \n\n  * `alt` {`string`} - Alternative text for the image.\n\n  * `initials` {`string`} - Initials to use as a fallback when no image is available.\n\n  * `shape` {`\"circle\" | \"rounded\" | \"square\"`} - The shape of the avatar.\n\n  * `classes` {`{ circle: boolean; rounded: boolean; square: boolean; }`} - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
       "attributes": [
         {
           "name": "src",
@@ -95,7 +95,7 @@
     },
     {
       "name": "igc-button",
-      "description": "Represents a clickable button, used to submit forms or anywhere in a\ndocument for accessible, standard button functionality.\n\nEvents:\n\n  * `igcFocus` {} - Emitted when the button gains focus.\n\n  * `igcBlur` {} - Emitted when the button loses focus.\n\nSlots:\n\n  * ` ` {} - Renders the label of the button.\n\n  * `prefix` {} - Renders content before the label of the button.\n\n  * `suffix` {} - Renders content after the label of the button.\n\nAttributes:\n\n  * `variant` {`\"flat\" | \"contained\" | \"outlined\" | \"fab\"`} - Sets the variant of the button.\n\n  * `type` {`\"button\" | \"reset\" | \"submit\"`} - The type of the button. Defaults to undefined.\n\n  * `href` {`string`} - The URL the button points to.\n\n  * `download` {`string`} - Prompts to save the linked URL instead of navigating to it.\n\n  * `target` {`\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined`} - Where to display the linked URL, as the name for a browsing context.\n\n  * `rel` {`string`} - The relationship of the linked URL.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n\n  * `disabled` {`boolean`} - The disabled state of the component\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-button\"`} - \n\n  * `styles` - \n\n  * `variant` {`\"flat\" | \"contained\" | \"outlined\" | \"fab\"`} - Sets the variant of the button.\n\n  * `formAssociated` {`true`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `nativeElement` {`HTMLElement`} - \n\n  * `_disabled` {`boolean`} - \n\n  * `type` {`\"button\" | \"reset\" | \"submit\"`} - The type of the button. Defaults to undefined.\n\n  * `href` {`string`} - The URL the button points to.\n\n  * `download` {`string`} - Prompts to save the linked URL instead of navigating to it.\n\n  * `target` {`\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined`} - Where to display the linked URL, as the name for a browsing context.\n\n  * `rel` {`string`} - The relationship of the linked URL.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n\n  * `disabled` {`boolean`} - The disabled state of the component\n\n  * `form` - Returns the HTMLFormElement associated with this element.\n\n  * `classes` {`{ flat: boolean; outlined: boolean; contained: boolean; fab: boolean; small: boolean; medium: boolean; large: boolean; disabled: boolean; }`} - \n\n  * `#internals` - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
+      "description": "Represents a clickable button, used to submit forms or anywhere in a\ndocument for accessible, standard button functionality.\n\nEvents:\n\n  * `igcFocus` {} - Emitted when the button gains focus.\n\n  * `igcBlur` {} - Emitted when the button loses focus.\n\nSlots:\n\n  * ` ` {} - Renders the label of the button.\n\n  * `prefix` {} - Renders content before the label of the button.\n\n  * `suffix` {} - Renders content after the label of the button.\n\nAttributes:\n\n  * `variant` {`\"flat\" | \"contained\" | \"outlined\" | \"fab\"`} - Sets the variant of the button.\n\n  * `type` {`\"button\" | \"reset\" | \"submit\"`} - The type of the button. Defaults to undefined.\n\n  * `href` {`string`} - The URL the button points to.\n\n  * `download` {`string`} - Prompts to save the linked URL instead of navigating to it.\n\n  * `target` {`\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined`} - Where to display the linked URL, as the name for a browsing context.\n\n  * `rel` {`string`} - The relationship of the linked URL.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n\n  * `disabled` {`boolean`} - The disabled state of the component\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n  * `tagName` {`\"igc-button\"`} - \n\n  * `styles` - \n\n  * `variant` {`\"flat\" | \"contained\" | \"outlined\" | \"fab\"`} - Sets the variant of the button.\n\n  * `formAssociated` {`true`} - \n\n  * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n  * `nativeElement` {`HTMLElement`} - \n\n  * `_disabled` {`boolean`} - \n\n  * `type` {`\"button\" | \"reset\" | \"submit\"`} - The type of the button. Defaults to undefined.\n\n  * `href` {`string`} - The URL the button points to.\n\n  * `download` {`string`} - Prompts to save the linked URL instead of navigating to it.\n\n  * `target` {`\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined`} - Where to display the linked URL, as the name for a browsing context.\n\n  * `rel` {`string`} - The relationship of the linked URL.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n\n  * `disabled` {`boolean`} - The disabled state of the component\n\n  * `form` - Returns the HTMLFormElement associated with this element.\n\n  * `classes` {`{ flat: boolean; outlined: boolean; contained: boolean; fab: boolean; disabled: boolean; }`} - \n\n  * `#internals` - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
       "attributes": [
         {
           "name": "variant",

package/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.css.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.bootstrap.css.js.map

package/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/nav-drawer/themes/dark/nav-drawer-item.fluent.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-item.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/nav-drawer/themes/dark/nav-drawer-item.indigo.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/dark/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-header-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}`;\n"]}

package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js

@@ -1,17 +0,0 @@
-import { css } from 'lit';
-export const styles = css `[part=content] {
-  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);
-  line-height: var(--ig-body-2-line-height);
-  letter-spacing: var(--ig-body-2-letter-spacing);
-  text-transform: var(--ig-body-2-text-transform);
-  margin-top: var(--ig-body-2-margin-top);
-  margin-bottom: var(--ig-body-2-margin-bottom);
-}
-
-:host([active]) [part=icon] {
-  color: var(--active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-}`;
-//# sourceMappingURL=nav-drawer-item.fluent.css.js.map

package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;EAcvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=content] {\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}\n\n:host([active]) [part=icon] {\n  color: var(--active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}`;\n"]}

package/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.css.js

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-export const styles = css `:host {
-  color: hsla(var(--ig-gray-50), var(--ig-gray-a));
-}`;
-//# sourceMappingURL=nav-drawer-header-item.indigo.css.js.map

package/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-header-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;EAEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  color: hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --border-color: var(--ig-nav-drawer-border-color, transparent);\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n:host [part~=base] {\n  border-radius: var(--item-border-radius);\n  gap: 1.5rem;\n  color: var(--text-color, hsla(var(--ig-gray-300), 0.8));\n  padding: 0.25rem;\n  margin: 0.9375rem 0.5rem;\n}\n:host [part~=base]:hover, :host [part~=base]:focus-within {\n  background: transparent;\n  color: var(--hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n}\n:host [part=content] {\n  -webkit-padding-start: 0.5rem;\n          padding-inline-start: 0.5rem;\n}\n\n:host([active]) [part~=base] {\n  background: var(--active-background, hsla(var(--ig-gray-600), 0.8));\n  color: hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --border-color: var(--ig-nav-drawer-border-color, transparent);\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-header-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;EAcvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  display: block;\n  padding: 1.25rem 1rem;\n  white-space: nowrap;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"nav-drawer-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n}\n\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  gap: 2rem;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row nowrap;\n          flex-flow: row nowrap;\n  position: relative;\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  max-height: 3rem;\n  margin: 0.5rem;\n  padding: 0.75rem 0.5rem;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline: transparent;\n  white-space: nowrap;\n  text-decoration: none;\n  border: none;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-transition: background 0.15s ease-out;\n  transition: background 0.15s ease-out;\n}\n[part~=base] ::slotted(igc-icon) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  font: inherit;\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--hover-background, hsla(var(--ig-gray-200), 0.8));\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part=content] {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n}\n\n[part=\"base mini\"] {\n  display: block;\n}\n[part=\"base mini\"] [part=content] {\n  display: none;\n}\n[part=\"base mini\"] ::slotted(igc-icon) {\n  width: 100%;\n}\n\n:host([disabled]) {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: initial;\n  pointer-events: none;\n}\n:host([disabled]) [part~=base] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([active]) [part~=base] {\n  background: var(--active-background, hsla(var(--ig-primary-500), 0.12));\n  color: var(--active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}`;\n"]}