@vireo-ai/trellis-ui 0.1.4 → 0.1.5

package/package.json

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

package/src/components/date-picker/styles.css

@@ -19,6 +19,15 @@
     --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
   }
 
+  [data-ui-date-picker-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-date-picker-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
     --ui-control-shadow: var(--ui-control-shadow-hover);
   }

package/src/components/select/styles.css

@@ -27,6 +27,15 @@
     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);
   }

package/src/theme.css

@@ -116,6 +116,7 @@
   --shadow-modal: var(--ui-modal-shadow);
   --shadow-inset: inset 0 1px 1px rgb(0 0 0 / 0.04);
   --shadow-control: var(--ui-control-shadow);
+  --shadow-control-disabled: var(--ui-control-shadow-disabled);
   --shadow-focus: 0 0 0 3px var(--color-focus-a4);
   --shadow-danger-focus: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
 
@@ -285,8 +286,11 @@
   --color-control: var(--ui-control-bg);
   --color-control-hover: var(--ui-control-bg-hover);
   --color-control-active: var(--ui-control-bg-active);
+  --color-control-disabled: var(--ui-control-bg-disabled);
   --color-control-fg: var(--ui-control-fg);
+  --color-control-disabled-fg: var(--ui-control-fg-disabled);
   --color-control-placeholder: var(--ui-control-placeholder);
+  --color-control-placeholder-disabled: var(--ui-control-placeholder-disabled);
   --color-control-border: var(--ui-control-border);
   --color-control-border-focus: var(--ui-control-border-focus);
   --color-control-border-invalid: var(--ui-control-border-invalid);
@@ -432,8 +436,11 @@
   --ui-control-bg: var(--color-surface-panel);
   --ui-control-bg-hover: var(--color-base-a2);
   --ui-control-bg-active: var(--color-base-a3);
+  --ui-control-bg-disabled: var(--color-surface-panel);
   --ui-control-fg: var(--color-foreground);
+  --ui-control-fg-disabled: var(--color-foreground-subtle);
   --ui-control-placeholder: var(--color-foreground-subtle);
+  --ui-control-placeholder-disabled: var(--color-foreground-subtle);
   --ui-control-border: var(--color-border);
   --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 90%, var(--ui-fg) 10%);
   --ui-control-border-focus: var(--color-accent-9);
@@ -441,6 +448,7 @@
   --ui-control-border-invalid-hover: color-mix(in srgb, var(--ui-control-border-invalid) 84%, var(--color-danger-text) 16%);
   --ui-control-border-invalid-focus: var(--color-danger-9);
   --ui-control-shadow: var(--ui-shadow-border);
+  --ui-control-shadow-disabled: var(--ui-shadow-border);
   --ui-control-shadow-hover: 0 0 0 1px var(--ui-control-border-hover);
   --ui-control-shadow-focus: 0 0 0 1px var(--ui-control-border-focus);
   --ui-control-shadow-invalid: 0 0 0 1px var(--ui-control-border-invalid);
@@ -490,8 +498,11 @@
   --color-control: var(--ui-control-bg);
   --color-control-hover: var(--ui-control-bg-hover);
   --color-control-active: var(--ui-control-bg-active);
+  --color-control-disabled: var(--ui-control-bg-disabled);
   --color-control-fg: var(--ui-control-fg);
+  --color-control-disabled-fg: var(--ui-control-fg-disabled);
   --color-control-placeholder: var(--ui-control-placeholder);
+  --color-control-placeholder-disabled: var(--ui-control-placeholder-disabled);
   --color-control-border: var(--ui-control-border);
   --color-control-border-focus: var(--ui-control-border-focus);
   --color-control-border-invalid: var(--ui-control-border-invalid);
@@ -683,16 +694,16 @@
     --ui-control-shadow: var(--ui-control-shadow-focus);
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid] {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid] {
     --ui-control-shadow: var(--ui-control-shadow-invalid);
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
     --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:focus-within:not([data-disabled]),
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid][data-state="open"]:not([data-disabled]) {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid]:focus-within:not([data-disabled]),
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid][data-state="open"]:not([data-disabled]) {
     --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
     box-shadow: var(--shadow-danger-focus);
   }
