@dialpad/dialtone-css 8.80.0-next.6 → 8.80.0-next.8

package/lib/dist/dialtone.css

@@ -1234,6 +1234,9 @@
   .d-box--pbe-800 {
     --box-pbe: var(--dt-spacing-800);
   }
+  .d-box--surface-overlay {
+    --box-surface: var(--dt-color-surface-overlay);
+  }
   .d-box--surface-primary {
     --box-surface: var(--dt-color-surface-primary);
   }
@@ -1621,20 +1624,17 @@
   .d-box--br-circle {
     --box-br: var(--dt-size-radius-circle);
   }
-  .d-box--shadow-small {
-    --box-shadow: var(--dt-shadow-small);
-  }
-  .d-box--shadow-medium {
-    --box-shadow: var(--dt-shadow-medium);
+  .d-box--shadow-raised {
+    --box-shadow: var(--dt-shadow-raised);
   }
-  .d-box--shadow-large {
-    --box-shadow: var(--dt-shadow-large);
+  .d-box--shadow-overlay {
+    --box-shadow: var(--dt-shadow-overlay);
   }
-  .d-box--shadow-extra-large {
-    --box-shadow: var(--dt-shadow-extra-large);
+  .d-box--shadow-modal {
+    --box-shadow: var(--dt-shadow-modal);
   }
-  .d-box--shadow-card {
-    --box-shadow: var(--dt-shadow-card);
+  .d-box--is-0 {
+    inline-size: 0;
   }
   .d-box--is-1px {
     inline-size: var(--dt-layout-1px);
@@ -1660,54 +1660,102 @@
   .d-box--is-75 {
     inline-size: var(--dt-layout-75);
   }
-  .d-box--is-0 {
-    inline-size: var(--dt-layout-0);
-  }
   .d-box--is-100 {
     inline-size: var(--dt-layout-100);
   }
+  .d-box--is-125 {
+    inline-size: var(--dt-layout-125);
+  }
+  .d-box--is-150 {
+    inline-size: var(--dt-layout-150);
+  }
+  .d-box--is-175 {
+    inline-size: var(--dt-layout-175);
+  }
   .d-box--is-200 {
     inline-size: var(--dt-layout-200);
   }
+  .d-box--is-250 {
+    inline-size: var(--dt-layout-250);
+  }
   .d-box--is-300 {
     inline-size: var(--dt-layout-300);
   }
+  .d-box--is-350 {
+    inline-size: var(--dt-layout-350);
+  }
   .d-box--is-400 {
     inline-size: var(--dt-layout-400);
   }
+  .d-box--is-450 {
+    inline-size: var(--dt-layout-450);
+  }
   .d-box--is-500 {
     inline-size: var(--dt-layout-500);
   }
+  .d-box--is-550 {
+    inline-size: var(--dt-layout-550);
+  }
   .d-box--is-600 {
     inline-size: var(--dt-layout-600);
   }
+  .d-box--is-650 {
+    inline-size: var(--dt-layout-650);
+  }
   .d-box--is-700 {
     inline-size: var(--dt-layout-700);
   }
+  .d-box--is-750 {
+    inline-size: var(--dt-layout-750);
+  }
   .d-box--is-800 {
     inline-size: var(--dt-layout-800);
   }
+  .d-box--is-850 {
+    inline-size: var(--dt-layout-850);
+  }
   .d-box--is-900 {
     inline-size: var(--dt-layout-900);
   }
+  .d-box--is-950 {
+    inline-size: var(--dt-layout-950);
+  }
   .d-box--is-1000 {
     inline-size: var(--dt-layout-1000);
   }
+  .d-box--is-1050 {
+    inline-size: var(--dt-layout-1050);
+  }
   .d-box--is-1100 {
     inline-size: var(--dt-layout-1100);
   }
+  .d-box--is-1150 {
+    inline-size: var(--dt-layout-1150);
+  }
   .d-box--is-1200 {
     inline-size: var(--dt-layout-1200);
   }
+  .d-box--is-1250 {
+    inline-size: var(--dt-layout-1250);
+  }
   .d-box--is-1300 {
     inline-size: var(--dt-layout-1300);
   }
+  .d-box--is-1350 {
+    inline-size: var(--dt-layout-1350);
+  }
   .d-box--is-1400 {
     inline-size: var(--dt-layout-1400);
   }
+  .d-box--is-1450 {
+    inline-size: var(--dt-layout-1450);
+  }
   .d-box--is-1500 {
     inline-size: var(--dt-layout-1500);
   }
+  .d-box--is-1550 {
+    inline-size: var(--dt-layout-1550);
+  }
   .d-box--is-1600 {
     inline-size: var(--dt-layout-1600);
   }
@@ -1756,6 +1804,9 @@
   .d-box--is-100p {
     inline-size: var(--dt-layout-100-percent);
   }
+  .d-box--bls-0 {
+    block-size: 0;
+  }
   .d-box--bls-1px {
     block-size: var(--dt-layout-1px);
   }
@@ -1780,54 +1831,102 @@
   .d-box--bls-75 {
     block-size: var(--dt-layout-75);
   }
-  .d-box--bls-0 {
-    block-size: var(--dt-layout-0);
-  }
   .d-box--bls-100 {
     block-size: var(--dt-layout-100);
   }
+  .d-box--bls-125 {
+    block-size: var(--dt-layout-125);
+  }
+  .d-box--bls-150 {
+    block-size: var(--dt-layout-150);
+  }
+  .d-box--bls-175 {
+    block-size: var(--dt-layout-175);
+  }
   .d-box--bls-200 {
     block-size: var(--dt-layout-200);
   }
+  .d-box--bls-250 {
+    block-size: var(--dt-layout-250);
+  }
   .d-box--bls-300 {
     block-size: var(--dt-layout-300);
   }
+  .d-box--bls-350 {
+    block-size: var(--dt-layout-350);
+  }
   .d-box--bls-400 {
     block-size: var(--dt-layout-400);
   }
+  .d-box--bls-450 {
+    block-size: var(--dt-layout-450);
+  }
   .d-box--bls-500 {
     block-size: var(--dt-layout-500);
   }
+  .d-box--bls-550 {
+    block-size: var(--dt-layout-550);
+  }
   .d-box--bls-600 {
     block-size: var(--dt-layout-600);
   }
+  .d-box--bls-650 {
+    block-size: var(--dt-layout-650);
+  }
   .d-box--bls-700 {
     block-size: var(--dt-layout-700);
   }
+  .d-box--bls-750 {
+    block-size: var(--dt-layout-750);
+  }
   .d-box--bls-800 {
     block-size: var(--dt-layout-800);
   }
+  .d-box--bls-850 {
+    block-size: var(--dt-layout-850);
+  }
   .d-box--bls-900 {
     block-size: var(--dt-layout-900);
   }
+  .d-box--bls-950 {
+    block-size: var(--dt-layout-950);
+  }
   .d-box--bls-1000 {
     block-size: var(--dt-layout-1000);
   }
+  .d-box--bls-1050 {
+    block-size: var(--dt-layout-1050);
+  }
   .d-box--bls-1100 {
     block-size: var(--dt-layout-1100);
   }
+  .d-box--bls-1150 {
+    block-size: var(--dt-layout-1150);
+  }
   .d-box--bls-1200 {
     block-size: var(--dt-layout-1200);
   }
+  .d-box--bls-1250 {
+    block-size: var(--dt-layout-1250);
+  }
   .d-box--bls-1300 {
     block-size: var(--dt-layout-1300);
   }
+  .d-box--bls-1350 {
+    block-size: var(--dt-layout-1350);
+  }
   .d-box--bls-1400 {
     block-size: var(--dt-layout-1400);
   }
+  .d-box--bls-1450 {
+    block-size: var(--dt-layout-1450);
+  }
   .d-box--bls-1500 {
     block-size: var(--dt-layout-1500);
   }
+  .d-box--bls-1550 {
+    block-size: var(--dt-layout-1550);
+  }
   .d-box--bls-1600 {
     block-size: var(--dt-layout-1600);
   }
@@ -1876,6 +1975,9 @@
   .d-box--bls-100p {
     block-size: var(--dt-layout-100-percent);
   }
+  .d-box--min-is-0 {
+    min-inline-size: 0;
+  }
   .d-box--min-is-1px {
     min-inline-size: var(--dt-layout-1px);
   }
@@ -1900,54 +2002,102 @@
   .d-box--min-is-75 {
     min-inline-size: var(--dt-layout-75);
   }
-  .d-box--min-is-0 {
-    min-inline-size: var(--dt-layout-0);
-  }
   .d-box--min-is-100 {
     min-inline-size: var(--dt-layout-100);
   }
+  .d-box--min-is-125 {
+    min-inline-size: var(--dt-layout-125);
+  }
+  .d-box--min-is-150 {
+    min-inline-size: var(--dt-layout-150);
+  }
+  .d-box--min-is-175 {
+    min-inline-size: var(--dt-layout-175);
+  }
   .d-box--min-is-200 {
     min-inline-size: var(--dt-layout-200);
   }
+  .d-box--min-is-250 {
+    min-inline-size: var(--dt-layout-250);
+  }
   .d-box--min-is-300 {
     min-inline-size: var(--dt-layout-300);
   }
+  .d-box--min-is-350 {
+    min-inline-size: var(--dt-layout-350);
+  }
   .d-box--min-is-400 {
     min-inline-size: var(--dt-layout-400);
   }
+  .d-box--min-is-450 {
+    min-inline-size: var(--dt-layout-450);
+  }
   .d-box--min-is-500 {
     min-inline-size: var(--dt-layout-500);
   }
+  .d-box--min-is-550 {
+    min-inline-size: var(--dt-layout-550);
+  }
   .d-box--min-is-600 {
     min-inline-size: var(--dt-layout-600);
   }
+  .d-box--min-is-650 {
+    min-inline-size: var(--dt-layout-650);
+  }
   .d-box--min-is-700 {
     min-inline-size: var(--dt-layout-700);
   }
+  .d-box--min-is-750 {
+    min-inline-size: var(--dt-layout-750);
+  }
   .d-box--min-is-800 {
     min-inline-size: var(--dt-layout-800);
   }
+  .d-box--min-is-850 {
+    min-inline-size: var(--dt-layout-850);
+  }
   .d-box--min-is-900 {
     min-inline-size: var(--dt-layout-900);
   }
+  .d-box--min-is-950 {
+    min-inline-size: var(--dt-layout-950);
+  }
   .d-box--min-is-1000 {
     min-inline-size: var(--dt-layout-1000);
   }
+  .d-box--min-is-1050 {
+    min-inline-size: var(--dt-layout-1050);
+  }
   .d-box--min-is-1100 {
     min-inline-size: var(--dt-layout-1100);
   }
+  .d-box--min-is-1150 {
+    min-inline-size: var(--dt-layout-1150);
+  }
   .d-box--min-is-1200 {
     min-inline-size: var(--dt-layout-1200);
   }
+  .d-box--min-is-1250 {
+    min-inline-size: var(--dt-layout-1250);
+  }
   .d-box--min-is-1300 {
     min-inline-size: var(--dt-layout-1300);
   }
+  .d-box--min-is-1350 {
+    min-inline-size: var(--dt-layout-1350);
+  }
   .d-box--min-is-1400 {
     min-inline-size: var(--dt-layout-1400);
   }
+  .d-box--min-is-1450 {
+    min-inline-size: var(--dt-layout-1450);
+  }
   .d-box--min-is-1500 {
     min-inline-size: var(--dt-layout-1500);
   }
+  .d-box--min-is-1550 {
+    min-inline-size: var(--dt-layout-1550);
+  }
   .d-box--min-is-1600 {
     min-inline-size: var(--dt-layout-1600);
   }
@@ -1996,6 +2146,9 @@
   .d-box--min-is-100p {
     min-inline-size: var(--dt-layout-100-percent);
   }
+  .d-box--max-is-0 {
+    max-inline-size: 0;
+  }
   .d-box--max-is-1px {
     max-inline-size: var(--dt-layout-1px);
   }
@@ -2020,54 +2173,102 @@
   .d-box--max-is-75 {
     max-inline-size: var(--dt-layout-75);
   }
-  .d-box--max-is-0 {
-    max-inline-size: var(--dt-layout-0);
-  }
   .d-box--max-is-100 {
     max-inline-size: var(--dt-layout-100);
   }
+  .d-box--max-is-125 {
+    max-inline-size: var(--dt-layout-125);
+  }
+  .d-box--max-is-150 {
+    max-inline-size: var(--dt-layout-150);
+  }
+  .d-box--max-is-175 {
+    max-inline-size: var(--dt-layout-175);
+  }
   .d-box--max-is-200 {
     max-inline-size: var(--dt-layout-200);
   }
+  .d-box--max-is-250 {
+    max-inline-size: var(--dt-layout-250);
+  }
   .d-box--max-is-300 {
     max-inline-size: var(--dt-layout-300);
   }
+  .d-box--max-is-350 {
+    max-inline-size: var(--dt-layout-350);
+  }
   .d-box--max-is-400 {
     max-inline-size: var(--dt-layout-400);
   }
+  .d-box--max-is-450 {
+    max-inline-size: var(--dt-layout-450);
+  }
   .d-box--max-is-500 {
     max-inline-size: var(--dt-layout-500);
   }
+  .d-box--max-is-550 {
+    max-inline-size: var(--dt-layout-550);
+  }
   .d-box--max-is-600 {
     max-inline-size: var(--dt-layout-600);
   }
+  .d-box--max-is-650 {
+    max-inline-size: var(--dt-layout-650);
+  }
   .d-box--max-is-700 {
     max-inline-size: var(--dt-layout-700);
   }
+  .d-box--max-is-750 {
+    max-inline-size: var(--dt-layout-750);
+  }
   .d-box--max-is-800 {
     max-inline-size: var(--dt-layout-800);
   }
+  .d-box--max-is-850 {
+    max-inline-size: var(--dt-layout-850);
+  }
   .d-box--max-is-900 {
     max-inline-size: var(--dt-layout-900);
   }
+  .d-box--max-is-950 {
+    max-inline-size: var(--dt-layout-950);
+  }
   .d-box--max-is-1000 {
     max-inline-size: var(--dt-layout-1000);
   }
+  .d-box--max-is-1050 {
+    max-inline-size: var(--dt-layout-1050);
+  }
   .d-box--max-is-1100 {
     max-inline-size: var(--dt-layout-1100);
   }
+  .d-box--max-is-1150 {
+    max-inline-size: var(--dt-layout-1150);
+  }
   .d-box--max-is-1200 {
     max-inline-size: var(--dt-layout-1200);
   }
+  .d-box--max-is-1250 {
+    max-inline-size: var(--dt-layout-1250);
+  }
   .d-box--max-is-1300 {
     max-inline-size: var(--dt-layout-1300);
   }
+  .d-box--max-is-1350 {
+    max-inline-size: var(--dt-layout-1350);
+  }
   .d-box--max-is-1400 {
     max-inline-size: var(--dt-layout-1400);
   }
+  .d-box--max-is-1450 {
+    max-inline-size: var(--dt-layout-1450);
+  }
   .d-box--max-is-1500 {
     max-inline-size: var(--dt-layout-1500);
   }
+  .d-box--max-is-1550 {
+    max-inline-size: var(--dt-layout-1550);
+  }
   .d-box--max-is-1600 {
     max-inline-size: var(--dt-layout-1600);
   }
@@ -2116,6 +2317,9 @@
   .d-box--max-is-100p {
     max-inline-size: var(--dt-layout-100-percent);
   }
+  .d-box--min-bls-0 {
+    min-block-size: 0;
+  }
   .d-box--min-bls-1px {
     min-block-size: var(--dt-layout-1px);
   }
@@ -2140,54 +2344,102 @@
   .d-box--min-bls-75 {
     min-block-size: var(--dt-layout-75);
   }
-  .d-box--min-bls-0 {
-    min-block-size: var(--dt-layout-0);
-  }
   .d-box--min-bls-100 {
     min-block-size: var(--dt-layout-100);
   }
+  .d-box--min-bls-125 {
+    min-block-size: var(--dt-layout-125);
+  }
+  .d-box--min-bls-150 {
+    min-block-size: var(--dt-layout-150);
+  }
+  .d-box--min-bls-175 {
+    min-block-size: var(--dt-layout-175);
+  }
   .d-box--min-bls-200 {
     min-block-size: var(--dt-layout-200);
   }
+  .d-box--min-bls-250 {
+    min-block-size: var(--dt-layout-250);
+  }
   .d-box--min-bls-300 {
     min-block-size: var(--dt-layout-300);
   }
+  .d-box--min-bls-350 {
+    min-block-size: var(--dt-layout-350);
+  }
   .d-box--min-bls-400 {
     min-block-size: var(--dt-layout-400);
   }
+  .d-box--min-bls-450 {
+    min-block-size: var(--dt-layout-450);
+  }
   .d-box--min-bls-500 {
     min-block-size: var(--dt-layout-500);
   }
+  .d-box--min-bls-550 {
+    min-block-size: var(--dt-layout-550);
+  }
   .d-box--min-bls-600 {
     min-block-size: var(--dt-layout-600);
   }
+  .d-box--min-bls-650 {
+    min-block-size: var(--dt-layout-650);
+  }
   .d-box--min-bls-700 {
     min-block-size: var(--dt-layout-700);
   }
+  .d-box--min-bls-750 {
+    min-block-size: var(--dt-layout-750);
+  }
   .d-box--min-bls-800 {
     min-block-size: var(--dt-layout-800);
   }
+  .d-box--min-bls-850 {
+    min-block-size: var(--dt-layout-850);
+  }
   .d-box--min-bls-900 {
     min-block-size: var(--dt-layout-900);
   }
+  .d-box--min-bls-950 {
+    min-block-size: var(--dt-layout-950);
+  }
   .d-box--min-bls-1000 {
     min-block-size: var(--dt-layout-1000);
   }
+  .d-box--min-bls-1050 {
+    min-block-size: var(--dt-layout-1050);
+  }
   .d-box--min-bls-1100 {
     min-block-size: var(--dt-layout-1100);
   }
+  .d-box--min-bls-1150 {
+    min-block-size: var(--dt-layout-1150);
+  }
   .d-box--min-bls-1200 {
     min-block-size: var(--dt-layout-1200);
   }
+  .d-box--min-bls-1250 {
+    min-block-size: var(--dt-layout-1250);
+  }
   .d-box--min-bls-1300 {
     min-block-size: var(--dt-layout-1300);
   }
+  .d-box--min-bls-1350 {
+    min-block-size: var(--dt-layout-1350);
+  }
   .d-box--min-bls-1400 {
     min-block-size: var(--dt-layout-1400);
   }
+  .d-box--min-bls-1450 {
+    min-block-size: var(--dt-layout-1450);
+  }
   .d-box--min-bls-1500 {
     min-block-size: var(--dt-layout-1500);
   }
+  .d-box--min-bls-1550 {
+    min-block-size: var(--dt-layout-1550);
+  }
   .d-box--min-bls-1600 {
     min-block-size: var(--dt-layout-1600);
   }
@@ -2236,6 +2488,9 @@
   .d-box--min-bls-100p {
     min-block-size: var(--dt-layout-100-percent);
   }
+  .d-box--max-bls-0 {
+    max-block-size: 0;
+  }
   .d-box--max-bls-1px {
     max-block-size: var(--dt-layout-1px);
   }
@@ -2260,54 +2515,102 @@
   .d-box--max-bls-75 {
     max-block-size: var(--dt-layout-75);
   }
-  .d-box--max-bls-0 {
-    max-block-size: var(--dt-layout-0);
-  }
   .d-box--max-bls-100 {
     max-block-size: var(--dt-layout-100);
   }
+  .d-box--max-bls-125 {
+    max-block-size: var(--dt-layout-125);
+  }
+  .d-box--max-bls-150 {
+    max-block-size: var(--dt-layout-150);
+  }
+  .d-box--max-bls-175 {
+    max-block-size: var(--dt-layout-175);
+  }
   .d-box--max-bls-200 {
     max-block-size: var(--dt-layout-200);
   }
+  .d-box--max-bls-250 {
+    max-block-size: var(--dt-layout-250);
+  }
   .d-box--max-bls-300 {
     max-block-size: var(--dt-layout-300);
   }
+  .d-box--max-bls-350 {
+    max-block-size: var(--dt-layout-350);
+  }
   .d-box--max-bls-400 {
     max-block-size: var(--dt-layout-400);
   }
+  .d-box--max-bls-450 {
+    max-block-size: var(--dt-layout-450);
+  }
   .d-box--max-bls-500 {
     max-block-size: var(--dt-layout-500);
   }
+  .d-box--max-bls-550 {
+    max-block-size: var(--dt-layout-550);
+  }
   .d-box--max-bls-600 {
     max-block-size: var(--dt-layout-600);
   }
+  .d-box--max-bls-650 {
+    max-block-size: var(--dt-layout-650);
+  }
   .d-box--max-bls-700 {
     max-block-size: var(--dt-layout-700);
   }
+  .d-box--max-bls-750 {
+    max-block-size: var(--dt-layout-750);
+  }
   .d-box--max-bls-800 {
     max-block-size: var(--dt-layout-800);
   }
+  .d-box--max-bls-850 {
+    max-block-size: var(--dt-layout-850);
+  }
   .d-box--max-bls-900 {
     max-block-size: var(--dt-layout-900);
   }
+  .d-box--max-bls-950 {
+    max-block-size: var(--dt-layout-950);
+  }
   .d-box--max-bls-1000 {
     max-block-size: var(--dt-layout-1000);
   }
+  .d-box--max-bls-1050 {
+    max-block-size: var(--dt-layout-1050);
+  }
   .d-box--max-bls-1100 {
     max-block-size: var(--dt-layout-1100);
   }
+  .d-box--max-bls-1150 {
+    max-block-size: var(--dt-layout-1150);
+  }
   .d-box--max-bls-1200 {
     max-block-size: var(--dt-layout-1200);
   }
+  .d-box--max-bls-1250 {
+    max-block-size: var(--dt-layout-1250);
+  }
   .d-box--max-bls-1300 {
     max-block-size: var(--dt-layout-1300);
   }
+  .d-box--max-bls-1350 {
+    max-block-size: var(--dt-layout-1350);
+  }
   .d-box--max-bls-1400 {
     max-block-size: var(--dt-layout-1400);
   }
+  .d-box--max-bls-1450 {
+    max-block-size: var(--dt-layout-1450);
+  }
   .d-box--max-bls-1500 {
     max-block-size: var(--dt-layout-1500);
   }
+  .d-box--max-bls-1550 {
+    max-block-size: var(--dt-layout-1550);
+  }
   .d-box--max-bls-1600 {
     max-block-size: var(--dt-layout-1600);
   }
@@ -3931,10 +4234,8 @@
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
-  .d-btn--disabled,
-  .d-btn--md--disabled,
-  .d-btn:disabled,
-  .d-btn--md:disabled {
+  .d-btn:where(.d-btn--disabled, :disabled),
+  .d-btn--md:where(.d-btn--disabled, :disabled) {
     --chroma-adjust-text: 0.08;
     --chroma-adjust-background: 0.08;
     --chroma-adjust-border: 0.08;
@@ -3948,18 +4249,18 @@
     transition: none;
     pointer-events: none;
   }
-  .d-btn--disabled.d-btn--primary,
-  .d-btn--md--disabled.d-btn--primary,
-  .d-btn:disabled.d-btn--primary,
-  .d-btn--md:disabled.d-btn--primary {
+  .d-btn:where(.d-btn--disabled, :disabled):where(.d-btn--primary),
+  .d-btn--md:where(.d-btn--disabled, :disabled):where(.d-btn--primary) {
     --opacity-adjust-text: 80%;
   }
-  .d-btn--disabled.d-btn--muted,
-  .d-btn--md--disabled.d-btn--muted,
-  .d-btn:disabled.d-btn--muted,
-  .d-btn--md:disabled.d-btn--muted {
+  .d-btn:where(.d-btn--disabled, :disabled):where(.d-btn--muted),
+  .d-btn--md:where(.d-btn--disabled, :disabled):where(.d-btn--muted) {
     --opacity-adjust-text: 50%;
-    --opacity-adjust-border: 50%;
+    --opacity-adjust-border: 60%;
+  }
+  .d-btn:where(.d-btn--disabled, :disabled):where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted),
+  .d-btn--md:where(.d-btn--disabled, :disabled):where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
+    --button-color-background: var(--dt-action-color-background-muted-active);
   }
   .d-btn--unstyled {
     /* stylelint-disable */
@@ -4002,6 +4303,7 @@
   }
   .d-btn__leading,
   .d-btn__trailing {
+    z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
     align-self: stretch;
@@ -4036,6 +4338,7 @@
     flex-direction: column;
   }
   .d-btn__icon {
+    z-index: var(--zi-base1);
     display: flex;
   }
   :where(.d-btn--disabled) .d-btn__icon,
@@ -4796,30 +5099,6 @@
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
-  .d-chip__close--disabled,
-  .d-chip__close:disabled {
-    --chroma-adjust-text: 0.08;
-    --chroma-adjust-background: 0.08;
-    --chroma-adjust-border: 0.08;
-    --opacity-adjust-text: 65%;
-    --opacity-adjust-background: 65%;
-    --opacity-adjust-border: 40%;
-    color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
-    background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
-    border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
-    cursor: not-allowed;
-    transition: none;
-    pointer-events: none;
-  }
-  .d-chip__close--disabled.d-btn--primary,
-  .d-chip__close:disabled.d-btn--primary {
-    --opacity-adjust-text: 80%;
-  }
-  .d-chip__close--disabled.d-btn--muted,
-  .d-chip__close:disabled.d-btn--muted {
-    --opacity-adjust-text: 50%;
-    --opacity-adjust-border: 50%;
-  }
   .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
@@ -4873,6 +5152,30 @@
   .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled) {
+    --chroma-adjust-text: 0.08;
+    --chroma-adjust-background: 0.08;
+    --chroma-adjust-border: 0.08;
+    --opacity-adjust-text: 65%;
+    --opacity-adjust-background: 65%;
+    --opacity-adjust-border: 40%;
+    color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
+    background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
+    border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
+    cursor: not-allowed;
+    transition: none;
+    pointer-events: none;
+  }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled):where(.d-btn--primary) {
+    --opacity-adjust-text: 80%;
+  }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled):where(.d-btn--muted) {
+    --opacity-adjust-text: 50%;
+    --opacity-adjust-border: 60%;
+  }
+  .d-chip__close:where(.d-chip__close--disabled, :disabled):where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
+    --button-color-background: var(--dt-action-color-background-muted-active);
+  }
   .d-chip__icon {
     --chip-icon-size: calc(var(--dt-layout-25) * 1.25);
     display: inline-flex;
@@ -5176,11 +5479,14 @@
     --presence-color-border-offline: var(--dt-presence-color-offline);
     --presence-color-background-active: var(--dt-presence-color-available);
     --presence-color-background-busy: var(--dt-presence-color-unavailable);
+    --presence-color-border-dnd: var(--dt-presence-color-unavailable);
     --presence-color-background-away: var(--dt-presence-color-busy);
     --presence-color-background-offline: var(--dt-color-surface-primary);
     --presence-border-radius: calc(var(--presence-size) * 0.208);
-    --presence-border-inner-width: calc(calc(var(--presence-size) - calc(var(--presence-size) * 0.556)) / 2);
+    --presence-border-inner-width: calc(calc(var(--presence-size) - calc(var(--presence-size) * 0.556)) / 3);
     --presence-size: var(--dt-spacing-150);
+    --presence-icon-size: var(--dt-layout-100-percent);
+    --presence-icon-color: var(--dt-color-foreground-primary-inverted);
     display: inline-block;
   }
   .d-recipe-leftbar-row--selected .d-presence {
@@ -5190,11 +5496,13 @@
     --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
   }
   .d-presence__inner {
+    display: grid;
     box-sizing: border-box;
-    inline-size: var(--presence-size);
-    block-size: var(--presence-size);
     border: none;
     border-radius: var(--presence-border-radius);
+    inline-size: var(--presence-size);
+    block-size: var(--presence-size);
+    place-items: center;
   }
   .d-presence__inner--active {
     background-color: var(--presence-color-background-active);
@@ -5210,6 +5518,18 @@
     border-style: solid;
     border-width: var(--presence-border-inner-width);
   }
+  .d-presence__inner--dnd {
+    --presence-icon-color: var(--presence-color-border-dnd);
+    border-color: var(--presence-color-border-dnd);
+    border-style: solid;
+    border-width: var(--presence-border-inner-width);
+  }
+  .d-presence__icon {
+    display: block;
+    color: var(--presence-icon-color);
+    block-size: var(--presence-icon-size);
+    inline-size: var(--presence-icon-size);
+  }
 }
 @layer dialtone.components {
   .d-icon {
@@ -6404,6 +6724,7 @@
     max-block-size: 80%;
     padding: var(--dt-spacing-0);
     border-radius: var(--dt-size-radius-0);
+    box-shadow: var(--dt-shadow-modal);
   }
   .d-image-viewer__full__image {
     max-inline-size: 100%;
@@ -6491,6 +6812,8 @@
   }
   .d-validation-message {
     --validation-color-text: var(--dt-color-foreground-tertiary);
+    --validation-size-icon: var(--dt-layout-25);
+    --validation-icon: initial;
     display: flex;
     gap: var(--dt-spacing-50);
     align-items: flex-start;
@@ -6502,44 +6825,46 @@
     font-family: inherit;
     line-height: var(--dt-font-line-height-300);
   }
-  .d-validation-message::before {
+  .d-validation-message:not(:has(.d-icon))::before {
     display: block;
     -webkit-margin-before: var(--dt-spacing-25);
             margin-block-start: var(--dt-spacing-25);
-    inline-size: var(--dt-layout-25);
-    min-inline-size: var(--dt-layout-25);
-    block-size: var(--dt-layout-25);
+    inline-size: var(--validation-size-icon);
+    min-inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
     background-color: var(--validation-color-text);
+    -webkit-mask: var(--validation-icon);
+            mask: var(--validation-icon);
     content: '';
   }
   .d-validation-message__container {
     display: flex;
     flex-direction: column;
   }
+  .d-validation-message__icon {
+    -webkit-margin-before: calc(var(--dt-spacing-25) / 2);
+            margin-block-start: calc(var(--dt-spacing-25) / 2);
+    color: var(--validation-color-text);
+    inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
+  }
   .d-validation-message--warning {
     --validation-color-text: var(--dt-color-foreground-warning);
-  }
-  .d-validation-message--warning::before {
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
-            mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
   }
   .d-validation-message--critical,
   .d-validation-message--error {
     --validation-color-text: var(--dt-color-foreground-critical);
-  }
-  .d-validation-message--critical::before,
-  .d-validation-message--error::before {
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-            mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
   }
   .d-validation-message--positive,
   .d-validation-message--success {
     --validation-color-text: var(--dt-color-foreground-positive);
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
   }
-  .d-validation-message--positive::before,
-  .d-validation-message--success::before {
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-            mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
+  .d-validation-message--info {
+    --validation-color-text: var(--dt-color-foreground-info);
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFptNS0yYS41LjUgMCAwIDEgLjUtLjVoLjAwNWEuNS41IDAgMCAxIDAgMUg2YS41LjUgMCAwIDEtLjUtLjVaTTYgNS41YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwVjZhLjUuNSAwIDAgMSAuNS0uNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPiA8L2c+IDxkZWZzPiA8Y2xpcFBhdGggaWQ9ImEiPiA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDEydjEySDB6Ii8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPC9zdmc+') no-repeat;
   }
 }
 .tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
@@ -6765,7 +7090,7 @@
     background: var(--dt-color-surface-primary);
     border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
     border-radius: var(--dt-size-radius-300);
-    box-shadow: var(--dt-shadow-card);
+    box-shadow: var(--dt-shadow-raised);
   }
   .d-card__header {
     display: flex;
@@ -6964,11 +7289,11 @@
   .d-modal {
     --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
     --modal-dialog-padding: var(--dt-spacing-400);
-    --modal-dialog-color-background: var(--dt-color-surface-primary);
+    --modal-dialog-color-background: var(--dt-color-surface-overlay);
     --modal-dialog-color-border: var(--dt-color-border-subtle);
     --modal-dialog-color-text: var(--dt-color-foreground-primary);
     --modal-header-color-text: var(--dt-color-foreground-primary);
-    --modal-dialog-shadow: var(--dt-shadow-large);
+    --modal-dialog-shadow: var(--dt-shadow-modal);
     -webkit-app-region: no-drag;
     position: fixed;
     inset: 0;
@@ -7004,7 +7329,7 @@
     background: transparent;
   }
   .d-modal--transparent {
-    --modal-backdrop-color-background: var(--d-bgc-transparent);
+    --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
     -webkit-app-region: no-drag;
   }
   .d-modal--transparent:is([aria-hidden='false'], [open]) {
@@ -7014,6 +7339,9 @@
     inline-size: 100%;
     min-block-size: 100%;
   }
+  .d-modal--transparent-backdrop {
+    --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
+  }
   .d-modal__dialog {
     position: relative;
     z-index: var(--zi-hide);
@@ -7252,6 +7580,9 @@
     display: flex;
     align-items: start;
   }
+  .d-toast {
+    --notice-color-background: var(--dt-color-surface-overlay);
+  }
   .d-notice__content {
     display: flex;
     flex: 1 auto;
@@ -7426,7 +7757,7 @@
   }
   .d-toast {
     --toast-color-shadow: var(--dt-color-border-subtle);
-    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-overlay);
     z-index: var(--zi-notification);
     display: block;
     max-inline-size: var(--dt-layout-700);
@@ -7479,7 +7810,7 @@
   }
   .d-toast-alternate {
     --toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 0.15);
-    --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-overlay);
     --toast-alternate-color-background: var(--dt-color-surface-primary);
     --toast-alternate-color-text: var(--dt-color-foreground-primary);
     --toast-alternate-color-icon: var(--dt-color-foreground-muted);
@@ -7651,11 +7982,11 @@
 }
 @layer dialtone.components {
   .d-popover__dialog {
-    --popover-color-background: var(--dt-color-surface-secondary);
+    --popover-color-background: var(--dt-color-surface-overlay);
     --popover-border-width: var(--dt-size-border-100);
     --popover-border-radius: var(--dt-size-radius-400);
     --popover-color-border: var(--dt-color-border-subtle);
-    --popover-shadow: var(--dt-shadow-card);
+    --popover-shadow: var(--dt-shadow-overlay);
     -webkit-app-region: no-drag;
     display: grid;
     grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
@@ -9061,7 +9392,7 @@
     flex-direction: column;
     inline-size: var(--dt-layout-550);
     block-size: 100%;
-    background-color: var(--dt-color-surface-primary);
+    background-color: var(--dt-color-surface-overlay);
     border-radius: var(--dt-size-radius-300);
   }
   .d-emoji-picker--header {
@@ -9072,8 +9403,8 @@
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: var(--dt-size-border-200);
-    background-color: var(--dt-color-surface-moderate) !important;
+    block-size: var(--dt-size-border-100);
+    background-color: var(--dt-color-border-subtle) !important;
     content: '';
   }
   .d-emoji-picker__alignment {
@@ -9089,7 +9420,6 @@
     justify-content: space-between;
     block-size: calc(var(--dt-layout-100) - var(--dt-spacing-75));
     padding: 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-secondary);
     -webkit-border-before: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
             border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   }
