@vireo-ai/trellis-ui 0.1.27 → 0.1.29

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

@@ -459,8 +459,6 @@
     --color-interaction-pressed: transparent;
     --color-interaction-selected: transparent;
     --color-interaction-selected-hover: transparent;
-    --color-interaction-edge-selected: transparent;
-    --color-interaction-edge-selected-hover: transparent;
     --color-interaction-disabled: transparent;
     --color-interaction-disabled-edge: transparent;
     --color-interaction-disabled-ink: transparent;
@@ -3440,9 +3438,6 @@
   .px-sidebar-header-padding-inline {
     padding-inline: var(--spacing-sidebar-header-padding-inline);
   }
-  .py-0 {
-    padding-block: var(--spacing-0);
-  }
   .py-0\.5 {
     padding-block: var(--spacing-0\.5);
   }
@@ -4083,8 +4078,8 @@
   .opacity-75 {
     opacity: 75%;
   }
-  .shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--ui-surface-edge\)\] {
-    --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+  .shadow-\[0_0_0_var\(--border-width-edge-control\)_var\(--ui-surface-edge\)\] {
+    --tw-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-elevation-0 {
@@ -4305,6 +4300,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[--ui-interaction-rest-edge\:var\(--ui-surface-edge\)\] {
+    --ui-interaction-rest-edge: var(--ui-surface-edge);
+  }
   .\[--ui-sidebar-drawer-elevation\:var\(--shadow-elevation-0\)\] {
     --ui-sidebar-drawer-elevation: var(--shadow-elevation-0);
   }
@@ -4526,14 +4524,6 @@
       }
     }
   }
-  .hover\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--ui-surface-edge-hover\)\] {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .focus-visible\:bg-intent-neutral-edge-hover {
     &:focus-visible {
       background-color: var(--color-intent-neutral-edge-hover);
@@ -4554,12 +4544,6 @@
       background-color: var(--color-interaction-pressed);
     }
   }
-  .active\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--ui-surface-edge-strong\)\] {
-    &:active {
-      --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-strong);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
   .has-\[\:focus-visible\]\:ui-focus-ring {
     &:has(*:is(:focus-visible)) {
       box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
@@ -4595,41 +4579,11 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-checked\:bg-interaction-selected {
-    &[data-checked] {
-      background-color: var(--color-interaction-selected);
-    }
-  }
   .data-checked\:opacity-100 {
     &[data-checked] {
       opacity: 100%;
     }
   }
-  .data-checked\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--color-interaction-edge-selected\)\] {
-    &[data-checked] {
-      --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-interaction-edge-selected);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .data-checked\:hover\:bg-interaction-selected-hover {
-    &[data-checked] {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-interaction-selected-hover);
-        }
-      }
-    }
-  }
-  .data-checked\:hover\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--color-interaction-edge-selected-hover\)\] {
-    &[data-checked] {
-      &:hover {
-        @media (hover: hover) {
-          --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-interaction-edge-selected-hover);
-          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-        }
-      }
-    }
-  }
   .data-current\:border-transparent {
     &[data-current] {
       border-color: transparent;
@@ -4666,52 +4620,22 @@
       background-color: var(--ui-surface-edge-hover);
     }
   }
-  .data-indeterminate\:bg-interaction-selected {
-    &[data-indeterminate] {
-      background-color: var(--color-interaction-selected);
-    }
-  }
   .data-indeterminate\:opacity-100 {
     &[data-indeterminate] {
       opacity: 100%;
     }
   }
