@vireo-ai/trellis-ui 0.1.41 → 0.1.42

package/packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css

@@ -1129,6 +1129,9 @@
   .ml-0 {
     margin-left: var(--spacing-0);
   }
+  .ml-1 {
+    margin-left: var(--spacing-1);
+  }
   .ml-2 {
     margin-left: var(--spacing-2);
   }
@@ -1350,6 +1353,9 @@
   .h-1\.5 {
     height: var(--spacing-1\.5);
   }
+  .h-4\.5 {
+    height: var(--spacing-4\.5);
+  }
   .h-5 {
     height: var(--spacing-5);
   }
@@ -1596,6 +1602,9 @@
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
+  .max-w-72 {
+    max-width: calc(var(--spacing) * 72);
+  }
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
@@ -1638,6 +1647,9 @@
   .min-w-0 {
     min-width: var(--spacing-0);
   }
+  .min-w-4\.5 {
+    min-width: var(--spacing-4\.5);
+  }
   .min-w-16 {
     min-width: calc(var(--spacing) * 16);
   }
@@ -1745,6 +1757,9 @@
   .appearance-none {
     appearance: none;
   }
+  .auto-cols-max {
+    grid-auto-columns: max-content;
+  }
   .grid-flow-col {
     grid-auto-flow: column;
   }
@@ -3845,9 +3860,15 @@
   .\[font-weight\:var\(--font-weight-metadata\)\] {
     font-weight: var(--font-weight-metadata);
   }
+  .\[font-weight\:var\(--font-weight-normal\)\] {
+    font-weight: var(--font-weight-normal);
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--ui-semantic-surface-ink-muted\)\] {
+    color: var(--ui-semantic-surface-ink-muted);
+  }
   .text-accent-1 {
     color: var(--color-accent-1);
   }
@@ -6946,6 +6967,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-0);
+}
+:where([data-ui-surface="0"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -6963,6 +6986,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-1);
+}
+:where([data-ui-surface="1"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -6980,6 +7005,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-2);
+}
+:where([data-ui-surface="2"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -6997,6 +7024,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-3);
+}
+:where([data-ui-surface="3"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7014,6 +7043,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-4);
+}
+:where([data-ui-surface="4"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7031,6 +7062,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-5);
+}
+:where([data-ui-surface="5"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7048,6 +7081,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-6);
+}
+:where([data-ui-surface="6"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7065,6 +7100,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-7);
+}
+:where([data-ui-surface="7"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7082,6 +7119,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-8);
+}
+:where([data-ui-surface="8"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7099,6 +7138,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-1);
+}
+:where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7116,6 +7157,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-2);
+}
+:where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7133,6 +7176,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-3);
+}
+:where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7150,6 +7195,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-4);
+}
+:where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7167,6 +7214,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-5);
+}
+:where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7184,6 +7233,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-6);
+}
+:where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7201,6 +7252,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-7);
+}
+:where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7218,6 +7271,8 @@
     --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
   }
   --ui-matched-elevation: var(--ui-local-elevation-8);
+}
+:where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
   background-color: var(--ui-surface-color);
   color: var(--ui-surface-ink);
 }