@@ -9101,7 +9431,7 @@
     gap: var(--dt-spacing-0);
   }
   .d-emoji-picker__tabset-list::after {
-    background-color: var(--dt-color-surface-moderate) !important;
+    background-color: var(--dt-color-neutral-transparent) !important;
   }
   .d-emoji-picker__tabset-list .d-tablist__item {
     --button-padding-y: var(--dt-spacing-75);
@@ -9125,8 +9455,8 @@
     margin: 0;
     padding: 0;
     background: none;
-    border: var(--dt-size-border-100) solid transparent;
-    border-radius: var(--dt-size-radius-350);
+    border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
+    border-radius: var(--dt-size-radius-circle);
     outline: none;
     cursor: pointer;
   }
@@ -9135,7 +9465,7 @@
   }
   .d-emoji-picker__skin-list button:active,
   .d-emoji-picker__skin-list button.selected {
-    border-color: var(--dt-color-border-bold);
+    border-color: var(--dt-color-border-moderate);
   }
   .d-emoji-picker__skin-selected button {
     display: inline-block;
@@ -9144,13 +9474,13 @@
     margin: 0;
     padding: calc(var(--dt-spacing-75) + var(--dt-spacing-1));
     background: var(--dt-color-surface-moderate-opaque);
-    border: none;
+    border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
     border-radius: var(--dt-size-radius-circle);
     outline: none;
     cursor: pointer;
   }
   .d-emoji-picker__skin-selected button:hover {
-    background: var(--dt-color-surface-bold);
+    border-color: var(--dt-color-border-subtle);
   }
   .d-emoji-picker__selector {
     min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
@@ -9168,7 +9498,7 @@
     inline-size: 100%;
     margin: 0;
     padding: var(--dt-spacing-200) var(--dt-spacing-200) 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-primary);
