@vireo-ai/trellis-ui 0.1.2 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -43,20 +43,17 @@
     "alpinejs": "^3.14.8",
     "cally": "^0.9.2",
     "clsx": "^2.1.1",
+    "event-source-plus": "^0.1.15",
     "motion": "^12.42.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.61.0",
     "@tailwindcss/cli": "^4.0.0",
-    "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.2",
     "@types/alpinejs": "^3.13.11",
     "@types/node": "^25.9.3",
-    "@types/prismjs": "^1.26.6",
-    "event-source-plus": "^0.1.15",
     "jsdom": "^29.1.1",
-    "prismjs": "^1.30.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",

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

@@ -18,6 +18,7 @@
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
+    --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: 1rem;
@@ -95,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;
@@ -179,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);
@@ -684,6 +688,12 @@
   .-mr-4 {
     margin-right: calc(var(--spacing-4) * -1);
   }
+  .mr-0 {
+    margin-right: var(--spacing-0);
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
   .-mb-1 {
     margin-bottom: calc(var(--spacing-1) * -1);
   }
@@ -714,6 +724,9 @@
   .-ml-px {
     margin-left: -1px;
   }
+  .ml-0 {
+    margin-left: var(--spacing-0);
+  }
   .ml-2 {
     margin-left: var(--spacing-2);
   }
@@ -1109,6 +1122,9 @@
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
@@ -1240,6 +1256,9 @@
   .cursor-grab {
     cursor: grab;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1261,12 +1280,30 @@
   .scroll-mt-6 {
     scroll-margin-top: var(--spacing-6);
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .list-none {
     list-style-type: none;
   }
   .appearance-none {
     appearance: none;
   }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+  .grid-flow-dense {
+    grid-auto-flow: dense;
+  }
+  .grid-flow-row {
+    grid-auto-flow: row;
+  }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
   .auto-rows-min {
     grid-auto-rows: min-content;
   }
@@ -1288,6 +1325,24 @@
   .grid-cols-\[minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0,1fr) auto;
   }
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+  .grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+  .grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+  .grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
   .grid-rows-\[auto_auto_minmax\(0\,1fr\)_auto\] {
     grid-template-rows: auto auto minmax(0,1fr) auto;
   }
@@ -1297,21 +1352,45 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
   .place-items-center {
     place-items: center;
   }
+  .content-between {
+    align-content: space-between;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .content-end {
+    align-content: flex-end;
+  }
   .content-start {
     align-content: flex-start;
   }
+  .content-stretch {
+    align-content: stretch;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -1915,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;
   }
@@ -2573,11 +2655,6 @@
       cursor: grabbing;
     }
   }
-  .disabled\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -2659,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] {
-      cursor: not-allowed;
+      background-color: var(--color-border-interactive);
+    }
+  }
+  .data-disabled\:bg-control-disabled {
+    &[data-disabled] {
+      background-color: var(--color-control-disabled);
+    }
+  }
+  .data-disabled\:bg-control-hover {
+    &[data-disabled] {
+      background-color: var(--color-control-hover);
     }
   }
   .data-disabled\:bg-surface-panel {
@@ -2669,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%;
@@ -2679,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);
@@ -2719,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);
@@ -2729,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));
@@ -2757,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);
@@ -2901,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);
@@ -3681,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);
@@ -3741,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);
   }
@@ -3868,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);
   }
@@ -4483,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)) {
@@ -4498,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);
@@ -4542,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);
@@ -4717,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;