@servicetitan/design-system 12.9.0 → 12.11.0

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "12.9.0";
+  --anvil-version: "12.11.0";
 }
 
 /*
@@ -17288,7 +17288,7 @@ button.Button {
   line-height: 1.5;
 }
 .Button.Button--icon-only.Button--xsmall {
-  line-height: 0.8;
+  line-height: 1;
 }
 .Button.Button--icon-only.Button--xsmall svg {
   height: 20px;
@@ -26127,7 +26127,7 @@ button.a-Icon svg {
   overflow-x: hidden;
   opacity: 0;
 }
-.Sidebar--collapsed .Sidebar__toggle-button:not(:hover) {
+.Sidebar--collapsed .Sidebar__toggle-button:not(:hover):not(:focus) {
   box-shadow: none;
 }
 
@@ -26172,6 +26172,9 @@ button.a-Icon svg {
 .Sidebar__toggle-button:hover::before {
   background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
 }
+.Sidebar__toggle-button.Button--focus-visible:focus {
+  opacity: 1;
+}
 
 .Sidebar__toggle-button-wrapper {
   position: absolute;
@@ -26212,20 +26215,23 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
-.SideNav .Tag {
-  margin-left: 8px;
-  transform: translateY(-1px);
-}
 .SideNav a {
   text-decoration: none;
 }
+.SideNav .SideNav {
+  padding: 0;
+}
 
 .SideNav__title {
-  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
-  margin: 0 16px;
-  padding: 8px 0 24px;
+  margin: 0 8px;
+  margin-bottom: 16px;
+  padding: 8px 0;
   color: var(--colorsTextOnGrey, #444445);
 }
+.SideNav__title .Tag {
+  margin-left: 8px;
+  transform: translateY(-1px);
+}
 
 .SideNav__list {
   list-style: none;
@@ -26233,45 +26239,121 @@ button.a-Icon svg {
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
-  padding-top: 16px;
 }
 
 .SideNavItem {
   margin: 0;
   padding: 0;
 }
-
-.SideNavItem__button {
+.SideNavItem > .SideNavItem__button {
   border-radius: 3px;
   color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
-  display: block;
-  padding: 6px 16px;
+  display: flex;
+  min-height: 22px;
+  padding: 6px 8px;
   position: relative;
   transition: color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   text-decoration: none;
+  /* States */
+}
+.SideNavItem > .SideNavItem__button:hover {
+  background: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+}
+.SideNavItem > .SideNavItem__button:active:not(:focus-within) {
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
 }
-.SideNavItem__button:focus {
+.SideNavItem > .SideNavItem__button.SideNavItem__button--focus-visible:focus {
   outline: none;
+  box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
 }
-.SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
-  color: var(--colorsTextPrimary, #2270ee);
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix {
+  margin-right: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  margin-left: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  flex-grow: 1;
+  margin-top: 0.5px;
+}
+.SideNavItem.SideNavItem--disabled > .SideNavItem__button {
+  background-color: transparent !important;
+  opacity: 0.4;
+  pointer-events: none;
 }
-.SideNavItem--active .SideNavItem__button {
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
   color: var(--colorsTextPrimary, #2270ee);
 }
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) .a-Icon svg {
+  color: var(--colorsTextPrimary, #2270ee) !important;
+  fill: var(--colorsTextPrimary, #2270ee) !important;
+}
+.SideNavItem .SideNavItem__button--expanded > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  margin-left: 28px;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button .SideNavItem__button__prefix {
+  display: none;
+}
+
+.SideNavItem__button__suffix__collapsible-icon {
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 300ms 0ms;
+  transform: rotate(0) translateY(1px);
+}
+.SideNavItem__button--expanded .SideNavItem__button__suffix__collapsible-icon {
+  transform: rotate(180deg) translateY(0);
+}
+
+.SideNavItem__button .SideNavItem__button__prefix .a-Icon,
+.SideNavItem__button .SideNavItem__button__suffix .a-Icon {
+  margin-top: -0.5px;
+}
+.SideNavItem__button .StatusLight {
+  margin: -4px -5px;
+}
+.SideNavItem__button .Button {
+  margin: -4px;
+  vertical-align: middle;
+}
+.SideNavItem__button .ActionMenu__TriggerWrapper {
+  margin-top: -3px;
+}
+.SideNavItem__button .Tooltip {
+  margin-top: -2px;
+}
+.SideNavItem__button .Tag {
+  margin-left: 8px;
+  transform: translateY(0);
+}
 
 .SideNavGroup {
-  margin-top: 32px;
+  margin-top: 24px;
 }
 .SideNav__list .SideNavGroup:first-child {
   margin-top: 16px;
 }
+.SideNav__list .SideNavGroup:last-child {
+  margin-bottom: 16px;
+}
 
 .SideNavGroup__title {
-  margin: 0 16px 8px;
+  margin: 8px;
+  margin-top: 0;
 }
 
 .SideNavGroup__list {
@@ -34410,6 +34492,13 @@ _:-ms-lang(x), .Tooltip__body {
 .gap-normal-i {
   gap: normal !important;
 }
+.CollapsibleList {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+}
+
 .Overlay {
   position: fixed;
   top: 0;