aria-disabled for Select

app/components/ruby_ui/select/select_item.rb

@@ -37,15 +37,24 @@ def default_attrs
       {
         role: "option",
         tabindex: "0",
-        class: "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data_value: @value,
+        aria_selected: "false",
+        data_orientation: "vertical",
+        class: [
+          "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+          "focus:bg-accent focus:text-accent-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+        ],
         data: {
           controller: "ruby-ui--select-item",
           action: "click->ruby-ui--select#selectItem keydown.enter->ruby-ui--select#selectItem keydown.down->ruby-ui--select#handleKeyDown keydown.up->ruby-ui--select#handleKeyUp keydown.esc->ruby-ui--select#handleEsc",
           ruby_ui__select_target: "item"
-        },
-        data_value: @value,
-        data_orientation: "vertical",
-        aria_selected: "false"
+        }
+
       }
     end
   end

app/components/ruby_ui/select/select_trigger.rb

@@ -33,21 +33,26 @@ def icon
 
     def default_attrs
       {
+        type: "button",
+        role: "combobox",
         data: {
           action: "ruby-ui--select#onClick",
           ruby_ui__select_target: "trigger"
         },
-        type: "button",
-        role: "combobox",
         aria: {
           controls: "radix-:r0:",
           expanded: "false",
           autocomplete: "none",
           haspopup: "listbox",
           activedescendant: true
         },
-        class:
-          "truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        class: [
+          "truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
+          "placeholder:text-muted-foreground",
+          "focus:outline-none focus:ring-1 focus:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ]
       }
     end
   end

app/views/docs/select.rb

@@ -11,20 +11,88 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do
         <<~RUBY
-          div(class: 'w-56 flex items-center justify-center') do
-            Select do
-              SelectInput(value: "apple", id: "select-a-fruit")
-              SelectTrigger do
-                SelectValue(placeholder: 'Select a fruit', id: "select-a-fruit") { "Apple" }
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger(disabled: true) do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Data Disabled", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(data: {disabled: true}, value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(data: {disabled: true}, value: "watermelon") { "Watermelon" }
               end
-              SelectContent(outlet_id: "select-a-fruit") do
-                SelectGroup do
-                  SelectLabel { "Fruits" }
-                  SelectItem(value: "apple") { "Apple" }
-                  SelectItem(value: "orange") { "Orange" }
-                  SelectItem(value: "banana") { "Banana" }
-                  SelectItem(value: "watermelon") { "Watermelon" }
-                end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled Trigger", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger(aria: {disabled: "true"}) do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled Item", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(aria: {disabled: "true"}, value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(aria: {disabled: "true"}, value: "watermelon") { "Watermelon" }
               end
             end
           end