We’re currently working on a highly complex component that supports 2–6 slots, multiple states (Default, Hover, Focus, Disabled, etc.), and two size variants (Large & Small). Users can select the desired number of slots from a dropdown, and each slot is set to Fill within the container.
However, we’ve encountered a major issue—when designers replace a slot with pre-defined slot elements and then change the state (e.g., Default → Hover or Disabled) or switch between Large and Small variants, the component does not retain its content or any overridden properties in an instance.
This is adding unnecessary complexity and preventing us from achieving the desired functionality. Has anyone faced a similar issue or found a workaround for retaining content and overrides when switching states or sizes? Any insights would be greatly appreciated!
