@vireo-ai/trellis-ui 0.1.10 → 0.1.12

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

@@ -1031,9 +1031,6 @@
   .-mb-1 {
     margin-bottom: calc(var(--spacing-1) * -1);
   }
-  .mb-0 {
-    margin-bottom: var(--spacing-0);
-  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing-1\.5) * -1);
   }
@@ -3447,9 +3444,6 @@
   .py-sidebar-header-padding-block {
     padding-block: var(--spacing-sidebar-header-padding-block);
   }
-  .ps-2 {
-    padding-inline-start: var(--spacing-2);
-  }
   .pe-10 {
     padding-inline-end: var(--spacing-10);
   }
@@ -4844,11 +4838,6 @@
       grid-auto-flow: column;
     }
   }
-  .md\:grid-cols-\[max-content_minmax\(0\,1fr\)\] {
-    @media (width >= 768px) {
-      grid-template-columns: max-content minmax(0,1fr);
-    }
-  }
   .md\:grid-cols-\[minmax\(10rem\,14rem\)_minmax\(0\,1fr\)\] {
     @media (width >= 768px) {
       grid-template-columns: minmax(10rem,14rem) minmax(0,1fr);
@@ -10552,6 +10541,228 @@
     }
   }
 }
+@layer components {
+  [data-ui-tabs] {
+    --ui-tabs-list-direction: row;
+    --ui-tabs-list-align: center;
+    --ui-tabs-list-width: auto;
+    --ui-tabs-line-gap: var(--spacing-4);
+    --ui-tabs-line-indicator-height: 2px;
+    --ui-tabs-line-indicator-inset: auto 0 0;
+    --ui-tabs-line-indicator-width: auto;
+    --ui-tabs-line-tab-padding: 0;
+    --ui-tabs-tab-justify: center;
+    --ui-tabs-tab-width: auto;
+    gap: var(--spacing-3);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="0"] {
+    --ui-tabs-explicit-gap: var(--spacing-0);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="0.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-0\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="1"] {
+    --ui-tabs-explicit-gap: var(--spacing-1);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="1.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-1\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="2"] {
+    --ui-tabs-explicit-gap: var(--spacing-2);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="2.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-2\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="3"] {
+    --ui-tabs-explicit-gap: var(--spacing-3);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="3.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-3\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="4"] {
+    --ui-tabs-explicit-gap: var(--spacing-4);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="4.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-4\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="5"] {
+    --ui-tabs-explicit-gap: var(--spacing-5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="5.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-5\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="6"] {
+    --ui-tabs-explicit-gap: var(--spacing-6);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="6.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-6\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="7"] {
+    --ui-tabs-explicit-gap: var(--spacing-7);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="7.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-7\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="8"] {
+    --ui-tabs-explicit-gap: var(--spacing-8);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="8.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-8\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="9"] {
+    --ui-tabs-explicit-gap: var(--spacing-9);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="9.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-9\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="10"] {
+    --ui-tabs-explicit-gap: var(--spacing-10);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="10.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-10\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="11"] {
+    --ui-tabs-explicit-gap: var(--spacing-11);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="11.5"] {
+    --ui-tabs-explicit-gap: var(--spacing-11\.5);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap="12"] {
+    --ui-tabs-explicit-gap: var(--spacing-12);
+  }
+  :is([data-ui-tabs], [data-ui-tabs-list])[data-gap]:not([data-gap="auto"]) {
+    gap: var(--ui-tabs-explicit-gap);
+  }
+  [data-ui-tabs][data-orientation="vertical"] {
+    --ui-tabs-list-direction: column;
+    --ui-tabs-list-align: stretch;
+    --ui-tabs-list-width: 100%;
+    --ui-tabs-line-gap: var(--spacing-1);
+    --ui-tabs-line-indicator-height: auto;
+    --ui-tabs-line-indicator-inset: 0 auto 0 0;
+    --ui-tabs-line-indicator-width: 2px;
+    --ui-tabs-line-tab-padding: var(--spacing-2);
+    --ui-tabs-tab-justify: flex-start;
+    --ui-tabs-tab-width: 100%;
+  }
+  [data-ui-tabs-list] {
+    flex-direction: var(--ui-tabs-list-direction);
+    align-items: var(--ui-tabs-list-align);
+    width: var(--ui-tabs-list-width);
+  }
+  [data-ui-tabs-list][data-scrollable] {
+    overflow-x: auto;
+  }
+  [data-ui-tabs-list][data-variant="segmented"] {
+    padding: var(--spacing-0\.5);
+    border-radius: var(--radius-surface-sm);
+  }
+  [data-ui-tabs-list][data-orientation="horizontal"] {
+    --ui-tabs-list-direction: row;
+    --ui-tabs-list-align: center;
+    --ui-tabs-list-width: auto;
+    --ui-tabs-line-gap: var(--spacing-4);
+    --ui-tabs-line-indicator-height: 2px;
+    --ui-tabs-line-indicator-inset: auto 0 0;
+    --ui-tabs-line-indicator-width: auto;
+    --ui-tabs-line-tab-padding: 0;
+    --ui-tabs-tab-justify: center;
+    --ui-tabs-tab-width: auto;
+  }
+  [data-ui-tabs-list][data-orientation="vertical"] {
+    --ui-tabs-list-direction: column;
+    --ui-tabs-list-align: stretch;
+    --ui-tabs-list-width: 100%;
+    --ui-tabs-line-gap: var(--spacing-1);
+    --ui-tabs-line-indicator-height: auto;
+    --ui-tabs-line-indicator-inset: 0 auto 0 0;
+    --ui-tabs-line-indicator-width: 2px;
+    --ui-tabs-line-tab-padding: var(--spacing-2);
+    --ui-tabs-tab-justify: flex-start;
+    --ui-tabs-tab-width: 100%;
+  }
+  [data-ui-tabs-list][data-gap="auto"][data-variant="subtle"], [data-ui-tabs-list][data-gap="auto"][data-variant="pills"] {
+    gap: var(--spacing-1);
+  }
+  [data-ui-tabs-list][data-gap="auto"][data-variant="segmented"] {
+    gap: var(--spacing-0\.5);
+  }
+  [data-ui-tabs-list][data-gap="auto"][data-variant="line"] {
+    gap: var(--ui-tabs-line-gap);
+  }
+  [data-ui-tabs-list] > [data-ui-tabs-tab] {
+    width: var(--ui-tabs-tab-width);
+    justify-content: var(--ui-tabs-tab-justify);
+    font-family: var(--font-control);
+  }
+  [data-ui-tabs-list][data-size="sm"] > [data-ui-tabs-tab] {
+    height: var(--spacing-control-sm);
+    font-size: var(--text-control-sm);
+    line-height: var(--text-control-sm--line-height);
+    letter-spacing: var(--text-control-sm--letter-spacing);
+    font-weight: var(--font-weight-control-sm);
+  }
+  [data-ui-tabs-list][data-size="md"] > [data-ui-tabs-tab] {
+    height: var(--spacing-control-md);
+    font-size: var(--text-control-md);
+    line-height: var(--text-control-md--line-height);
+    letter-spacing: var(--text-control-md--letter-spacing);
+    font-weight: var(--font-weight-control-md);
+  }
+  [data-ui-tabs-list][data-variant="subtle"] > [data-ui-tabs-tab] {
+    padding-inline: var(--spacing-2);
+    border-radius: var(--radius-control-sm);
+  }
+  [data-ui-tabs-list][data-variant="line"] > [data-ui-tabs-tab] {
+    padding-inline: var(--ui-tabs-line-tab-padding);
+    border-radius: 0;
+  }
+  [data-ui-tabs-list][data-variant="segmented"] > [data-ui-tabs-tab] {
+    padding-inline: var(--spacing-3);
+    border-radius: var(--radius-control-sm);
+  }
+  [data-ui-tabs-list][data-variant="pills"] > [data-ui-tabs-tab] {
+    padding-inline: var(--spacing-3);
+    border-radius: var(--radius-full);
+  }
+  [data-ui-tabs-list][data-variant="subtle"] > [data-ui-tabs-indicator], [data-ui-tabs-list][data-variant="segmented"] > [data-ui-tabs-indicator] {
+    border-radius: var(--radius-control-sm);
+  }
+  [data-ui-tabs-list][data-variant="pills"] > [data-ui-tabs-indicator] {
+    border-radius: var(--radius-full);
+  }
+  [data-ui-tabs-list]:not([data-ui-tabs-ready]) > [data-ui-tabs-tab][data-selected]::before {
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--color-interaction-selected);
+    pointer-events: none;
+    content: "";
+  }
+  [data-ui-tabs-list][data-variant="line"]:not([data-ui-tabs-ready]) > [data-ui-tabs-tab][data-selected]::before {
+    inset: var(--ui-tabs-line-indicator-inset);
+    width: var(--ui-tabs-line-indicator-width);
+    height: var(--ui-tabs-line-indicator-height);
+    border-radius: 0;
+    background-color: var(--color-intent-accent-solid);
+  }
+  [data-ui-tabs-list][data-variant="segmented"]:not([data-ui-tabs-ready]) > [data-ui-tabs-tab][data-selected]::before {
+    inset: var(--border-width-edge-control);
+    background-color: var(--ui-surface-color);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+  }
+  @media (min-width: 768px) {
+    [data-ui-tabs][data-orientation="horizontal"] {
+      grid-template-columns: none;
+      align-items: normal;
+    }
+    [data-ui-tabs][data-orientation="vertical"] {
+      grid-template-columns: max-content minmax(0, 1fr);
+      align-items: start;
+    }
+  }
+}
 @media (hover: hover) {
   [data-ui-elevation][data-ui-interactive="surface"]:hover {
     --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-neutral-edge-hover);