@@ -7271,6 +7326,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-1);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7290,6 +7347,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-2);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7309,6 +7368,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-3);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7328,6 +7389,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-4);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7347,6 +7410,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-5);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7366,6 +7431,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-6);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7385,6 +7452,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7404,6 +7473,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7423,6 +7494,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-2);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7442,6 +7515,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-3);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7461,6 +7536,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-4);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7480,6 +7557,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-5);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7499,6 +7578,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-6);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7518,6 +7599,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7537,6 +7620,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7556,6 +7641,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7575,6 +7662,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-3);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7594,6 +7683,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-4);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7613,6 +7704,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-5);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7632,6 +7725,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-6);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7651,6 +7746,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7670,6 +7767,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7689,6 +7788,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7708,6 +7809,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7727,6 +7830,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-4);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7746,6 +7851,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-5);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7765,6 +7872,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-6);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7784,6 +7893,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7803,6 +7914,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7822,6 +7935,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7841,6 +7956,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7860,6 +7977,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7879,6 +7998,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-5);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7898,6 +8019,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-6);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7917,6 +8040,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7936,6 +8061,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7955,6 +8082,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7974,6 +8103,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -7993,6 +8124,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8012,6 +8145,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8031,6 +8166,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-6);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8050,6 +8187,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8069,6 +8208,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8088,6 +8229,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8107,6 +8250,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8126,6 +8271,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8145,6 +8292,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8164,6 +8313,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8183,6 +8334,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-7);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8202,6 +8355,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8221,6 +8376,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8240,6 +8397,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8259,6 +8418,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8278,6 +8439,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8297,6 +8460,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8316,6 +8481,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8335,6 +8502,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8354,6 +8523,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8373,6 +8544,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8392,6 +8565,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8411,6 +8586,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8430,6 +8607,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8449,6 +8628,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8468,6 +8649,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8487,6 +8670,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8506,6 +8691,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8525,6 +8712,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8544,6 +8733,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8563,6 +8754,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8582,6 +8775,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8601,6 +8796,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -8620,6 +8817,8 @@
       --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
     }
     --ui-matched-elevation: var(--ui-local-elevation-8);
+  }
+  :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
     background-color: var(--ui-surface-color);
     color: var(--ui-surface-ink);
   }
@@ -9673,6 +9872,34 @@
     }
   }
 }
+@layer components {
+  [data-ui-tooltip-content][data-ui-semantic-surface] {
+    color: var(--ui-semantic-surface-ink);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix( in oklab, var(--ui-semantic-surface-ink), var(--ui-semantic-surface-ink-muted) var(--label-ink-emphasis) );
+    }
+  }
+  [data-ui-tooltip-content] [data-ui-keybinding-key] {
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+  }
+  [data-ui-tooltip-content] [data-ui-keybinding-key][data-pressed] {
+    color: var(--ui-semantic-surface-ink);
+    background-color: var(--color-interaction-pressed);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-strong);
+  }
+}
+@layer components {
+  [data-ui-keybinding-key] {
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: inset 0 0 0 var(--border-width-edge-control) color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent);
+    }
+  }
+  [data-ui-keybinding-key][data-pressed] {
+    background-color: var(--color-interaction-pressed);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) currentColor;
+  }
+}
 :root[data-ui-sortable-dragging], :root[data-ui-sortable-dragging] * {
   cursor: var(--ui-sortable-drag-cursor, default) !important;
 }
@@ -9683,7 +9910,7 @@
   }
 }
 @layer components {
-  :is([data-ui-action-recipe], [data-ui-toast-recipe]) {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface]) {
     --ui-intent-text: var(--ui-surface-ink);
     --ui-intent-text-hover: var(--ui-surface-ink);
     --ui-intent-soft: var(--color-intent-neutral-soft);
@@ -9701,7 +9928,7 @@
     --ui-intent-focus: var(--color-intent-neutral-focus);
     --ui-intent-focus-width: var(--color-intent-neutral-focus-width);
   }
-  :is([data-ui-action-recipe], [data-ui-toast-recipe])[data-color="accent"] {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface])[data-color="accent"] {
     --ui-intent-text: var(--color-intent-accent-text);
     --ui-intent-text-hover: var(--color-intent-accent-text-hover);
     --ui-intent-soft: var(--color-intent-accent-soft);
@@ -9719,7 +9946,7 @@
     --ui-intent-focus: var(--color-intent-accent-focus);
     --ui-intent-focus-width: var(--color-intent-accent-focus-width);
   }
-  :is([data-ui-action-recipe], [data-ui-toast-recipe])[data-color="success"] {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface])[data-color="success"] {
     --ui-intent-text: var(--color-intent-success-text);
     --ui-intent-text-hover: var(--color-intent-success-text-hover);
     --ui-intent-soft: var(--color-intent-success-soft);
@@ -9737,7 +9964,7 @@
     --ui-intent-focus: var(--color-intent-success-focus);
     --ui-intent-focus-width: var(--color-intent-success-focus-width);
   }
-  :is([data-ui-action-recipe], [data-ui-toast-recipe])[data-color="warning"] {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface])[data-color="warning"] {
     --ui-intent-text: var(--color-intent-warning-text);
     --ui-intent-text-hover: var(--color-intent-warning-text-hover);
     --ui-intent-soft: var(--color-intent-warning-soft);
@@ -9755,7 +9982,7 @@
     --ui-intent-focus: var(--color-intent-warning-focus);
     --ui-intent-focus-width: var(--color-intent-warning-focus-width);
   }
-  :is([data-ui-action-recipe], [data-ui-toast-recipe])[data-color="danger"] {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface])[data-color="danger"] {
     --ui-intent-text: var(--color-intent-danger-text);
     --ui-intent-text-hover: var(--color-intent-danger-text-hover);
     --ui-intent-soft: var(--color-intent-danger-soft);
@@ -9843,6 +10070,27 @@
     box-shadow: 0 0 0 1px currentColor;
   }
 }
+@layer components {
+  [data-ui-semantic-surface] {
+    --ui-semantic-surface-ink: var(--ui-surface-ink);
+    --ui-semantic-surface-ink-muted: var(--ui-surface-ink-muted);
+    color: var(--ui-semantic-surface-ink);
+    background-color: var(--ui-surface-color);
+  }
+  [data-ui-semantic-surface][data-variant="soft"] {
+    --ui-semantic-surface-ink: var(--ui-intent-soft-ink);
+    --ui-semantic-surface-ink-muted: var(--ui-intent-soft-ink-muted);
+    background-color: var(--ui-intent-soft);
+  }
+  [data-ui-semantic-surface][data-variant="surface"] {
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-intent-edge);
+  }
+  [data-ui-semantic-surface][data-variant="solid"] {
+    --ui-semantic-surface-ink: var(--ui-intent-solid-ink);
+    --ui-semantic-surface-ink-muted: var(--ui-intent-solid-ink);
+    background-color: var(--ui-intent-solid);
+  }
+}
 [data-ui-toast-outlet] {
   --ui-toast-stack-peek: 8px;
 }
@@ -9885,19 +10133,9 @@
 }
 @layer components {
   [data-ui-toast-recipe] {
-    --ui-toast-ink: var(--ui-surface-ink);
-    --ui-toast-ink-muted: var(--ui-surface-ink-muted);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-surface-color);
-  }
-  [data-ui-toast-recipe][data-variant="soft"] {
-    --ui-toast-ink: var(--ui-intent-soft-ink);
-    --ui-toast-ink-muted: var(--ui-intent-soft-ink-muted);
+    --ui-toast-ink: var(--ui-semantic-surface-ink);
+    --ui-toast-ink-muted: var(--ui-semantic-surface-ink-muted);
     color: var(--ui-toast-ink);
-    background-color: var(--ui-intent-soft);
-  }
-  [data-ui-toast-recipe][data-variant="surface"] {
-    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-intent-edge);
   }
   [data-ui-toast-recipe][data-variant="outline"] {
     --ui-toast-ink: var(--ui-intent-text);
@@ -9906,12 +10144,6 @@
     color: var(--ui-toast-ink);
     background-color: transparent;
   }
-  [data-ui-toast-recipe][data-variant="solid"] {
-    --ui-toast-ink: var(--ui-intent-solid-ink);
-    --ui-toast-ink-muted: var(--ui-intent-solid-ink);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-intent-solid);
-  }
   [data-ui-toast-marker] {
     background-color: var(--ui-intent-solid);
   }