-  .data-indeterminate\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--color-interaction-edge-selected\)\] {
-    &[data-indeterminate] {
-      --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-interaction-edge-selected);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .data-indeterminate\:hover\:bg-interaction-selected-hover {
-    &[data-indeterminate] {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-interaction-selected-hover);
-        }
-      }
-    }
-  }
-  .data-indeterminate\:hover\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--color-interaction-edge-selected-hover\)\] {
-    &[data-indeterminate] {
-      &:hover {
-        @media (hover: hover) {
-          --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-interaction-edge-selected-hover);
-          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-        }
-      }
-    }
-  }
-  .data-invalid\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--color-intent-danger-edge\)\] {
+  .data-invalid\:shadow-\[0_0_0_var\(--border-width-edge-control\)_var\(--color-intent-danger-edge\)\] {
     &[data-invalid] {
-      --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge);
+      --tw-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .data-invalid\:hover\:shadow-\[inset_0_0_0_var\(--border-width-edge-control\)_var\(--color-intent-danger-edge-hover\)\] {
+  .data-invalid\:hover\:shadow-\[0_0_0_var\(--border-width-edge-control\)_var\(--color-intent-danger-edge-hover\)\] {
     &[data-invalid] {
       &:hover {
         @media (hover: hover) {
-          --tw-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover);
+          --tw-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover);
           box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         }
       }
@@ -5097,11 +5021,6 @@
       }
     }
   }
-  .\[\&_\[data-ui-checkbox-icon\]\]\:mt-0 {
-    & [data-ui-checkbox-icon] {
-      margin-top: var(--spacing-0);
-    }
-  }
   .\[\&_\[data-ui-checkbox-indicator\]\]\:hidden {
     & [data-ui-checkbox-indicator] {
       display: none;
@@ -11854,13 +11773,8 @@
     width: auto !important;
   }
   [data-ui-radio][data-variant="pills"][data-checked] {
-    background-color: var(--color-intent-accent-solid);
-    color: var(--color-intent-accent-solid-ink) !important;
-    box-shadow: var(--shadow-elevation-1);
-  }
-  [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
-    background-color: var(--color-intent-accent-solid-hover);
-    box-shadow: var(--shadow-elevation-1);
+    background-color: transparent;
+    color: var(--ui-surface-ink);
   }
   [data-ui-radio][data-variant="pills"] [data-ui-radio-indicator] {
     display: none !important;
@@ -11909,6 +11823,10 @@
     right: 0.75rem;
   }
 }
