@react-spectrum/s2 3.0.0-nightly-262cc758b-241114 → 3.0.0-nightly-a98da553e-241116

package/dist/Badge.cjs

@@ -101,51 +101,51 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
     rules += ' -oelgqu_A--177861o';
     rules += ' jbH';
     rules += ' jG';
-    if (props.fillStyle === "outline") rules += ' b______o';
+    if (props.fillStyle === "outline") rules += ' b______k';
     else if (props.fillStyle === "subtle") {
-        if (props.variant === "silver") rules += ' b______n';
-        else if (props.variant === "cinnamon") rules += ' b______j';
-        else if (props.variant === "brown") rules += ' b______l';
-        else if (props.variant === "turquoise") rules += ' b______h';
-        else if (props.variant === "pink") rules += ' b______f';
-        else if (props.variant === "magenta") rules += ' b______d';
-        else if (props.variant === "fuchsia") rules += ' b______b';
-        else if (props.variant === "purple") rules += ' b_____9';
-        else if (props.variant === "indigo") rules += ' b_____7';
+        if (props.variant === "silver") rules += ' b______j';
+        else if (props.variant === "cinnamon") rules += ' b______f';
+        else if (props.variant === "brown") rules += ' b______h';
+        else if (props.variant === "turquoise") rules += ' b______d';
+        else if (props.variant === "pink") rules += ' b______b';
+        else if (props.variant === "magenta") rules += ' b_____9';
+        else if (props.variant === "fuchsia") rules += ' b_____7';
+        else if (props.variant === "purple") rules += ' b_____5';
+        else if (props.variant === "indigo") rules += ' b_____3';
         else if (props.variant === "blue") rules += ' b_____G';
-        else if (props.variant === "cyan") rules += ' b_____5';
-        else if (props.variant === "seafoam") rules += ' b_____3';
-        else if (props.variant === "green") rules += ' b_____S';
-        else if (props.variant === "celery") rules += ' b_____1';
-        else if (props.variant === "charteuse") rules += ' b_____Z';
-        else if (props.variant === "yellow") rules += ' b_____X';
-        else if (props.variant === "orange") rules += ' b_____V';
-        else if (props.variant === "red") rules += ' b_____N';
+        else if (props.variant === "cyan") rules += ' b_____1';
+        else if (props.variant === "seafoam") rules += ' b_____Z';
+        else if (props.variant === "green") rules += ' b_____P';
+        else if (props.variant === "celery") rules += ' b_____X';
+        else if (props.variant === "charteuse") rules += ' b_____V';
+        else if (props.variant === "yellow") rules += ' b_____T';
+        else if (props.variant === "orange") rules += ' b_____R';
+        else if (props.variant === "red") rules += ' b_____M';
         else if (props.variant === "gray") rules += ' b_____J';
-        else if (props.variant === "negative") rules += ' b_____N';
-        else if (props.variant === "notice") rules += ' b_____V';
-        else if (props.variant === "positive") rules += ' b_____S';
+        else if (props.variant === "negative") rules += ' b_____M';
+        else if (props.variant === "notice") rules += ' b_____R';
+        else if (props.variant === "positive") rules += ' b_____P';
         else if (props.variant === "neutral") rules += ' b_____J';
         else if (props.variant === "informative") rules += ' b_____G';
         else if (props.variant === "accent") rules += ' b_____G';
     } else if (props.fillStyle === "bold") {
-        if (props.variant === "silver") rules += ' b______m';
-        else if (props.variant === "cinnamon") rules += ' b______i';
-        else if (props.variant === "brown") rules += ' b______k';
-        else if (props.variant === "turquoise") rules += ' b______g';
-        else if (props.variant === "pink") rules += ' b______e';
-        else if (props.variant === "magenta") rules += ' b______c';
-        else if (props.variant === "fuchsia") rules += ' b______a';
-        else if (props.variant === "purple") rules += ' b_____8';
-        else if (props.variant === "indigo") rules += ' b_____6';
+        if (props.variant === "silver") rules += ' b______i';
+        else if (props.variant === "cinnamon") rules += ' b______e';
+        else if (props.variant === "brown") rules += ' b______g';
+        else if (props.variant === "turquoise") rules += ' b______c';
+        else if (props.variant === "pink") rules += ' b______a';
+        else if (props.variant === "magenta") rules += ' b_____8';
+        else if (props.variant === "fuchsia") rules += ' b_____6';
+        else if (props.variant === "purple") rules += ' b_____4';
+        else if (props.variant === "indigo") rules += ' b_____2';
         else if (props.variant === "blue") rules += ' b_____E';
-        else if (props.variant === "cyan") rules += ' b_____4';
-        else if (props.variant === "seafoam") rules += ' b_____2';
-        else if (props.variant === "green") rules += ' b_____P';
-        else if (props.variant === "celery") rules += ' b_____0';
-        else if (props.variant === "charteuse") rules += ' b_____Y';
-        else if (props.variant === "yellow") rules += ' b_____W';
-        else if (props.variant === "orange") rules += ' b_____T';
+        else if (props.variant === "cyan") rules += ' b_____0';
+        else if (props.variant === "seafoam") rules += ' b_____Y';
+        else if (props.variant === "green") rules += ' b_____N';
+        else if (props.variant === "celery") rules += ' b_____W';
+        else if (props.variant === "charteuse") rules += ' b_____U';
+        else if (props.variant === "yellow") rules += ' b_____S';
+        else if (props.variant === "orange") rules += ' b_____Q';
         else if (props.variant === "red") rules += ' b_____K';
         else if (props.variant === "gray") rules += ' b_____H';
         else if (props.variant === "negative") {
@@ -153,12 +153,12 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
             else if (props.isFocusVisible) rules += ' b_____L';
             else if (props.isHovered) rules += ' b_____L';
             else rules += ' b_____K';
-        } else if (props.variant === "notice") rules += ' b_____T';
+        } else if (props.variant === "notice") rules += ' b_____Q';
         else if (props.variant === "positive") {
-            if (props.isPressed) rules += ' b_____Q';
-            else if (props.isFocusVisible) rules += ' b_____Q';
-            else if (props.isHovered) rules += ' b_____Q';
-            else rules += ' b_____P';
+            if (props.isPressed) rules += ' b_____O';
+            else if (props.isFocusVisible) rules += ' b_____O';
+            else if (props.isHovered) rules += ' b_____O';
+            else rules += ' b_____N';
         } else if (props.variant === "neutral") {
             if (props.isPressed) rules += ' b_____I';
             else if (props.isFocusVisible) rules += ' b_____I';

package/dist/Badge.css

@@ -105,7 +105,7 @@
     background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #444);
   }
 
