Standardize disabled state styling

[ravisuhag]

Summary

Interactive components handle disabled states inconsistently — some have no disabled styles at all, others use different approaches (opacity, color changes, cursor). There is no unified pattern for how disabled components should look and behave.

Goal

Define and apply a consistent disabled state pattern across all interactive components.

Affected Components

Component	Issue	Details
Slider (#639)	item 2	No :disabled or [aria-disabled] styles at all
Radio (#630)	item 7	Different colors for disabled — inconsistent with Checkbox's opacity approach
Link (#625)	item 6	No :disabled or :visited styling
Button (#601)	item 4	disabled in both CVA and HTML — could derive from CSS :disabled
Breadcrumb (#600)	item 5	No disabled state for non-current items
Checkbox (#604)	item 20	Disabled hover resets background, visually "unchecking" a disabled-checked checkbox

Proposed Standard

/* Base disabled pattern for all interactive components */
[data-disabled],
:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* or auto if consumers need click interception */
}

Variations:

• Form controls (Checkbox, Radio, Switch, Slider): reduced opacity + not-allowed cursor
• Buttons: reduced opacity + not-allowed cursor + preserve visual variant
• Links: reduced opacity + no underline on hover
• Compound components: disabled state propagates to children (e.g., disabled Combobox disables input + chips)

Acceptance Criteria

• All interactive components have visible disabled state
• Consistent use of opacity/cursor/pointer-events
• Disabled state doesn't break checked/active visual states
• Pattern documented in design system docs