@ringcentral/spring-ui 1.11.1 → 1.12.0

package/index.css

@@ -180,7 +180,7 @@
     --sui-squircle-fill: var(--sui-squircle-bg-color-hover);
     --sui-squircle-border-color: var(
       --sui-squircle-border-color-hover,
-      --sui-squircle-border-color
+      var(--sui-squircle-fill)
     );
   }
 }
@@ -223,11 +223,11 @@
 
   width: calc(
     100% +
-    (var(--sui-squircle-ring-offset) + var(--sui-squircle-ring-width) / 2) * 2
+      (var(--sui-squircle-ring-offset) + var(--sui-squircle-ring-width) / 2) * 2
   );
   height: calc(
     100% +
-    (var(--sui-squircle-ring-offset) + var(--sui-squircle-ring-width) / 2) * 2
+      (var(--sui-squircle-ring-offset) + var(--sui-squircle-ring-width) / 2) * 2
   );
 }
 
@@ -400,7 +400,7 @@
     background: linear-gradient(
       -90deg,
       var(--sui-colors-neutral-w0-t0),
-      currentColor,
+      currentcolor,
       var(--sui-colors-neutral-w0-t0)
     );
 }
@@ -1634,8 +1634,6 @@
     justify-content: center;
 }
 
-/* stylelint-disable custom-property-pattern */
-/* stylelint-disable color-function-notation */
 .sui-icon-button-root {
 
     position: relative;
@@ -1663,20 +1661,19 @@
     outline-offset: 2px;
 
     --sui-focus-ring-border-width-recoup: 0;
-}
-@media (prefers-reduced-motion: no-preference) {
-    .sui-icon-button-root {
+}@media (prefers-reduced-motion: no-preference) {.sui-icon-button-root {
 
         transition-duration: var(--sui-transition-neutral-01-fast-transition-duration);
 
         transition-timing-function: var(--sui-transition-neutral-01-fast-transition-timing-function);
     }
 }
-.sui-icon-button-root.sui-disabled {
+
+    .sui-icon-button-root.sui-disabled {
 
     pointer-events: none;
 }
-.sui-icon-button-label {
+  .sui-icon-button-label {
 
     font-size: var(--sui-typography-descriptor-mini-font-size);
 
@@ -1702,13 +1699,13 @@
 
     text-align: center;
 }
-.sui-icon-button-circular {
+  .sui-icon-button-circular {
 
     border-radius: var(--sui-border-radius-full);
 
     --sui-focus-ring-border-radius: var(--sui-border-radius-full);
 }
-.sui-icon-button-circular.focus-visible,
+  .sui-icon-button-circular.focus-visible,
     .sui-icon-button-circular:focus-visible,
     .sui-icon-button-circular.sui-focus-visible,
     .sui-icon-button-rectangular.focus-visible,
@@ -1717,7 +1714,7 @@
 
     --sui-focus-ring-color: var(--sui-focus-ring-normal-color);
 }
-.sui-icon-button-circular.focus-visible::after,
+  .sui-icon-button-circular.focus-visible::after,
     .sui-icon-button-circular:focus-visible::after,
     .sui-icon-button-circular.sui-focus-visible::after,
     .sui-icon-button-rectangular.focus-visible::after,
@@ -1738,7 +1735,7 @@
 
     margin: calc(var(--sui-focus-ring-normal-offset)*-1 - var(--sui-focus-ring-border-width, 0px)*var(--sui-focus-ring-border-width-recoup, 1));
 }
-.sui-icon-button-contained {
+  .sui-icon-button-contained {
 
     padding-left: var(--sui-spacing-0);
 
@@ -1756,27 +1753,27 @@
     --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-b3);
     --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-base);
 }
-@media (hover: hover) {
-.sui-icon-button-contained:hover {
+  @media (hover: hover) {
+  .sui-icon-button-contained:hover {
       background-color: var(--sui-icon-button-bg-color-hover);
     }
 }
-.sui-icon-button-contained.sui-active,
+  .sui-icon-button-contained.sui-active,
     .sui-icon-button-contained:active {
       background-color: var(
         --sui-icon-button-bg-color-active,
         var(--sui-colors-neutral-high-contrast-w0)
       );
     }
-@media (hover: hover) {
-.sui-icon-button-contained:active:hover {
+  @media (hover: hover) {
+  .sui-icon-button-contained:active:hover {
       background-color: var(
         --sui-icon-button-bg-color-active,
         var(--sui-colors-neutral-high-contrast-w0)
       );
     }
 }
-.sui-icon-button-contained.sui-disabled {
+  .sui-icon-button-contained.sui-disabled {
 
     border-style: none;
 
@@ -1791,13 +1788,13 @@
         var(--sui-colors-neutral-base)
       );
 }
-.sui-icon-button-contained-squircle {
+  .sui-icon-button-contained-squircle {
       --sui-icon-button-border-color: transparent;
       --sui-icon-button-border-color-hover: transparent;
       --sui-icon-button-border-color-active: transparent;
       --sui-icon-button-border-color-disabled: transparent;
     }
-.sui-icon-button-contained-primary,
+  .sui-icon-button-contained-primary,
     .sui-icon-button-contained-success,
     .sui-icon-button-contained-danger,
     .sui-icon-button-contained-warning {
@@ -1805,25 +1802,25 @@
       --sui-squircle-label-bg-color-hover: var(--sui-squircle-bg-color-hover);
       --sui-squircle-label-bg-color-active: var(--sui-squircle-bg-color-active);
     }
-.sui-icon-button-contained-primary {
+  .sui-icon-button-contained-primary {
       --sui-icon-button-bg-color: var(--sui-colors-primary-b);
       --sui-icon-button-bg-color-hover: var(
         --sui-colors-primary-b-high-contrast
       );
     }
-.sui-icon-button-contained-success {
+  .sui-icon-button-contained-success {
       --sui-icon-button-bg-color: var(--sui-colors-success);
       --sui-icon-button-bg-color-hover: var(--sui-colors-success-high-contrast);
     }
-.sui-icon-button-contained-danger {
+  .sui-icon-button-contained-danger {
       --sui-icon-button-bg-color: var(--sui-colors-danger);
       --sui-icon-button-bg-color-hover: var(--sui-colors-danger-high-contrast);
     }
-.sui-icon-button-contained-warning {
+  .sui-icon-button-contained-warning {
       --sui-icon-button-bg-color: var(--sui-colors-warning);
       --sui-icon-button-bg-color-hover: var(--sui-colors-warning-high-contrast);
     }
-.sui-icon-button-contained-secondary {
+  .sui-icon-button-contained-secondary {
       --sui-icon-button-bg-color: var(--sui-colors-neutral-base);
       --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b5);
       --sui-icon-button-bg-color-active: var(--sui-colors-neutral-b3);
@@ -1837,7 +1834,7 @@
       --sui-focus-ring-border-width: var(--sui-border-width-1);
       --sui-focus-ring-border-width-recoup: 1;
     }
-.sui-icon-button-contained-secondary.sui-squircle {
+  .sui-icon-button-contained-secondary.sui-squircle {
 
     border-style: none;
 
@@ -1852,7 +1849,7 @@
           --sui-colors-neutral-high-contrast
         );
 }
-.sui-icon-button-contained-neutral {
+  .sui-icon-button-contained-neutral {
       --sui-icon-button-bg-color: var(--sui-colors-neutral-b0-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b0-t20);
       --sui-icon-button-bg-color-active: var(--sui-colors-neutral-b0-t30);
@@ -1861,7 +1858,7 @@
       --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
       --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
     }
-.sui-icon-button-contained-hide-background {
+  .sui-icon-button-contained-hide-background {
 
     border-style: none;
 
@@ -1869,11 +1866,11 @@
 
     --sui-focus-ring-border-width-recoup: 0;
 }
-.sui-icon-button-contained-hide-background.sui-disabled {
+  .sui-icon-button-contained-hide-background.sui-disabled {
 
     background-color: transparent;
 }
-.sui-icon-button-outlined {
+  .sui-icon-button-outlined {
 
     border-style: solid;
 
@@ -1903,25 +1900,25 @@
     --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
 }
-@media (hover: hover) {
-.sui-icon-button-outlined:hover {
+  @media (hover: hover) {
+  .sui-icon-button-outlined:hover {
       background-color: var(--sui-icon-button-bg-color-hover);
       border-color: var(--sui-icon-button-border-color-hover);
       color: var(--sui-icon-button-text-color-hover);
     }
 }
-.sui-icon-button-outlined.sui-active,
+  .sui-icon-button-outlined.sui-active,
     .sui-icon-button-outlined:active {
       background-color: var(--sui-icon-button-bg-color-active);
       border-color: var(--sui-icon-button-border-color-active);
       color: var(--sui-icon-button-text-color-active);
     }
-.sui-icon-button-outlined.sui-disabled {
+  .sui-icon-button-outlined.sui-disabled {
       background-color: var(--sui-icon-button-bg-color-disabled);
       border-color: var(--sui-icon-button-border-color-disabled);
       color: var(--sui-icon-button-text-color-disabled);
     }
-.sui-icon-button-outlined-primary {
+  .sui-icon-button-outlined-primary {
       --sui-icon-button-border-color: var(--sui-colors-primary-f);
       --sui-icon-button-border-color-hover: var(
         --sui-colors-primary-f-high-contrast
@@ -1931,7 +1928,7 @@
         --sui-colors-primary-f-high-contrast
       );
     }
-.sui-icon-button-outlined-success {
+  .sui-icon-button-outlined-success {
       --sui-icon-button-border-color: var(--sui-colors-success-f);
       --sui-icon-button-border-color-hover: var(
         --sui-colors-success-high-contrast
@@ -1941,7 +1938,7 @@
         --sui-colors-success-high-contrast
       );
     }
-.sui-icon-button-outlined-danger {
+  .sui-icon-button-outlined-danger {
       --sui-icon-button-border-color: var(--sui-colors-danger-f);
       --sui-icon-button-border-color-hover: var(
         --sui-colors-danger-high-contrast
@@ -1951,7 +1948,7 @@
         --sui-colors-danger-high-contrast
       );
     }
-.sui-icon-button-outlined-warning {
+  .sui-icon-button-outlined-warning {
       --sui-icon-button-border-color: var(--sui-colors-warning-f);
       --sui-icon-button-border-color-hover: var(
         --sui-colors-warning-high-contrast
@@ -1961,14 +1958,14 @@
         --sui-colors-warning-high-contrast
       );
     }
-.sui-icon-button-outlined-secondary {
+  .sui-icon-button-outlined-secondary {
       --sui-icon-button-border-color: var(--sui-colors-neutral-b0-t20);
       --sui-icon-button-border-color-hover: var(--sui-colors-neutral-b0-t30);
       --sui-icon-button-border-color-active: var(--sui-colors-neutral-b0-t50);
       --sui-icon-button-text-color: var(--sui-colors-neutral-b0);
       --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-outlined-neutral {
+  .sui-icon-button-outlined-neutral {
       --sui-icon-button-text-color: var(--sui-colors-neutral-b1);
       --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
       --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b0-t10);
@@ -1977,7 +1974,7 @@
       --sui-icon-button-border-color-hover: var(--sui-colors-neutral-b0-t30);
       --sui-icon-button-border-color-active: var(--sui-colors-neutral-b0-t50);
     }
-.sui-icon-button-outlined-squircle {
+  .sui-icon-button-outlined-squircle {
 
     border-style: none;
 
@@ -1985,15 +1982,15 @@
 
       --sui-squircle-border-width: var(--sui-border-width-1);
 }
-.sui-icon-button-outlined-hide-background {
+  .sui-icon-button-outlined-hide-background {
 
     background-color: transparent;
 }
-.sui-icon-button-outlined-hide-background.sui-disabled {
+  .sui-icon-button-outlined-hide-background.sui-disabled {
 
     background-color: transparent;
 }
-.sui-icon-button-icon {
+  .sui-icon-button-icon {
 
     background-color: transparent;
 
@@ -2009,59 +2006,59 @@
     --sui-icon-button-bg-color-disabled: transparent;
     --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
 }
-@media (hover: hover) {
-.sui-icon-button-icon:hover {
+  @media (hover: hover) {
+  .sui-icon-button-icon:hover {
       color: var(--sui-icon-button-text-color-hover);
     }
 }
-.sui-icon-button-icon.sui-active,
+  .sui-icon-button-icon.sui-active,
     .sui-icon-button-icon:active {
       color: var(--sui-icon-button-text-color-active);
     }
-.sui-icon-button-icon.sui-disabled {
+  .sui-icon-button-icon.sui-disabled {
       color: var(--sui-icon-button-text-color-disabled);
     }
-.sui-icon-button-icon-primary {
+  .sui-icon-button-icon-primary {
       --sui-icon-button-text-color: var(--sui-colors-primary-f);
       --sui-icon-button-text-color-hover: var(
         --sui-colors-primary-f-high-contrast
       );
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-icon-success {
+  .sui-icon-button-icon-success {
       --sui-icon-button-text-color: var(--sui-colors-success-f);
       --sui-icon-button-text-color-hover: var(
         --sui-colors-success-high-contrast
       );
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-icon-danger {
+  .sui-icon-button-icon-danger {
       --sui-icon-button-text-color: var(--sui-colors-danger-f);
       --sui-icon-button-text-color-hover: var(
         --sui-colors-danger-high-contrast
       );
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-icon-warning {
+  .sui-icon-button-icon-warning {
       --sui-icon-button-text-color: var(--sui-colors-warning-f);
       --sui-icon-button-text-color-hover: var(
         --sui-colors-warning-high-contrast
       );
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-icon-secondary {
+  .sui-icon-button-icon-secondary {
       --sui-icon-button-text-color: var(--sui-colors-neutral-b0);
       --sui-icon-button-text-color-hover: var(
         --sui-colors-primary-f-high-contrast
       );
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-icon-neutral {
+  .sui-icon-button-icon-neutral {
       --sui-icon-button-text-color: var(--sui-colors-neutral-b1);
       --sui-icon-button-text-color-hover: var(--sui-colors-neutral-b0);
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
     }
-.sui-icon-button-inverted {
+  .sui-icon-button-inverted {
 
     padding-left: var(--sui-spacing-0);
 
@@ -2074,13 +2071,13 @@
     --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
     --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
 }
-@media (hover: hover) {
-.sui-icon-button-inverted:hover {
+  @media (hover: hover) {
+  .sui-icon-button-inverted:hover {
       background-color: var(--sui-icon-button-bg-color-hover);
       color: var(--sui-icon-button-text-color-hover);
     }
 }
-.sui-icon-button-inverted.sui-active,
+  .sui-icon-button-inverted.sui-active,
     .sui-icon-button-inverted:active {
       background-color: var(
         --sui-icon-button-bg-color-active,
@@ -2088,11 +2085,11 @@
       );
       color: var(--sui-icon-button-text-color-active);
     }
-.sui-icon-button-inverted.sui-disabled {
+  .sui-icon-button-inverted.sui-disabled {
       background-color: var(--sui-icon-button-bg-color-disabled);
       color: var(--sui-icon-button-text-color-disabled);
     }
-.sui-icon-button-inverted-primary {
+  .sui-icon-button-inverted-primary {
       --sui-icon-button-bg-color: var(--sui-colors-primary-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-primary-b-t20);
       --sui-icon-button-text-color: var(--sui-colors-primary-f);
@@ -2100,7 +2097,7 @@
         --sui-colors-primary-f-high-contrast
       );
     }
-.sui-icon-button-inverted-success {
+  .sui-icon-button-inverted-success {
       --sui-icon-button-bg-color: var(--sui-colors-success-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-success-t20);
       --sui-icon-button-text-color: var(--sui-colors-success-f);
@@ -2108,7 +2105,7 @@
         --sui-colors-success-high-contrast
       );
     }
-.sui-icon-button-inverted-danger {
+  .sui-icon-button-inverted-danger {
       --sui-icon-button-bg-color: var(--sui-colors-danger-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-danger-t20);
       --sui-icon-button-text-color: var(--sui-colors-danger-f);
@@ -2116,7 +2113,7 @@
         --sui-colors-danger-high-contrast
       );
     }
-.sui-icon-button-inverted-warning {
+  .sui-icon-button-inverted-warning {
       --sui-icon-button-bg-color: var(--sui-colors-warning-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-warning-t20);
       --sui-icon-button-text-color: var(--sui-colors-warning-f);
@@ -2124,7 +2121,7 @@
         --sui-colors-warning-high-contrast
       );
     }
-.sui-icon-button-inverted-secondary {
+  .sui-icon-button-inverted-secondary {
       --sui-icon-button-bg-color: var(--sui-colors-neutral-w0-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-w0-t20);
       --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-w0-t10);
@@ -2133,12 +2130,12 @@
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-w0);
       --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-w0-t20);
     }
-.sui-icon-button-inverted-secondary:focus-visible,
+  .sui-icon-button-inverted-secondary:focus-visible,
       .sui-icon-button-inverted-secondary.sui-focus-visible {
         --sui-focus-ring-color: var(--sui-colors-neutral-w0);
         --sui-squircle-ring-color: var(--sui-colors-neutral-w0);
       }
-.sui-icon-button-inverted-neutral {
+  .sui-icon-button-inverted-neutral {
       --sui-icon-button-bg-color: var(--sui-colors-neutral-b0-t10);
       --sui-icon-button-bg-color-hover: var(--sui-colors-neutral-b0-t20);
       --sui-icon-button-bg-color-disabled: var(--sui-colors-neutral-b0-t10);
@@ -2147,27 +2144,27 @@
       --sui-icon-button-text-color-active: var(--sui-colors-neutral-b0);
       --sui-icon-button-text-color-disabled: var(--sui-colors-neutral-b3);
     }
-.sui-icon-button-inverted-squircle {
+  .sui-icon-button-inverted-squircle {
       --sui-icon-button-border-color: transparent;
       --sui-icon-button-border-color-hover: transparent;
       --sui-icon-button-border-color-active: transparent;
       --sui-icon-button-bg-color-active: var(--sui-icon-button-bg-color);
     }
-.sui-icon-button-inverted-hide-background {
+  .sui-icon-button-inverted-hide-background {
 
     background-color: transparent;
 }
-.sui-icon-button-inverted-hide-background.sui-disabled {
+  .sui-icon-button-inverted-hide-background.sui-disabled {
 
     background-color: transparent;
 }
-.sui-icon-button-rectangular {
+  .sui-icon-button-rectangular {
 
     border-radius: var(--sui-border-radius-sm);
 
     --sui-focus-ring-border-radius: var(--sui-border-radius-sm);
 }
-.sui-icon-button-squircle {
+  .sui-icon-button-squircle {
 
     background-color: transparent;
 
@@ -2182,57 +2179,57 @@
       --sui-icon-button-border-color-active
     );
 }
-.sui-icon-button-squircle.sui-disabled {
+  .sui-icon-button-squircle.sui-disabled {
       --sui-squircle-bg-color: var(--sui-icon-button-bg-color-disabled);
       --sui-squircle-border-color: var(--sui-icon-button-border-color-disabled);
 
       color: var(--sui-icon-button-text-color-disabled);
     }
-.sui-icon-button-squircle-hide-background {
+  .sui-icon-button-squircle-hide-background {
       --sui-squircle-bg-color: transparent;
     }
-@media (hover: hover) {
-.sui-icon-button-squircle-hide-background:hover {
+  @media (hover: hover) {
+  .sui-icon-button-squircle-hide-background:hover {
         --sui-squircle-bg-color: var(--sui-icon-button-bg-color);
         --sui-squircle-border-color: var(--sui-icon-button-border-color);
       }
 }
-.sui-icon-button-squircle-hide-background.sui-disabled {
+  .sui-icon-button-squircle-hide-background.sui-disabled {
         --sui-squircle-bg-color: transparent;
       }
-.sui-icon-button-squircle.sui-active,
+  .sui-icon-button-squircle.sui-active,
     .sui-icon-button-squircle:active,
     .sui-icon-button-squircle.sui-disabled {
 
     background-color: transparent;
 }
-@media (hover: hover) {
-.sui-icon-button-squircle:hover,
+  @media (hover: hover) {
+  .sui-icon-button-squircle:hover,
     .sui-icon-button-squircle:active:hover {
 
         background-color: transparent;
     }
 }
-.sui-icon-button-squircle-label {
+  .sui-icon-button-squircle-label {
       transition: inherit;
       background-color: var(--sui-squircle-label-bg-color, transparent);
     }
-@media (hover: hover) {
-.sui-icon-button-squircle:hover .sui-icon-button-squircle-label {
+  @media (hover: hover) {
+  .sui-icon-button-squircle:hover .sui-icon-button-squircle-label {
       background-color: var(--sui-squircle-label-bg-color-hover, transparent);
     }
 }
-.sui-icon-button-squircle.sui-active .sui-icon-button-squircle-label,
+  .sui-icon-button-squircle.sui-active .sui-icon-button-squircle-label,
     .sui-icon-button-squircle:active .sui-icon-button-squircle-label {
       background-color: var(--sui-squircle-label-bg-color-active, transparent);
     }
-.sui-icon-button-xsmall {
+  .sui-icon-button-xsmall {
 
     padding-left: var(--sui-spacing-0\.5);
 
     padding-right: var(--sui-spacing-0\.5);
 }
-.sui-icon-button-xsmall-circular,
+  .sui-icon-button-xsmall-circular,
     .sui-icon-button-xsmall-inverted,
     .sui-icon-button-xsmall-squircle,
     .sui-icon-button-xsmall-rectangular {
@@ -2241,13 +2238,13 @@
 
     width: var(--sui-spacing-5);
 }
-.sui-icon-button-small {
+  .sui-icon-button-small {
 
     padding-left: var(--sui-spacing-0\.5);
 
     padding-right: var(--sui-spacing-0\.5);
 }
-.sui-icon-button-small-circular,
+  .sui-icon-button-small-circular,
     .sui-icon-button-small-inverted,
     .sui-icon-button-small-squircle,
     .sui-icon-button-small-rectangular {
@@ -2256,20 +2253,20 @@
 
     width: var(--sui-spacing-6);
 }
-.sui-icon-button-small-rectangular,
+  .sui-icon-button-small-rectangular,
   .sui-icon-button-xsmall-rectangular {
 
     border-radius: var(--sui-border-radius-xs);
 
     --sui-focus-ring-border-radius: var(--sui-border-radius-xs);
 }
-.sui-icon-button-medium {
+  .sui-icon-button-medium {
 
     padding-left: var(--sui-spacing-1);
 
     padding-right: var(--sui-spacing-1);
 }
-.sui-icon-button-medium-circular,
+  .sui-icon-button-medium-circular,
     .sui-icon-button-medium-inverted,
     .sui-icon-button-medium-squircle,
     .sui-icon-button-medium-rectangular {
@@ -2278,13 +2275,13 @@
 
     width: var(--sui-spacing-8);
 }
-.sui-icon-button-large {
+  .sui-icon-button-large {
 
     padding-left: var(--sui-spacing-1);
 
     padding-right: var(--sui-spacing-1);
 }
-.sui-icon-button-large-circular,
+  .sui-icon-button-large-circular,
     .sui-icon-button-large-inverted,
     .sui-icon-button-large-squircle,
     .sui-icon-button-large-rectangular {
@@ -2293,13 +2290,13 @@
 
     width: var(--sui-spacing-9);
 }
-.sui-icon-button-xlarge {
+  .sui-icon-button-xlarge {
 
     padding-left: var(--sui-spacing-1\.5);
 
     padding-right: var(--sui-spacing-1\.5);
 }
-.sui-icon-button-xlarge-circular,
+  .sui-icon-button-xlarge-circular,
     .sui-icon-button-xlarge-inverted,
     .sui-icon-button-xlarge-squircle,
     .sui-icon-button-xlarge-rectangular {
@@ -2308,13 +2305,13 @@
 
     width: var(--sui-spacing-12);
 }
-.sui-icon-button-xxlarge {
+  .sui-icon-button-xxlarge {
 
     padding-left: var(--sui-spacing-2);
 
     padding-right: var(--sui-spacing-2);
 }
-.sui-icon-button-xxlarge-circular,
+  .sui-icon-button-xxlarge-circular,
     .sui-icon-button-xxlarge-inverted,
     .sui-icon-button-xxlarge-squircle {
 
@@ -2322,11 +2319,11 @@
 
     width: var(--sui-spacing-14);
 }
-.sui-icon-button-xxlarge-label {
+  .sui-icon-button-xxlarge-label {
 
     max-width: var(--sui-spacing-14);
 }
-.sui-icon-button-xxlarge-rectangular {
+  .sui-icon-button-xxlarge-rectangular {
 
     height: var(--sui-spacing-14);
 
@@ -2334,21 +2331,21 @@
 
     max-width: var(--sui-spacing-64);
 }
-.sui-icon-button-xxlarge-rectangular-label {
+  .sui-icon-button-xxlarge-rectangular-label {
 
     max-width: var(--sui-spacing-64);
 }
-.sui-icon-button-xxxlarge {
+  .sui-icon-button-xxxlarge {
 
     padding-left: var(--sui-spacing-2);
 
     padding-right: var(--sui-spacing-2);
 }
-.sui-icon-button-xxxlarge-label {
+  .sui-icon-button-xxxlarge-label {
 
     max-width: var(--sui-spacing-16);
 }
-.sui-icon-button-xxxlarge-circular,
+  .sui-icon-button-xxxlarge-circular,
     .sui-icon-button-xxxlarge-inverted,
     .sui-icon-button-xxxlarge-squircle {
 
@@ -2356,7 +2353,7 @@
 
     width: var(--sui-spacing-16);
 }
-.sui-icon-button-xxxlarge-rectangular {
+  .sui-icon-button-xxxlarge-rectangular {
 
     height: var(--sui-spacing-16);
 
@@ -2364,7 +2361,7 @@
 
     max-width: var(--sui-spacing-64);
 }
-.sui-icon-button-xxxlarge-rectangular-label {
+  .sui-icon-button-xxxlarge-rectangular-label {
 
     max-width: var(--sui-spacing-64);
 }
@@ -3487,7 +3484,7 @@
     --sui-checkbox-border-color-disabled: transparent;
     --sui-checkbox-bg-color-hover: var(--sui-colors-primary-b-high-contrast);
     --sui-checkbox-bg-color-active: var(--sui-colors-neutral-high-contrast-w0);
-    /* stylelint-disable custom-property-pattern, color-function-notation, alpha-value-notation */
+    /* stylelint-disable custom-property-pattern -- consumes theme-generated --s- RGB triple */
     --sui-checkbox-bg-color-disabled: rgb(
       var(--s-primary-b),
       calc(var(--s-primary-b-opacity, 1) * 0.6)
@@ -3810,7 +3807,7 @@
   top: var(--sui-spacing-0);
   box-sizing: border-box;
 }
-  .sui-inline-editable-input + .sui-inline-editable-text {
+  .sui-inline-editable-input ~ .sui-inline-editable-text {
   display: inline-block;
   height: var(--sui-spacing-0);
   overflow: hidden;
@@ -3820,7 +3817,7 @@
   .sui-inline-editable-textarea {
   resize: none;
 }
-  .sui-inline-editable-textarea + .sui-inline-editable-text {
+  .sui-inline-editable-textarea ~ .sui-inline-editable-text {
   display: none;
 }
   .sui-inline-editable-standard {
@@ -3856,7 +3853,7 @@
   border-width: var(--sui-border-width-2);
   --sui-focus-ring-border-width: var(--sui-border-width-2);
 }
-  .sui-inline-editable-outlined-input + .sui-inline-editable-text {
+  .sui-inline-editable-outlined-input ~ .sui-inline-editable-text {
   padding: var(--sui-spacing-0\.5);
   border-left-width: var(--sui-border-width-2);
   border-right-width: var(--sui-border-width-2);
@@ -4769,10 +4766,10 @@ text-align: center;
 
       transform: translateY(
         calc(
-          -1 * ((
-                  var(--sui-typography-display1-line-height) -
-                    var(--sui-typography-subtitle-line-height)
-                ) / 2)
+          -1 *
+            ((var(--sui-typography-display1-line-height) -
+                var(--sui-typography-subtitle-line-height)) /
+              2)
         )
       )
 }
@@ -4907,7 +4904,6 @@ display: none
   }
 }
 
-/* stylelint-disable custom-property-pattern */
 .sui-alert-root {
 
   box-sizing: border-box;
@@ -4942,6 +4938,7 @@ display: none
 
   --s-gradient-base: rgb(var(--s-neutral-base), calc(var(--s-neutral-base-opacity, 1) * var(--s-gradient-base-opacity, 1)))
 }
+
 .sui-alert-icon {
 
   margin-right: var(--sui-spacing-3);
@@ -4952,10 +4949,12 @@ display: none
 
   align-self: flex-start
 }
+
 .sui-alert-body {
 
   flex-grow: 1
 }
+
 .sui-alert-content {
 
   font-size: var(--sui-typography-subtitle-mini-font-size);
@@ -4970,12 +4969,15 @@ display: none
 
   font-family: var(--sui-font-family);
 
-  word-break: break-word
+  overflow-wrap: anywhere;
+  word-break: normal
 }
+
 .sui-alert-action {
 
   margin-top: var(--sui-spacing-2)
 }
+
 .sui-alert-close {
 
   margin-left: var(--sui-spacing-3);
@@ -4984,13 +4986,17 @@ display: none
 
   flex-shrink: 0
 }
+
+/* stylelint-disable custom-property-pattern -- consumes theme-generated --s- RGB triple */
+
 .sui-alert-info {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)));
 
-  --s-gradient-stop: linear-gradient(
+  --s-gradient-stop:
+    linear-gradient(
       0deg,
       var(--sui-colors-primary-t10) 0%,
       var(--sui-colors-primary-t10) 100%
@@ -5001,19 +5007,22 @@ display: none
       var(--sui-colors-neutral-static-w0-t10) 100%
     )
 }
+
 .sui-alert-info-icon {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-primary-f-high-contrast), calc(var(--s-primary-f-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)))
 }
+
 .sui-alert-error {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-danger-high-contrast), calc(var(--s-danger-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)));
 
-  --s-gradient-stop: linear-gradient(
+  --s-gradient-stop:
+    linear-gradient(
       0deg,
       var(--sui-colors-danger-t10) 0%,
       var(--sui-colors-danger-t10) 100%
@@ -5024,19 +5033,22 @@ display: none
       var(--sui-colors-neutral-static-w0-t10) 100%
     )
 }
+
 .sui-alert-error-icon {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-danger-high-contrast), calc(var(--s-danger-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)))
 }
+
 .sui-alert-warning {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)));
 
-  --s-gradient-stop: linear-gradient(
+  --s-gradient-stop:
+    linear-gradient(
       0deg,
       var(--sui-colors-warning-t10) 0%,
       var(--sui-colors-warning-t10) 100%
@@ -5047,19 +5059,22 @@ display: none
       var(--sui-colors-neutral-static-w0-t10) 100%
     )
 }
+
 .sui-alert-warning-icon {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-warning-high-contrast), calc(var(--s-warning-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)))
 }
+
 .sui-alert-success {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-success-high-contrast), calc(var(--s-success-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)));
 
-  --s-gradient-stop: linear-gradient(
+  --s-gradient-stop:
+    linear-gradient(
       0deg,
       var(--sui-colors-success-t10) 0%,
       var(--sui-colors-success-t10) 100%
@@ -5070,19 +5085,22 @@ display: none
       var(--sui-colors-neutral-static-w0-t10) 100%
     )
 }
+
 .sui-alert-success-icon {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-success-high-contrast), calc(var(--s-success-high-contrast-opacity, 1) * var(--tw-text-opacity, 1)))
 }
+
 .sui-alert-neutral {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity, 1)));
 
-  --s-gradient-stop: linear-gradient(
+  --s-gradient-stop:
+    linear-gradient(
       0deg,
       var(--sui-colors-neutral-b4-t50) 0%,
       var(--sui-colors-neutral-b4-t50) 100%
@@ -5093,13 +5111,18 @@ display: none
       var(--sui-colors-neutral-static-w0-t10) 100%
     )
 }
+
 .sui-alert-neutral-icon {
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity, 1)))
 }
+
+/* stylelint-enable custom-property-pattern */
+
 /* Compact Mode */
+
 .sui-alert-root:where(.sui-compact) {
 
   padding-left: var(--sui-spacing-3);
@@ -5110,12 +5133,14 @@ display: none
 
   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);
@@ -5132,6 +5157,7 @@ display: none
 
   gap: var(--sui-spacing-1)
 }
+
 :where(.sui-alert-root.sui-compact) .sui-alert-close {
 
   margin-left: var(--sui-spacing-1\.5);
@@ -6190,29 +6216,22 @@ display: none
     --sui-slider-thumb-border-width: 1px;
     --sui-slider-thumb-border-color: var(--sui-colors-neutral-b2);
     --sui-slider-thumb-bg-color: var(--sui-colors-neutral-high-contrast-b0);
-    --sui-slider-cross-size: var(--sui-spacing-1\.5);
-    --sui-slider-rail-flow-size: calc(
-      (100% + var(--sui-slider-thumb-size)) -
-        var(--sui-slider-thumb-border-width)
-    );
-    --sui-slider-min-flow-size: calc(
-      var(--sui-spacing-10) - var(--sui-slider-thumb-size)
+    --sui-slider-cross-size: var(--sui-spacing-1);
+    --sui-slider-mark-thickness: var(--sui-spacing-0\.25);
+    --sui-slider-marks-offset: calc(
+      (var(--sui-slider-cross-size) / 2) + var(--sui-spacing-1\.25) +
+        var(--sui-spacing-1\.5)
     );
+    --sui-slider-min-flow-size: var(--sui-spacing-10);
     --sui-slider-rail-color: var(--sui-colors-neutral-b4);
     --sui-slider-track-color: var(--sui-colors-neutral-b2);
-    --sui-slider-padding-block: var(--sui-spacing-4);
-    --sui-slider-marks-gap: calc(
-      var(--sui-slider-padding-block) + (var(--sui-slider-cross-size) / 2) +
-        var(--sui-spacing-2)
-    );
+    --sui-slider-padding: var(--sui-spacing-4);
     position: relative;
     box-sizing: content-box;
     display: inline-block;
     cursor: pointer;
     touch-action: none;
 
-    padding-block: var(--sui-slider-padding-block);
-
     /* sets the color of the highlight to transparent that appears over the slider while it's being tapped on mobile.  */
     -webkit-tap-highlight-color: transparent;
   }
@@ -6397,18 +6416,36 @@ display: none
   .sui-slider-horizontal {
     width: 100%;
 
-    padding-top: var(--sui-slider-padding-block);
+    padding-block: var(--sui-slider-padding);
     min-width: var(--sui-slider-min-flow-size);
 }
   .sui-slider-vertical {
     height: 100%;
 
-    padding-left: var(--sui-slider-padding-block);
+    padding-inline: var(--sui-slider-padding);
     min-height: var(--sui-slider-min-flow-size);
 }
-  .sui-slider-has-marks {
-    margin-bottom: var(--sui-spacing-4);
-}
+  .sui-slider-has-marks.sui-slider-horizontal {
+      /*
+        Reserve space for the hanging mark + label stack below the root:
+        marks-offset (rail center → mark line) + mark line length + mark/label gap +
+        label line-height − the bottom padding already inside the root.
+      */
+      margin-bottom: calc(
+        var(--sui-slider-marks-offset) + (2 * var(--sui-spacing-1)) +
+          var(--sui-typography-descriptor-mini-line-height) -
+          var(--sui-slider-padding)
+      );
+    }
+  .sui-slider-has-marks.sui-slider-vertical {
+      /*
+        Reserve space for the hanging mark + label stack to the inline-end of the root.
+        Vertical labels grow by text width (not a fixed line-height), so this uses the
+        Figma design reserve (spacing-13 / 52px) for typical mark labels instead of a
+        content-derived calc like horizontal.
+      */
+      margin-inline-end: var(--sui-spacing-13);
+    }
   .sui-slider-rail,
   .sui-slider-track {
     position: absolute;
@@ -6441,13 +6478,15 @@ display: none
     background-color: var(--sui-slider-rail-color);
 }
   .sui-slider-rail-horizontal {
+    width: 100%;
+
       height: var(--sui-slider-cross-size);
-      width: var(--sui-slider-rail-flow-size);
-    }
+}
   .sui-slider-rail-vertical {
-      height: var(--sui-slider-rail-flow-size);
+    height: 100%;
+
       width: var(--sui-slider-cross-size);
-    }
+}
   .sui-slider-track-horizontal {
     left: var(--sui-spacing-0);
     border-top-left-radius: var(--sui-border-radius-full);
@@ -6455,7 +6494,7 @@ display: none
 
       top: 50%;
       height: var(--sui-slider-cross-size);
-      transform: translate(calc(var(--sui-slider-thumb-size) / -2), -50%);
+      transform: translateY(-50%);
 }
   .sui-slider-track-vertical {
     bottom: var(--sui-spacing-0);
@@ -6464,7 +6503,7 @@ display: none
 
       left: 50%;
       width: var(--sui-slider-cross-size);
-      transform: translate(-50%, calc(var(--sui-slider-thumb-size) / 2));
+      transform: translateX(-50%);
 }
   .sui-slider-thumb {
     position: absolute;
@@ -6518,9 +6557,9 @@ display: none
       transform: translate(-50%, -50%);
     }
   .sui-slider-thumb-vertical {
-      left: calc(var(--sui-slider-thumb-border-width) / -1);
+      left: 50%;
       margin-bottom: var(--sui-slider-thumb-offset);
-      transform: translateY(50%);
+      transform: translate(-50%, 50%);
     }
   .sui-slider-thumb-inner {
     position: absolute;
@@ -6534,40 +6573,31 @@ display: none
     position: absolute;
     display: block;
 }
-  /*
-      The thumb needs to be perfectly centered alongside a 1px wide mark so we must offset
-      the thumb towards the start of the slider by 0.5px. We also need to offset the thumb
-      another 0.5px due to its border radius revealing a gap between the track and the thumb
-      which shows the rail behind. As such we offset the marks container 1px towards the
-      start of the slider. Due to the offset of the thumb being towards the start of the
-      slider, we also need to offset the end edge of the marks container away from the
-      end of the slider by 1px to account for the start offset.
-    */
   .sui-slider-marks-horizontal {
-    left: -1px;
-    right: 1px;
-
-      top: var(--sui-slider-marks-gap);
-}
+      left: 0;
+      right: var(--sui-slider-mark-thickness);
+      top: calc(50% + var(--sui-slider-marks-offset));
+    }
   .sui-slider-marks-vertical {
-    bottom: -1px;
-    top: 1px;
-
-      left: var(--sui-slider-marks-gap);
-}
+      top: var(--sui-slider-mark-thickness);
+      bottom: 0;
+      left: calc(50% + var(--sui-slider-marks-offset));
+    }
   .sui-slider-mark-container {
     position: absolute;
     display: flex;
     align-items: center;
-    gap: var(--sui-spacing-2);
+    gap: var(--sui-spacing-1);
 }
   .sui-slider-mark-container-horizontal {
-    width: var(--sui-spacing-0\.25);
     flex-direction: column;
+
+      width: var(--sui-slider-mark-thickness);
 }
   .sui-slider-mark-container-vertical {
-    height: var(--sui-spacing-0\.25);
     flex-direction: row;
+
+      height: var(--sui-slider-mark-thickness);
 }
   .sui-slider-mark {
     --tw-bg-opacity: 1;
@@ -6588,6 +6618,7 @@ display: none
     text-decoration: var(--sui-typography-descriptor-mini-text-decoration);
     text-transform: var(--sui-typography-descriptor-mini-text-transform);
     font-family: var(--sui-font-family);
+    white-space: nowrap;
     text-align: center;
     --tw-text-opacity: 1;
     color: rgb(var(--s-neutral-b2), calc(var(--s-neutral-b2-opacity, 1) * var(--tw-text-opacity, 1)));
@@ -7721,7 +7752,9 @@ 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 {
+:where(
+  .sui-time-picker-picker-view.sui-compact
+).sui-time-picker-minute-selection-view {
 
 height: var(--sui-spacing-25);
 }