@ringcentral/spring-ui 1.7.0 → 1.8.0

package/index.css

@@ -470,6 +470,14 @@
   .sui-status-indicator-medium {
     height: var(--sui-spacing-3);
     width: var(--sui-spacing-3)
+}
+  .sui-status-indicator-small {
+    height: var(--sui-spacing-2\.5);
+    width: var(--sui-spacing-2\.5)
+}
+  /* Special size for status icon, not part of the icon size scale */
+  .sui-status-indicator-small .sui-icon {
+    font-size: 0.625rem
 }
   .sui-status-indicator-dnd {
     --tw-bg-opacity: 1;
@@ -2489,13 +2497,29 @@
 }
 
 .sui-menu-paper {
+
     min-width: var(--sui-spacing-50);
+
     max-width: var(--sui-spacing-112);
+
     overflow: hidden;
+
     padding-top: var(--sui-spacing-2);
+
     padding-bottom: var(--sui-spacing-2)
 }
 
+/* Compact Mode */
+
+:where(.sui-menu-root.sui-compact) .sui-menu-paper {
+
+    min-width: var(--sui-spacing-25);
+
+    padding-top: var(--sui-spacing-1);
+
+    padding-bottom: var(--sui-spacing-1)
+}
+
 .sui-list-root {
     width: 100%;
     overflow: auto;
@@ -2734,6 +2758,29 @@
 
     background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
 }
+  /* Compact Mode */
+  .sui-menu-item-root:where(.sui-compact) {
+
+    padding-left: var(--sui-spacing-1);
+
+    padding-right: var(--sui-spacing-1);
+}
+  :where(.sui-menu-item.sui-compact) .sui-menu-item-container {
+
+    min-height: var(--sui-spacing-8);
+
+    padding-top: var(--sui-spacing-1\.5);
+
+    padding-bottom: var(--sui-spacing-1\.5);
+
+    border-radius: var(--sui-border-radius-xs);
+
+    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
+}
+  .sui-menu-item-nowrap:where(.sui-menu-item.sui-compact) .sui-menu-item-container {
+
+    height: var(--sui-spacing-8);
+}
 
 .sui-menu-list-root {
     --tw-bg-opacity: 1;
@@ -3250,6 +3297,8 @@
 
     width: var(--sui-spacing-5);
 
+    flex: none;
+
     align-items: center;
 
     justify-content: center;
@@ -3525,19 +3574,22 @@
 
   position: relative;
 
-  cursor: pointer;
-
   outline: 2px solid transparent;
 
   outline-offset: 2px;
 }
 
