Member Variant: Styling parent based on a specific child's state

[sillvva]

Tailwind already has group for styling children based on the parent state. It already has peer for styling elements based on the state of sibling nodes. But it doesn't have a member selector/variant for styling a parent based on child state.

Tailwind has the following option for this currently: has-[.member:focus]:border, has-[.member:hover]:border- Styles parent with border if any child with the member class is focused or hovered.

It would be nice to have a built-in member variant similar to group and peer.

<label class="border border-neutral member-focus:border-primary member-hover:border-primary">
  <input type="text" class="member" />
  <span class="iconify mdi--magnify size-6"></span>
</label>

.member-focus\:border-primary {
  &:has(.member:is(:focus)) {
    border-color: var(--color-primary) /* var(--color-primary) */;
  }
}

This is what I've got, but it doesn't support named members like member/name.

@custom-variant member-first { &:has(.member:first-child) { @slot; } } 
@custom-variant member-last { &:has(.member:last-child) { @slot; } } 
@custom-variant member-only { &:has(.member:only-child) { @slot; } } 
@custom-variant member-odd { &:has(.member:nth-child(odd)) { @slot; } } 
@custom-variant member-even { &:has(.member:nth-child(even)) { @slot; } } 
@custom-variant member-first-of-type { &:has(.member:first-of-type) { @slot; } } 
@custom-variant member-last-of-type { &:has(.member:last-of-type) { @slot; } } 
@custom-variant member-only-of-type { &:has(.member:only-of-type) { @slot; } } 
@custom-variant member-visited { &:has(.member:visited) { @slot; } } 
@custom-variant member-target { &:has(.member:target) { @slot; } } 
@custom-variant member-open { &:has(.member:is([open], :popover-open)) { @slot; } } 
@custom-variant member-default { &:has(.member:default) { @slot; } } 
@custom-variant member-checked { &:has(.member:checked) { @slot; } } 
@custom-variant member-indeterminate { &:has(.member:indeterminate) { @slot; } } 
@custom-variant member-placeholder-shown { &:has(.member:placeholder-shown) { @slot; } } 
@custom-variant member-autofill { &:has(.member:autofill) { @slot; } } 
@custom-variant member-optional { &:has(.member:optional) { @slot; } } 
@custom-variant member-required { &:has(.member:required) { @slot; } } 
@custom-variant member-valid { &:has(.member:valid) { @slot; } } 
@custom-variant member-invalid { &:has(.member:invalid) { @slot; } } 
@custom-variant member-in-range { &:has(.member:in-range) { @slot; } } 
@custom-variant member-out-of-range { &:has(.member:out-of-range) { @slot; } } 
@custom-variant member-read-only { &:has(.member:read-only) { @slot; } } 
@custom-variant member-empty { &:has(.member:empty) { @slot; } } 
@custom-variant member-focus-within { &:has(.member:focus-within) { @slot; } } 
@custom-variant member-hover { &:has(.member:hover) { @slot; } } 
@custom-variant member-focus { &:has(.member:focus) { @slot; } } 
@custom-variant member-focus-visible { &:has(.member:focus-visible) { @slot; } } 
@custom-variant member-active { &:has(.member:active) { @slot; } } 
@custom-variant member-enabled { &:has(.member:enabled) { @slot; } } 
@custom-variant member-disabled { &:has(.member:disabled) { @slot; } }

@custom-variant member-not-first { &:has(.member:not(:first-child)) { @slot; } } 
@custom-variant member-not-last { &:has(.member:not(:last-child)) { @slot; } } 
@custom-variant member-not-only { &:has(.member:not(:only-child)) { @slot; } } 
@custom-variant member-not-odd { &:has(.member:not(:nth-child(odd))) { @slot; } } 
@custom-variant member-not-even { &:has(.member:not(:nth-child(even))) { @slot; } } 
@custom-variant member-not-first-of-type { &:has(.member:not(:first-of-type)) { @slot; } } 
@custom-variant member-not-last-of-type { &:has(.member:not(:last-of-type)) { @slot; } } 
@custom-variant member-not-only-of-type { &:has(.member:not(:only-of-type)) { @slot; } } 
@custom-variant member-not-visited { &:has(.member:not(:visited)) { @slot; } } 
@custom-variant member-not-target { &:has(.member:not(:target)) { @slot; } } 
@custom-variant member-not-open { &:has(.member:not([open], :popover-open)) { @slot; } } 
@custom-variant member-not-default { &:has(.member:not(:default)) { @slot; } } 
@custom-variant member-not-checked { &:has(.member:not(:checked)) { @slot; } } 
@custom-variant member-not-indeterminate { &:has(.member:not(:indeterminate)) { @slot; } } 
@custom-variant member-not-placeholder-shown { &:has(.member:not(:placeholder-shown)) { @slot; } } 
@custom-variant member-not-autofill { &:has(.member:not(:autofill)) { @slot; } } 
@custom-variant member-not-optional { &:has(.member:not(:optional)) { @slot; } } 
@custom-variant member-not-required { &:has(.member:not(:required)) { @slot; } } 
@custom-variant member-not-valid { &:has(.member:not(:valid)) { @slot; } } 
@custom-variant member-not-invalid { &:has(.member:not(:invalid)) { @slot; } } 
@custom-variant member-not-in-range { &:has(.member:not(:in-range)) { @slot; } } 
@custom-variant member-not-out-of-range { &:has(.member:not(:out-of-range)) { @slot; } } 
@custom-variant member-not-read-only { &:has(.member:not(:read-only)) { @slot; } } 
@custom-variant member-not-empty { &:has(.member:not(:empty)) { @slot; } } 
@custom-variant member-not-focus-within { &:has(.member:not(:focus-within)) { @slot; } } 
@custom-variant member-not-hover { &:has(.member:not(:hover)) { @slot; } } 
@custom-variant member-not-focus { &:has(.member:not(:focus)) { @slot; } } 
@custom-variant member-not-focus-visible { &:has(.member:not(:focus-visible)) { @slot; } } 
@custom-variant member-not-active { &:has(.member:not(:active)) { @slot; } } 
@custom-variant member-not-enabled { &:has(.member:not(:enabled)) { @slot; } } 
@custom-variant member-not-disabled { &:has(.member:not(:disabled)) { @slot; } }