-  .b_____Q {
+  .b_____O {
     background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #047c4b);
   }
 
@@ -121,31 +121,31 @@
     background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .b_____T {
+  .b_____Q {
     background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____W {
+  .b_____S {
     background-color: var(--lightningcss-light, #f5c700) var(--lightningcss-dark, #da9f00);
   }
 
-  .b_____Y {
+  .b_____U {
     background-color: var(--lightningcss-light, #a3c400) var(--lightningcss-dark, #88a400);
   }
 
-  .b_____0 {
+  .b_____W {
     background-color: var(--lightningcss-light, #5db41f) var(--lightningcss-dark, #4e9a17);
   }
 
-  .b_____P {
+  .b_____N {
     background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .b_____2 {
+  .b_____Y {
     background-color: var(--lightningcss-light, #07816d) var(--lightningcss-dark, #088670);
   }
 
-  .b_____4 {
+  .b_____0 {
     background-color: var(--lightningcss-light, #0b78b3) var(--lightningcss-dark, #0d7dba);
   }
 
@@ -153,39 +153,39 @@
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .b_____6 {
+  .b_____2 {
     background-color: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #745bfc);
   }
 
-  .b_____8 {
+  .b_____4 {
     background-color: var(--lightningcss-light, #9a47e2) var(--lightningcss-dark, #9d4ee4);
   }
 
-  .b______a {
+  .b_____6 {
     background-color: var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #ba3cce);
   }
 
-  .b______c {
+  .b_____8 {
     background-color: var(--lightningcss-light, #d92361) var(--lightningcss-dark, #e02665);
   }
 
-  .b______e {
+  .b______a {
     background-color: var(--lightningcss-light, #ce2a92) var(--lightningcss-dark, #d52d97);
   }
 
-  .b______g {
+  .b______c {
     background-color: var(--lightningcss-light, #087e89) var(--lightningcss-dark, #09838e);
   }
 
-  .b______k {
+  .b______g {
     background-color: var(--lightningcss-light, #8b6d42) var(--lightningcss-dark, #8f7245);
   }
 
-  .b______i {
+  .b______e {
     background-color: var(--lightningcss-light, #aa5e38) var(--lightningcss-dark, #b0623b);
   }
 
-  .b______m {
+  .b______i {
     background-color: var(--lightningcss-light, #727272) var(--lightningcss-dark, #767676);
   }
 
@@ -193,35 +193,35 @@
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #393939);
   }
 
-  .b_____N {
+  .b_____M {
     background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #571107);
   }
 
-  .b_____V {
+  .b_____R {
     background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #501b00);
   }
 
-  .b_____X {
+  .b_____T {
     background-color: var(--lightningcss-light, #fff197) var(--lightningcss-dark, #3d2700);
   }
 
-  .b_____Z {
+  .b_____V {
     background-color: var(--lightningcss-light, #eaf6ad) var(--lightningcss-dark, #272f00);
   }
 
-  .b_____1 {
+  .b_____X {
     background-color: var(--lightningcss-light, #c5ff9c) var(--lightningcss-dark, #153301);
   }
 
-  .b_____S {
+  .b_____P {
     background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #003326);
   }
 
-  .b_____3 {
+  .b_____Z {
     background-color: var(--lightningcss-light, #d3f6ea) var(--lightningcss-dark, #00322c);
   }
 
-  .b_____5 {
+  .b_____1 {
     background-color: var(--lightningcss-light, #d9f4fd) var(--lightningcss-dark, #003041);
   }
 
@@ -229,43 +229,43 @@
     background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0c2175);
   }
 
-  .b_____7 {
+  .b_____3 {
     background-color: var(--lightningcss-light, #ebeeff) var(--lightningcss-dark, #2f008c);
   }
 
-  .b_____9 {
+  .b_____5 {
     background-color: var(--lightningcss-light, #f4ebfc) var(--lightningcss-dark, #40007a);
   }
 
-  .b______b {
+  .b_____7 {
     background-color: var(--lightningcss-light, #fde9ff) var(--lightningcss-dark, #4f005f);
   }
 
-  .b______d {
+  .b_____9 {
     background-color: var(--lightningcss-light, #ffe8f0) var(--lightningcss-dark, #5d0022);
   }
 
-  .b______f {
+  .b______b {
     background-color: var(--lightningcss-light, #ffe8f7) var(--lightningcss-dark, #5a0039);
   }
 
-  .b______h {
+  .b______d {
     background-color: var(--lightningcss-light, #d1f5f5) var(--lightningcss-dark, #003136);
   }
 
-  .b______l {
+  .b______h {
     background-color: var(--lightningcss-light, #f7eee1) var(--lightningcss-dark, #3a280e);
   }
 
-  .b______j {
+  .b______f {
     background-color: var(--lightningcss-light, #f9ece5) var(--lightningcss-dark, #4f1c07);
   }
 
-  .b______n {
+  .b______j {
     background-color: var(--lightningcss-light, #efefef) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .b______o {
+  .b______k {
     background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 

package/dist/Badge.mjs

@@ -90,51 +90,51 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
     rules += ' -oelgqu_A--177861o';
     rules += ' jbH';
     rules += ' jG';
-    if (props.fillStyle === "outline") rules += ' b______o';
+    if (props.fillStyle === "outline") rules += ' b______k';
     else if (props.fillStyle === "subtle") {
-        if (props.variant === "silver") rules += ' b______n';
-        else if (props.variant === "cinnamon") rules += ' b______j';
-        else if (props.variant === "brown") rules += ' b______l';
-        else if (props.variant === "turquoise") rules += ' b______h';
-        else if (props.variant === "pink") rules += ' b______f';
-        else if (props.variant === "magenta") rules += ' b______d';
-        else if (props.variant === "fuchsia") rules += ' b______b';
-        else if (props.variant === "purple") rules += ' b_____9';
-        else if (props.variant === "indigo") rules += ' b_____7';
+        if (props.variant === "silver") rules += ' b______j';
+        else if (props.variant === "cinnamon") rules += ' b______f';
+        else if (props.variant === "brown") rules += ' b______h';
+        else if (props.variant === "turquoise") rules += ' b______d';
+        else if (props.variant === "pink") rules += ' b______b';
+        else if (props.variant === "magenta") rules += ' b_____9';
+        else if (props.variant === "fuchsia") rules += ' b_____7';
+        else if (props.variant === "purple") rules += ' b_____5';
+        else if (props.variant === "indigo") rules += ' b_____3';
         else if (props.variant === "blue") rules += ' b_____G';
-        else if (props.variant === "cyan") rules += ' b_____5';
-        else if (props.variant === "seafoam") rules += ' b_____3';
-        else if (props.variant === "green") rules += ' b_____S';
-        else if (props.variant === "celery") rules += ' b_____1';
-        else if (props.variant === "charteuse") rules += ' b_____Z';
-        else if (props.variant === "yellow") rules += ' b_____X';
-        else if (props.variant === "orange") rules += ' b_____V';
-        else if (props.variant === "red") rules += ' b_____N';
+        else if (props.variant === "cyan") rules += ' b_____1';
+        else if (props.variant === "seafoam") rules += ' b_____Z';
+        else if (props.variant === "green") rules += ' b_____P';
+        else if (props.variant === "celery") rules += ' b_____X';
+        else if (props.variant === "charteuse") rules += ' b_____V';
+        else if (props.variant === "yellow") rules += ' b_____T';
+        else if (props.variant === "orange") rules += ' b_____R';
+        else if (props.variant === "red") rules += ' b_____M';
         else if (props.variant === "gray") rules += ' b_____J';
-        else if (props.variant === "negative") rules += ' b_____N';
-        else if (props.variant === "notice") rules += ' b_____V';
-        else if (props.variant === "positive") rules += ' b_____S';
+        else if (props.variant === "negative") rules += ' b_____M';
+        else if (props.variant === "notice") rules += ' b_____R';
+        else if (props.variant === "positive") rules += ' b_____P';
         else if (props.variant === "neutral") rules += ' b_____J';
         else if (props.variant === "informative") rules += ' b_____G';
         else if (props.variant === "accent") rules += ' b_____G';
     } else if (props.fillStyle === "bold") {
-        if (props.variant === "silver") rules += ' b______m';
-        else if (props.variant === "cinnamon") rules += ' b______i';
-        else if (props.variant === "brown") rules += ' b______k';
-        else if (props.variant === "turquoise") rules += ' b______g';
-        else if (props.variant === "pink") rules += ' b______e';
-        else if (props.variant === "magenta") rules += ' b______c';
-        else if (props.variant === "fuchsia") rules += ' b______a';
-        else if (props.variant === "purple") rules += ' b_____8';
-        else if (props.variant === "indigo") rules += ' b_____6';
+        if (props.variant === "silver") rules += ' b______i';
+        else if (props.variant === "cinnamon") rules += ' b______e';
+        else if (props.variant === "brown") rules += ' b______g';
+        else if (props.variant === "turquoise") rules += ' b______c';
+        else if (props.variant === "pink") rules += ' b______a';
+        else if (props.variant === "magenta") rules += ' b_____8';
+        else if (props.variant === "fuchsia") rules += ' b_____6';
+        else if (props.variant === "purple") rules += ' b_____4';
+        else if (props.variant === "indigo") rules += ' b_____2';
         else if (props.variant === "blue") rules += ' b_____E';
-        else if (props.variant === "cyan") rules += ' b_____4';
-        else if (props.variant === "seafoam") rules += ' b_____2';
-        else if (props.variant === "green") rules += ' b_____P';
-        else if (props.variant === "celery") rules += ' b_____0';
-        else if (props.variant === "charteuse") rules += ' b_____Y';
-        else if (props.variant === "yellow") rules += ' b_____W';
-        else if (props.variant === "orange") rules += ' b_____T';
+        else if (props.variant === "cyan") rules += ' b_____0';
+        else if (props.variant === "seafoam") rules += ' b_____Y';
+        else if (props.variant === "green") rules += ' b_____N';
+        else if (props.variant === "celery") rules += ' b_____W';
+        else if (props.variant === "charteuse") rules += ' b_____U';
+        else if (props.variant === "yellow") rules += ' b_____S';
+        else if (props.variant === "orange") rules += ' b_____Q';
         else if (props.variant === "red") rules += ' b_____K';
         else if (props.variant === "gray") rules += ' b_____H';
         else if (props.variant === "negative") {
@@ -142,12 +142,12 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
             else if (props.isFocusVisible) rules += ' b_____L';
             else if (props.isHovered) rules += ' b_____L';
             else rules += ' b_____K';
-        } else if (props.variant === "notice") rules += ' b_____T';
+        } else if (props.variant === "notice") rules += ' b_____Q';
         else if (props.variant === "positive") {
-            if (props.isPressed) rules += ' b_____Q';
-            else if (props.isFocusVisible) rules += ' b_____Q';
-            else if (props.isHovered) rules += ' b_____Q';
-            else rules += ' b_____P';
+            if (props.isPressed) rules += ' b_____O';
+            else if (props.isFocusVisible) rules += ' b_____O';
+            else if (props.isHovered) rules += ' b_____O';
+            else rules += ' b_____N';
         } else if (props.variant === "neutral") {
             if (props.isPressed) rules += ' b_____I';
             else if (props.isFocusVisible) rules += ' b_____I';

package/dist/Card.cjs

@@ -93,7 +93,7 @@ let $230078a1c4ce81d8$var$card = function anonymous(props, overrides) {
     else rules += ' _yd';
     rules += ' -_1de2x0q_b-a_____w';
     if (props.variant === "secondary") rules += ' -_1de2x0q_b-e';
-    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______o';
+    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______k';
     if (props.variant === "quiet") rules += ' ba';
     else if (props.variant === "tertiary") rules += ' ba';
     else rules += ' b-1de2x0q';

package/dist/Card.css

@@ -3,7 +3,7 @@
     flex-direction: column;
   }
 
-  .-_1de2x0q_b-______o {
+  .-_1de2x0q_b-______k {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 

package/dist/Card.mjs

@@ -80,7 +80,7 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
     else rules += ' _yd';
     rules += ' -_1de2x0q_b-a_____w';
     if (props.variant === "secondary") rules += ' -_1de2x0q_b-e';
-    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______o';
+    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______k';
     if (props.variant === "quiet") rules += ' ba';
     else if (props.variant === "tertiary") rules += ' ba';
     else rules += ' b-1de2x0q';

package/dist/InlineAlert.cjs

@@ -108,19 +108,19 @@ const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
             else if (props.isFocusVisible) rules += ' b_____L';
             else if (props.isHovered) rules += ' b_____L';
             else rules += ' b_____K';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____N';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____M';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' b_____T';
-        else if (props.fillStyle === "subtleFill") rules += ' b_____V';
+        if (props.fillStyle === "boldFill") rules += ' b_____Q';
+        else if (props.fillStyle === "subtleFill") rules += ' b_____R';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "positive") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____Q';
-            else if (props.isFocusVisible) rules += ' b_____Q';
-            else if (props.isHovered) rules += ' b_____Q';
-            else rules += ' b_____P';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____S';
+            if (props.isPressed) rules += ' b_____O';
+            else if (props.isFocusVisible) rules += ' b_____O';
+            else if (props.isHovered) rules += ' b_____O';
+            else rules += ' b_____N';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____P';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "informative") {
         if (props.fillStyle === "boldFill") {

package/dist/InlineAlert.css

@@ -123,27 +123,27 @@
     background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
-  .b_____S {
+  .b_____P {
     background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #003326);
   }
 
-  .b_____P {
+  .b_____N {
     background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .b_____Q {
+  .b_____O {
     background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #047c4b);
   }
 
-  .b_____V {
+  .b_____R {
     background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #501b00);
   }
 
-  .b_____T {
+  .b_____Q {
     background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____N {
+  .b_____M {
     background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #571107);
   }
 

package/dist/InlineAlert.mjs

@@ -101,19 +101,19 @@ const $fc2cf6b397804b9c$var$inlineAlert = function anonymous(props, overrides) {
             else if (props.isFocusVisible) rules += ' b_____L';
             else if (props.isHovered) rules += ' b_____L';
             else rules += ' b_____K';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____N';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____M';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' b_____T';
-        else if (props.fillStyle === "subtleFill") rules += ' b_____V';
+        if (props.fillStyle === "boldFill") rules += ' b_____Q';
+        else if (props.fillStyle === "subtleFill") rules += ' b_____R';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "positive") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____Q';
-            else if (props.isFocusVisible) rules += ' b_____Q';
-            else if (props.isHovered) rules += ' b_____Q';
-            else rules += ' b_____P';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____S';
+            if (props.isPressed) rules += ' b_____O';
+            else if (props.isFocusVisible) rules += ' b_____O';
+            else if (props.isHovered) rules += ' b_____O';
+            else rules += ' b_____N';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____P';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "informative") {
         if (props.fillStyle === "boldFill") {

package/dist/Meter.cjs

@@ -165,10 +165,10 @@ const $f53cdf036c04454a$var$fillStyles = function anonymous(props) {
     rules += ' ba_____x';
     if (props.staticColor === "black") rules += ' b_____s';
     else if (props.staticColor === "white") rules += ' b_____f';
-    else if (props.variant === "negative") rules += ' b_____M';
-    else if (props.variant === "notice") rules += ' b_____U';
-    else if (props.variant === "positive") rules += ' b_____R';
-    else rules += ' b_____O';
+    else if (props.variant === "negative") rules += ' b-awl6xt';
+    else if (props.variant === "notice") rules += ' b-1c1g5qb';
+    else if (props.variant === "positive") rules += ' b-32o7sp';
+    else rules += ' b-1n5lxsq';
     return rules;
 };
 function $f53cdf036c04454a$var$Meter(props, ref) {

package/dist/Meter.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** \n   * The static color style to apply. Useful when the button appears over a color background. \n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'informative-visual',\n    variant: {\n      positive: 'positive-visual',\n      notice: 'notice-visual',\n      negative: 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}

package/dist/Meter.css

@@ -278,19 +278,19 @@
     border-end-end-radius: 9999px;
   }
 
-  .b_____O {
+  .b-1n5lxsq {
     background-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #5681ff);
   }
 
-  .b_____R {
+  .b-32o7sp {
     background-color: var(--lightningcss-light, #079355) var(--lightningcss-dark, #099d59);
   }
 
-  .b_____U {
+  .b-1c1g5qb {
     background-color: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____M {
+  .b-awl6xt {
     background-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }