@3dsource/source-ui-native 2.2.0 → 3.0.0

package/styles/source-ui-native.css

@@ -1341,7 +1341,8 @@
   }
 }
 
-.src-list__item--destructive {
+.src-list__item--destructive,
+.src-list__item--context-error {
   --srcListItemBgColor: transparent;
   --srcListItemBgHoverColor: var(--src-color-bg-critical-subdued);
   --srcListItemFontColor: var(--src-color-text-critical);
@@ -1453,13 +1454,13 @@
   }
 }
 
-.src-button--state-info {
+.src-button--context-info {
   --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
 }
-.src-button--state-info:hover {
+.src-button--context-info:hover {
   --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
 }
-.src-button--state-info {
+.src-button--context-info {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
@@ -1468,30 +1469,30 @@
   --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
   --srcButtonIconColor: var(--src-icon-info, #017bff);
 }
-.src-button--state-info:focus-visible {
+.src-button--context-info:focus-visible {
   --srcButtonBgColor: var(--src-ui-secondary-active, rgba(1, 123, 255, 0.12));
   --srcButtonIconColor: var(--src-icon-info, #017bff);
   --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
 }
 @media (pointer: fine) {
-  .src-button--state-info:hover {
+  .src-button--context-info:hover {
     --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, 0.08));
     --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
     --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
   }
 }
 
-.src-button--state-error,
-.src-button--state-destructive {
+.src-button--context-error,
+.src-button--context-destructive {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcButtonFontColor: var(--src-text-ui-distruct-main, #c5280c);
 }
-.src-button--state-error:hover,
-.src-button--state-destructive:hover {
+.src-button--context-error:hover,
+.src-button--context-destructive:hover {
   --srcButtonFontColor: var(--src-text-ui-distruct-hover, #9f200a);
 }
-.src-button--state-error,
-.src-button--state-destructive {
+.src-button--context-error,
+.src-button--context-destructive {
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
     0 var(--src-shadow-ambient-outer, 1px) 0 0
@@ -1499,15 +1500,15 @@
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
   --srcButtonIconColor: var(--src-icon-error, #f24122);
 }
-.src-button--state-error:focus-visible,
-.src-button--state-destructive:focus-visible {
+.src-button--context-error:focus-visible,
+.src-button--context-destructive:focus-visible {
   --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, 0.08));
   --srcButtonIconColor: var(--src-icon-error, #f24122);
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
 }
 @media (pointer: fine) {
-  .src-button--state-error:hover,
-  .src-button--state-destructive:hover {
+  .src-button--context-error:hover,
+  .src-button--context-destructive:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-error,
       rgba(239, 68, 68, 0.08)
@@ -1517,14 +1518,14 @@
   }
 }
 
-.src-button--state-success {
+.src-button--context-success {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, 0.12));
   --srcButtonFontColor: var(--src-text-ui-success-main, #16a34a);
 }
-.src-button--state-success:hover {
+.src-button--context-success:hover {
   --srcButtonFontColor: var(--src-text-ui-success-hover, #15803d);
 }
-.src-button--state-success {
+.src-button--context-success {
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
     0 var(--src-shadow-ambient-outer, 1px) 0 0
@@ -1532,7 +1533,7 @@
   --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
   --srcButtonIconColor: var(--src-icon-success, #16a34a);
 }
-.src-button--state-success:focus-visible {
+.src-button--context-success:focus-visible {
   --srcButtonBgColor: var(
     --src-ui-secondary-success,
     rgba(22, 163, 74, 0.08)
@@ -1541,7 +1542,7 @@
   --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
 }
 @media (pointer: fine) {
-  .src-button--state-success:hover {
+  .src-button--context-success:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-success,
       rgba(22, 163, 74, 0.08)
@@ -1572,24 +1573,24 @@
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-button--primary.src-button--state-error, .src-button--primary.src-button--state-destructive {
+.src-button--primary.src-button--context-error, .src-button--primary.src-button--context-destructive {
   --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
 }
-.src-button--primary.src-button--state-error:hover, .src-button--primary.src-button--state-destructive:hover {
+.src-button--primary.src-button--context-error:hover, .src-button--primary.src-button--context-destructive:hover {
   --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
 }
-.src-button--primary.src-button--state-error, .src-button--primary.src-button--state-destructive {
+.src-button--primary.src-button--context-error, .src-button--primary.src-button--context-destructive {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcButtonBgColor: var(--src-ui-accent-error, #f24122);
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-button--primary.src-button--state-error:hover, .src-button--primary.src-button--state-destructive:hover {
+  .src-button--primary.src-button--context-error:hover, .src-button--primary.src-button--context-destructive:hover {
     --srcButtonBgColor: var(--src-ui-accent-error-hover, #f24122);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-button--primary.src-button--state-error:active, .src-button--primary.src-button--state-error.src-icon-button--pressed, .src-button--primary.src-button--state-destructive:active, .src-button--primary.src-button--state-destructive.src-icon-button--pressed {
+.src-button--primary.src-button--context-error:active, .src-button--primary.src-button--context-error.src-icon-button--pressed, .src-button--primary.src-button--context-destructive:active, .src-button--primary.src-button--context-destructive.src-icon-button--pressed {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
@@ -1599,30 +1600,30 @@
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-button--primary.src-button--state-error:active:hover, .src-button--primary.src-button--state-error.src-icon-button--pressed:hover, .src-button--primary.src-button--state-destructive:active:hover, .src-button--primary.src-button--state-destructive.src-icon-button--pressed:hover {
+  .src-button--primary.src-button--context-error:active:hover, .src-button--primary.src-button--context-error.src-icon-button--pressed:hover, .src-button--primary.src-button--context-destructive:active:hover, .src-button--primary.src-button--context-destructive.src-icon-button--pressed:hover {
     --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
     --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-button--primary.src-button--state-success {
+.src-button--primary.src-button--context-success {
   --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
 }
-.src-button--primary.src-button--state-success:hover {
+.src-button--primary.src-button--context-success:hover {
   --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
 }
-.src-button--primary.src-button--state-success {
+.src-button--primary.src-button--context-success {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, 0.12));
   --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-button--primary.src-button--state-success:hover {
+  .src-button--primary.src-button--context-success:hover {
     --srcButtonBgColor: var(--src-ui-accent-success-hover, #16a34a);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-button--primary.src-button--state-success:active, .src-button--primary.src-button--state-success.src-icon-button--pressed {
+.src-button--primary.src-button--context-success:active, .src-button--primary.src-button--context-success.src-icon-button--pressed {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
@@ -1632,7 +1633,7 @@
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-button--primary.src-button--state-success:active:hover, .src-button--primary.src-button--state-success.src-icon-button--pressed:hover {
+  .src-button--primary.src-button--context-success:active:hover, .src-button--primary.src-button--context-success.src-icon-button--pressed:hover {
     --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
     --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
@@ -1677,20 +1678,20 @@
     --srcButtonIconCOlor: var(--src-icon-hover, #111827);
   }
 }
-.src-button--ghost.src-button--state-info {
+.src-button--ghost.src-button--context-info {
   --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, 0.08));
   --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
   --srcButtonIconColor: var(--src-icon-info, #017bff);
   --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
 }
-.src-button--ghost.src-button--state-info:hover {
+.src-button--ghost.src-button--context-info:hover {
   --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
 }
-.src-button--ghost.src-button--state-info {
+.src-button--ghost.src-button--context-info {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
 }
 @media (pointer: fine) {
-  .src-button--ghost.src-button--state-info:hover {
+  .src-button--ghost.src-button--context-info:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-info-hover,
       rgba(1, 123, 255, 0.12)
@@ -1698,20 +1699,20 @@
     --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
   }
 }
-.src-button--ghost.src-button--state-error, .src-button--ghost.src-button--state-destructive {
+.src-button--ghost.src-button--context-error, .src-button--ghost.src-button--context-destructive {
   --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, 0.08));
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
   --srcButtonIconColor: var(--src-icon-error, #f24122);
   --srcButtonFontColor: var(--src-text-ui-distruct-main, #c5280c);
 }
-.src-button--ghost.src-button--state-error:hover, .src-button--ghost.src-button--state-destructive:hover {
+.src-button--ghost.src-button--context-error:hover, .src-button--ghost.src-button--context-destructive:hover {
   --srcButtonFontColor: var(--src-text-ui-distruct-hover, #9f200a);
 }
-.src-button--ghost.src-button--state-error, .src-button--ghost.src-button--state-destructive {
+.src-button--ghost.src-button--context-error, .src-button--ghost.src-button--context-destructive {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, 0.16));
 }
 @media (pointer: fine) {
-  .src-button--ghost.src-button--state-error:hover, .src-button--ghost.src-button--state-destructive:hover {
+  .src-button--ghost.src-button--context-error:hover, .src-button--ghost.src-button--context-destructive:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-error-hover,
       rgba(239, 68, 68, 0.16)
@@ -1719,7 +1720,7 @@
     --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
   }
 }
-.src-button--ghost.src-button--state-success {
+.src-button--ghost.src-button--context-success {
   --srcButtonBgColor: var(
     --src-ui-secondary-success,
     rgba(22, 163, 74, 0.08)
@@ -1728,20 +1729,20 @@
   --srcButtonIconColor: var(--src-icon-success, #16a34a);
   --srcButtonFontColor: var(--src-text-ui-success-main, #16a34a);
 }
-.src-button--ghost.src-button--state-success:hover {
+.src-button--ghost.src-button--context-success:hover {
   --srcButtonFontColor: var(--src-text-ui-success-hover, #15803d);
 }
-.src-button--ghost.src-button--state-success {
+.src-button--ghost.src-button--context-success {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, 0.12));
 }
-.src-button--ghost.src-button--state-success:focus-visible {
+.src-button--ghost.src-button--context-success:focus-visible {
   --srcButtonBgColor: var(
     --src-ui-secondary-success,
     rgba(22, 163, 74, 0.08)
   );
 }
 @media (pointer: fine) {
-  .src-button--ghost.src-button--state-success:hover {
+  .src-button--ghost.src-button--context-success:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-success-hover,
       rgba(22, 163, 74, 0.12)
@@ -1858,63 +1859,63 @@
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
 }
-.src-button--inline.src-button--state-inverted {
+.src-button--inline.src-button--inverted {
   --srcButtonFontColor: var(--src-text-ui-secondary-secondary-invert, #d1d5db);
 }
-.src-button--inline.src-button--state-inverted:hover {
+.src-button--inline.src-button--inverted:hover {
   --srcButtonFontColor: var(--src-text-ui-secondary-main-invert, #f9fafb);
 }
-.src-button--inline.src-button--state-inverted {
+.src-button--inline.src-button--inverted {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(
     --src-text-ui-secondary-secondary-invert,
     #d1d5db
   );
 }
-.src-button--inline.src-button--state-inverted:hover {
+.src-button--inline.src-button--inverted:hover {
   --srcButtonIconColor: var(--src-text-ui-secondary-main-invert, #f9fafb);
 }
-.src-button--inline.src-button--state-inverted:active, .src-button--inline.src-button--state-inverted.src-button--pressed {
+.src-button--inline.src-button--inverted:active, .src-button--inline.src-button--inverted.src-button--pressed {
   --srcButtonBgColor: transparent;
   --srcButtonFontColor: var(--src-text-ui-secondary-grey, #9ca3af);
 }
-.src-button--inline.src-button--state-info {
+.src-button--inline.src-button--context-info {
   --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
 }
-.src-button--inline.src-button--state-info:hover {
+.src-button--inline.src-button--context-info:hover {
   --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
 }
-.src-button--inline.src-button--state-info {
+.src-button--inline.src-button--context-info {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-info, #017bff);
 }
-.src-button--inline.src-button--state-info:hover {
+.src-button--inline.src-button--context-info:hover {
   --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
 }
-.src-button--inline.src-button--state-success {
+.src-button--inline.src-button--context-success {
   --srcButtonFontColor: var(--src-text-ui-success-main, #16a34a);
 }
-.src-button--inline.src-button--state-success:hover {
+.src-button--inline.src-button--context-success:hover {
   --srcButtonFontColor: var(--src-text-ui-success-hover, #15803d);
 }
-.src-button--inline.src-button--state-success {
+.src-button--inline.src-button--context-success {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-success, #16a34a);
 }
-.src-button--inline.src-button--state-success:hover {
+.src-button--inline.src-button--context-success:hover {
   --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
 }
-.src-button--inline.src-button--state-error, .src-button--inline.src-button--state-destructive {
+.src-button--inline.src-button--context-error, .src-button--inline.src-button--context-destructive {
   --srcButtonFontColor: var(--src-text-ui-distruct-main, #c5280c);
 }
-.src-button--inline.src-button--state-error:hover, .src-button--inline.src-button--state-destructive:hover {
+.src-button--inline.src-button--context-error:hover, .src-button--inline.src-button--context-destructive:hover {
   --srcButtonFontColor: var(--src-text-ui-distruct-hover, #9f200a);
 }
-.src-button--inline.src-button--state-error, .src-button--inline.src-button--state-destructive {
+.src-button--inline.src-button--context-error, .src-button--inline.src-button--context-destructive {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-error, #f24122);
 }
-.src-button--inline.src-button--state-error:hover, .src-button--inline.src-button--state-destructive:hover {
+.src-button--inline.src-button--context-error:hover, .src-button--inline.src-button--context-destructive:hover {
   --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
 }
 .src-button--inline:disabled, .src-button--inline[disabled], .src-button--inline.disabled {
@@ -2007,7 +2008,7 @@
   --srcButtonBorderRadius: 50%;
 }
 
-.src-icon-button--state-info {
+.src-icon-button--context-info {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
@@ -2016,37 +2017,37 @@
   --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
   --srcButtonIconColor: var(--src-icon-info, #017bff);
 }
-.src-icon-button--state-info:focus-visible {
+.src-icon-button--context-info:focus-visible {
   --srcButtonBgColor: var(--src-ui-secondary-active, rgba(1, 123, 255, 0.12));
   --srcButtonIconColor: var(--src-icon-info, #017bff);
   --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
 }
 @media (pointer: fine) {
-  .src-icon-button--state-info:hover {
+  .src-icon-button--context-info:hover {
     --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
     --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, 0.08));
     --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
   }
 }
 
-.src-icon-button--state-warning {
+.src-icon-button--context-warning {
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
     0 var(--src-shadow-ambient-outer, 1px) 0 0
       var(--src-shadow-light, rgba(148, 163, 184, 0.16));
   --srcButtonIconColor: var(--src-icon-warning);
 }
-.src-icon-button--state-warning:focus-visible {
+.src-icon-button--context-warning:focus-visible {
   --srcButtonIconColor: var(--src-icon-warning);
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
 }
 @media (pointer: fine) {
-  .src-icon-button--state-warning:hover {
+  .src-icon-button--context-warning:hover {
     --srcButtonIconColor: var(--src-icon-warning-hover);
   }
 }
 
-.src-icon-button--state-error {
+.src-icon-button--context-error {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
@@ -2055,13 +2056,13 @@
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
   --srcButtonIconColor: var(--src-icon-error, #f24122);
 }
-.src-icon-button--state-error:focus-visible {
+.src-icon-button--context-error:focus-visible {
   --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, 0.08));
   --srcButtonIconColor: var(--src-icon-error, #f24122);
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
 }
 @media (pointer: fine) {
-  .src-icon-button--state-error:hover {
+  .src-icon-button--context-error:hover {
     --srcButtonBorderColor: var(--src-border-button-error-hover, #f24122);
     --srcButtonBgColor: var(
       --src-ui-secondary-error-hover,
@@ -2071,7 +2072,7 @@
   }
 }
 
-.src-icon-button--state-success {
+.src-icon-button--context-success {
   --srcButtonBoxShadow:
     0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
     0 var(--src-shadow-ambient-outer, 1px) 0 0
@@ -2080,7 +2081,7 @@
   --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
   --srcButtonIconColor: var(--src-icon-success, #16a34a);
 }
-.src-icon-button--state-success:focus-visible {
+.src-icon-button--context-success:focus-visible {
   --srcButtonBgColor: var(
     --src-ui-secondary-success,
     rgba(22, 163, 74, 0.08)
@@ -2089,7 +2090,7 @@
   --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
 }
 @media (pointer: fine) {
-  .src-icon-button--state-success:hover {
+  .src-icon-button--context-success:hover {
     --srcButtonBorderColor: var(--src-border-button-success-hover, #22c55e);
     --srcButtonBgColor: var(
       --src-ui-secondary-success,
@@ -2114,18 +2115,18 @@
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-icon-button--primary.src-icon-button--state-error {
+.src-icon-button--primary.src-icon-button--context-error {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcButtonBgColor: var(--src-ui-accent-error, #f24122);
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-icon-button--primary.src-icon-button--state-error:hover {
+  .src-icon-button--primary.src-icon-button--context-error:hover {
     --srcButtonBgColor: var(--src-ui-accent-error-hover, #f24122);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-icon-button--primary.src-icon-button--state-error:active, .src-icon-button--primary.src-icon-button--state-error.src-icon-button--pressed {
+.src-icon-button--primary.src-icon-button--context-error:active, .src-icon-button--primary.src-icon-button--context-error.src-icon-button--pressed {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
@@ -2135,24 +2136,24 @@
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-icon-button--primary.src-icon-button--state-error:active:hover, .src-icon-button--primary.src-icon-button--state-error.src-icon-button--pressed:hover {
+  .src-icon-button--primary.src-icon-button--context-error:active:hover, .src-icon-button--primary.src-icon-button--context-error.src-icon-button--pressed:hover {
     --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
     --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-icon-button--primary.src-icon-button--state-success {
+.src-icon-button--primary.src-icon-button--context-success {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, 0.12));
   --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-icon-button--primary.src-icon-button--state-success:hover {
+  .src-icon-button--primary.src-icon-button--context-success:hover {
     --srcButtonBgColor: var(--src-ui-accent-success-hover, #16a34a);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
 }
-.src-icon-button--primary.src-icon-button--state-success:active, .src-icon-button--primary.src-icon-button--state-success.src-icon-button--pressed {
+.src-icon-button--primary.src-icon-button--context-success:active, .src-icon-button--primary.src-icon-button--context-success.src-icon-button--pressed {
   --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
@@ -2162,7 +2163,7 @@
   --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 }
 @media (pointer: fine) {
-  .src-icon-button--primary.src-icon-button--state-success:active:hover, .src-icon-button--primary.src-icon-button--state-success.src-icon-button--pressed:hover {
+  .src-icon-button--primary.src-icon-button--context-success:active:hover, .src-icon-button--primary.src-icon-button--context-success.src-icon-button--pressed:hover {
     --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
     --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
@@ -2273,35 +2274,35 @@
 .src-icon-button--inline:active:hover, .src-icon-button--inline.src-icon-button--pressed:hover {
   --srcButtonBgColor: transparent;
 }
-.src-icon-button--inline.src-icon-button--state-info {
+.src-icon-button--inline.src-icon-button--context-info {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-info, #017bff);
 }
-.src-icon-button--inline.src-icon-button--state-info:hover {
+.src-icon-button--inline.src-icon-button--context-info:hover {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
 }
-.src-icon-button--inline.src-icon-button--state-success {
+.src-icon-button--inline.src-icon-button--context-success {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-success, #16a34a);
 }
-.src-icon-button--inline.src-icon-button--state-success:hover {
+.src-icon-button--inline.src-icon-button--context-success:hover {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
 }
-.src-icon-button--inline.src-icon-button--state-error, .src-icon-button--inline.src-icon-button--state-destructive {
+.src-icon-button--inline.src-icon-button--context-error, .src-icon-button--inline.src-icon-button--context-destructive {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-error, #f24122);
 }
-.src-icon-button--inline.src-icon-button--state-error:hover, .src-icon-button--inline.src-icon-button--state-destructive:hover {
+.src-icon-button--inline.src-icon-button--context-error:hover, .src-icon-button--inline.src-icon-button--context-destructive:hover {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
 }
-.src-icon-button--inline.src-icon-button--state-warning {
+.src-icon-button--inline.src-icon-button--context-warning {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-warning, #d97706);
 }
-.src-icon-button--inline.src-icon-button--state-warning:hover {
+.src-icon-button--inline.src-icon-button--context-warning:hover {
   --srcButtonBgColor: transparent;
   --srcButtonIconColor: var(--src-icon-warning-hover, #b45309);
 }
@@ -2358,7 +2359,7 @@
     --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
   }
 }
-.src-icon-button--plain.src-icon-button--state-info {
+.src-icon-button--plain.src-icon-button--context-info {
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
   --srcButtonBorderColor: transparent;
@@ -2367,7 +2368,7 @@
   --srcButtonIconColor: var(--src-icon-info, #017bff);
   --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
 }
-.src-icon-button--plain.src-icon-button--state-info:focus-visible {
+.src-icon-button--plain.src-icon-button--context-info:focus-visible {
   --srcButtonBgColor: var(
     --src-ui-secondary-active,
     rgba(1, 123, 255, 0.12)
@@ -2376,7 +2377,7 @@
   --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
 }
 @media (pointer: fine) {
-  .src-icon-button--plain.src-icon-button--state-info:hover {
+  .src-icon-button--plain.src-icon-button--context-info:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-info,
       rgba(1, 123, 255, 0.08)
@@ -2384,7 +2385,7 @@
     --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
   }
 }
-.src-icon-button--plain.src-icon-button--state-error {
+.src-icon-button--plain.src-icon-button--context-error {
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
   --srcButtonBorderColor: transparent;
@@ -2393,7 +2394,7 @@
   --srcButtonIconColor: var(--src-icon-error);
   --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
 }
-.src-icon-button--plain.src-icon-button--state-error:focus-visible {
+.src-icon-button--plain.src-icon-button--context-error:focus-visible {
   --srcButtonBgColor: var(
     --src-ui-secondary-error,
     rgba(239, 68, 68, 0.08)
@@ -2402,7 +2403,7 @@
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
 }
 @media (pointer: fine) {
-  .src-icon-button--plain.src-icon-button--state-error:hover {
+  .src-icon-button--plain.src-icon-button--context-error:hover {
     --srcButtonBgColor: var(
       --src-ui-secondary-error-hover,
       rgba(239, 68, 68, 0.16)
@@ -2410,7 +2411,7 @@
     --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
   }
 }
-.src-icon-button--plain.src-icon-button--state-success {
+.src-icon-button--plain.src-icon-button--context-success {
   --srcButtonBoxShadow: none;
   --srcButtonBorder: none;
   --srcButtonBorderColor: transparent;
@@ -2419,13 +2420,13 @@
   --srcButtonIconColor: var(--src-icon-success);
   --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
 }
-.src-icon-button--plain.src-icon-button--state-success:focus-visible {
+.src-icon-button--plain.src-icon-button--context-success:focus-visible {
   --srcButtonBgColor: var(--src-ui-secondary-success);
   --srcButtonIconColor: var(--src-icon-success);
   --srcButtonBorderColor: var(--src-border-button-success);
 }
 @media (pointer: fine) {
-  .src-icon-button--plain.src-icon-button--state-success:hover {
+  .src-icon-button--plain.src-icon-button--context-success:hover {
     --srcButtonBgColor: var(--src-ui-secondary-success-hover);
     --srcButtonIconColor: var(--src-icon-success-hover);
   }
@@ -2568,13 +2569,13 @@
 }
 
 /* Error State */
-.src-input--state-error {
+.src-input--context-error {
   --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcInputFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcInputFontColor: var(--src-text-ui-distruct-main, #c5280c);
 }
-.src-input--state-error:hover {
+.src-input--context-error:hover {
   --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcInputFieldBg:
     linear-gradient(
@@ -2584,14 +2585,14 @@
     ),
     var(--src-surface-container-main, #fff);
 }
-.src-input--state-error:active {
+.src-input--context-error:active {
   --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
 }
-.src-input--state-error:focus-visible {
+.src-input--context-error:focus-visible {
   --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcInputFieldBg: var(--src-surface-container-main, #fff);
 }
-.src-input--state-error:focus-visible:hover {
+.src-input--context-error:focus-visible:hover {
   --srcInputFieldBg: var(
     --src-ui-input-error-hover,
     rgba(239, 68, 68, 0.08)
@@ -2599,13 +2600,13 @@
 }
 
 /* Success State */
-.src-input--state-success {
+.src-input--context-success {
   --srcInputFieldBorderColor: var(--src-border-input-success, #22c55e);
   --srcInputFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-success, rgba(22, 163, 74, 0.12));
   --srcInputFontColor: var(--src-text-ui-success-main, #16a34a);
 }
-.src-input--state-success:hover {
+.src-input--context-success:hover {
   --srcInputFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
   --srcInputFieldBg:
     linear-gradient(
@@ -2615,14 +2616,14 @@
     ),
     var(--src-surface-container-main, #fff);
 }
-.src-input--state-success:active {
+.src-input--context-success:active {
   --srcInputFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
 }
-.src-input--state-success:focus-visible {
+.src-input--context-success:focus-visible {
   --srcInputFieldBorderColor: var(--src-border-input-success, #22c55e);
   --srcInputFieldBg: var(--src-surface-container-main, #fff);
 }
-.src-input--state-success:focus-visible:hover {
+.src-input--context-success:focus-visible:hover {
   --srcInputFieldBg: var(
     --src-ui-input-success-hover,
     rgba(22, 163, 74, 0.08)
@@ -2732,20 +2733,14 @@
   --srcSelectFieldBorder: none;
 }
 
-.src-select--compact {
-  --srcSelectHeight: 32px;
-  --srcSelectFontSize: var(--src-font-size-xs);
-  --srcSelectLineHeight: var(--src-font-line-xs);
-}
-
-/* Error State */
-.src-select--state-error {
+/* Error Context */
+.src-select--context-error {
   --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcSelectFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcSelectFontColor: var(--src-text-ui-distruct-main, #c5280c);
 }
-.src-select--state-error:hover {
+.src-select--context-error:hover {
   --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcSelectFieldBg:
     linear-gradient(
@@ -2755,28 +2750,28 @@
     ),
     var(--src-surface-container-main, #fff);
 }
-.src-select--state-error:active {
+.src-select--context-error:active {
   --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
 }
-.src-select--state-error:focus-visible {
+.src-select--context-error:focus-visible {
   --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcSelectFieldBg: var(--src-surface-container-main, #fff);
 }
-.src-select--state-error:focus-visible:hover {
+.src-select--context-error:focus-visible:hover {
   --srcSelectFieldBg: var(
     --src-ui-input-error-hover,
     rgba(239, 68, 68, 0.08)
   );
 }
 
-/* Success State */
-.src-select--state-success {
+/* Success context */
+.src-select--context-success {
   --srcSelectFieldBorderColor: var(--src-border-input-success, #22c55e);
   --srcSelectFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-success, rgba(22, 163, 74, 0.12));
   --srcSelectFontColor: var(--src-text-ui-success-main, #16a34a);
 }
-.src-select--state-success:hover {
+.src-select--context-success:hover {
   --srcSelectFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
   --srcSelectFieldBg:
     linear-gradient(
@@ -2786,14 +2781,14 @@
     ),
     var(--src-surface-container-main, #fff);
 }
-.src-select--state-success:active {
+.src-select--context-success:active {
   --srcSelectFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
 }
-.src-select--state-success:focus-visible {
+.src-select--context-success:focus-visible {
   --srcSelectFieldBorderColor: var(--src-border-input-success, #22c55e);
   --srcSelectFieldBg: var(--src-surface-container-main, #fff);
 }
-.src-select--state-success:focus-visible:hover {
+.src-select--context-success:focus-visible:hover {
   --srcSelectFieldBg: var(
     --src-ui-input-success-hover,
     rgba(22, 163, 74, 0.08)
@@ -2898,14 +2893,14 @@
   --srcTexareaBorder: none;
 }
 
-/* Error State */
-.src-textarea--state-error {
+/* Error context */
+.src-textarea--context-error {
   --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
   --srcTexareaRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-error, rgba(239, 68, 68, 0.16));
   --srcTexareaFontColor: var(--src-text-ui-distruct-main, #c5280c);
 }
-.src-textarea--state-error:hover {
+.src-textarea--context-error:hover {
   --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
   --srcTexareaBg:
     linear-gradient(
@@ -2915,25 +2910,25 @@
     ),
     var(--src-surface-container-main, #fff);
 }
-.src-textarea--state-error:active {
+.src-textarea--context-error:active {
   --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
 }
-.src-textarea--state-error:focus-visible {
+.src-textarea--context-error:focus-visible {
   --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
   --srcTexareaBg: var(--src-surface-container-main, #fff);
 }
-.src-textarea--state-error:focus-visible:hover {
+.src-textarea--context-error:focus-visible:hover {
   --srcTexareaBg: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
 }
 
-/* Success State */
-.src-textarea--state-success {
+/* Success context */
+.src-textarea--context-success {
   --srcTexareaBorderColor: var(--src-border-input-success, #22c55e);
   --srcTexareaFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-success, rgba(22, 163, 74, 0.12));
   --srcTexareaFontColor: var(--src-text-ui-success-main, #16a34a);
 }
-.src-textarea--state-success:hover {
+.src-textarea--context-success:hover {
   --srcTexareaBorderColor: var(--src-border-input-success-hover, #16a34a);
   --srcTexareaBg:
     linear-gradient(
@@ -2943,14 +2938,14 @@
     ),
     var(--src-surface-container-main, #fff);
 }
-.src-textarea--state-success:active {
+.src-textarea--context-success:active {
   --srcTexareaBorderColor: var(--src-border-input-success-hover, #16a34a);
 }
-.src-textarea--state-success:focus-visible {
+.src-textarea--context-success:focus-visible {
   --srcTexareaBorderColor: var(--src-border-input-success, #22c55e);
   --srcTexareaBg: var(--src-surface-container-main, #fff);
 }
-.src-textarea--state-success:focus-visible:hover {
+.src-textarea--context-success:focus-visible:hover {
   --srcTexareaBg: var(
     --src-ui-input-success-hover,
     rgba(22, 163, 74, 0.08)
@@ -3226,9 +3221,6 @@
   font-weight: 400;
   line-height: var(--src-font-line-sm, 20px);
 }
-.src-modal--small {
-  --srcModalWidth: 380px;
-}
 .src-modal .src-modal__header {
   position: relative;
   display: flex;
@@ -3310,14 +3302,12 @@
   color: var(--srcModalTitleColor);
   word-break: break-word;
 }
-.src-modal .src-modal__back {
-  margin-right: 8px;
-}
 .src-modal .src-modal__close {
   position: absolute;
   top: 4px;
   right: 4px;
   margin-left: auto;
+  z-index: 1;
 }
 
 dialog {