@vireo-ai/trellis-ui 0.1.42 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",

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

@@ -22,9 +22,12 @@
 }
 @layer components {
   /* Field control treatment. */
-[data-ui-control][data-ui-control-recipe="field"] {
+  [data-ui-control][data-ui-control-recipe="field"] {
     color: inherit;
     background-color: transparent;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"] {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
   }
 
@@ -33,15 +36,15 @@
     box-shadow: none;
   }
 
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     background-color: var(--color-interaction-pressed);
   }
 
-  [data-ui-control][data-ui-control-recipe="field"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
   }
 
-  [data-ui-control][data-ui-control-recipe="field"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow:
       0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
       0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);

package/packages/client/types/components/common.d.ts

@@ -1,5 +1,5 @@
 declare const CONTROL_SIZES: readonly ["xs", "sm", "md", "lg", "xlg"];
-declare const CONTROL_VARIANTS: readonly ["outline", "filled"];
+declare const CONTROL_VARIANTS: readonly ["outline", "filled", "plain"];
 declare const ICON_VARIANTS: readonly ["outline", "solid", "mini", "micro"];
 declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
 declare const ALIGNMENTS: readonly ["start", "center", "end"];

package/packages/client/types/components/input/contract.d.ts

@@ -1,7 +1,7 @@
 import { type SchemaToProps } from '../../runtime';
 import { type ComponentRadius, type ControlSize, type ControlVariant, type IconVariant } from '../common';
 declare const INPUT_SIZES: readonly ["xs", "sm", "md", "lg", "xlg"];
-declare const INPUT_VARIANTS: readonly ["outline", "filled"];
+declare const INPUT_VARIANTS: readonly ["outline", "filled", "plain"];
 declare const INPUT_RADII: readonly ["none", "xs", "sm", "md", "lg", "full"];
 declare const INPUT_ICON_VARIANTS: readonly ["outline", "solid", "mini", "micro"];
 type InputSize = ControlSize;
@@ -14,7 +14,7 @@ declare const inputSchema: {
     value: import("../../runtime/codecs").StringCodec;
     placeholder: import("../../runtime/codecs").StringCodec;
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
-    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled" | "plain">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
     disabled: import("../../runtime/codecs").BoolCodec;
     readonly: import("../../runtime/codecs").BoolCodec;
@@ -34,7 +34,7 @@ declare const inputSchema: {
 };
 declare const inputGroupSchema: {
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
-    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled" | "plain">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
     label: import("../../runtime/codecs").StringCodec;
     description: import("../../runtime/codecs").StringCodec;

package/packages/client/types/components/select/contract.d.ts

@@ -2,7 +2,7 @@ import { type SchemaToProps } from '../../runtime';
 import { type Alignment, type ComponentRadius, type ControlSize, type ControlVariant, type ElevationReference, type IconVariant, type Position, type SurfaceReference } from '../common';
 import { BADGE_COLORS, BADGE_VARIANTS, type BadgeColor, type BadgeVariant } from '../badge/contract';
 declare const SELECT_MODES: readonly ["listbox", "combobox", "pillbox", "native"];
-declare const SELECT_VARIANTS: readonly ["outline", "filled"];
+declare const SELECT_VARIANTS: readonly ["outline", "filled", "plain"];
 declare const SELECT_SIZES: readonly ["xs", "sm", "md", "lg", "xlg"];
 declare const SELECT_RADII: readonly ["none", "xs", "sm", "md", "lg", "full"];
 declare const SELECT_SIDES: readonly ["bottom", "top", "left", "right"];
@@ -58,7 +58,7 @@ declare const selectSchema: {
     loop: import("../../runtime/codecs").BoolCodec;
     path: import("../../runtime/codecs").StringCodec;
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
-    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled" | "plain">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
     surface: import("../../runtime/codecs").OneOfCodec<"inherit" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
     elevation: import("../../runtime/codecs").OneOfCodec<"match" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "none">;

package/packages/client/types/components/select/machine.d.ts

@@ -95,7 +95,7 @@ declare const selectHooks: readonly [{
             loop: import("../../runtime/codecs").BoolCodec;
             path: import("../../runtime/codecs").StringCodec;
             size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
-            variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+            variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled" | "plain">;
             radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
             surface: import("../../runtime/codecs").OneOfCodec<"inherit" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
             elevation: import("../../runtime/codecs").OneOfCodec<"match" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "none">;
@@ -172,7 +172,7 @@ declare const selectHooks: readonly [{
             loop: import("../../runtime/codecs").BoolCodec;
             path: import("../../runtime/codecs").StringCodec;
             size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
-            variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+            variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled" | "plain">;
             radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
             surface: import("../../runtime/codecs").OneOfCodec<"inherit" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
             elevation: import("../../runtime/codecs").OneOfCodec<"match" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "none">;

package/packages/client/types/components/textarea/contract.d.ts

@@ -6,7 +6,7 @@ declare const textareaSchema: {
     value: import("../../runtime/codecs").StringCodec;
     placeholder: import("../../runtime/codecs").StringCodec;
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
-    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled">;
+    variant: import("../../runtime/codecs").OneOfCodec<"outline" | "filled" | "plain">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
     rows: import("../../runtime/codecs").NumberCodec;
     resize: import("../../runtime/codecs").OneOfCodec<"none" | "vertical" | "horizontal" | "both">;

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

@@ -10566,19 +10566,21 @@
   [data-ui-control][data-ui-control-recipe="field"] {
     color: inherit;
     background-color: transparent;
+  }
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"] {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
   }
   [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"] {
     background-color: var(--color-interaction-hover);
     box-shadow: none;
   }
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     background-color: var(--color-interaction-pressed);
   }
-  [data-ui-control][data-ui-control-recipe="field"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
   }
-  [data-ui-control][data-ui-control-recipe="field"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong), 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
   [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {