Remove explicit class prop

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `aria-expanded` logic ([#592](https://github.com/tailwindlabs/headlessui/pull/592))
 - Remove undocumented `:className` prop ([#607](https://github.com/tailwindlabs/headlessui/pull/607))
 - Improve types for `Listbox` component ([#576](https://github.com/tailwindlabs/headlessui/pull/576))
+- Remove explicit `:class` prop ([#608](https://github.com/tailwindlabs/headlessui/pull/608))
 
 ## [Unreleased - Vue]
 

packages/@headlessui-vue/src/components/listbox/listbox.ts

@@ -472,7 +472,6 @@ export let ListboxOption = defineComponent({
  as: { type: [Object, String], default: 'li' },
  value: { type: [Object, String, Number, Boolean] },
  disabled: { type: Boolean, default: false },
- class: { type: [String, Function], required: false },
  },
  setup(props, { slots, attrs }) {
  let api = useListboxContext('ListboxOption')
@@ -546,13 +545,12 @@ export let ListboxOption = defineComponent({
  }
 
  return () => {
- let { disabled, class: defaultClass } = props
+ let { disabled } = props
  let slot = { active: active.value, selected: selected.value, disabled }
  let propsWeControl = {
  id,
  role: 'option',
  tabIndex: disabled === true ? undefined : -1,
- class: defaultClass,
  'aria-disabled': disabled === true ? true : undefined,
  'aria-selected': selected.value === true ? selected.value : undefined,
  disabled: undefined, // Never forward the `disabled` prop

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -411,7 +411,6 @@ export let MenuItem = defineComponent({
  props: {
  as: { type: [Object, String], default: 'template' },
  disabled: { type: Boolean, default: false },
- class: { type: [String, Function], required: false },
  },
  setup(props, { slots, attrs }) {
  let api = useMenuContext('MenuItem')
@@ -465,13 +464,12 @@ export let MenuItem = defineComponent({
  }
 
  return () => {
- let { disabled, class: defaultClass } = props
+ let { disabled } = props
  let slot = { active: active.value, disabled }
  let propsWeControl = {
  id,
  role: 'menuitem',
  tabIndex: disabled === true ? undefined : -1,
- class: defaultClass,
  'aria-disabled': disabled === true ? true : undefined,
  onClick: handleClick,
  onFocus: handleFocus,

packages/@headlessui-vue/src/components/radio-group/radio-group.ts

@@ -232,10 +232,9 @@ export let RadioGroupOption = defineComponent({
  as: { type: [Object, String], default: 'div' },
  value: { type: [Object, String, Number, Boolean] },
  disabled: { type: Boolean, default: false },
- class: { type: [String, Function], required: false },
  },
  render() {
- let { value, disabled, class: defaultClass, ...passThroughProps } = this.$props
+ let { value, disabled, ...passThroughProps } = this.$props
 
  let slot = {
  checked: this.checked,
@@ -247,7 +246,6 @@ export let RadioGroupOption = defineComponent({
  id: this.id,
  ref: 'el',
  role: 'radio',
- class: defaultClass,
  'aria-checked': this.checked ? 'true' : 'false',
  'aria-labelledby': this.labelledby,
  'aria-describedby': this.describedby,

packages/@headlessui-vue/src/components/switch/switch.ts

@@ -61,19 +61,16 @@ export let Switch = defineComponent({
  props: {
  as: { type: [Object, String], default: 'button' },
  modelValue: { type: Boolean, default: false },
- class: { type: [String, Function], required: false },
  },
  render() {
  let api = inject(GroupContext, null)
- let { class: defaultClass } = this.$props
 
  let slot = { checked: this.$props.modelValue }
  let propsWeControl = {
  id: this.id,
  ref: api === null ? undefined : api.switchRef,
  role: 'switch',
  tabIndex: 0,
- class: defaultClass,
  'aria-checked': this.$props.modelValue,
  'aria-labelledby': this.labelledby,
  'aria-describedby': this.describedby,