@@ -700,6 +711,27 @@
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):has(:focus-visible):not([data-invalid]) {
     box-shadow: var(--shadow-control), var(--shadow-focus);
   }
+
+  [data-ui-control][data-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-control][data-disabled] :is(input, select, textarea, button):disabled {
+    color: var(--ui-control-fg-disabled);
+    opacity: 1;
+    -webkit-text-fill-color: var(--ui-control-fg-disabled);
+  }
+
+  [data-ui-control][data-disabled] :is(input, textarea):disabled::placeholder {
+    color: var(--ui-control-placeholder-disabled);
+    opacity: 1;
+    -webkit-text-fill-color: var(--ui-control-placeholder-disabled);
+  }
 }
 
 .dark {

package/trellis_ui/static/trellis_ui/css/styles.css

@@ -96,6 +96,7 @@
     --shadow-popover: var(--ui-popover-shadow);
     --shadow-modal: var(--ui-modal-shadow);
     --shadow-control: var(--ui-control-shadow);
+    --shadow-control-disabled: var(--ui-control-shadow-disabled);
     --shadow-focus: 0 0 0 3px var(--color-focus-a4);
     --shadow-danger-focus: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
     --container-reading: 42rem;
@@ -180,7 +181,9 @@
     --color-control: var(--ui-control-bg);
     --color-control-hover: var(--ui-control-bg-hover);
     --color-control-active: var(--ui-control-bg-active);
+    --color-control-disabled: var(--ui-control-bg-disabled);
     --color-control-fg: var(--ui-control-fg);
+    --color-control-disabled-fg: var(--ui-control-fg-disabled);
     --color-control-placeholder: var(--ui-control-placeholder);
     --color-control-border: var(--ui-control-border);
     --color-control-border-focus: var(--ui-control-border-focus);
@@ -1253,6 +1256,9 @@
   .cursor-grab {
     cursor: grab;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1274,6 +1280,9 @@
   .scroll-mt-6 {
     scroll-margin-top: var(--spacing-6);
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .list-none {
     list-style-type: none;
   }
@@ -1985,6 +1994,9 @@
   .\!pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5) !important;
   }
+  .pl-5 {
+    padding-left: var(--spacing-5);
+  }
   .text-center {
     text-align: center;
   }
@@ -2643,11 +2655,6 @@
       cursor: grabbing;
     }
   }
-  .disabled\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -2729,9 +2736,24 @@
       display: none;
     }
   }
-  .data-disabled\:cursor-not-allowed {
+  .data-disabled\:border-border {
+    &[data-disabled] {
+      border-color: var(--color-border);
+    }
+  }
+  .data-disabled\:bg-border-interactive {
+    &[data-disabled] {
+      background-color: var(--color-border-interactive);
+    }
+  }
+  .data-disabled\:bg-control-disabled {
     &[data-disabled] {
-      cursor: not-allowed;
+      background-color: var(--color-control-disabled);
+    }
+  }
+  .data-disabled\:bg-control-hover {
+    &[data-disabled] {
+      background-color: var(--color-control-hover);
     }
   }
   .data-disabled\:bg-surface-panel {
@@ -2739,6 +2761,11 @@
       background-color: var(--color-surface-panel);
     }
   }
+  .data-disabled\:text-control-disabled-fg {
+    &[data-disabled] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
   .data-disabled\:opacity-50 {
     &[data-disabled] {
       opacity: 50%;
@@ -2749,15 +2776,58 @@
       opacity: 60%;
     }
   }
-  .data-disabled\:hover\:bg-surface-panel {
+  .data-disabled\:shadow-control-disabled {
+    &[data-disabled] {
+      --tw-shadow: var(--ui-control-shadow-disabled);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .data-disabled\:ring-border {
+    &[data-disabled] {
+      --tw-ring-color: var(--color-border);
+    }
+  }
+  .data-disabled\:hover\:bg-control-disabled {
+    &[data-disabled] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-control-disabled);
+        }
+      }
+    }
+  }
+  .data-disabled\:hover\:bg-control-hover {
     &[data-disabled] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-surface-panel);