-.sui-chip-clickable:focus-visible {
+.sui-chip-clickable:not(.sui-disabled) {
+
+  cursor: pointer;
+}
+
+.sui-chip-clickable:not(.sui-disabled):focus-visible {
 
   --sui-focus-ring-color: var(--sui-focus-ring-tight-color);
 }
 
-.sui-chip-clickable:focus-visible::after {
+.sui-chip-clickable:not(.sui-disabled):focus-visible::after {
 
   pointer-events: none;
 
@@ -3556,15 +3608,15 @@
 
 @media (hover: hover) {
 
-.sui-chip-clickable:hover {
-    background-color: var(--sui-chip-hover-bg-color);
-  }
+.sui-chip-clickable:not(.sui-disabled):hover {
+      background-color: var(--sui-chip-hover-bg-color);
+    }
 }
 
 @media (hover: hover) {
 
-.sui-chip-clickable:hover .sui-chip-label,
-    .sui-chip-clickable:hover .sui-chip-delete-icon {
+.sui-chip-clickable:not(.sui-disabled):hover .sui-chip-label,
+      .sui-chip-clickable:not(.sui-disabled):hover .sui-chip-delete-icon {
 
     --tw-text-opacity: 1;
 
@@ -3572,11 +3624,11 @@
   }
 }
 
-.sui-chip-clickable:not(:focus-within):active, .sui-chip-clickable:focus:active {
-      background-color: var(--sui-chip-active-bg-color);
-    }
+.sui-chip-clickable:not(.sui-disabled):not(:focus-within):active, .sui-chip-clickable:not(.sui-disabled):focus:active {
+        background-color: var(--sui-chip-active-bg-color);
+      }
 
-.sui-chip-clickable:not(:focus-within):active .sui-chip-label, .sui-chip-clickable:focus:active .sui-chip-label {
+.sui-chip-clickable:not(.sui-disabled):not(:focus-within):active .sui-chip-label, .sui-chip-clickable:not(.sui-disabled):focus:active .sui-chip-label {
 
   --tw-text-opacity: 1;
 
@@ -4071,6 +4123,14 @@
 }
   .sui-link-secondary {--tw-text-opacity: 1;color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
 }
+  .sui-link-inverted {--tw-text-opacity: 1;color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
+}
+  .sui-link-inverted:active {--tw-text-opacity: 1;color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
+}
+  @media (hover: hover) {
+  .sui-link-inverted:hover {--tw-text-opacity: 1;color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
+    }
+}
 
 .sui-badge-root {
 
@@ -4945,6 +5005,45 @@ display: none
 
   color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)))
 }
+/* Compact Mode */
+.sui-alert-root:where(.sui-compact) {
+
+  padding-left: var(--sui-spacing-3);
+
+  padding-right: var(--sui-spacing-3);
+
+  padding-top: var(--sui-spacing-2);
+
+  padding-bottom: var(--sui-spacing-2)
+}
+:where(.sui-alert-root.sui-compact) .sui-alert-icon {
+
+  margin-right: var(--sui-spacing-1\.5);
+
+  margin-top: var(--sui-spacing-0\.25)
+}
+:where(.sui-alert-root.sui-compact) .sui-alert-content {
+
+  font-size: var(--sui-typography-descriptor-mini-font-size);
+
+  font-weight: var(--sui-typography-descriptor-mini-font-weight);
+
+  line-height: var(--sui-typography-descriptor-mini-line-height);
+
+  text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
+
+  text-transform: var(--sui-typography-descriptor-mini-text-transform);
+
+  font-family: var(--sui-font-family);
+
+  gap: var(--sui-spacing-1)
+}
+:where(.sui-alert-root.sui-compact) .sui-alert-close {
+
+  margin-left: var(--sui-spacing-1\.5);
+
+  height: var(--sui-spacing-4)
+}
 
 .sui-alert-title-root {
     font-size: var(--sui-typography-subtitle-bold-font-size);
@@ -4953,7 +5052,19 @@ display: none
     text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
     text-transform: var(--sui-typography-subtitle-bold-text-transform);
     font-family: var(--sui-font-family);
-    margin-bottom: var(--sui-spacing-2)
+    margin-bottom: var(--sui-spacing-1)
+}
+
+  /* Compact Mode */
+  .sui-alert-title-root:where(.sui-compact) {
+    font-size: var(--sui-typography-subtitle-mini-font-size);
+    font-weight: var(--sui-typography-subtitle-mini-font-weight);
+    line-height: var(--sui-typography-subtitle-mini-line-height);
+    text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
+    text-transform: var(--sui-typography-subtitle-mini-text-transform);
+    font-family: var(--sui-font-family);
+    margin-bottom: var(--sui-spacing-0);
+    font-weight: var(--sui-font-weight-semi-bold)
 }
 
 .sui-announcement-icon,
@@ -4970,14 +5081,16 @@ display: none
    * using @apply bg-color only sets the background-color, causing the backgrounds to stack
    */
   background: transparent;
+  border-style: none;
   --tw-bg-opacity: 1;
   background-color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-bg-opacity)));
-  padding-top: var(--sui-spacing-2);
-  padding-bottom: var(--sui-spacing-2);
+  padding-top: var(--sui-spacing-1);
+  padding-bottom: var(--sui-spacing-1);
   --tw-text-opacity: 1;
   color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
   border-radius: var(--sui-border-radius-none);
   --sui-focus-ring-border-radius: var(--sui-border-radius-none);
+  --sui-focus-ring-border-width-recoup: 0;
 }
 
 .sui-announcement-neutral {
@@ -5019,20 +5132,26 @@ display: none
 }
 
 .sui-announcement-content {
-  font-size: var(--sui-typography-descriptor-font-size);
-  font-weight: var(--sui-typography-descriptor-font-weight);
-  line-height: var(--sui-typography-descriptor-line-height);
-  text-decoration: var(--sui-typography-descriptor-text-decoration);
-  text-transform: var(--sui-typography-descriptor-text-transform);
-  font-family: var(--sui-font-family);
-  margin-top: var(--sui-spacing-2);
-  margin-bottom: var(--sui-spacing-2);
+  margin-top: var(--sui-spacing-1\.5);
+  margin-bottom: var(--sui-spacing-1\.5);
 }
 
 .sui-announcement-action {
   margin-top: var(--sui-spacing-0);
 }
 