+    background: var(--dt-color-surface-overlay);
   }
   .d-emoji-picker__list {
     position: relative;
@@ -10524,6 +10854,7 @@
     --presence-color-background-active: var(--dt-shell-presence-color-available);
     --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
     --presence-color-background-away: var(--dt-shell-presence-color-busy);
+    --presence-color-border-dnd: var(--dt-shell-presence-color-unavailable);
   }
   .d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):hover,
   .d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):focus-within {
@@ -11083,7 +11414,7 @@
     line-height: var(--dt-font-line-height-600);
     border: none;
     border-radius: var(--dt-size-radius-pill);
-    box-shadow: var(--dt-shadow-medium);
+    box-shadow: var(--dt-shadow-overlay);
     cursor: pointer;
   }
   .d-recipe-leftbar-unread-pill-mentions {
@@ -11810,20 +12141,14 @@
       opacity: 0;
     }
   }
-  .d-bs-sm, .h\:d-bs-sm:hover, .f\:d-bs-sm:focus, .f\:d-bs-sm:focus-within, .fv\:d-bs-sm:focus-visible {
-    box-shadow: var(--dt-shadow-small) !important;
+  .d-bs-raised, .h\:d-bs-raised:hover, .f\:d-bs-raised:focus, .f\:d-bs-raised:focus-within, .fv\:d-bs-raised:focus-visible, .d-bs-sm, .h\:d-bs-sm:hover, .f\:d-bs-sm:focus, .f\:d-bs-sm:focus-within, .fv\:d-bs-sm:focus-visible, .d-bs-card, .h\:d-bs-card:hover, .f\:d-bs-card:focus, .f\:d-bs-card:focus-within, .fv\:d-bs-card:focus-visible {
+    box-shadow: var(--dt-shadow-raised) !important;
   }
-  .d-bs-md, .h\:d-bs-md:hover, .f\:d-bs-md:focus, .f\:d-bs-md:focus-within, .fv\:d-bs-md:focus-visible {
-    box-shadow: var(--dt-shadow-medium) !important;
+  .d-bs-overlay, .h\:d-bs-overlay:hover, .f\:d-bs-overlay:focus, .f\:d-bs-overlay:focus-within, .fv\:d-bs-overlay:focus-visible, .d-bs-md, .h\:d-bs-md:hover, .f\:d-bs-md:focus, .f\:d-bs-md:focus-within, .fv\:d-bs-md:focus-visible, .d-bs-lg, .h\:d-bs-lg:hover, .f\:d-bs-lg:focus, .f\:d-bs-lg:focus-within, .fv\:d-bs-lg:focus-visible {
+    box-shadow: var(--dt-shadow-overlay) !important;
   }
-  .d-bs-lg, .h\:d-bs-lg:hover, .f\:d-bs-lg:focus, .f\:d-bs-lg:focus-within, .fv\:d-bs-lg:focus-visible {
-    box-shadow: var(--dt-shadow-large) !important;
-  }
-  .d-bs-xl, .h\:d-bs-xl:hover, .f\:d-bs-xl:focus, .f\:d-bs-xl:focus-within, .fv\:d-bs-xl:focus-visible {
-    box-shadow: var(--dt-shadow-extra-large) !important;
-  }
-  .d-bs-card, .h\:d-bs-card:hover, .f\:d-bs-card:focus, .f\:d-bs-card:focus-within, .fv\:d-bs-card:focus-visible {
-    box-shadow: var(--dt-shadow-card) !important;
+  .d-bs-modal, .h\:d-bs-modal:hover, .f\:d-bs-modal:focus, .f\:d-bs-modal:focus-within, .fv\:d-bs-modal:focus-visible, .d-bs-xl, .h\:d-bs-xl:hover, .f\:d-bs-xl:focus, .f\:d-bs-xl:focus-within, .fv\:d-bs-xl:focus-visible {
+    box-shadow: var(--dt-shadow-modal) !important;
   }
   .d-bs-none, .h\:d-bs-none:hover, .f\:d-bs-none:focus, .f\:d-bs-none:focus-within, .fv\:d-bs-none:focus-visible {
     box-shadow: none !important;
@@ -16884,6 +17209,9 @@
   .d-bgc-indigo-1000, .h\:d-bgc-indigo-1000:hover, .f\:d-bgc-indigo-1000:focus, .f\:d-bgc-indigo-1000:focus-within, .fv\:d-bgc-indigo-1000:focus-visible{
     background-color: oklch(from var(--dt-color-indigo-1000) l c h / var(--bgo, alpha)) !important;
   }
+  .d-bgc-overlay, .h\:d-bgc-overlay:hover, .f\:d-bgc-overlay:focus, .f\:d-bgc-overlay:focus-within, .fv\:d-bgc-overlay:focus-visible{
+    background-color: oklch(from var(--dt-color-surface-overlay) l c h / var(--bgo, alpha)) !important;
+  }
   .d-bgc-primary, .h\:d-bgc-primary:hover, .f\:d-bgc-primary:focus, .f\:d-bgc-primary:focus-within, .fv\:d-bgc-primary:focus-visible{
     background-color: oklch(from var(--dt-color-surface-primary) l c h / var(--bgo, alpha)) !important;
   }