+[data-ui-checkbox][data-variant="pills"]:is( [data-ui-interaction="tonal"], [data-ui-interaction="combined"] ) {
+  background-color: var(--ui-interaction-fill);
+  background-image: none;
+}
 @layer components {
   [data-ui-date-picker] {
     --ui-date-picker-selected-bg: var(--color-intent-neutral-solid);
@@ -12711,9 +12629,29 @@
 [data-ui-elevation][data-ui-interactive="surface"]:is(:focus-visible, :has(:focus-visible)) {
   --ui-state-shadow-layers: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
 }
+[data-ui-selection-color], [data-ui-interaction] {
+  --ui-interaction-selected-fill: var(--background-interaction-selection-neutral);
+  --ui-interaction-selected-fill-hover: var(--background-interaction-selection-neutral-hover);
+  --ui-interaction-selected-ink: var(--color-interaction-selection-neutral-ink);
+  --ui-interaction-selected-edge: var(--color-intent-neutral-edge);
+  --ui-interaction-selected-edge-hover: var(--color-intent-neutral-edge-hover);
+  --ui-interaction-selected-edge-strong: var(--color-intent-neutral-edge-strong);
+  --ui-selection-solid: var(--color-intent-neutral-solid);
+  --ui-selection-solid-ink: var(--color-intent-neutral-solid-ink);
+}
+:is([data-ui-selection-color], [data-ui-interaction])[data-color="accent"] {
+  --ui-interaction-selected-fill: var(--background-interaction-selection-accent);
+  --ui-interaction-selected-fill-hover: var(--background-interaction-selection-accent-hover);
+  --ui-interaction-selected-ink: var(--color-interaction-selection-accent-ink);
+  --ui-interaction-selected-edge: var(--color-intent-accent-edge);
+  --ui-interaction-selected-edge-hover: var(--color-intent-accent-edge-hover);
+  --ui-interaction-selected-edge-strong: var(--color-intent-accent-edge-strong);
+  --ui-selection-solid: var(--color-intent-accent-solid);
+  --ui-selection-solid-ink: var(--color-intent-accent-solid-ink);
+}
 [data-ui-interaction] {
   --ui-interaction-fill: transparent;
-  --ui-interaction-edge: transparent;
+  --ui-interaction-edge: var(--ui-interaction-rest-edge, transparent);
 }
 :is([data-ui-interaction="tonal"], [data-ui-interaction="combined"]) {
   background-image: linear-gradient(var(--ui-interaction-fill), var(--ui-interaction-fill));
@@ -12721,6 +12659,9 @@
 :is([data-ui-interaction="edge"], [data-ui-interaction="combined"]) {
   --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-interaction-edge);
 }
+:is([data-ui-interaction="edge"], [data-ui-interaction="combined"]):not([data-ui-elevation]) {
+  box-shadow: var(--ui-state-shadow-layers);
+}
 @media (hover: hover) {
   [data-ui-interaction]:hover {
     --ui-interaction-fill: var(--color-interaction-hover);
@@ -12732,13 +12673,16 @@
   --ui-interaction-edge: var(--ui-surface-edge-strong);
 }
 [data-ui-interaction]:is( [data-selected="true"], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"] ) {
-  --ui-interaction-fill: var(--color-interaction-selected);
-  --ui-interaction-edge: var(--color-interaction-edge-selected);
+  --ui-interaction-fill: var(--ui-interaction-selected-fill);
+  --ui-interaction-edge: var(--ui-interaction-selected-edge);
+}
+:is([data-ui-interaction="tonal"], [data-ui-interaction="combined"]):is( [data-selected="true"], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"] ) {
+  color: var(--ui-interaction-selected-ink);
 }
 @media (hover: hover) {
   [data-ui-interaction]:is( [data-selected="true"], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"] ):hover {
-    --ui-interaction-fill: var(--color-interaction-selected-hover);
-    --ui-interaction-edge: var(--color-interaction-edge-selected-hover);
+    --ui-interaction-fill: var(--ui-interaction-selected-fill-hover);
+    --ui-interaction-edge: var(--ui-interaction-selected-edge-hover);
   }
 }
 [data-ui-interaction]:is(:focus-visible, :has(:focus-visible)) {
@@ -13069,6 +13013,9 @@
   [data-ui-tabs-tab][data-selected] {
     color: var(--ui-surface-ink);
   }
+  [data-ui-tabs-list]:where([data-variant="subtle"], [data-variant="pills"]) [data-ui-tabs-tab][data-selected] {
+    color: var(--ui-interaction-selected-ink);
+  }
   [data-ui-tabs-tab]:focus-visible {
     box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
@@ -13076,10 +13023,10 @@
     color: var(--color-interaction-disabled-ink);
   }
   [data-ui-tabs-list][data-variant="subtle"] [data-ui-tabs-indicator], [data-ui-tabs-list][data-variant="pills"] [data-ui-tabs-indicator] {
-    background-color: var(--color-interaction-selected);
+    background-color: transparent;
   }
   [data-ui-tabs-list][data-variant="line"] [data-ui-tabs-indicator] {
-    background-color: var(--color-intent-accent-solid);
+    background-color: var(--ui-selection-solid);
   }
   [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator] {
     background-color: transparent;
@@ -13304,9 +13251,9 @@
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-selection-edge);
   }
   [data-ui-selection-recipe="indicator"]:is([data-checked], [data-indeterminate]), [data-ui-selection-recipe="switch-track"][data-checked] {
-    --ui-selection-edge: var(--color-intent-accent-edge);
-    color: var(--color-intent-accent-solid-ink);
-    background-color: var(--color-intent-accent-solid);
+    --ui-selection-edge: var(--ui-interaction-selected-edge, var(--color-intent-accent-edge));
+    color: var(--ui-selection-solid-ink, var(--color-intent-accent-solid-ink));
+    background-color: var(--ui-selection-solid, var(--color-intent-accent-solid));
   }
   [data-ui-selection-recipe="switch-thumb"], [data-ui-selection-recipe="slider-thumb"] {
     background-color: var(--ui-surface-color);