+          background-color: var(--color-control-hover);
         }
       }
     }
   }
+  .data-disabled\:hover\:text-control-disabled-fg {
+    &[data-disabled] {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-control-disabled-fg);
+        }
+      }
+    }
+  }
+  .data-disabled\:data-checked\:border-border {
+    &[data-disabled] {
+      &[data-checked] {
+        border-color: var(--color-border);
+      }
+    }
+  }
+  .data-disabled\:data-checked\:bg-control-disabled {
+    &[data-disabled] {
+      &[data-checked] {
+        background-color: var(--color-control-disabled);
+      }
+    }
+  }
   .data-dragging\:bg-base-a3 {
     &[data-dragging] {
       background-color: var(--color-base-a3);
@@ -2789,6 +2859,20 @@
       opacity: 100%;
     }
   }
+  .data-disabled\:data-indeterminate\:border-border {
+    &[data-disabled] {
+      &[data-indeterminate] {
+        border-color: var(--color-border);
+      }
+    }
+  }
+  .data-disabled\:data-indeterminate\:bg-control-disabled {
+    &[data-disabled] {
+      &[data-indeterminate] {
+        background-color: var(--color-control-disabled);
+      }
+    }
+  }
   .data-invalid\:border-control-border-invalid {
     &[data-invalid] {
       border-color: var(--color-control-border-invalid);
@@ -2799,6 +2883,17 @@
       border-color: var(--color-danger-border);
     }
   }
+  .data-invalid\:bg-danger-solid {
+    &[data-invalid] {
+      background-color: var(--color-danger-solid);
+    }
+  }
+  .data-invalid\:shadow-control {
+    &[data-invalid] {
+      --tw-shadow: var(--ui-control-shadow);
+      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-danger-focus {
     &[data-invalid] {
       --tw-shadow: var(--shadow-control), 0 0 0 3px var(--tw-shadow-color, var(--color-danger-a4));
@@ -2827,6 +2922,34 @@
       }
     }
   }
+  .data-invalid\:data-checked\:border-danger-border {
+    &[data-invalid] {
+      &[data-checked] {
+        border-color: var(--color-danger-border);
+      }
+    }
+  }
+  .data-invalid\:data-checked\:bg-danger-solid {
+    &[data-invalid] {
+      &[data-checked] {
+        background-color: var(--color-danger-solid);
+      }
+    }
+  }
+  .data-invalid\:data-checked\:text-danger-text {
+    &[data-invalid] {
+      &[data-checked] {
+        color: var(--color-danger-text);
+      }
+    }
+  }
+  .data-invalid\:data-indeterminate\:border-danger-border {
+    &[data-invalid] {
+      &[data-indeterminate] {
+        border-color: var(--color-danger-border);
+      }
+    }
+  }
   .data-resizing\:bg-border-interactive {
     &[data-resizing] {
       background-color: var(--color-border-interactive);
@@ -2971,6 +3094,11 @@
       grid-auto-flow: column;
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:grid-cols-\[max-content_minmax\(0\,1fr\)\] {
     @media (width >= 48rem) {
       grid-template-columns: max-content minmax(0,1fr);
@@ -3751,6 +3879,62 @@
       width: auto;
     }
   }
+  .\[\&\[data-disabled\]_\[data-ui-checkbox-description\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-checkbox-description] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-file-upload-browse\]\]\:bg-control-disabled {
+    &[data-disabled] [data-ui-file-upload-browse] {
+      background-color: var(--color-control-disabled);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-file-upload-browse\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-file-upload-browse] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-file-upload-browse\]\]\:shadow-control-disabled {
+    &[data-disabled] [data-ui-file-upload-browse] {
+      --tw-shadow: var(--ui-control-shadow-disabled);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-file-upload-heading\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-file-upload-heading] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-file-upload-text\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-file-upload-text] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-radio-description\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-radio-description] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-slider-tick-label\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-slider-tick-label] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-slider-tick\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-slider-tick] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-slider-value\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-slider-value] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
+  .\[\&\[data-disabled\]_\[data-ui-switch-description\]\]\:text-control-disabled-fg {
+    &[data-disabled] [data-ui-switch-description] {
+      color: var(--color-control-disabled-fg);
+    }
+  }
   .\[\[data-ui-text\]\+\&\]\:mt-2 {
     [data-ui-text]+& {
       margin-top: var(--spacing-2);
@@ -3811,6 +3995,14 @@
   [data-ui-select][data-mark="none"] [data-ui-select-option-indicator] {
     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);
   }
@@ -3938,6 +4130,14 @@
     --ui-date-picker-range-bg: var(--color-accent-surface);
     --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
   }