+/* Compact Mode */
+
+.sui-announcement-root:where(.sui-compact) {
+  padding-top: var(--sui-spacing-0);
+  padding-bottom: var(--sui-spacing-0);
+}
+
+:where(.sui-announcement-root.sui-compact) .sui-announcement-content {
+  margin-top: var(--sui-spacing-2);
+  margin-bottom: var(--sui-spacing-2);
+}
+
 .sui-snackbar-content-root {
 
     pointer-events: auto;
@@ -5663,6 +5782,20 @@ display: none
       );
     }
 
+/* Compact Mode */
+
+.sui-list-item-large:where(.sui-compact) {
+
+  height: var(--sui-spacing-14);
+}
+
+.sui-list-item-auto:where(.sui-compact) .sui-list-item-content {
+
+  padding-top: var(--sui-spacing-2);
+
+  padding-bottom: var(--sui-spacing-2);
+}
+
 .sui-menu-actions-root {
 
     box-sizing: border-box;
@@ -5698,6 +5831,12 @@ display: none
     margin-bottom: var(--sui-spacing-2)
 }
 
+  /* Compact Mode */
+  .sui-menu-divider-root:where(.sui-compact) {
+    margin-top: var(--sui-spacing-1);
+    margin-bottom: var(--sui-spacing-1)
+}
+
 .sui-menu-footer-root {
     display: flex;
     height: var(--sui-spacing-10);
@@ -5709,6 +5848,13 @@ display: none
     padding-right: var(--sui-spacing-4)
 }
 
+  /* Compact Mode */
+  .sui-menu-footer-root:where(.sui-compact) {
+    height: var(--sui-spacing-8);
+    padding-left: var(--sui-spacing-3);
+    padding-right: var(--sui-spacing-3)
+}
+
 .sui-menu-header-root {
 
     font-size: var(--sui-typography-subtitle-font-size);
@@ -5789,6 +5935,17 @@ display: none
     right: var(--sui-spacing-4)
 }
 
+/* Compact Mode */
+
+.sui-menu-header-root:where(.sui-compact) {
+
+    height: var(--sui-spacing-9);
+
+    padding-left: var(--sui-spacing-3);
+
+    padding-right: var(--sui-spacing-3)
+}
+
 .sui-menu-item-text-root {display: flex;height: 100%;min-width: var(--sui-spacing-0);flex-grow: 1;align-items: center;justify-content: space-between;margin-left: var(--sui-spacing-3)
 }.sui-menu-item-text-root:first-child {margin-left: var(--sui-spacing-0)
 }.sui-menu-item-text-root:last-child {margin-right: calc(var(--sui-spacing-1) * -1)
@@ -5800,6 +5957,11 @@ display: none
 .sui-menu-item-text-info-text {font-size: var(--sui-typography-descriptor-mini-font-size);font-weight: var(--sui-typography-descriptor-mini-font-weight);line-height: var(--sui-typography-descriptor-mini-line-height);text-decoration: var(--sui-typography-descriptor-mini-text-decoration);text-transform: var(--sui-typography-descriptor-mini-text-transform);font-family: var(--sui-font-family);margin-right: var(--sui-spacing-1);max-width: var(--sui-spacing-22);flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;--tw-text-opacity: 1;color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity)))
 }
 
+/* Compact Mode */
+
+.sui-menu-item-text-root:where(.sui-compact) {margin-left: var(--sui-spacing-2)
+}
+
 .sui-popper-menu-root {
 
     z-index: 1300
@@ -6346,6 +6508,8 @@ height: var(--sui-spacing-6);
 
 width: var(--sui-spacing-10);
 
+flex: none;
+
 align-items: center;
 
 border-radius: var(--sui-border-radius-full);
@@ -7118,6 +7282,22 @@ justify-content: center;
 margin-top: var(--sui-spacing-4);
 }
 
+/* Compact Mode */
+
+.sui-date-picker-calendar:where(.sui-compact) {
+
+height: var(--sui-spacing-74);
+
+padding-top: var(--sui-spacing-2);
+
+padding-bottom: var(--sui-spacing-2);
+}
+
+:where(.sui-date-picker-calendar.sui-compact) .sui-date-picker-today-button {
+
+margin-top: var(--sui-spacing-1);
+}
+
 .sui-time-picker-picker-root {
 
 width: 15.5rem;
@@ -7302,6 +7482,8 @@ justify-content: space-between;
 
 position: relative;
 
+height: 100%;
+
 width: var(--sui-spacing-10);
 
 outline: 2px solid transparent;
@@ -7362,10 +7544,6 @@ padding-right: var(--sui-spacing-11);
 
 .sui-time-picker-main-view .sui-time-picker-time-button {
 
-margin-top: var(--sui-spacing-6);
-
-margin-bottom: var(--sui-spacing-6);
-
 height: var(--sui-spacing-10);
 
 width: var(--sui-spacing-10);
@@ -7393,6 +7571,21 @@ justify-content: space-between;
   grid-template-columns: repeat(4, var(--sui-spacing-10));
 }
 
+/* Compact Mode */
+
+.sui-time-picker-picker-view:where(.sui-compact) {
+
+padding-top: var(--sui-spacing-1\.5);
+
+padding-bottom: var(--sui-spacing-1\.5);
+}
+
+:where(.sui-time-picker-picker-view.sui-compact).sui-time-picker-main-view,
+:where(.sui-time-picker-picker-view.sui-compact).sui-time-picker-minute-selection-view {
+
+height: var(--sui-spacing-25);
+}
+
 .sui-linear-progress-indicator-root {
     display: flex;
     width: min-content;
@@ -7816,9 +8009,9 @@ justify-content: space-between;
 
     color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
 
-    --sui-squircle-bg-color: var(--sui-colors-neutral-b3);
-    --sui-squircle-bg-color-hover: var(--sui-colors-neutral-b3);
-    --sui-squircle-bg-color-active: var(--sui-colors-neutral-b3);
+    --sui-squircle-bg-color: var(--sui-colors-neutral-b4);
+    --sui-squircle-bg-color-hover: var(--sui-colors-neutral-b4);
+    --sui-squircle-bg-color-active: var(--sui-colors-neutral-b4);
 }
   .sui-avatar-primary {
 
@@ -7850,7 +8043,7 @@ justify-content: space-between;
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-bg-opacity)));
+    background-color: rgb(var(--s-neutral-b4), calc(var(--s-neutral-b4-opacity, 1) * var(--tw-bg-opacity)));
 }
   .sui-avatar-circle-primary {
 
@@ -7913,6 +8106,10 @@ justify-content: space-between;
   .sui-avatar-root.sui-disabled {
 
     opacity: 0.35;
+}
+  .sui-avatar-root.sui-disabled .sui-avatar-shape {
+
+    pointer-events: none;
 }
   .sui-avatar-xxlarge-content, .sui-avatar-xlarge-content {
 
@@ -9752,6 +9949,56 @@ justify-content: space-between;
       border-top-width: var(--sui-border-width-1);
       --sui-focus-ring-border-width-recoup: 1;
 }
+  /* Compact Mode - applied via root */
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-body {
+      min-height: var(--sui-spacing-0);
+      padding-top: var(--sui-spacing-3);
+      padding-bottom: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-title-root {
+      padding-left: var(--sui-spacing-3);
+      padding-right: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-content-root {
+      padding-left: var(--sui-spacing-3);
+      padding-right: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-actions-root {
+      padding-left: var(--sui-spacing-3);
+      padding-right: var(--sui-spacing-3);
+      padding-top: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-full-height {
+      width: var(--sui-spacing-100);
+      padding-top: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-full-height .sui-dialog-title-root {
+      font-size: var(--sui-typography-title-font-size);
+      font-weight: var(--sui-typography-title-font-weight);
+      letter-spacing: var(--sui-typography-title-letter-spacing);
+      line-height: var(--sui-typography-title-line-height);
+      text-decoration: var(--sui-typography-title-text-decoration);
+      text-transform: var(--sui-typography-title-text-transform);
+      font-family: var(--sui-font-family);
+      margin-bottom: var(--sui-spacing-3);
+      padding-left: var(--sui-spacing-3);
+      padding-right: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-full-height .sui-dialog-content-root {
+      padding-left: var(--sui-spacing-3);
+      padding-right: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-full-screen {
+      padding: var(--sui-spacing-0);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-full-screen .sui-dialog-title-root {
+      padding-top: var(--sui-spacing-3);
+      padding-bottom: var(--sui-spacing-3);
+}
+  :where(.sui-dialog-root.sui-compact) .sui-dialog-full-screen .sui-dialog-actions-root {
+      padding-top: var(--sui-spacing-3);
+      padding-bottom: var(--sui-spacing-3);
+}
 
 .sui-drawer-root {
     position: fixed;
@@ -9932,129 +10179,110 @@ justify-content: space-between;
 }
 
 .sui-suggestion-list-root {
-
-margin-left: var(--sui-spacing-2);
-
-margin-right: var(--sui-spacing-2);
+    position: relative;
+    padding-left: var(--sui-spacing-2);
+    padding-right: var(--sui-spacing-2);
 }
 
-.sui-suggestion-list-item {
-
-font-size: var(--sui-typography-subtitle-mini-font-size);
-
-font-weight: var(--sui-typography-subtitle-mini-font-weight);
-
-line-height: var(--sui-typography-subtitle-mini-line-height);
-
-text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
-
-text-transform: var(--sui-typography-subtitle-mini-text-transform);
-
-font-family: var(--sui-font-family);
-
-display: flex;
-
-min-height: var(--sui-spacing-7);
-
-align-items: center;
-
-justify-content: space-between;
-
-background-color: transparent;
-
-padding-left: var(--sui-spacing-2);
-
-padding-right: var(--sui-spacing-2);
-
-padding-top: var(--sui-spacing-1);
-
-padding-bottom: var(--sui-spacing-1);
-
---tw-text-opacity: 1;
-
-color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
+  .sui-suggestion-list-root::before {
+    content: '';
+    display: block;
+    height: var(--sui-suggestion-list-vertical-padding, 0px);
+    width: 0;
+  }
 
-border-radius: var(--sui-border-radius-xs);
+  .sui-suggestion-list-root::after {
+    content: '';
+    display: block;
+    height: var(--sui-suggestion-list-vertical-padding, 0px);
+    width: 0;
+  }
 
---sui-focus-ring-border-radius: var(--sui-border-radius-xs);
+.sui-suggestion-list-item {
+    font-size: var(--sui-typography-subtitle-mini-font-size);
+    font-weight: var(--sui-typography-subtitle-mini-font-weight);
+    line-height: var(--sui-typography-subtitle-mini-line-height);
+    text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
+    text-transform: var(--sui-typography-subtitle-mini-text-transform);
+    font-family: var(--sui-font-family);
+    display: flex;
+    min-height: var(--sui-spacing-8);
+    align-items: center;
+    justify-content: space-between;
+    background-color: transparent;
+    padding-left: var(--sui-spacing-2);
+    padding-right: var(--sui-spacing-2);
+    padding-top: var(--sui-spacing-1);
+    padding-bottom: var(--sui-spacing-1);
+    --tw-text-opacity: 1;
+    color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
+    border-radius: var(--sui-border-radius-sm);
+    --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
 }
 
 .sui-suggestion-list-item:not(.sui-suggestion-list-readonly, .sui-disabled) {
-
-cursor: pointer;
+    cursor: pointer;
 }
 
 @media (hover: hover) {
 
 .sui-suggestion-list-item:hover:not(.sui-disabled) {
-
---tw-bg-opacity: 1;
-
-background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
-}
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
+    }
 }
 
 .sui-suggestion-list-item.sui-disabled:not(.sui-suggestion-list-readonly) {
-
-pointer-events: none;
-
-cursor: default;
-
---tw-text-opacity: 1;
-
-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
+    pointer-events: none;
+    cursor: default;
+    --tw-text-opacity: 1;
+    color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-text-opacity)));
 }
 
 .sui-suggestion-list-item:focus-visible,
   .sui-suggestion-list-item.sui-focus-visible {
-
---sui-focus-ring-color: var(--sui-focus-ring-inset-color);
+    --sui-focus-ring-color: var(--sui-focus-ring-inset-color);
 }
 
 .sui-suggestion-list-item:focus-visible::after,
   .sui-suggestion-list-item.sui-focus-visible::after {
-
-pointer-events: none;
-
-content: '';
-
-position: absolute;
-
-inset: 0;
-
-border-radius: var(--sui-focus-ring-border-radius, 0px);
-
-box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--sui-focus-ring-border-radius, 0px);
+    box-shadow: inset 0 0 0 var(--sui-focus-ring-inset-width) var(--sui-focus-ring-color);
 }
 
 .sui-suggestion-list-selected,
 .sui-suggestion-list-highlighted {
-
---tw-bg-opacity: 1;
-
-background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--s-neutral-b5), calc(var(--s-neutral-b5-opacity, 1) * var(--tw-bg-opacity)));
 }
 
 .sui-suggestion-list-group-title-readonly {
-
-font-size: var(--sui-typography-subtitle-bold-font-size);
-
-font-weight: var(--sui-typography-subtitle-bold-font-weight);
-
-line-height: var(--sui-typography-subtitle-bold-line-height);
-
-text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
-
-text-transform: var(--sui-typography-subtitle-bold-text-transform);
-
-font-family: var(--sui-font-family);
+    font-size: var(--sui-typography-subtitle-bold-font-size);
+    font-weight: var(--sui-typography-subtitle-bold-font-weight);
+    line-height: var(--sui-typography-subtitle-bold-line-height);
+    text-decoration: var(--sui-typography-subtitle-bold-text-decoration);
+    text-transform: var(--sui-typography-subtitle-bold-text-transform);
+    font-family: var(--sui-font-family);
 }
 
 .sui-suggestion-list-expand-icon {
+    margin-left: auto;
+    margin-right: var(--sui-spacing-1);
+}
 
-margin-left: auto;
+.sui-suggestion-list-root:where(.sui-compact) {
+    padding-left: var(--sui-spacing-1);
+    padding-right: var(--sui-spacing-1);
+}
 
-margin-right: var(--sui-spacing-1);
+.sui-suggestion-list-item:where(.sui-compact) {
+    min-height: var(--sui-spacing-6);
+    border-radius: var(--sui-border-radius-xs);
+    --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
 }
 
 .sui-autocomplete-chevron {
@@ -10546,6 +10774,16 @@ margin-right: var(--sui-spacing-1);
 }
   .sui-tab-icon-badge-root {
   align-self: flex-start;
+}
+  .sui-tab-large {
+  font-size: var(--sui-typography-subtitle-mini-font-size);
+  font-weight: var(--sui-typography-subtitle-mini-font-weight);
+  line-height: var(--sui-typography-subtitle-mini-line-height);
+  text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
+  text-transform: var(--sui-typography-subtitle-mini-text-transform);
+  font-family: var(--sui-font-family);
+  height: var(--sui-spacing-13);
+  padding-bottom: var(--sui-spacing-4\.5);
 }
   .sui-tab-pill {
   font-size: var(--sui-typography-subtitle-mini-font-size);
@@ -10573,6 +10811,9 @@ margin-right: var(--sui-spacing-1);
   border-width: var(--sui-border-width-1);
   --sui-focus-ring-border-width: var(--sui-border-width-1);
   --sui-focus-ring-border-width-recoup: 1;
+}
+  .sui-tab-pill-small {
+  height: var(--sui-spacing-8);
 }
   .sui-tab-pill:not(:first-child) {
   margin-left: var(--sui-spacing-1);
@@ -10659,6 +10900,17 @@ margin-right: var(--sui-spacing-1);
   --tw-text-opacity: 1;
   color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));
 }
+  /* compact mode */
+  .sui-tab-root:where(.sui-compact) {
+  height: var(--sui-spacing-7);
+  padding-bottom: var(--sui-spacing-1\.5);
+}
+  .sui-tab-pill:where(.sui-compact) {
+  height: var(--sui-spacing-8);
+  min-width: var(--sui-spacing-9);
+  padding-top: var(--sui-spacing-0);
+  padding-bottom: var(--sui-spacing-0);
+}
 
 /* stylelint-disable property-no-vendor-prefix */
 .sui-tabs-root {
@@ -10667,6 +10919,9 @@ margin-right: var(--sui-spacing-1);
   box-sizing: border-box;
   height: var(--sui-spacing-12);
 }
+.sui-tabs-large {
+  height: var(--sui-spacing-13);
+}
 .sui-tabs-scroller {
   position: relative;
   height: 100%;
@@ -10825,6 +11080,13 @@ margin-right: var(--sui-spacing-1);
   right: auto;
   left: var(--sui-spacing-0);
 }
+/* compact mode */
+.sui-tabs-root:where(.sui-compact) {
+  height: var(--sui-spacing-7);
+}
+.sui-tabs-pill:where(.sui-compact) {
+  height: auto;
+}
 
 .sui-page-header-root {
     position: relative;
@@ -10888,4 +11150,14 @@ margin-right: var(--sui-spacing-1);
   .sui-page-header-detached .sui-page-header-left-root,
     .sui-page-header-detached .sui-page-header-right-root {
     gap: var(--sui-spacing-2)
+}
+  /* Compact Mode */
+  .sui-page-header-root:where(.sui-compact) {
+    height: var(--sui-spacing-9)
+}
+  :where(.sui-page-header-root.sui-compact) .sui-page-header-left-root {
+    left: var(--sui-spacing-3)
+}
+  :where(.sui-page-header-root.sui-compact) .sui-page-header-right-root {
+    right: var(--sui-spacing-3)
 }