@vireo-ai/trellis-ui 0.1.53 → 0.1.54

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

@@ -13,6 +13,8 @@
     --breakpoint-lg: 1024px;
     --breakpoint-xl: 1280px;
     --breakpoint-2xl: 1536px;
+    --container-3xs: 256px;
+    --container-2xs: 288px;
     --container-xs: 320px;
     --container-sm: 384px;
     --container-md: 448px;
@@ -359,6 +361,8 @@
     --spacing-slider-thumb-xlg: 20px;
     --spacing-scrollbar: 6px;
     --spacing-scrollbar-inset: 2px;
+    --spacing-keybinding-key: clamp(18px, calc(17.8571px + 0.0446vw), 18.5px);
+    --spacing-menu-min-width: 192px;
     --spacing-menu-item: var(--spacing-control-lg);
     --spacing-select-listbox: 256px;
     --spacing-panel-collapsed: 48px;
@@ -1193,6 +1197,9 @@
   .mr-0 {
     margin-right: var(--spacing-0);
   }
+  .mr-1 {
+    margin-right: var(--spacing-1);
+  }
   .mr-auto {
     margin-right: auto;
   }
@@ -1441,9 +1448,6 @@
   .h-1\.5 {
     height: var(--spacing-1\.5);
   }
-  .h-4\.5 {
-    height: var(--spacing-4\.5);
-  }
   .h-5 {
     height: var(--spacing-5);
   }
@@ -1600,6 +1604,15 @@
   .w-\[var\(--border-width-edge-separator\)\] {
     width: var(--border-width-edge-separator);
   }
+  .w-\[var\(--container-2xs\)\] {
+    width: var(--container-2xs);
+  }
+  .w-\[var\(--container-3xs\)\] {
+    width: var(--container-3xs);
+  }
+  .w-\[var\(--container-xs\)\] {
+    width: var(--container-xs);
+  }
   .w-\[var\(--spacing-sidebar-drawer-width\)\] {
     width: var(--spacing-sidebar-drawer-width);
   }
@@ -1669,9 +1682,15 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-2xs {
+    max-width: var(--container-2xs);
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-3xs {
+    max-width: var(--container-3xs);
+  }
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
@@ -1696,6 +1715,9 @@
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
+  .max-w-\[var\(--ui-popover-available-width\,none\)\] {
+    max-width: var(--ui-popover-available-width,none);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1735,21 +1757,27 @@
   .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);
   }
   .min-w-28 {
     min-width: calc(var(--spacing) * 28);
   }
-  .min-w-48 {
-    min-width: calc(var(--spacing) * 48);
-  }
   .min-w-72 {
     min-width: calc(var(--spacing) * 72);
   }
+  .min-w-\[min\(var\(--container-2xs\)\,var\(--ui-popover-available-width\,var\(--container-2xs\)\)\)\] {
+    min-width: min(var(--container-2xs), var(--ui-popover-available-width,var(--container-2xs)));
+  }
+  .min-w-\[min\(var\(--container-3xs\)\,var\(--ui-popover-available-width\,var\(--container-3xs\)\)\)\] {
+    min-width: min(var(--container-3xs), var(--ui-popover-available-width,var(--container-3xs)));
+  }
+  .min-w-\[min\(var\(--container-xs\)\,var\(--ui-popover-available-width\,var\(--container-xs\)\)\)\] {
+    min-width: min(var(--container-xs), var(--ui-popover-available-width,var(--container-xs)));
+  }
+  .min-w-\[min\(var\(--spacing-menu-min-width\)\,var\(--ui-popover-available-width\,var\(--spacing-menu-min-width\)\)\)\] {
+    min-width: min(var(--spacing-menu-min-width), var(--ui-popover-available-width,var(--spacing-menu-min-width)));
+  }
   .min-w-control-lg {
     min-width: var(--spacing-control-lg);
   }
@@ -4238,9 +4266,6 @@
     --tw-shadow: none;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ui-edge {
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-  }
   .ring-accent-1 {
     --tw-ring-color: var(--color-accent-1);
   }