+  [data-ui-date-picker-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-date-picker-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
     --ui-control-shadow: var(--ui-control-shadow-hover);
   }
@@ -4553,8 +4753,11 @@
   --ui-control-bg: var(--color-surface-panel);
   --ui-control-bg-hover: var(--color-base-a2);
   --ui-control-bg-active: var(--color-base-a3);
+  --ui-control-bg-disabled: var(--color-surface-panel);
   --ui-control-fg: var(--color-foreground);
+  --ui-control-fg-disabled: var(--color-foreground-subtle);
   --ui-control-placeholder: var(--color-foreground-subtle);
+  --ui-control-placeholder-disabled: var(--color-foreground-subtle);
   --ui-control-border: var(--color-border);
   --ui-control-border-hover: var(--ui-control-border);
   @supports (color: color-mix(in lab, red, red)) {
@@ -4568,6 +4771,7 @@
   }
   --ui-control-border-invalid-focus: var(--color-danger-9);
   --ui-control-shadow: var(--ui-shadow-border);
+  --ui-control-shadow-disabled: var(--ui-shadow-border);
   --ui-control-shadow-hover: 0 0 0 1px var(--ui-control-border-hover);
   --ui-control-shadow-focus: 0 0 0 1px var(--ui-control-border-focus);
   --ui-control-shadow-invalid: 0 0 0 1px var(--ui-control-border-invalid);
@@ -4612,8 +4816,11 @@
   --color-control: var(--ui-control-bg);
   --color-control-hover: var(--ui-control-bg-hover);
   --color-control-active: var(--ui-control-bg-active);
+  --color-control-disabled: var(--ui-control-bg-disabled);
   --color-control-fg: var(--ui-control-fg);
+  --color-control-disabled-fg: var(--ui-control-fg-disabled);
   --color-control-placeholder: var(--ui-control-placeholder);
+  --color-control-placeholder-disabled: var(--ui-control-placeholder-disabled);
   --color-control-border: var(--ui-control-border);
   --color-control-border-focus: var(--ui-control-border-focus);
   --color-control-border-invalid: var(--ui-control-border-invalid);
@@ -4787,19 +4994,37 @@
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):focus-within:not([data-invalid]), [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-state="open"]:not([data-invalid]) {
     --ui-control-shadow: var(--ui-control-shadow-focus);
   }
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid] {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid] {
     --ui-control-shadow: var(--ui-control-shadow-invalid);
   }
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
     --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
   }
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:focus-within:not([data-disabled]), [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid][data-state="open"]:not([data-disabled]) {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid]:focus-within:not([data-disabled]), [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid][data-state="open"]:not([data-disabled]) {
     --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
     box-shadow: var(--shadow-danger-focus);
   }
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):has(:focus-visible):not([data-invalid]) {
     box-shadow: var(--shadow-control), var(--shadow-focus);
   }
+  [data-ui-control][data-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-control][data-disabled] :is(input, select, textarea, button):disabled {
+    color: var(--ui-control-fg-disabled);
+    opacity: 1;
+    -webkit-text-fill-color: var(--ui-control-fg-disabled);
+  }
+  [data-ui-control][data-disabled] :is(input, textarea):disabled::placeholder {
+    color: var(--ui-control-placeholder-disabled);
+    opacity: 1;
+    -webkit-text-fill-color: var(--ui-control-placeholder-disabled);
+  }
 }
 .dark {
   color-scheme: dark;