@vireo-ai/trellis-ui 0.1.9 → 0.1.11

package/packages/client/src/components/scroll-area/styles.css

@@ -1,8 +1,4 @@
 @layer components {
-  [data-ui-scroll-area][data-size="md"] {
-    --ui-scrollbar-size: 0.5rem;
-  }
-
   [data-ui-scroll-area-viewport] {
     max-height: inherit;
     max-width: inherit;

package/packages/client/src/components/select/styles.css

@@ -27,34 +27,4 @@
     display: none;
   }
 
-  [data-ui-select-native]:disabled {
-    --ui-control-bg: var(--ui-control-bg-disabled);
-    --ui-control-bg-hover: var(--ui-control-bg-disabled);
-    --ui-control-bg-active: var(--ui-control-bg-disabled);
-    --ui-control-fg: var(--ui-control-fg-disabled);
-    --ui-control-placeholder: var(--ui-control-placeholder-disabled);
-    --ui-control-shadow: var(--ui-control-shadow-disabled);
-  }
-
-  [data-ui-select-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
-    --ui-control-shadow: var(--ui-control-shadow-hover);
-  }
-
-  [data-ui-select-native]:focus:not([aria-invalid="true"]) {
-    --ui-control-shadow: var(--ui-control-shadow-focus);
-    box-shadow: var(--shadow-control), var(--shadow-focus);
-  }
-
-  [data-ui-select-native][aria-invalid="true"] {
-    --ui-control-shadow: var(--ui-control-shadow-invalid);
-  }
-
-  [data-ui-select-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
-  }
-
-  [data-ui-select-native][aria-invalid="true"]:focus {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
-    box-shadow: var(--shadow-danger-focus);
-  }
 }

package/packages/client/src/components/sidebar/styles.css

@@ -1,4 +1,12 @@
 @layer components {
+  [data-ui-sidebar] {
+    --ui-active-elevation-shadow-layers: var(--ui-sidebar-drawer-elevation);
+  }
+
+  [data-ui-sidebar][data-responsive-mode="desktop"][data-desktop-state="expanded"] {
+    --ui-active-elevation-shadow-layers: var(--ui-sidebar-resting-elevation);
+  }
+
   [data-ui-sidebar-state-icon] [data-ui-sidebar-state-icon-when] {
     display: none;
   }

package/packages/client/src/components/tabs/styles.css

@@ -0,0 +1,199 @@
+@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: theme(--breakpoint-md)) {
+    [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;
+    }
+  }
+}

package/packages/client/src/components/toast/styles.css

@@ -6,6 +6,8 @@
 [data-ui-toast-outlet][data-stack="collapsed"] {
   display: block;
   height: var(--ui-toast-stack-height);
+  pointer-events: auto;
+  transition: height 160ms cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 [data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] {
@@ -21,6 +23,18 @@
   transform-origin: top center;
 }
 
+[data-ui-toast][data-swipe-axis="x"] {
+  touch-action: pan-y;
+}
+
+[data-ui-toast][data-swipe-axis="y"] {
+  touch-action: pan-x;
+}
+
+[data-ui-toast][data-swiping="true"] {
+  user-select: none;
+}
+
 [data-ui-toast-outlet][data-stack="collapsed"][data-position^="bottom"] > [data-ui-toast] {
   bottom: 0;
   top: auto;
@@ -33,11 +47,4 @@
 
 [data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast] {
   height: auto;
-  opacity: 1;
-  position: relative;
-  transform: none;
-}
-
-[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast]:not(:first-child) {
-  margin-top: var(--spacing-2);
 }

package/packages/client/src/styles/components.css

@@ -19,3 +19,5 @@
 @import "../components/toast/styles.css";
 @import "../components/input/styles.css";
 @import "../components/sidebar/styles.css";
+@import "../components/panels/styles.css";
+@import "../components/tabs/styles.css";

package/packages/client/src/styles/generated/theme-fonts.css

@@ -0,0 +1,5 @@
+/* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
+/* Theme 72972b25a2870eb2; CSS 9bd56c40eb5861dd. */
+@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");
+
+@import url("https://fonts.bunny.net/css?family=fira-code:400,500,600,700&display=swap");