@@ -4486,6 +4511,9 @@
   .\[--ui-sidebar-resting-elevation\:var\(--ui-matched-elevation\)\] {
     --ui-sidebar-resting-elevation: var(--ui-matched-elevation);
   }
+  .\[font\:inherit\] {
+    font: inherit;
+  }
   .\[grid-area\:aside\] {
     grid-area: aside;
   }
@@ -9016,18 +9044,364 @@
 :where([data-ui-radius-owner="surface-full"]) {
   --ui-element-radius: var(--radius-full);
 }
-:where([data-ui-radius-owner]) {
+:where([data-ui-radius-owner]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
   --ui-owned-radius-start-start: var(--ui-element-radius);
   --ui-owned-radius-start-end: var(--ui-element-radius);
   --ui-owned-radius-end-start: var(--ui-element-radius);
   --ui-owned-radius-end-end: var(--ui-element-radius);
+  --ui-owned-inset-inline-start: 0px;
+  --ui-owned-inset-inline-end: 0px;
+  --ui-owned-inset-block-start: 0px;
+  --ui-owned-inset-block-end: 0px;
   border-radius: var(--ui-element-radius);
 }
+:where([data-ui-radius-owner][data-padding="0"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-0);
+  --ui-owned-inset-inline-end: var(--spacing-0);
+  --ui-owned-inset-block-start: var(--spacing-0);
+  --ui-owned-inset-block-end: var(--spacing-0);
+}
+:where([data-ui-radius-owner][data-padding="1"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1);
+  --ui-owned-inset-inline-end: var(--spacing-1);
+  --ui-owned-inset-block-start: var(--spacing-1);
+  --ui-owned-inset-block-end: var(--spacing-1);
+}
+:where([data-ui-radius-owner][data-padding="2"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2);
+  --ui-owned-inset-inline-end: var(--spacing-2);
+  --ui-owned-inset-block-start: var(--spacing-2);
+  --ui-owned-inset-block-end: var(--spacing-2);
+}
+:where([data-ui-radius-owner][data-padding="3"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3);
+  --ui-owned-inset-inline-end: var(--spacing-3);
+  --ui-owned-inset-block-start: var(--spacing-3);
+  --ui-owned-inset-block-end: var(--spacing-3);
+}
+:where([data-ui-radius-owner][data-padding="4"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4);
+  --ui-owned-inset-inline-end: var(--spacing-4);
+  --ui-owned-inset-block-start: var(--spacing-4);
+  --ui-owned-inset-block-end: var(--spacing-4);
+}
+:where([data-ui-radius-owner][data-padding="5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5);
+  --ui-owned-inset-inline-end: var(--spacing-5);
+  --ui-owned-inset-block-start: var(--spacing-5);
+  --ui-owned-inset-block-end: var(--spacing-5);
+}
+:where([data-ui-radius-owner][data-padding="6"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6);
+  --ui-owned-inset-inline-end: var(--spacing-6);
+  --ui-owned-inset-block-start: var(--spacing-6);
+  --ui-owned-inset-block-end: var(--spacing-6);
+}
+:where([data-ui-radius-owner][data-padding="7"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7);
+  --ui-owned-inset-inline-end: var(--spacing-7);
+  --ui-owned-inset-block-start: var(--spacing-7);
+  --ui-owned-inset-block-end: var(--spacing-7);
+}
+:where([data-ui-radius-owner][data-padding="8"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8);
+  --ui-owned-inset-inline-end: var(--spacing-8);
+  --ui-owned-inset-block-start: var(--spacing-8);
+  --ui-owned-inset-block-end: var(--spacing-8);
+}
+:where([data-ui-radius-owner][data-padding="9"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9);
+  --ui-owned-inset-inline-end: var(--spacing-9);
+  --ui-owned-inset-block-start: var(--spacing-9);
+  --ui-owned-inset-block-end: var(--spacing-9);
+}
+:where([data-ui-radius-owner][data-padding="10"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10);
+  --ui-owned-inset-inline-end: var(--spacing-10);
+  --ui-owned-inset-block-start: var(--spacing-10);
+  --ui-owned-inset-block-end: var(--spacing-10);
+}
+:where([data-ui-radius-owner][data-padding="11"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11);
+  --ui-owned-inset-inline-end: var(--spacing-11);
+  --ui-owned-inset-block-start: var(--spacing-11);
+  --ui-owned-inset-block-end: var(--spacing-11);
+}
+:where([data-ui-radius-owner][data-padding="12"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-12);
+  --ui-owned-inset-inline-end: var(--spacing-12);
+  --ui-owned-inset-block-start: var(--spacing-12);
+  --ui-owned-inset-block-end: var(--spacing-12);
+}
+:where([data-ui-radius-owner][data-padding="0.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-0\.5);
+  --ui-owned-inset-inline-end: var(--spacing-0\.5);
+  --ui-owned-inset-block-start: var(--spacing-0\.5);
+  --ui-owned-inset-block-end: var(--spacing-0\.5);
+}
+:where([data-ui-radius-owner][data-padding="1.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1\.5);
+  --ui-owned-inset-inline-end: var(--spacing-1\.5);
+  --ui-owned-inset-block-start: var(--spacing-1\.5);
+  --ui-owned-inset-block-end: var(--spacing-1\.5);
+}
+:where([data-ui-radius-owner][data-padding="2.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2\.5);
+  --ui-owned-inset-inline-end: var(--spacing-2\.5);
+  --ui-owned-inset-block-start: var(--spacing-2\.5);
+  --ui-owned-inset-block-end: var(--spacing-2\.5);
+}
+:where([data-ui-radius-owner][data-padding="3.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3\.5);
+  --ui-owned-inset-inline-end: var(--spacing-3\.5);
+  --ui-owned-inset-block-start: var(--spacing-3\.5);
+  --ui-owned-inset-block-end: var(--spacing-3\.5);
+}
+:where([data-ui-radius-owner][data-padding="4.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4\.5);
+  --ui-owned-inset-inline-end: var(--spacing-4\.5);
+  --ui-owned-inset-block-start: var(--spacing-4\.5);
+  --ui-owned-inset-block-end: var(--spacing-4\.5);
+}
+:where([data-ui-radius-owner][data-padding="5.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5\.5);
+  --ui-owned-inset-inline-end: var(--spacing-5\.5);
+  --ui-owned-inset-block-start: var(--spacing-5\.5);
+  --ui-owned-inset-block-end: var(--spacing-5\.5);
+}
+:where([data-ui-radius-owner][data-padding="6.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6\.5);
+  --ui-owned-inset-inline-end: var(--spacing-6\.5);
+  --ui-owned-inset-block-start: var(--spacing-6\.5);
+  --ui-owned-inset-block-end: var(--spacing-6\.5);
+}
+:where([data-ui-radius-owner][data-padding="7.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7\.5);
+  --ui-owned-inset-inline-end: var(--spacing-7\.5);
+  --ui-owned-inset-block-start: var(--spacing-7\.5);
+  --ui-owned-inset-block-end: var(--spacing-7\.5);
+}
+:where([data-ui-radius-owner][data-padding="8.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8\.5);
+  --ui-owned-inset-inline-end: var(--spacing-8\.5);
+  --ui-owned-inset-block-start: var(--spacing-8\.5);
+  --ui-owned-inset-block-end: var(--spacing-8\.5);
+}
+:where([data-ui-radius-owner][data-padding="9.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9\.5);
+  --ui-owned-inset-inline-end: var(--spacing-9\.5);
+  --ui-owned-inset-block-start: var(--spacing-9\.5);
+  --ui-owned-inset-block-end: var(--spacing-9\.5);
+}
+:where([data-ui-radius-owner][data-padding="10.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10\.5);
+  --ui-owned-inset-inline-end: var(--spacing-10\.5);
+  --ui-owned-inset-block-start: var(--spacing-10\.5);
+  --ui-owned-inset-block-end: var(--spacing-10\.5);
+}
+:where([data-ui-radius-owner][data-padding="11.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11\.5);
+  --ui-owned-inset-inline-end: var(--spacing-11\.5);
+  --ui-owned-inset-block-start: var(--spacing-11\.5);
+  --ui-owned-inset-block-end: var(--spacing-11\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="1"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1);
+  --ui-owned-inset-inline-end: var(--spacing-1);
+}
+:where([data-ui-radius-owner][data-padding-x="2"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2);
+  --ui-owned-inset-inline-end: var(--spacing-2);
+}
+:where([data-ui-radius-owner][data-padding-x="3"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3);
+  --ui-owned-inset-inline-end: var(--spacing-3);
+}
+:where([data-ui-radius-owner][data-padding-x="4"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4);
+  --ui-owned-inset-inline-end: var(--spacing-4);
+}
+:where([data-ui-radius-owner][data-padding-x="5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5);
+  --ui-owned-inset-inline-end: var(--spacing-5);
+}
+:where([data-ui-radius-owner][data-padding-x="6"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6);
+  --ui-owned-inset-inline-end: var(--spacing-6);
+}
+:where([data-ui-radius-owner][data-padding-x="7"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7);
+  --ui-owned-inset-inline-end: var(--spacing-7);
+}
+:where([data-ui-radius-owner][data-padding-x="8"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8);
+  --ui-owned-inset-inline-end: var(--spacing-8);
+}
+:where([data-ui-radius-owner][data-padding-x="9"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9);
+  --ui-owned-inset-inline-end: var(--spacing-9);
+}
+:where([data-ui-radius-owner][data-padding-x="10"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10);
+  --ui-owned-inset-inline-end: var(--spacing-10);
+}
+:where([data-ui-radius-owner][data-padding-x="11"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11);
+  --ui-owned-inset-inline-end: var(--spacing-11);
+}
+:where([data-ui-radius-owner][data-padding-x="12"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-12);
+  --ui-owned-inset-inline-end: var(--spacing-12);
+}
+:where([data-ui-radius-owner][data-padding-x="0.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-0\.5);
+  --ui-owned-inset-inline-end: var(--spacing-0\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="1.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1\.5);
+  --ui-owned-inset-inline-end: var(--spacing-1\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="2.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2\.5);
+  --ui-owned-inset-inline-end: var(--spacing-2\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="3.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3\.5);
+  --ui-owned-inset-inline-end: var(--spacing-3\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="4.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4\.5);
+  --ui-owned-inset-inline-end: var(--spacing-4\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="5.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5\.5);
+  --ui-owned-inset-inline-end: var(--spacing-5\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="6.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6\.5);
+  --ui-owned-inset-inline-end: var(--spacing-6\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="7.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7\.5);
+  --ui-owned-inset-inline-end: var(--spacing-7\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="8.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8\.5);
+  --ui-owned-inset-inline-end: var(--spacing-8\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="9.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9\.5);
+  --ui-owned-inset-inline-end: var(--spacing-9\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="10.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10\.5);
+  --ui-owned-inset-inline-end: var(--spacing-10\.5);
+}
+:where([data-ui-radius-owner][data-padding-x="11.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11\.5);
+  --ui-owned-inset-inline-end: var(--spacing-11\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="1"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-1);
+  --ui-owned-inset-block-end: var(--spacing-1);
+}
+:where([data-ui-radius-owner][data-padding-y="2"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-2);
+  --ui-owned-inset-block-end: var(--spacing-2);
+}
+:where([data-ui-radius-owner][data-padding-y="3"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-3);
+  --ui-owned-inset-block-end: var(--spacing-3);
+}
+:where([data-ui-radius-owner][data-padding-y="4"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-4);
+  --ui-owned-inset-block-end: var(--spacing-4);
+}
+:where([data-ui-radius-owner][data-padding-y="5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-5);
+  --ui-owned-inset-block-end: var(--spacing-5);
+}
+:where([data-ui-radius-owner][data-padding-y="6"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-6);
+  --ui-owned-inset-block-end: var(--spacing-6);
+}
+:where([data-ui-radius-owner][data-padding-y="7"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-7);
+  --ui-owned-inset-block-end: var(--spacing-7);
+}
+:where([data-ui-radius-owner][data-padding-y="8"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-8);
+  --ui-owned-inset-block-end: var(--spacing-8);
+}
+:where([data-ui-radius-owner][data-padding-y="9"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-9);
+  --ui-owned-inset-block-end: var(--spacing-9);
+}
+:where([data-ui-radius-owner][data-padding-y="10"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-10);
+  --ui-owned-inset-block-end: var(--spacing-10);
+}
+:where([data-ui-radius-owner][data-padding-y="11"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-11);
+  --ui-owned-inset-block-end: var(--spacing-11);
+}
+:where([data-ui-radius-owner][data-padding-y="12"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-12);
+  --ui-owned-inset-block-end: var(--spacing-12);
+}
+:where([data-ui-radius-owner][data-padding-y="0.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-0\.5);
+  --ui-owned-inset-block-end: var(--spacing-0\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="1.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-1\.5);
+  --ui-owned-inset-block-end: var(--spacing-1\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="2.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-2\.5);
+  --ui-owned-inset-block-end: var(--spacing-2\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="3.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-3\.5);
+  --ui-owned-inset-block-end: var(--spacing-3\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="4.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-4\.5);
+  --ui-owned-inset-block-end: var(--spacing-4\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="5.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-5\.5);
+  --ui-owned-inset-block-end: var(--spacing-5\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="6.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-6\.5);
+  --ui-owned-inset-block-end: var(--spacing-6\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="7.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-7\.5);
+  --ui-owned-inset-block-end: var(--spacing-7\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="8.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-8\.5);
+  --ui-owned-inset-block-end: var(--spacing-8\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="9.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-9\.5);
+  --ui-owned-inset-block-end: var(--spacing-9\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="10.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-10\.5);
+  --ui-owned-inset-block-end: var(--spacing-10\.5);
+}
+:where([data-ui-radius-owner][data-padding-y="11.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-11\.5);
+  --ui-owned-inset-block-end: var(--spacing-11\.5);
+}
 :where([data-ui-concentric]) {
-  border-start-start-radius: max(0px, calc(var(--ui-owned-radius-start-start) - var(--ui-concentric-inset-start-start, var(--ui-concentric-inset, 0px))));
-  border-start-end-radius: max(0px, calc(var(--ui-owned-radius-start-end) - var(--ui-concentric-inset-start-end, var(--ui-concentric-inset, 0px))));
-  border-end-start-radius: max(0px, calc(var(--ui-owned-radius-end-start) - var(--ui-concentric-inset-end-start, var(--ui-concentric-inset, 0px))));
-  border-end-end-radius: max(0px, calc(var(--ui-owned-radius-end-end) - var(--ui-concentric-inset-end-end, var(--ui-concentric-inset, 0px))));
+  border-start-start-radius: max(0px, calc(var(--ui-owned-radius-start-start) - var(--ui-concentric-inset-inline-start, var(--ui-concentric-inset, var(--ui-owned-inset-inline-start, 0px))))) max(0px, calc(var(--ui-owned-radius-start-start) - var(--ui-concentric-inset-block-start, var(--ui-concentric-inset, var(--ui-owned-inset-block-start, 0px)))));
+  border-start-end-radius: max(0px, calc(var(--ui-owned-radius-start-end) - var(--ui-concentric-inset-inline-end, var(--ui-concentric-inset, var(--ui-owned-inset-inline-end, 0px))))) max(0px, calc(var(--ui-owned-radius-start-end) - var(--ui-concentric-inset-block-start, var(--ui-concentric-inset, var(--ui-owned-inset-block-start, 0px)))));
+  border-end-start-radius: max(0px, calc(var(--ui-owned-radius-end-start) - var(--ui-concentric-inset-inline-start, var(--ui-concentric-inset, var(--ui-owned-inset-inline-start, 0px))))) max(0px, calc(var(--ui-owned-radius-end-start) - var(--ui-concentric-inset-block-end, var(--ui-concentric-inset, var(--ui-owned-inset-block-end, 0px)))));
+  border-end-end-radius: max(0px, calc(var(--ui-owned-radius-end-end) - var(--ui-concentric-inset-inline-end, var(--ui-concentric-inset, var(--ui-owned-inset-inline-end, 0px))))) max(0px, calc(var(--ui-owned-radius-end-end) - var(--ui-concentric-inset-block-end, var(--ui-concentric-inset, var(--ui-owned-inset-block-end, 0px)))));
 }
 :where(:root, .light, .dark) :where([data-ui-grid][data-columns="1"], [data-ui-box][data-layout="grid"][data-columns="1"]) {
   grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -9232,6 +9606,21 @@
     display: none;
   }
 }
+@layer components {
+  [data-ui-layout-participation="shrink"] {
+    flex: 0 1 auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+  [data-ui-layout-participation="fill"] {
+    flex: 1 1 0%;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+  [data-ui-layout-participation="fixed"] {
+    flex: 0 0 auto;
+  }
+}
 @layer components {
   [data-ui-brand-logo] svg {
     display: block;
@@ -9893,6 +10282,43 @@
     border-bottom-left-radius: 0 !important;
   }
 }
+@layer components {
+  [data-ui-link] {
+    --ui-link-text-muted: var(--ui-surface-ink-muted);
+    color: var(--ui-intent-text);
+    text-decoration: none;
+  }
+  [data-ui-link][data-color="accent"] {
+    --ui-link-text-muted: var(--ui-intent-soft-ink-muted);
+  }
+  [data-ui-link]:hover {
+    color: var(--ui-intent-text-hover);
+  }
+  [data-ui-link][data-variant="subtle"] {
+    color: var(--ui-link-text-muted);
+  }
+  [data-ui-link][data-variant="subtle"]:is(:hover, :focus-visible) {
+    color: var(--ui-intent-text-hover);
+  }
+  [data-ui-link][data-variant="default"] [data-ui-link-label] {
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
+    }
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+  [data-ui-link][data-variant="default"]:is(:hover, :focus-visible) [data-ui-link-label] {
+    text-decoration-color: currentColor;
+  }
+  [data-ui-link][data-variant="ghost"]:is(:hover, :focus-visible) [data-ui-link-label] {
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+}
 @layer components {
   [data-ui-accordion-trigger][data-state="open"] [data-ui-accordion-icon] {
     transform: rotate(180deg);
@@ -10076,25 +10502,37 @@
       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] {
+    --ui-keybinding-edge: var(--ui-surface-edge);
+    --ui-keybinding-edge-pressed: var(--ui-surface-edge-strong);
   }
   [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;
+    font: inherit;
+  }
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-key] {
+    height: var(--spacing-keybinding-key);
+    min-width: var(--spacing-keybinding-key);
+    padding-inline: var(--spacing-1);
+    border-radius: var(--radius-control-md);
+    line-height: 1;
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-keybinding-edge, 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);
+      box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-keybinding-edge, color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent));
     }
   }
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-separator] {
+    opacity: 0.7;
+  }
   [data-ui-keybinding-key][data-pressed] {
     background-color: var(--color-interaction-pressed);
-    box-shadow: inset 0 0 0 var(--border-width-edge-control) currentColor;
+  }
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-key][data-pressed] {
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-keybinding-edge-pressed, currentColor);
   }
 }
 :root[data-ui-sortable-dragging], :root[data-ui-sortable-dragging] * {
@@ -10107,7 +10545,7 @@
   }
 }
 @layer components {
-  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface]) {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface], [data-ui-link]) {
     --ui-intent-text: var(--ui-surface-ink);
     --ui-intent-text-hover: var(--ui-surface-ink);
     --ui-intent-soft: var(--color-intent-neutral-soft);
@@ -10125,7 +10563,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-ui-semantic-surface])[data-color="accent"] {
+  :is([data-ui-action-recipe], [data-ui-toast-recipe], [data-ui-semantic-surface], [data-ui-link])[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);