Expose state via slots

[BayBreezy]

Is it possible to expose the open state of some components via slot?

Like they have in headlessui/vue. An example would be for the AccordionTrigger component. in addition to the open/closed state being updated via a data attribute, I think it would be nice if we were able to do something like this

  <AccordionTrigger
    v-bind="forwarded"
    :class="accordionTriggerStyles({ hover, class: props.class })"
    v-slot="{ open }"
  >
    <slot>{{ title }}</slot>
    <slot name="icon">
      <Icon :name="icon" class="h-4 w-4 text-muted-text transition-transform" />
    </slot>
  </AccordionTrigger>

This way we can take the open value and do stuff with it like hide an element or rotate the icon

[nhedger]

I second this.

Would be really helpful, especially when dynamically creating components where tracking their state could be a bit harder.

Assuming the maintainers are OK, I'd be able to contribute this feature to some of the components.

[zernonia]

Hey @nhedger ! We are already exposing some slot props.. but we might missed out some.. Totally welcome PR for this! 😁

[nhedger]

Sounds good, I'll PR something shortly!

[MangMax]

I'm also experiencing this issue when I use dropdown menu, I don't know how to get the state, however I see that Accordion does expose the state through the slot.

[ragulka]

This would be really beneficial when working with Combobox as well. Right now, there's no way to know if there are any results matching the query, other than having to provide the filtered options myself.

I see that the ComoboxEmpty component uses the root context to determine if it's empty, but this state isn't exposed, nor can we access the root context ourself.

Ideally, this state would be exposed as slot props in various components like ComoboxContent, etc.